Karzin Lab

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