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


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

 

Project.다원 Ensemble_개발(0)_사전 준비

Project.다원 Ensemble_개발(0) 사전준비 Class Diagram을 만들기 전에 사전작업으로 개발을 위한 준비를 시작했습니다. 개발시 필요한 IDE 및 컴포넌트들을 다운받는 것이었는데, 생각보다 양이 많더라구

karzin.tistory.com

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


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

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_개발(2)_Spring Boot 세팅 완료


솔직히 Spring Boot 세팅은 워낙 어려운게 없다보니 오래걸리지는 않았네요 ㅎ

오늘 작업 내역입니다!


1. Spring Boot 세팅 완료

localhost에서 테스트

MainController를 생성해서 테스트 진행했습니다.

localhost에서 문제 없이 나오는걸 확인!

 

 

2. Spring Boot - MariaDB 연동 완료

mariadb.jdbc

 - 특이사항

  -> connector는 mariadb.jdbc를 사용했습니다.

  -> 아실분들은 아시겠지만, MySQL Connector의 License는 GPL 2.0입니다. 

MySQL Connector - GPL 2.0

  -> 그리고 MariaDB jdbc의 License는 LGPL 2.1입니다.

MariaDB Client - LGPL 2.1

  -> GPL License가 나쁜건 아니지만, 아무래도 GPL보다는 자유성이 높은 LGPL 2.1을 채택했습니다. (이왕 GPL보다는 LGPL이..)

 

 

3. 내부 구조세팅 완료

코드들이 들어갈 구조잡기 완료

추후 어차피 만들 부분들 포함해서 구조를 잡아뒀습니다.

이제는 제대로된 로직만 들어갈 일만 남았네요.

 

4. 개발을 좀 더 편리하게 - devtools 추가

 

devtools 추가!

코드가 바뀌면 알아서 재실행(바로 적용)하도록 설정하기 위해서 추가해두었습니다. 

 


세팅은 뭐.. 오류날일이 없는 작업이고 거의 노가다성이다보니 금방 마무리된 것 같네요.

 

참고로 maven dependency 추가할때 아래 페이지 참고하시면 편리(검색, 라이센스 파악 등 용이)합니다. (링크-Maven Repository)

 

Maven Repository: Search/Browse/Explore

N2o API Last Release on Jun 30, 2020

mvnrepository.com

어제 말한 순서에서 이제 개발 시작이 남았습니다. (이미 시작했지만..ㅋㅋㅋ;;)

 -> Spring 환경 구축 -> DB연동작업 -> 개발 시작 -> (프로토타입)테스트

 

내일은 개발도 개발이지만, 기술검토 몇가지 해야할게 있어서 그런 부분들 정리해볼 예정입니다.

 

 

버전정보 (v1.0)

 - v1.0 2020.07.17 배포

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(1)_DB 구축 및 TABLE 생성


오늘부터 개발 시작이니 진행한 부분 들고왔습니다.

오늘은 DB구축하고 TABLE 생성 및 관리용 사용자 추가 및 권한부여 하였습니다.

아까 변경된 공통코드의 ER Diagram과 Class Diagram 게시글 올리고나자마자

샤워하고 바로 DB작업 진행하다가 어디선가 벌레가 나타나는바람에 조금 늦어졌네요 ㅠㅠ;;;;; (벌레 싫어... 한 40분 날려먹었...)

 


DB 툴을 쓸까하다가 오늘은 귀찮아서 그냥 Console로 작업했습니다.

저는 그냥 Console이 편해서........ (어줍잖은 무료 툴 쓰느니 차라리...)

특히 저는 vim계열을 아직까지도 좋아해서 ㅋㅋㅋㅋㅋㅋㅋ

1. DB 구축

show databases;

데이터베이스 명은 dawon_erp_ensemble로 만들었습니다.

 

2. TABLE 생성

show tables;

 - common_code : 공통코드

 - employee : 사원 (임시)

 - equip_status : 장비 정보

 - equipment : 장비

 - file : 파일

 - project : 프로젝트 (임시)

 

3. 관리용 사용자 추가 (Back-End단에서 연결에 필요한 계정)

select user from user;

 - dawon

 - ensemble

 두개의 테스트 계정 추가. 일단은 테스트용으로 진행하고 추후 연동시 user는 변경될수도 있습니다~

 

 


솔직히 DB 구축하는거 어려운것도 아니거니와, table 생성하는거야 이미 설계 문서가 있는 만큼 많은 시간 들일 필요없이 금방 끝냈습니다.

단지 위에서 말한거처럼 벌레가... 으아!!!! (흐름 다 끊기고 ㅠㅠㅠ)

자취생에게는 벌레가 아무리 익숙하게 보여도 익숙하지가 않네요..ㅠㅠㅠ (이젠 어디서 '딱딱' 소리만 들려도 바로 천장부터 확인하는...)

특히 밤 늦게까지 불을 켜놓고 작업을 해서 그런지 딱정벌레(?)류가 자꾸 어디서 기어들어오네요.ㅠㅠㅠㅠㅠㅠㅠ

 

어쨌든 DB는 금방 마무리 되었고, 이제는 저번에 다운로드한 IDE(Eclipse)에 Spring 환경만 구축해주면 될 것 같네요!

 -> Spring 환경 구축 -> DB연동작업 -> 개발 시작 -> (프로토타입)테스트

이제 나머지는 위 순서로 진행하면 될 것 같고, 개발은 아마 설계자료가 있는 만큼 금방 마무리 되지 않을까 싶네요.

 

작업하며 참고한 설계 문서

 - Project.다원 Ensemble_설계(3)_장비관리 ER Diagram

 

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram 어제 장비관리 프로세스를 작성을 하고, 머릿속에 있는동안 얼른 정리해버리자 해서 ER-Diagram을 작성했습니다. ER-Diagram의 작성은 여느때처럼 PPT를 이�

karzin.tistory.com

 - Project.다원 Ensemble_설계(9)_장비관리 Class Diagram

 

Project.다원 Ensemble_설계(9)_장비관리-Class Diagram

Project.다원 Ensemble_설계(9)_장비관리-Class Diagram 휴.. 밥먹고나서 샤워하고 부지런히 만들기시작해서 드디어 끝났습니다! (지금시각 1시 4분) 후반부로 갈수록 졸림이 심해져서;; 겨우겨우 참고 마��

karzin.tistory.com

 - Project.다원 Ensemble_설계(10)_공통코드 ER Diagram, Class Diagram

 

Project.다원 Ensemble_설계(10)_공통코드-ER Diagram, Class Diagram

Project.다원 Ensemble_설계(10)_공통코드-ER Diagram, Class Diagram 흠.. 어제 장비관리 Class Diagram을 올리면서 생각했지만, 공통코드 부분의 ER Diagram이 어떻게 설계가 되었는지 설명한적이 없는것 같..

karzin.tistory.com

 

 

버전정보 (v1.0)

 - v1.0 2020.07.16 배포

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_설계(10)_공통코드-ER Diagram, Class Diagram


흠.. 어제 장비관리 Class Diagram을 올리면서 생각했지만,

공통코드 부분의 ER Diagram이 어떻게 설계가 되었는지 설명한적이 없는것 같더라구요. (장비관리 ER Diagram)

 

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram 어제 장비관리 프로세스를 작성을 하고, 머릿속에 있는동안 얼른 정리해버리자 해서 ER-Diagram을 작성했습니다. ER-Diagram의 작성은 여느때처럼 PPT를 이�

karzin.tistory.com

그래서 공통코드쪽만 설계가 어떻게 되었는지, 그리고 하루밖에 지나지도 않았지만, Class Diagram도 추가된 부분이 있어서 그 부분을 설명해볼까 합니다.


공통코드의 ER Diagram 및 Class Diagram(VO)

공통코드의 ER Diagram 및 Class Diagram(VO)

음.. Class Diagram이라해봤자 table에 맞춰 변경된 VO(Value Object)정도긴 하지만 조금 추가가 필요할 것 같아서 수정했습니다.

각 컬럼별로 설명을 하자면,

 - 코드 ID : 기본키로 잡았으며, 기본키니만큼 중복을 허용치 않습니다. 기존 size를 5로 잡았는데, 코드를 사용할 게시판의 종류에 따라서 이 키가 길어질 수 있어서 그냥 15로 늘렸습니다. (명쾌ㅋㅋㅋ)

 - 부모 코드 ID : 부모 코드 ID를 입력해줍니다. 코드가 어디에 소속이 되는지를 나타내기 위함입니다.

 - 코드 명 : 사용할 코드의 명칭입니다. 유저에게 보여지는 부분입니다.

 - 언어 ID : 외국어도 지원할 생각이기 때문에 들어갔습니다. 지금 생각으로는 한국어, 영어, 일본어는 지원예정입니다.

 - 사용 여부 : 이는 관리자의 판단으로 사용할 수 있는 부분입니다. 사용을 하지 않는 경우 값을 N(0)으로 변경하면 유저에게는 보여지지 않습니다.

 - 등록일자 : 등록한 날짜가 저장됩니다. 혹시 모를 상황(??)을 생각해서 등록자까지 관리하려했는데.. 괜히 일만 커질것같아 (귀찮아서... 원래 등록일자도 관리하지 않을려했...) 추가하지는 않았습니다. 등록자는 추후 필요하겠다 싶을 경우 넣을 예정입니다. (DB에서 컬럼 빼는건 문제가 되지만 추가하는 정도야 뭐...)

 

이해가 어려우신 경우 이미지의 좌측 하단 예시를 보시면 조금은 파악이 편할 수 있습니다.


버전정보 (v1.0)

 - v1.0 2020.07.15 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 

 


Project.다원 Ensemble_설계(9)_장비관리-Class Diagram


휴.. 밥먹고나서 샤워하고 부지런히 만들기시작해서 드디어 끝났습니다! (지금시각 1시 4분)

후반부로 갈수록 졸림이 심해져서;; 겨우겨우 참고 마무리했네요 ㅋㅋㅋ;

오늘은 개발전에 거의 마지막으로 Class Diagram을 작성하였습니다.

음.. Sequence Diagram도 작성을 하면 좋을 것 같은데.. 일단 개발진행하면서 작성을 할까 생각은 하고 있습니다.

아직 워낙 해야할일이 많아서 말이죠;;

설계문서가 일단은 마무리가 된 이상 데이터를 저장하기 위한 DB 구축, 개발 세팅(Spring설치 및 MVC모델 구축 등등) 아직 갈길이 멉니다 ㅋㅋㅋ..

 

추후 Class Diagram은 변경되는 내용이 많을 것 같아 Reverse Engineering을 통해 어느부분이 변경되었는지 비교해보고 오답을 비교(???)하는 시간을 가져볼까 합니다. (오답이라기보다는 왜 변경되었는지 등등)

 


Class Diagram은 잘만 설계가 되어있다면 개발자 입장에서는 개발할 시간을 엄청나게 줄여줍니다.

그만큼 설계가 어려운면이 이런 부분이 아닐까 싶네요.

문제는 개발자는 Class Diagram을 참조는 하되, 무조건적인 신뢰를 하면 안된다는 것입니다.

설계자도 사람이니만큼 분명 설계서상으로 개발을 진행하다보면 로직상 구현이 불가능할 수 있는 부분이 있을테니까요.

물론, 이런 설계를 자세하고 명확하게 하는 설계자의 설계문서는 신뢰성이 높아지게 되겠지만,

그런 신뢰의 부분은 아무래도 경험과 개개인의 생각의 다름에서 일어나는 문제가 많다보니 문서만을 참조하는 것 보다는 설계자와 개발자간의 커뮤니케이션이 지속적으로 이루어지면서 개발이 진행되어야합니다. 

 

아래는 이번에 설계된 Class Diagram입니다. 총 3개의 Class Daigram이 나왔습니다.

* Spring MVC 패턴을 기반으로 두고 설계를 진행했습니다.

 

장비관리 - Class Diagram (1/3)

장비관리 Class Diagram (1/3)

하나씩 설명을 하겠습니다.

 - EquipmentRestController : 클래스명과 같이 장비관리의 RestController입니다. 여기서 EquipmentService를 통해 장비정보와 장비 상태 Mapper(EquipmentMapper, EquipStatMapper)에 접근을 하여 데이터를 가져오거나 입력합니다. (쉽게 설명하면 버튼의 Event들의 로직)

 - EquipmentController : 장비관리의 Controller입니다.

 - EquipmentService : 장비 관련 Mapper들에 접근하여 DB의 CRUD 작업을 요청합니다.

 - EquipmentMapper : 장비 정보 Mapper입니다. 직접적으로 DB와 연동되어 주로 장비 정보 관련 작업을 진행합니다.

 - EquipStatMapper : 장비 상태 Mapper입니다. 직접적으로 DB와 연동되어 주로 장비 상태 관련 작업을 진행합니다.

 - FileMapper : 파일 관리 Mapper입니다. 파일은 업로드시 서버스토리지에 저장이 되며, 파일명이나 저장위치등의 파일 정보만 DB에 저장이 됩니다. (FTP 방식) Mapper에서는 DB에 연동되어 CRUD만 작업합니다.

 - Callback 객체 : 이건 제가 자주사용하는 요청에 따른 결과 객체입니다. 보통의 데이터도 해당 Callback객체를 이용해 Wrapping하여 결과를 보여줄 예정입니다. (이는 지금은 크게 신경쓰지 않으셔도 될 것 같습니다. 이 부분은 제가 좀 더 커스텀을 하려고 하는데, 이유는 보안적인 요소를 좀 더 강화해볼까 합니다.)

 

장비관리 - Class Diagram (2/3)

장비관리 - Class Diagram (2/3)

 - MainController : 메인 페이지를 보여주기 위한 Controller입니다. 

 - CommonRestController : 모든 페이지에서 사용가능한 공통적 RestController입니다. 현재 Code, File을 Common형식으로 보고 있습니다.

 - CommonService : 공통적인 Mapper(CodeMapper, FileMapper)들에 접근하여 CRUD를 요청합니다.

 - FileMapper : 파일 관리 Mapper입니다. 파일은 업로드시 서버스토리지에 저장이 되며, 파일명이나 저장위치등의 파일 정보만 DB에 저장이 됩니다. (FTP 방식) Mapper에서는 DB에 연동되어 CRUD만 작업합니다.

 - CodeMapper : 코드 Mapper입니다. DB에 직접적으로 연동되어 코드의 CRUD를 작업합니다.

 - ProjectRestController : 프로젝트 정보를 가져오기 위한 RestController입니다. 여기서는 설계가 마무리되지 않았지만, 개발에 지장이 없도록 projectId및 projectNm을 가져올 수 있도록하여 테스트를 진행할 예정입니다.

 - EmployeeRestController : 사원 정보를 가져오기 위한 RestController입니다. ProjectRestController와 동일하게 userId와 userNm컬럼 정보만 가져와 개발에 지장이 없도록 할 예정입니다.

 

장비관리 - Class Diagram (3/3)

장비관리 - Class Diagram (3/3)

여기서는 VO(Value Object)의 Class Diagram을 보여줍니다. (해당 Class Diagram이 어렵게 느껴지신다면 이전에 제가 설계한 ER Diagram과 비교하면서 확인해보세요! 전혀 어렵지 않습니다!)

 

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram 어제 장비관리 프로세스를 작성을 하고, 머릿속에 있는동안 얼른 정리해버리자 해서 ER-Diagram을 작성했습니다. ER-Diagram의 작성은 여느때처럼 PPT를 이�

karzin.tistory.com

 - File : [파일], 파일테이블의 컬럼을 담을 변수를 가지고 있으며, 각 변수의 getter/setter를 가지고있습니다.

 - Code : [공통코드], 공통코드테이블의 컬럼을 담을 변수를 가지고 있으며, 각 변수의 getter/setter를 가지고있습니다.

 - EquipStatus : [상태 정보], 상태정보테이블의 컬럼을 담을 변수를 가지고 있으며, 각 변수의 getter/setter를 가지고있습니다.

 - Equipment : [장비 정보], 장비정보테이블의 컬럼을 담을 변수를 가지고 있으며, 각 변수의 getter/setter를 가지고있습니다.

 


1시 4분에 게시글쓰기 시작했는데 벌써 1시 53분이네요 ㅠㅠ;

이미지로 뜨고 올려놓고 설명을 적다보니 틀린부분이 몇몇 보여서 바로 수정하고 다시 업로드하고 그런 반복적인 작업이 있다보니 시간이 걸려버렸습니다. 아무래도 사람이 만들었다보니.. (심지어 졸면서.. 졸음설계?!)

별거 안한거같은데 벌써 정리된 설계문서(PPT)는 34장이네요;;;

벌써 34장이된 PPT

이제부터는 본격적으로 개발에 들어가면 될 것 같습니다.

위에서 언급한것처럼 Sequence Diagram의 경우 개발을 진행하면서 작업을 해볼까합니다.

그리고 개발을 진행하면서 발생한 문제나 그 문제를 어떻게 해결했는지 등도 작성을 해볼까합니다.

 

오늘도 고생많으셨고, 항상 긴 글 읽어주시느라 감사할따름입니다.

편안한 밤 되시기를 바랍니다.

 

 

버전정보 (v1.0)

 - v1.0 2020.07.15 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(0)

사전준비


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

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

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

 

Project.다원ERP_개발 정보(개발언어, 장비, 예정내역)

다원ERP_개발 정보 (개발언어, 장비, 예정내역) Project Infomation Project Name : 다원ERP 기획 : Karzin 분석 : Karzin 설계 : Karzin 개발 : Karzin 디자인 : Karzin 유지보수 : Karzin 개발 정보 Develop Lan..

karzin.tistory.com

기존에 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/

 

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

jquery.qrcode.js jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go o

jeromeetienne.github.io

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

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

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

 

QR Codes  |  Infographics  |  Google Developers

You can create a QR code on the fly with a URL GET request. Overview QR codes are a popular type of two-dimensional barcode. They are also known as hardlinks or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text

developers.google.com

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

 


Project.다원 Ensemble_분석(5)

장비관리-요구사항분석(Event List)


Wireframe까지 완료가 되었을때는 이미 어느정도의 요구사항은 정립이 되어 있을겁니다.

사실 이전에 고객은 '제안요청서'를 통해 요구사항을 어느정도 명시를 해두었을겁니다.

미리 제작은 되어있었어야하나.. 고객도 저이고 개발자도 저이다보니.. 빼묵었네요 ㅠ.. (일해라!! 나 자신!)

저의 경우 Wireframe을 만들면서 바로 화면설계서까지 만들어버려서 요구사항을 정리할 틈이 없었는데,

Event List를 정리하면서 요구사항까지 같이 정리하자 해서 정리했습니다. (사실 Event List 정리 안하고 있었으면 요구사항분석서도 만들지는 않았을 것 같..)

오늘 할 작업은 설계된 화면설계서를 토대로 작성이 된 요구사항 분석서(Functional Requirement) 겸 Event List입니다.

 

이정도 나오면 이제 Class Diagram정도만 나오면 개발이 시작되어도 될 것 같네요. (사실 없어도 뭐.. 개발은 가능하지만...)

다만, Sequence Diagrame도 있으면 좋겠지만.. 이건 기능별로 나중에 시간날때 정리해둬야겠네요. (Sequence Diagram 작성하다보면 또 다음주가 되어버려서....)


요구사항분석 (1/2)

장비관리 - 요구사항분석 1

주황색으로 처리된 항목은 지금은 개발이 불가능한 부분을 나타냅니다.

프로젝트나 구입정보 연동 부분은 다른 화면이 개발이 되어야 연동작업을 할 수 있기 때문에 얼른 다른 화면도 설계-개발을 해야겠네요 ㅎㅎ

여기서는 뭐 그렇게 특별한 건 없고, 그저 화면에서 일어나는 Event들에 대한 내용을 담고 있다고 보시면 됩니다.

 

요구사항분석 (2/2)

장비관리 - 요구사항분석 2

위처럼 사용자 및 관리자 연동 부분은 아직 유저관리 화면이 나오지않아 연동을 할 수 없는 부분입니다.

일단 해당 기능은 막아놓고 개발작업을 진행할 예정입니다. (혹은 텍스트로 받아 저장하던가..)

어차피 ID를 입력하거나 사람이름을 입력하거나.. 그저 Column의 Type만 변경해주면 되니까 문제될 건 없겠지요.

 

여기서 특별한 부분이라면 하단의 초록색 항목들입니다.

초록색항목은 추후 추가될 예정 내역을 정리해보았습니다.

뭐.. 제가 고객이고, 개발자이기 때문에 가능한 부분이지만, 제가 원하는 기능을 더 추가해본겁니다 ㅋㅋㅋ

등록할 장비의 이미지를 어느정도 수정(가공)을 해서 등록을 하고 싶다는 생각이 있었기 때문에 넣었습니다.

(약 0.1퍼센트 정도의 조금의 책임감과 99퍼센트 정도의 귀차니즘으로 이미지 수정 기능을 만드는 이 클라스..)

 

 

*** 현재 요구사항 분석에는 QRCode는 제외되어 있습니다.

(이 부분은 개발을 진행하며 테스트를 해봐야할 것 같습니다.)

해당 부분은 아무래도 몇가지 테스트가 필요해서 제외해두었습니다.

나중에 테스트가 완료되고 내부망에서도 큰 문제 없이 사용할 수 있다는 조건만 통과된다면

다시 한번 정리하도록하겠습니다!

 


아직도 해야할게 산더미 같군요...ㅋㅋ...

일단은 다음 게시글은 Class Diagram을 작성할 생각입니다.

그리고 Class Diagram 그리면 바로 개발 진행해볼까 생각중입니다.

 

혹시라도 개발 정보가 궁금하시다면 일전에 작성한 게시글을 확인해주세요. (아래 링크 참조)

 - Project.다원ERP_개발정보(개발언어, 장비, 예정내역) : https://karzin.tistory.com/130?category=793727

 

Project.다원ERP_개발 정보(개발언어, 장비, 예정내역)

다원ERP_개발 정보 (개발언어, 장비, 예정내역) Project Infomation Project Name : 다원ERP 기획 : Karzin 분석 : Karzin 설계 : Karzin 개발 : Karzin 디자인 : Karzin 유지보수 : Karzin 개발 정보 Develop Lan..

karzin.tistory.com

 

 

버전정보 (v1.0)

 - v1.0 2020.07.12 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_설계(8)

장비관리-화면 정리 및 시스템 개발 인터뷰


어제 졸린 나머지 화면이 1개 더(상태 변경) 나오면 될 줄 알았습니다만! 어제 제가 Modal로 만들어 놨더라구요!

아마 고민하다가 상태 변경은 Modal로 설계한 듯 합니다.

그래서 오늘은 좀 쉴까 하다가! 왠지 찝찝해서.. 화면쪽은 슬슬 마무리해버릴까 합니다.

이후 작업으로는 class diagram이라던가 아직 남은 diagram의 설계와 정리해야할 것 들을 마무리하면 개발 진행해도 될 것 같습니다!


 

화면 정리 (Sitemap 및 설계 화면)

화면 정리 (Sitemap 및 설계 화면)

이전에 만들어진 Sitemap을 좀 다듬어 주고, 설계된 화면을 Sitemap에 따라 맞춰서 정리해보았습니다.

다만, 화면의 설계가 완전히 다 끝난 건 아닙니다!

이제는 마지막으로 이 시스템을 사용을 할 장비담당자와의 인터뷰(프로토타임 시연)가 남아있습니다.

 

그래서 이번에는 장비담당자(결국 쓸사람은 저..)와의 인터뷰를 진행했습니다.


장비 관리 - 시스템 개발 인터뷰

장비 관리 - 시스템 개발 인터뷰

Prototype은 직접 만들어서 테스트를 해야하지만, 머릿속에서 자신(?)에게 질문하며 머릿속에 있는 Prototype으로 시연을 진행했습니다. (누가 들으면 이중인격자인줄..)

사실 시스템 개발 인터뷰의 경우 양식은 보통 ppt로 안하는데..(보통은 워드나 한글. 저의 경우 워드를 선호 - 필요한 분 있으시다면 만들어서 언제 한번 본 블로그의 문서 서식-다운로드 게시판에 올려놓겠습니다.) 이미지로 뽑기 편한 ppt를 이용했습니다.

 

아래는 질문사항과 답변사항입니다.

 

질문 (설계자 - Karzin)

1.사용하면서 불편했던 점?

 • Prototype을 시연해보고 불편했던 사항은 무엇인가요?

 • 불편한 점은 어떻게 바뀌었으면 좋겠나요?

2.추가적으로 요구하고 싶은 기능?

 • 사용자의 경험 속 이러한 기능이 들어갔으면 좋겠다는 부분이 있었나요?

3.기타 궁금한 사항?

 

답변 (업무 담당자 - Karzin)

1. 상태 등록 화면에서 ModalGrid를 가리면 Grid의 현 상태를 보기 힘들 것 같습니다. 특히 화면이 큰 PC버전에서는 괜찮을 것 같으나, Mobile 버전에서는 Modal이 뜨면 이전 상태를 보기가 힘들 것 같아요. 이 부분은 개발할 때 고려해주세요.

2. 1) 장비 등록 부분에서 Mobile버전은 사진을 직접 찍어 업로드 할 수 있으면 좋겠습니다.

   2) 등록된 장비의 바코드 형식 혹은 QR-code를 출력할 수 있도록 해주세요.

3. 장비관리 코드 (장비 상태, 장비 구분, 장비 분류)는 어디서 입력하는 것인지요?

 

인터뷰 마무리

 - 결정사항 : 장비관리만의 공통코드를 등록할 수 있는 관리 Tab 생성 필요 (화면 ID : E-003-P/M)

 - 비고 1) 웹 뷰에서 모바일의 카메라/갤러리 제어가 가능한지 확인 필요.

 - 비고 2) QR-CODE의 생성(실험적) 고려


 

아무래도 시스템 개발 인터뷰를 확인하면 답변자(?)가 많은(??) 요구사항을 추가시켰지만 이제는 필수 요소가 아니라면 개발을 진행하며 고민해도 될 부분들일 것 같습니다.

결국엔 개발자도 사용자도 저이다보니.. 사실 QRCode를 이용한 관리는 굉장히 편리할 것 같아서 꼭 구축해보고 싶기도 해요. 스티커로 바로 출력해서 붙여만 놔도 장비 관리하는데 있어서는 무엇보다 편리할 것 같습니다.

QRCode 예시 (출처 : 네이버 QR코드 - https://qr.naver.com/)

(위의 예시는 테스트해보시면 저의 블로그 메인으로 이동하게 됩니다. ㅋ_ㅋ)

QRCode 생성 API는 찾아보면 몇몇 나오는 것 같습니다. 아무래도 연동도 크게 어렵지 않을 것 같습니다.

다만 테스트를 통해 내부망에서도 문제없이 쓸 수 있는지를 파악한 후 가능성이 있다면 하나의 기능으로 추가를 해야할 것 같습니다.

그나저나 제가 저한테 하는 인터뷰이다보니 빠진부분이 있을 것 같습니다. 역시 설계문서는 제 2,3자가 보고 느낀점을 서술해줘야 비로소 수정이 필요한 부분이 보일텐데 말이죠 ㅠㅠ

 

다음은 개발을 위해 추가적으로 필요한 설계문서들로 찾아뵙겠습니다.

감사합니다.

 

버전정보 (v1.0)

 - v1.0 2020.07.11 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 

+ Recent posts