Project.다원 Ensemble_개발(14)_장비등록 - 공통코드 연동작업


오늘은 그나마 집에서 일을 했기에 저녁 밥먹고 샤워좀하고 프로젝트 개발을 시작했습니다. 굳!

(쪄죽지만 일은 해야하므로 땀 흘리며 어찌저찌 마무리 ㅋㅋ..)

내일은 또 내일의 일을 하기 위해 오늘 정해놓은 일은 마무리 되었고!

8시쯤부터 프로젝트를 끄적이기 시작했습니다.

 

지금 시간 11시 57분인데, 4시간? 정도 프로젝트만 잡았는데 공통코드 연동작업 하나만 마무리 해뒀네요 ㅋ..

일단 같이 보시죠!!


장비등록 - 공통코드 연동작업 (장비등록 화면)

 - 장비등록 - 구분

장비등록 - 구분

구분은 하드웨어 / 소프트웨어 혹은 추후 기타 등을 선택할 수 있습니다.

구분의 변경(선택)에 따라 분류의 값이 바뀌게 되는 형식입니다.

 

예)

하드웨어라면 모니터 ...(등) 으로 변경

소프트웨어라면 OS ...(등) 으로 변경

 

 - 장비등록 - 분류

장비등록의 분류는 위에서 설명한것처럼 구분을 변경(선택)함에 따라 그 값이 변경되게 됩니다.

위 스크린샷에서는 구분을 하드웨어로 예를 들었고, 분류가 모니터, 데스크탑, 노트북, 프린터 등의 값을 선택할 수 있습니다.

분류의 경우 관리자가 아닌 사용자가 직접 추가적인 등록이 가능하도록 할 생각입니다.

이 경우 분류 하위 코드만 건들 수 있도록 설정해줘야하는 작업이 필요하겠지만, 뭐.. 그리 어려운건 아니므로..

 

- 장비등록 - 상태

장비등록 - 상태

장비가 현재 어떠한 상태인가를 나타내기 위한 값입니다.

사용, 수리중, 수리완료, 폐기, 미사용 상태가 있으며, 상태에 대한 설명으로는

 

사용 - 장비를 사용중인 상태

수리중 - 장비에 문제가 생겨 장비를 수리한 상태

수리완료 - 장비를 수리했으나, 사용자에게 인수되지 않은 상태

폐기 - 장비가 고장나거나, 문제가 생겨 폐기한 상태

미사용 - 장비를 사용할수 있지만, 현재는 사용하지 않고 있는 상태

 

입니다.


그럼 공통코드에서 어떤 형식으로 저장이 되었을지 궁금하다구요?

보여드리겠습니다 ㅋ_ㅋ

 

장비등록 - 공통코드 연동작업 (공통코드 화면)

 - 공통코드 - 구분

공통코드 - 구분

위 장비관리 화면의 맨 첫번째 구분에 대한 코드입니다.

중분류의 코드명 [구분]을 선택하면  소분류에서 그 값들이 나오는 것을 확인할 수 있습니다.

 

 - 공통코드 - 분류

공통코드 - 분류

위 장비관리 화면에서 두번째 분류에 대한 코드입니다.

소분류에서 [분류]에 대한 값들을 확인할 수 있는데, 현재는 영어(monitor 등)로 되어있지만, 이는 변경 될 수 있습니다.

 

 - 공통코드 - 상태

공통코드 - 상태

위 장비관리 화면에서 세번째 상태에 대한 코드입니다.

아무래도 이 부분은 제가 만든 상태값이므로 원하지 않다면 관리자는 자신의 입맛대로 추가하거나 삭제할 수 있을거 같네요.ㅎ

 


흠.. 아실분들이야 아시겠지만.. 이거(공통코드 연동) 가지고 4시간 걸렸다고하면 말이 안되죠.. 네..

코드를 selectbox에 뿌려주는거야 뭐.. 몇 분이면...(퍽)

 

사실 뒷단에서는 좀 더 여러작업을 했습니다.

1. 공통코드를 검색하고나면 검색된 code값을 select id를 넘겨주면 알아서 selectbox의 값을 변경하게 해주는 로직을 짜놔서 앞으로 공통코드 연동하기는 훨 수월해질 것 같습니다.

 - 재활용성 고려해서 개발했기 때문에 어느 화면이든 공통코드를 연동한다! 싶으면 그냥 function 하나가지고 가져다 쓰면 끝! (이런 쉬운 방법이!)

2. 서버-클라이언트의 주고 받는 값의 정보를 조금 변동했습니다. (Request, Response)

3. 공통코드를 보면 지금 UI단에서는 보이지는 않지만, 추후 외국어를 지원하기 위한 정보를 담고 있습니다. (지금은 무조건 한국어로만 들어가지만..) 

 3.1. 사실 공통코드의 아이디는 고유하지 않습니다. (충격과 공포!) 사유는 위와 엮이므로 3.1. 으로...

4. 더워서 좀 (사실은 많이) 누워있었습니다. (ㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

5. 심심해서 android/iOS 개발 방안을 미리 구상하고 있었습니다. (벌써부터 김치국)

 5.1. 예정이지만 android의 버전 8.0부터, iOS 버전 13.0부터 어플을 지원할 예정입니다.

 5.2. 전에도 이야기했지만 태블릿은 android는 제가 가진 태블릿이 없어 개발 예정은 일단 보류이고, iPadOS만 13.0버전으로 따로 개발할 예정입니다.

스포일러?

 

ㅋㅋ.. 게시글을 빨리 쓰는 만큼 오늘은 좀 일찍 잘려고합니다 ㅎ

내일부터 다시 회사에서의 한 주가 시작이되고(저는 이미 시작했지만..), 그만큼 또 비어있는 월요일의 구멍을 메꿔야하기 때문에 바쁠 예정이거든요 ㅋㅋ..

모두들 일찍일찍 주무시고 좋은 꿈 꾸시길 바라겠습니다.

 

오늘도 고생많으셨습니다!

 

버전정보 (v1.0)

 - v1.0 2020.08.18 배포

 - v1.1 2020.08.18 문장 추가 및 수정

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(13)_공통코드 화면 개발(4)


날이 더우니 빠르게 진행했습니다!!

 

우선 말씀드리면 공통코드의 기능만 충실한 정도로 일단 개발은 완료되었습니다.

나머지 버그라던가는 추후의 문제로 두고..(나중에 수정을 하도록 하겠습니당)

아마도 추후 화면을 조금은 수정할 필요가 있어 보입니다.

(아무래도 다뤄야할 값이 많아지면서 그렇게 되었네요.) 


공통코드 화면 v1.0 (개발 완료)

공통코드 화면 v1.0

일단은 개발이 완료된 화면입니다.

나름 심플하게 만들려고 노력했고, 생각보다 흠.. 괜찮은 것 같기는 한데.. 제 눈에만 그럴지도 모르겠네요 (ㅋㅋㅋ...)

수정이 조금 필요해보이는데 우선은 급한건 아니니 보류해두도록 하겠습니다.

 

 - 추가 사항

이전 개발중이던 화면과 비교하면 변경된 부분으로 코드 값을 받게 되었습니다.

코드 값은 개발자들이 사용하는 값으로, 코드 이름은 보통의 유저가 보는 데이터로 생각하시면 될 것 같습니다.

큰 예시로 현재 코드 중분류 및 소분류를 보면 사용여부라는 필드가 있는데, 이 데이터들은 저장시에 1과 0으로 저장이 되며, 저장된 값을 유저에게 보여줄때는 사용과 미사용으로 변경되어서 보여줍니다.

이 '1'과 '0'은 코드의 값을, '사용'과 '미사용'은 코드의 이름을 나타냅니다.

 

 - 수정 필요 사항

지금 수정이 필요한 부분은 저장의 방식입니다.

현재는 grid에서 단일 data단위로 (row의 한 data) 저장이 되고 있는데, 이걸 row단위로 저장이 되도록 하는게 맞을 것 같습니다.

row단위로 저장을 하려면 우선 UI적으로는 row단위의 input box 등의 추가가 필요하며, grid는 단순히 선택하는 용도로만 변경이 필요할 것 같습니다.

 

아직까지는 조금 불편해도 코드 등록에는 문제가 없고, 무엇보다 장비관리 개발중 잠시 샛길로 빠진상태인지라..

우선은 코드는 잠시 보류하고 장비관리쪽으로 넘어가서 작업을 해야겠네요.


최근 거의 매일 올리던 게시글을 자주 빼먹는 경우가 있는데 이는..

더운것도 더운거지만, 회사가 바쁜것도 한 몫을 하네요.

 

이 바쁨이 지나갈때 까지는 게시글이 비정기적으로 업로드될 것 같습니다. ㅠㅠ

 

그래도 최대한 시간을 쪼개서 업로드할 수 있도록 노력해보겠습니다.

 

더위와 코로나 조심하시고, 즐거운 휴일 되시기 바랍니다~

 

 

버전정보 (v1.0)

 - v1.0 2020.08.16 배포

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(12)_공통코드 화면 개발(3)


요즘 바쁜 나머지 계속 야근을 하다보니 개인적인 시간이 많이 줄어버렸습니다 ㅠㅠ

덕분에 조금 있는 시간을 더 쪼개서 개발은 진행하고 있지만, 아무래도 많은 진척을 못내고 있네요.

 

일단은 마무리된 부분까지 정리할까 싶어서 들고 왔습니다.

개발은 1시 50분쯤 끝내놨는데, 동작 영상을 하나 업로드하고 싶어서 만드느라 시간이 걸려버렸네요.

이게 보는 분들 입장에서 간편하시도록 GIF로 올리려다보니,

화질과 해상도를 포기하자니 너무 못보겠고..

결국 방법은 프레임을 줄이는 방법으로 GIF를 만들었습니다.ㅎㅎ

그럼 내용과 무관한 설명은 이쯤하고 너무 늦어지기전에 얼른 게시글 업로드하고 취침해야겠네요 ㅎ (현재시간 02:27)


현재까지 공통코드에서 개발 완료된 기능 :

 - 보기(Select)

 - 등록(Insert)

 - 삭제(Delete)

 - 수정(Update)

 

물론 위의 내용상으로는 다한 것 같으나...

현재는 코드 대분류만 적용이 되어있습니다! (대분류가 거의 끝났으니, 중분류 및 소분류 연동하는건 노가다성이지만..)

 

아래 동작화면을 준비했으니 맛보기로 구경한번 하시죠!

 

공통코드 화면

공통코드 화면

 

시연

동작 화면 캡쳐 (클릭하시면 더 큰 화면으로 보실 수 있습니다.)

Toast Grid에서 동작하는 모든 작업은 실시간으로 DB에 반영되도록 했습니다.

때문에 새로운 코드 생성, 삭제, 수정 등 실시간으로 DB에 반영이 되고 있습니다.

(유저의 행동이 즉각 DB에 반영되기 때문에 save 버튼이 존재하지 않는 이유가 되겠네요.)

위 캡쳐를 잘 보시면 유저가 값을 입력하면 바로 ID가 부여되는데, 이는 FRONT->BACK에 데이터를 저장하고 곧바로 BACK->FRONT로 저장된 정보를 다시 받아 Toast Grid를 새로고침해주기 때문입니다.

 

* 중간중간 나오는 console창은 front단에서 동작이 실행되면 DB에서 연동이 잘 되고 있는지를 보여주기 위함입니다.

 - DB 상태를 보여주기 편한게 뭘까 고민하다가 ssh로 db서버를 미리 접속해놨습니다.

 

현재 캡쳐에서는 select, insert, delete 동작을 보여주고있는데, 생각해보니 update(수정)를 빼먹었네요...

다시하기엔 너무 늦어질 것 같으니.. 다음 기회에 하도록 하겠습니다 ㅠㅠ

 


아마 금주 토/일요일이면 공통코드는 전부 마무리 될 것 같네요.

세세한 퀄리티를 고집하지만 않으면 토요일날 마무리 될 것 같구요. (하지만 제 성격상...)

 

저는 그럼 얼른 취침에 들어가도록 하겠습니다.

 

오늘도 고생 많으셨습니다!

 

 

버전정보 (v1.0)

 - v1.0 2020.08.13 배포

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_개발(11)_공통코드 화면 개발(2) + a


음! 오늘은 DB 연동(불러오기까지만)이 된 부분은 어느정도 보여드리고,

+a를 보여드릴까합니다!

미리 +a가 뭔지에 대해 힌트를 드리자면, 아이로 시작합니다!


공통코드 화면 (PC)

공통코드 화면 (PC)

 

일단, 보시는 것 처럼 아이디 및 값을 불러오는 작업까진 마쳤습니다.

대분류, 중분류, 소분류 모두 하단 Grid에 값을 추가/삭제 그리고 수정까지 할 수 있는데,

이는 아직 Front단에서만 작업이 되고 있고, Back단에서는 아직 값을 받는 부분까지는 작업하지는 못했네요.

(이 부분은 내일 작업할 것 같습니다.)

시간이 조금 걸렸는데, 처음에는 +와 -버튼을 누를때마다 Modal을 띄워 하나씩 저장하려 했으나..(졸면서 해서 그런가 이상한 혼종이...) 무엇을 위한 Grid겠습니까!

Toast Grid의 아름다움을 느끼며 Grid 내에서 추가하고 삭제 그리고 수정까지 가능하도록 변경을 했습니다. (Modal을 만들고 연동하는 작업을 실제로 하고 있긴 했었습... << 결국 모조리 지웠지만..)

어쨌든 Modal에 살짝 시간을 뺏긴 덕분에 DB연동부분은 미미하게 진행이 되어버렸네요 ㅠㅠ

추가로 아직 DB에서 데이터를 전체만 가져올 뿐이지 특정 필터를 걸어 가져오는 기능은 적용되어 있지 않습니다.

때문에 저장 기능을 만들면서 대/중/소분류를 나누는 기능도 만들어 보이는 화면에서도 대/중/소분류를 나눠서 보이게 만들어줘야할 것 같네요.

뭐.. 이런 부분들은 내일 또 추가로 진행을 하도록 해야죠.

 

 

+a !!

그리고 추가적으로! 아무래도 한번에 알아보시는 분들은 대단하신 분들이긴합니다만!

아이콘(?!?!?!?)을 변경했습니다. (이거 알아보신분들 정말 눈썰미 좋으시거나, 평소에 저의 게시글을 잘 보신 분들.. 그럴일 없나..ㅠㅠ)

우선 변경사유는 추후 iOS(iPadOS), Android에 연동할 APP을 만들때 아이콘을 통일 시키고 싶었는데,

무려 google에서 MIT License로 Material Icon을 배포하고 있어서 바로 변경했습니다.

(fontawesome은 바로 뜯어냈습니다 ㅋ..)

덕분에 아이콘을 변경하는 부분에서도 시간을 조금 빼앗겨버렸네요 ㅋㅋ

 

적용을 하고는 조금 부족한(?) 느낌이 없지않아 있으나.. 익숙해지리라 생각듭니다. ㅎ..

무엇보다 모바일(Native Mobile Application)도 생각하면 공통적으로 사용할 Icon이 있는 것 만으로도 감지덕지죠.

 


오늘은 이 정도에서 마무리를 할게요.

(글 쓰는 시간 벌써 2시 14분 ㅋㅋㅋ 내일이 아닌 오늘도 커피의 힘을 빌려야겠습니다 ㅋㅋㅋ)

 

한가지 개발에 특이사항(애로사항)이 생겼는데, 모바일단의 Android 및 iOS는 개발함에 있어 조금 문제가 있을 수 있을 것 같습니다.

특히, iPadOS용의 테스트 태블릿은 일단은 있어서 개발이 가능하리라 생각은 들지만, Android 태블릿은 어떨지 모르겠네요.. (테스트 장비가 없는 상태라..)

Android 태블릿의 경우 많은 고민을 해봐야겠습니다. 그도 그럴게 테스트 장비를 구매하기에는 조금 벅찬상황이라..ㅠㅠ

추가로 또 다른 함정은 iPadOS용 태블릿도 iPad Pro 9.7 (1gen)이라서 이거 이외 제품은 아마 호환성은 장담하지는 못할 것 같습니다. 

생각을 해보니 카메라 기능이 필요한데.. 제 경험상 생각보다 카메라가 문제가 많았던 부분이기도 해서.. (하드웨어가 워낙 조율하기가 힘든 부분이더라구요.)

 

어..? 벌써 2시 30분? 얼른 취침을!!

 

오늘도 고생 많으셨습니다!

 

 

버전정보 (v1.0)

 - v1.0 2020.08.11 배포

 

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(10)_공통코드 화면 개발


으으.. 더워 죽겠는데 혼자서 미션 임파서블 했습니다. (더위 속에 빠르게 개발 끝내기)

덥지만 화면만 빠르게 뽑아내고 자자! 싶어서 ㅋㅋㅋㅋ

이제 월요일 되니 빠르게 누워 잘까 했지만, 덥다보니 잠 못잘게 분명하다보니 조금 더 잡아보자 해서 진행합니다..ㅋㅋ;;;

 

덕분에 화면은 빠르게 뽑아냈습니다 ㅋㅋ

열일해준 선풍기에게 고마움을 전합니다!

(고마워 선풍기야. 줄게 전기밖에 없구나.. 전기라도 많이 먹어.)


공통코드 화면 (PC)

공통코드 화면 (PC)

워낙 심플한 화면이라 뽑아내는건 금방이었습니다. (굳)

현재 DB는 연동한 상태는 아니고, 생각해보니 저장하는 Process는 있는데, 화면이 없어서..

(Modal로 만드려했는데 더워서 정신이 날라간 모양..)

저장하는 화면은 Modal로 만들어서 바로 사용할 수 있게 만들면 될 것 같습니다.

(Modal 만드는건 일도 아니니)

 

공통코드 화면 (Mobile)

모바일에서 본 화면은 위와 같습니다.

다만, 아무래도 대분류->중분류->소분류 이동하거나 값을 확인하는 부분이 많이 불편할것으로 예상이되어 어느정도의 보완은 필요할 것 같아보입니다.

그런 부분은 조금 고민을 해봐야겠네요. (흠... <대충 고민하느라 나는 소리)

 

 

이제 몇 가지 끄적끄적(작업)해주면 grid에 데이터 보이는건 금방 끝낼 것 같습니다.

그리고 Modal을 만들어 데이터 저장 및 삭제해주는것도 그리 어렵지는 않을 것 같구요.

다만, 오늘은 화면만 뽑자! 가 목표였으니.. 목표인 화면뽑기가 마무리 되었으니 빠르게 컴퓨터를 끄도록하겠습니다!!!! (으아아 컴퓨터의 열기!!!)

 

참고로 Wireframe 및 화면설계서는 아까 올린 Project.다원 Ensemble_설계(11)_공통코드 Wireframe&화면설계서를 참고해주세요!

 

Project.다원 Ensemble_설계(11)_공통코드 Wireframe&화면설계서

Project.다원 Ensemble_설계(11)_공통코드 Wireframe&화면설계서 ㅡ으으으으아!!!! 너무 습하고 더워요!! 제 방에는 에어컨이 없어서.. (거실에만 있는..) 방에 에어컨을 설치할까 생각 안해본건 아닌데..

karzin.tistory.com


솔직히 시간걸릴만한 일은 아녔는데,

아무래도 덥다고 의자(심지어 천으로 된 의자라..)에서 일어나서 선풍기와 진득한 허그를 하다(??) 개발하고,

누워있다(???) 개발하고, 정수기에서 물을 마시는건지 뿌리는건지 하다가(????) 개발하고 별짓을 다 하느라(?????) 시간잡아먹혔네요 ㅠㅠㅠ

 

얼른 취침해야겠습니다 ㅠㅠ

 

모두들 꿀잠 주무시길 바랍니다!

 

 

버전정보 (v1.1)

 - v1.0 2020.08.10 배포

 - v1.1 2020.08.10 내용 수정

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_설계(11)_공통코드 Wireframe&화면설계서


ㅡ으으으으아!!!! 너무 습하고 더워요!!

 

제 방에는 에어컨이 없어서.. (거실에만 있는..)

방에 에어컨을 설치할까 생각 안해본건 아닌데.. 실외기가 못버틸거라서 

교체비용 등등 생각하면 그냥 포기네요 ㅋㅋㅋ..

(차라리 에어컨 살 돈이면 아이패드 프로4와 펜+키보드를 사겠..)

 

더운 나머지 컴퓨터 킬 엄두는 못내고 그냥 조금씩 시간내서 덜 더울때(??) 선풍기 열심히 일시켜놓고 만들었습니다.

덥고 습하니 빠르게 Wireframe과 화면설계서만 보여드리고 지나갈게요! (빨리해서 방에 있는 PC의 열기를 줄여야겠습니다 ㅋㅋㅋ)

 


Wireframe (공통코드)

공통코드 Wireframe

흠.. 공통코드야 크게 기능이 필요한건 아니라 CRUD만 보여주는 화면만 있으면 되서 심플하게 잡았습니다.

다만, grid는 일전에 말한것처럼 TOAST UI의 grid를 사용할 예정입니다.

grid에 제가 원하는 기능들이 있으면 좋겠으나.. 없으면.. 뭐, 개조해야죠. (아마 MIT License라서 수정이 가능할 것 같은데, 특별히 문제 없다 생각하면 어느정도 제 손맛태워야겠습니다.)

 

 

화면설계서 (공통코드 - PC)

공통코드 화면설계서(PC)

Wireframe처럼 특별한 건 없습니다.

기능조차도 공통코드를 추가/삭제하는 기능이 있는 정도??

 

화면설계서 (공통코드 - Mobile)

공통코드 화면설계서(Mobile)

 


아이고 더워라..(습해라..)

 

비는 정말 그칠날없고, 덕분에 습하고 덥고..

PC만 켰다하면 다른방보다 2도정도 더 높은 이 느낌.. 으으으..

 

개발 바로 들어가서 화면만 적당히 뽑고 오늘은 마무리해야겠네요!

 

오늘도 고생 많으셨습니다!

 

 

버전정보 (v1.0)

 - v1.0 2020.08.09 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_분석(6)_공통코드 프로세스 정의 (코드 등록)


 

날은 덥고, 비는 와서 습하고.. 그 와중에 공통코드 하나씩 디비에 밀어넣고 있다보니 극심한 졸음과 함께 귀찮아지더라구요..(으아아!!)

앞으로도 넣어야할 공통코드가 산더미일텐데...

애초에 장비관리부터 시작하는 이유도 저의 업무를 줄이고자 귀차니즘을 해소하기 위해 시작한거였는데!!

(그 귀차니즘은 더 큰 귀차니즘을 불러들이고.. 그 큰 귀차니즘도 결국 더욱 더 큰 귀차니즘으로!!! 무한의 고통!!! ㅁ나ㅣㅓㅇ라ㅣㅡ라ㅣㅇㄴ)

 

그.래.서

공통코드 부분부터 먼저 만들자! 싶어서 공통코드 분석부터해서 설계-개발까지 빠르게 진행해볼까 합니다.

(어차피 한 페이지 만들거라 그리 오래 걸릴 일은 없을 듯 싶네요.)

실제로 제가 테스트 데이터 밀어넣고 삭제하고 하면서 테스트가 되는것도 덤!!(앗싸!)

버그라도 보인다! 싶으면 바로 제거를 해주는 살충제 기법까지! ㅋㅋㅋㅋ

 

공통코드만 잘 뽑혀도 넣고 빼는건 더 편해지고!! 아~~~싸!!!

 

어쨌든 오늘 프로세스 정의하고, 내일은 설계 빠르게 하고 개발들어가면 될 것 같습니다.

사실 설계라고 해봤자, 전에 장비관리 때 공통코드 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

Wireframe과 화면설계서정도만 만들고 바로 개발진행하면 될 것 같네요.


 

 

공통코드 프로세스 (등록)

등록 프로세스 자체는 굉장히 심플합니다.

 

공통코드 프로세스 (등록)

 

시스템관리자는 추가하고 싶은 코드를 대분류->소분류(카테고리) 형식으로 내려갑니다.

소위 말하는 트리구조로 생각하시면 됩니다.

장비코드 - 분류 - 모니터

장비코드 - 분류 - 컴퓨터

장비코드 - 분류 - 노트북

...

이런식입니다.

 

사실 여기서는 대,중,소로 나뉘어 놨는데, 실질적으로는 하위로 계속해서 추가해갈 수 있습니다. (대, 중, 소, 소소, 소소소 ... - 쉽게말해서 탈것분류 - 자동차 - 전기 - 소형 - SUV ... 이런식으로 카테고리를 하위로 물릴 수 있다는 이야기입니다.)

다만, 굳이 그렇게까지 할 필요도 없어서 UI단에서는 3가지 즉, 대,중소분류로 나눠놓을까합니다.

 

대, 중, 소분류는 정확히 나누면

대분류 - 메뉴 정보

중분류 - 메뉴에서 사용할 코드의 타이틀

소분류 - 코드의 값

인 느낌이 되겠네요.

 

지금 생각으로는 공통코드 화면에는 Toast UI GRID를 붙여서 개발을 진행할 것 같으며,

어렵지 않게 코드의 관리가 되지않을까 싶습니다.

 


장비등록 화면개발하다가 '테스트용 공통코드 몇개만 넣어야지!' 했는데, 본의아니게 노가다를 하고있어서

그냥 덥고 습한나머지 공통코드 먼저 만들어버리자! 해서 후다닥 만들었습니다.ㅋㅋㅋ

 

사실 코드 등록 프로세스 이외에 코드 삭제, 코드 수정 프로세스도 있겠지만..

등록 프로세스도 심플하기도하고, 솔직히 등록이나 삭제나 수정이나.. 거기서거기.. (결코 졸려서가 아니라!)

 

어찌되었든 내일은 Wireframe이랑 화면설계서 대충 끄적이고 바로 개발 넘어가야겠습니다.

아! 지금 시간이 02시를 향해 가고있으니 내일이 아니라 오늘이네요 ㅋㅋㅋ

(벌써 이런 시간이;;;)

 

한숨 자고 다시 시작하도록 해야겠습니다 ㅋㅋ

 

오늘도 고생 많으셨습니다~

 

 

버전정보 (v1.0)

 - v1.0 2020.08.08 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com




Project.다원 Ensemble_개발(9)_장비등록 화면 디자인 변경


흠.. 내일은 중요한 회의가 있어서 오늘 좀 일찍 자려했는데..

잠깐 잡아보자 해놓고선 벌써 00시 30분이 넘었네요;;

(뭐.. 사실 샤워하고 내일 회의 준비하고 프로젝트 시작한게 00시 10분쯤..ㅋㅋㅋ;;;)

그냥 시간배분 고려해서 잠깐 할만한거 생각하다가

그제 메뉴 디자인 바꾼김에 후다닥 장비등록 화면 디자인이나 변경하자 해서 변경했습니다. ㅋㅋㅋ


변경 전 화면 (링크)

 

Project.다원 Ensemble_개발(5)_장비 등록 화면 개발

Project.다원 Ensemble_개발(5)_장비 등록 화면 개발 휴식을 갖기 전에 열심히 베이스를 깔아놔서 그런지 화면 개발은 화면 하나당 하루(대략 1~2시간 정도)정도 잡으면 될 것 같네요. (휴일이었으면 하

karzin.tistory.com

너무나 촌시러운 장비등록

누누히 말하지만 저는 딱히 파란색 좋아하는거아닙니다 ㅋㅋㅋㅋ

그냥 귀찮아서 빠르게 만든다는게..(결국 엎었지만..)

 

변경 후 화면

보시면 팍!하고 아시겠지만, 설명을 덧붙이자면 에메랄드 빛의 input상자류는 필수값을 나타냅니다.

추가로 앞으로 별 다른거없다면 save 버튼은 초록색으로 통일할까 하구요.

음.. button류에는 전부 shadow 처리를 해줬는데 생각보다 별 차이는 없어보이네요.

 

일단은 이정도..?

오늘은 위에서 말한것처럼 일찍 취침들어가야하므로 디자인변경만 하도록하겠습니다 ㅋㅋ (본업중시 - 문제는 잠이 안와서 이러고 있지만.... 오늘 커피를 엄청마셨더니 잠이 안옵...ㅠㅠㅠ)

내일은 DB연동작업이나 시작해야겠네요.

 


흠.. 이제 좀 졸리나 싶었지만 안졸리네요. 앙대...ㅠㅠㅠ

누워서 양이라도 좀 세고 있어야 겠습니다 ㅋㅋㅋㅋㅋㅋㅋ

 

 

버전정보 (v1.1)

 - v1.0 2020.08.04 배포

 - v1.1 2020.08.04 내용수정

 

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 

+ Recent posts