Karzin Lab

[jQuery] Window의 사이즈 변경 이벤트 함수 (resize)

컨텐츠의 각 size는 static으로 정의해줄수도 있지만, 모니터 화면의 비율에 따라서 Width나 Height값을 변경해주어 좀더 dynamic한 페이지를 만들어줄 수 있습니다.

모바일이나 PC에서 다르게 보이는것이 그 예인데요, 우리는 주로 고정된 화면에서만 사용을 함이 아니기 때문에!

오늘은 Window의 사이즈가 변경이되면 웹내부 컨텐츠들이 사이즈에 맞게 변경을 시켜주는 함수를 알아봅시다! (반응형 웹) 

$(window).resize()

$(window).resize() 함수는 매개변수로 이벤트를 발생할 function을 전달해줌으로써 윈도우의 사이즈가 resize될 때 마다 매개변수로 전달된 이벤트 function을 실행시켜줍니다.

$(window).resize(function() {
	console.log('resize!');
});

위의 함수를 사용하면, 다음과 같은 결과를 얻어낼 수 있습니다. (브라우저의 크기를 줄여보거나 키워보면 log가 찍힙니다.)

역시 정리시간은 재밌네요. 별거아닌거일수도 있지만 ㅋㅋ..

Reference

 - api.jquery.com/resize/

버전정보 (v1.0)

 - v1.0 2020.11.14 배포

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Karzin

abbeea@naver.com

[jQuery] $(document).ready() 와 $(window).on("load")

오늘도 어김없이 Project.다원 Ensemble 개발을 진행했지만.. Back단 작업하느라 딱히 보여줄만한게 없어서(눈으로 보이는 부분은 아니기 때문에..ㅠㅠ) 그냥 정리나 해볼까 해서 만들어봤습니다. (...)

우리는 jQuery를 사용하다보면 자주 $(document).ready()와 $(window).on("load") 함수를 이용해 front단에서 화면의 시작시 보여줌과 동시에 무언가의 작업을 실행시켜야하는 경우가 있습니다.

오늘은 자주사용하면서 잘 확인하지 않는 이 $(document).ready()와 $(window).on("load") 함수에 대해서 잠깐이나마 설명하는 시간을 갖도록 하겠습니다.

뭐, 생명주기라할것까진 아니고, 그냥 위 함수가 어떠한 순서로 웹사이트가 load되는지정도만 구경하도록 하시죠.

우선 $(document).ready()와 $(window).on("load") 함수가 어떤 역할을 하는지부터 짚고 넘어가시죠.

$(document).ready()

$(document).ready()의 경우 DOM(Document Object Model) 페이지가 JavaScript코드를 사용할 수 있을 때 실행이 됩니다. (참조)

* 잠시 보는 DOM이란?

DOM의 경우 Document Object Model로 한국어로 직역해보면 문서 객체 모델(...) 이며, 오늘 우리는 어려운 부분까지는 머리빠개지니까(??) 설명은 줄이고 그냥 쉽게 Front단에서 보여질 HTML이나 XML등의 문서를 객체로서 표현하여 가지고 있다고 생각을 하면 쉬울 것 같습니다.

이 DOM 덕분에 우리는 HTML을 JavaScript를 통해 요소나 속성등을 추가하고, 변경(삭제)를 할 수 있게됩니다.

$(document).ready() 코드

$(document).ready(function(){
	console.log("document ready!");
});

$(document).ready()함수의 매개변수로 실행시킬 function을 전달시킬 수 있습니다.

때문에 function을 위 코드와 같이 직접 선언을 하며 전달을 할 수 있고,

아래처럼 미리 다른곳에 만들어둔 function을 불러오는 방법도 사용할 수 있습니다.

$(document).ready(ready("document ready!"));

function ready(val) {
	console.log(val);
}

$(window).on("load")

$(window).on("load")의 경우에는 DOM을 포함한 모든 페이지가 준비가 되면 실행이 됩니다. (참조)

때문에 $(document).ready()보다 늦게 실행이 되는 모습을 보여줍니다.

$(window).on("load") 코드

$(window).on("load", function() {
	console.log("window load!");
});

$(window).on("load")함수는 위 $(document).ready()와는 조금 다른 모습을 띄고 있습니다.

예~~~~전 버전 jQuery에서는 $(window).load()와 같이 위 $(document).ready()와 거의 비슷한 형태를 띄고 있었으나, jQuery 버전(3.0 이상부터)이 올라가면서 .load()함수는 제거되었다고 합니다. (참조)

$(window).on("load") 또한 매개변수로 실행시킬 function을 넘겨줄 수 있습니다.

위와같이 선언과 동시에 전달을 하는 방법이 있고, 아래처럼 function을 불러오는 방법도 가능합니다.

$(window).on("load", function() {
	ready("window load!")
});

function ready(val) {
	console.log(val);
}

$(document).ready()와 $(window).on("load")의 실행 순서

위 코드를 직접 console에 찍어보면 아래와 같은 결과를 확인하실 수 있습니다.

위 설명에 적어놓은 것 처럼 DOM객체가 JavaScript를 실행할 수 있는 상태가 된다면 $(document).ready를, 모든 페이지에 대한 준비가 완료된다면 $(window).on("load")함수가 실행이 된다는걸 확인할 수 있습니다.

대략 이런느낌

음.. 내일부터는 또 한 주의 시작이네요.

코로나는 끝을 보이지 않고, 비도 많이와서 다들 지치실 것 같은데, 힘내시기 바랍니다.

모든분들 언제나 응원하고 있습니다!

Reference

- learn.jquery.com/using-jquery-core/document-ready/

- jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

버전정보 (v1.0)

 - v1.0 2020.08.03 배포

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Karzin

abbeea@naver.com

Project.다원 Ensemble_기능검토(1)_QRCode (Sequence Diagram)

얼마전 저는 장비관리에 QRCode 기능을 넣을 생각을 했습니다. (Project.다원 Ensemble_개발(0)_사전 준비)

어떻게 넣을까 고민을 하며 찾아본 결과 구현 가능성이 높아졌고, 제대로된 기능검토가 필요하다고 생각이 들어서 준비했습니다!

QRCode의 생성방법 두가지

QRCode를 생성하는 방법으로 크게 잡아보자면 두가지 방법이 있습니다.

첫번째는 jQuery(Front단)를 이용해 만들어버리는거고, 두번째는 java(Back단)를 이용해 만드는 방법입니다.

둘의 차이는 서버를 경유하냐 마냐의 차이가 되겠습니다.

 - 1. Web-jQuery (Front)

  -> qrcodejs - (https://github.com/davidshimjs/qrcodejs)

  -> License : MIT License

  -> 장점 : 서버를 경유하지 않아 개발자인 제가 편리, 서버가 연결되지 않아도 QRCode의 생성 가능

  -> 단점 : 유저가 클릭을 할 때마다 브라우저에서는 QRCode를 만들어내야함. 

 - 2. Java (Back)

  -> ZXing Core - (https://github.com/zxing/zxing)

  -> License : Apache 2.0

  -> 장점 : 한번 생성을 해두고 image로 만들어두면 반복된 사용이 가능, front단의 부하를 줄일 수 있음

  -> 단점 : Java단에서 구현을 해야하고(즉, 코드의 수정이 필요한 경우 서버의 배포가 필요.), 이미지를 계속해서 관리를 해주어야함. 개발자인 제가 귀찮아짐.

그렇다면 선택은?

고민은 3초정도 했고, 결과적으로 Java소스 기반의 ZXing Core를 사용할겁니다.

서버에서 QRCode를 한번 이미지로 만들어두면 계속된 재사용이 가능하고, 이미지만 뿌려주면 되다보니 구형PC든 뭐든 어디서든 바로바로 확인이 가능하기 때문에 프린팅도 금방할거라 판단되었습니다.

Front단에서 만드는 QRCode도 그닥 오랜시간은 걸리지 않겠지만, 혹시라도 구형 태블릿을 활용하시는 분들이 불편할 수 있을 것 같아서 내린 판단입니다.

그리고 Front단을 포기하게 만들게된 결정적인 사항중에 하나입니다만,

ZXing를 사용하면 저에겐 굉장한 이득이 있습니다!

바로 추후 고려중인 Android NativeApp(장비관리)에 소스를 이식 시킬 수 있다는 것이죠. (!!!!!)

이런게 바로 일석이조 아니겠습니까 (잔머리만 잘 굴리네요ㅋㅋㅋㅋ)

QRCode 생성-Sequence Diagram

* 위 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 위 이미지에 들어간 내용은 전부 (픽토그램 등) 직접 제작했음을 명시합니다.

우선 Exception에 대해서는 고려하지 않았습니다.

한가지 고려를 해보자면 그럴일은 없어야 하지만, DB저장까지 완료되었는데, QRCode 생성할때 Exception이 일어나면 어쩔것인가? 라는 질문에 대한 답변에는 일단 그런 경우가 생기면 안되겠지만 만일 일어난다면 QRCode는 생성하지 않게 합니다.

데이터의 저장은 완료되었으나, QRCode만 생성은 안되는 것이죠.

그럼 QRCode는 버리는것인지? 아닙니다.

추후 user가 QRCode를 확인하는 페이지에 방문을 하면 만일 QRCode가 생성이 안되어 있는 경우 생성을 하게 만드는 것이죠.

오늘은 그간 검토해본 QRCode에 대해서 파악을 해보았습니다.

시간적 여유만 된다면 Front, Back 둘다 구현은 해보고 싶네요 ㅋㅋㅋ

오늘은 불토입니다! 이제 소스나 신나게 구현해야겠습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

버전정보 (v1.0)

 - v1.0 2020.07.18 배포

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(0)

사전준비

Class Diagram을 만들기 전에 사전작업으로 개발을 위한 준비를 시작했습니다.

개발시 필요한 IDE 및 컴포넌트들을 다운받는 것이었는데, 생각보다 양이 많더라구요 ㅋㅋ;;

라이센스 관련 부분은 Project.다원ERP_개발 정보(개발언어, 장비, 예정내역)에도 올려놨으니 참고하시면 좋을 것 같습니다.

기존에 DB는 DBeaver에서 개발을 진행하려 했었는데, 요즘에는 Visual Studio Code에서 되는 듯 하더라구요. 테스트는 해봐야겠지만, 큰 문제가 없다면 Visual Studio Code에서 작업을 하려합니다.

여기서 팁아닌 팁인데, 개인적인 생각이지만 eclipse를 프로젝트별로 하나씩 나누어놓으면 편리합니다. 

eclipse를 전역으로 사용하면 프로젝트에 따라서 설정을 변경해줘야 하는 귀찮음이 있지만,

이렇게 나누어두면 프로젝트별로 설정을 따로 적용을 하고 또 프로젝트끼리 충돌 일어날 일도 거의 없다보니 저는 프로젝트별로 따로 사용중에 있습니다.

또 추후 USB등을 통해 파일을 움직여야할때라던가 굉장히 간편해요. 적용된 설정을 그대로 따른 복사물이 생기는거다보니 설정같은것도 기존에 되어있던 그대로 사용하게 되서 개발PC에서의 갭차이가 별로 나지를 않습니다.

말이 또 샜는데..ㅋㅋㅋㅋ

component 폴더 내부에는

 - bootstrap (4.5.0)

 - jquery (3.5.1)

 - Toast UI (각 컴포넌트 별 버전 상이)

가 들어있으며,

추후 테스트용으로 QRCode관련 js파일이 하나 생길것으로 보입니다.

현재 유력한 후보로는

http://jeromeetienne.github.io/jquery-qrcode/

MIT License라서 라이센스 문제도 크게 없어보이고, 사용하기도 어렵지는 않을 것으로 보입니다.

조금 아쉬운 부분으로는, 예전에는 Google Charts API쪽에서 지원을 했었으나 지금은 없어진 모양입니다. (아래 링크)

https://developers.google.com/chart/infographics/docs/qr_codes

Google에서 지원하는 만큼 어느정도 안정성은 확보되었을 것 같았는데.. 지원이 끝났다면 어쩔수 없죠.

MIT License의 qrcode 소스를 테스트해보고

문제없다 판단이 된다면 적용을 하는걸로 마무리하겠습니다.

이제 Class Diagram만 적당히 나와준다면 바로 개발에 들어가도 문제는 없겠네요.

단지 Diagram을 만드는게 손이 많이 갈뿐이라..ㅠㅠ

나 자신을 위해서라도 설계 문서를 만드는건 좋은일일텐데 손이 많이가는 만큼 여러모로 힘드네요 ㅠㅠ

다음엔 Class Diagram을 가지고 오겠습니다.

버전정보 (v1.0)

 - v1.0 2020.07.13 배포

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com