시작하며...
Internet 약정 기간이 다 된 것도 모르고 있었는데, 주말에 갑자기 internet이 끊기면서 약간 바보(?)가 된 느낌이었다... 뭐 그냥 hot spot 연결하면 되지 않겠느냐만은... 신입사원 지급 phone을 2달만에 버리고 새로 iPhone SE2를 개통했는데, 이전에 확정기변(?)으로 개통해서 8월 말까지는 다른 요금제로 변경할 수 없다는 말도 안되(지만 사실이니까 어쩔 수 없지만...)는 얘기를 듣고 한 달에 10GB 요금제를 사용하고 있는 내게 hot spot을 남용하는 것은 무리가 있었다. 오늘(주말 기준으로 다음 주)부터 재택근무를 해야 하기 때문이다...
뭐, 결국 재택근무를 위해 data를 아껴야 한다는 핑계로 주말에 쉬었다... 뭐 마냥 쉰 것만은 아니고, 3.5일차 개발일지를 upload하기는 했다...
그래서 일정이 굉장히 바빠진 관계로, 1일 1개발을 해야 하는 상황에 처했다... 천천히 조금씩 한 걸음씩 나갈 여유가 없어진 것이다...;ㅁ;
개인 Project 개발 계획 수정
ToDoList를 기준으로 계획을 세워보니, 내게 남은 기간은 약 5일이고 근무 시간 제외하고 남은 여가 시간을 활용할 수 있는 시간을 적당히 계산해보니, 하루 2시간씩 약 10시간 정도 남은 것으로 판단되었다... 그래서 login page와 signup page, main page 중 myInfo를 관리하는 page는 과감하게 제외시키기로 하고, my equipments page, my certifications page, my dive points page만 개발하기로 했다.
솔직히 login page와 signup page, 회원 정보를 관리하는 기능이랑 page는 당장 개인 web service에서 중요도가 낮으니까(완성도에는 영향을 주겠지만...), 주요 기능만 구현한 page만 우선적으로 개발하기로 했다.
나머지 기본 기능은 시간적인 여유를 가지고 천천히 개발하기로 했다:)
우선, main page는 크게 2가지로 나뉜다고 볼 수 있다.
- 개인 정보를 관리하는 page
1) 회원 기본정보 관리 (제외, 이후 login page/signup page 개발 후 구현 예정)
2) 개인 장비 관리 - scuba diving/free diving 구별
3) 개인 자격증 관리 - scuba diving/free diving 구별 - 자신의 dive log를 기록하는 page
1) Scuba diving point 등록 및 log 기록
2) Free diving point 등록 및 log 기록
그래서, 남은 5일 동안 개발 계획을 아래와 같이 세웠다...
- 2020.08.24.월 - main page 중 개인 정보를 관리하는 page layout 완성
- 2020.08.25.화 - main page 중 개인 정보를 관리하는 page의 popup layout 완성
- 2020.08.26.수 - main page 중 dive log를 기록하는 page 및 popup layout 완성
- 2020.08.27.목 - crawling을 이용하여 필요한 data를 DB에 저장 및 app.py 기본 mapping 완료
- 2020.08.28.금 - js 및 backend 개발
Main page - My Equipments/Certifications page
우선, main page의 개인 장비를 관리하는 page와 개인 자격증을 관리하는 page는 구조가 동일하다. 그래서 하나를 개발하면 하나는 거의 거저 먹는 것이나 다름 없다...
그리고 개인 장비 및 자격증을 관리하는 page는 이전에 사용했던 bootstrap의 post-box/card class를 이용해서 구현할 예정이었다... 하지만, 언제나처럼 내 계획대로 순조롭게 일이 진행되지 않았다...
Page layout은 크게 3부분으로 나누어서 button 2개를 이용하여 장비/자격증을 등록할 수 있는 div, 등록한 scuba diving의 장비/자격증 목록을 보여주는 div, 등록한 free diving의 장비/자격증을 보여주는 div로 구성이 된다... 이 부분까지는 전혀 어려움이 없었지만, 문제는 bootstrap의 post-box/card class를 이용하면서 발생했다...
문제는 등록하는 장비/자격증이 각각 card class로 card-columns 내부에 추가가 되며, 장비/자격증이 새로 추가될 때마다 세로로 추가가 된다는 것이었다...
문제되는 부분
예를 들어, pokemon을 1번부터 순서대로 등록을 할 때,
원하는 page는
1번 | 2번 | 3번
4번 | 5번 | 6번
...이었지만, 실제로 등록되는 page는
1번 | n번 | m번
2번 | (n+1)번 | (m+1)번
3번 | (n+2)번 | (m+2)번
... 처럼 등록된다는 것이었다...
이전에 flex attribute을 이용하여 등록되는 순서를 세로 기준에서 가로 기준으로 수정하려고 시도한 적은 있지만, bootstrap이 제공하는 class를 이용할 경우 불가능하다는 결론을 내렸다...그래서 이를 해결하기 위해 스스로 css를 수정해야 했다...
우선, main page의 개인 장비/자격증 관리 page의 source는 간략하게 아래와 같다.
1. head source
1) 기본적으로 필요한 내용을 구성
2) <!-- CSS --> 부분에 원하는 main page layout을 구현
3) <!-- Functions --> 부분에 main page의 기능 구현 -> 아직 개발하지 않음
2. CSS source
1) wrap: page 전체를 감싸는 div
2) register > button: 개인 장비/자격증을 등록하는 button
3) sub-title: 개인 장비/자격증의 category를 구분 - scuba diving/free diving
4) equipmentDetails: 개인 장비/자격증의 목록을 감싸는 div
5) box-container: 등록한 개인 장비/자격증 card를 감싸는 div
6) card: 개인 장비/자격증의 사진/정보를 감싸는 div
7) card-img-top: 개인 장비/자격증 중 사진의 외형 제한
8) deleteBtn: 개인 장비/자격증을 제거하는 delete button
3. body source
1) 화면 구성을 확인하기 위해, 'box-container' class 하위에 'card' class를 hard coding해서 data를 추가한 상태
-> 이후에는 default로 빈 화면이 출력되고, 자신이 등록한 장비/자격증만 출력되도록 수정
2) 'equipmentDetails' class에 'scubaDiving' class 혹은 'freeDiving' class를 add하여 category를 구분
-> CSS는 equipmentDetails만 설정했기 때문에 'equipmentDetails scubaDiving' class와 'equipmentDetails freeDiving' class는 동일한 layout을 공유
3) 'regitster' class button을 통해 등록하는 장비/자격증의 정보를 'card' class의
'card-img-top'/'card-title'/'card-text' class 부분에 mapping할 예정
-> 이후 logic에 따라 필요한 id를 부여할 예정
결국, 새로 등록되는 개인 장비/자격증은 'flex'와 'float: left' 속성을 이용하여 새로 작성한 css source를 통해 왼쪽부터 오른쪽으로 추가되는 형태로 list에 추가될 수 있도록 구현을 완료했다.
완성한 page layout은 아래와 같으며, 이는 이후 innerHtml로 3일차에 개발한 'main page'의 layout에서 하늘색으로 출력한 div(GNB, LNB를 제외한 부분)에 append하여 그대로 구현할 예정이다.
- Main page - My Equipments
1) My Equipments - Scuba Diving
2) My Equipments - Free Diving - Main page - My Certifications
1) My Certifications - Scuba Diving
2) My Certifications - Free Diving
마치며...
아직까지 스스로 개발한 것이 없고(개발 6개월차 코린이...;ㅁ;) 이미 다른 사람이 개발한 source를 이용/활용/수정 등의 작업을 해왔기 때문에, 개인 project를 진행하면서 정말 많은 난관에 봉착하게 되는 것 같다...
일단 지금 회사 업무는 backend는 spring, frontend는 vue.js, DB는 MariaDb를 사용하고, 회사 내부망(GitLab/Jenkins)을 이용하여 source 관리를 하고 있지만, 개인 project는 backend는 python, frontend는 순수 html/css/js, DB는 mongoDB를 사용하고 AWS를 이용하여 source를 배포하고 스스로 GitHub를 이용하여 관리해야 한다...
그렇다... 이것은 마치 첫 걸음마도 떼지 못한 생후 6개월 갓난아기에게 책을 읽으라는 것과 흡사한 난이도라고 생각한다(물론 그 정도로 불가능한 일이 아니니까 꾸역꾸역 하고 있는 것이겠지만...).
그래도 하루하루 난관을 해결해 나가는 재미가 있달까... 내 인생(그래봤자 계란 한 판도 되지 않은 인생이지만...)의 지난 발자취가 워낙 새로운 일에 도전적이었던 것 때문인지, 이런 극한의 시련... 나쁘지 않다.
일단 5일 계획의 첫 날을 성공적(이라고 하기에는 이미 자정이 지났구나...;ㅁ;)이니까, 이후의 단추들도 잘 꿸 수 있으리라 믿고... 딱 일주일만 고생해보기로 하자:)
