I. Project(1일차)
1. 개요
- 프로젝트 이름 : 사치의 즐거움
- 프로젝트 소개 : 충동적인 사치를 관리할 수 있도록 도와준다!
- 개발 기간 : 22.11.14 ~ 22.11.16(예정)
- 개발 인원 : 4명 (전재경, 안수빈, 조무결, 이상직)
- 기술 스택 : HTML, CSS, JS, JQuery, Flask, Mongodb, AWS
- 협업 도구 : Notion, Slack, Git, Excalidraw
1) 협업 도구의 중요성
프로젝트 시작 첫 날, 개인적인 사정으로 인해 참여를 하지 못했다. 협업이라는 것이 으레 그렇듯이, 기획 단계에서 참여를 못하는 경우 작업을 시작해도 갈피를 못잡고 헤메기 쉽다. 기획이 완료된 프로젝트에 중간에 참여하면서 여러모로 걱정이 많았는데, 기획안이 담긴 Notion 페이지를 보고 그런 걱정이 아예 사라졌다.
1-1) 전체 와이어 프레임
Excalidraw를 통해 다함께 전체 와이어 프레임을 결정했다고 한다. 로그인 페이지부터 등록 페이지까지 한 눈에 알아보기 쉽게 정리되어있었으며, 함께 정리하는 과정에서 많이 다듬어져 있는 것을 확인할 수 있었다.
1-2) 페이지별 와이어 프레임
프로젝트에서 내가 담당하게 된 부분이다. 정말 감사하게도, 해당되는 페이지에서 필수적으로 구현해야하는 기능들과 페이지 레이아웃까지 고민해서 작성해두셨다.
1-3) 디자인
페이지별로 분업해서 프로젝트를 진행하다보면, CSS 디자인에서 미묘한 차이가 발생하곤 했었다. 사용될 색상들을 :root 가상클래스로 정하고, 폰트까지 통일해 작업할 때 쓸데없이 RGB값을 만지작 거릴 일 없이 빠르게 진행할 수 있었다.
1-4) API
API 또한 method별로 정리할 수 있게 틀이 잡혀있었다. 프로젝트 작업을 진행하면서 지속적으로 업데이트하여, url parameter를 넘긴다던지 하는 페이지 간에 이루어져야 하는 데이터 통신을 처리하기 편했다. 특히 DB 관련된 부분도 확인할 수 있어 작업 간 혼선을 줄일 수 있었다. 물론 기능 구현하면서 DB 구조는 계속 바뀌것지만...
2. 구현
페이지 내에서 구현해야하는 기능들은 다음과 같다.
- 금액 관련 드립 랜덤 돌리기
- 페이지 이동 기능
- 삭제 기능
- DB에서 상품 정보 불러오기
- 완납 기능
1) 금액 관련 드립 랜덤 돌리기
구현하면서 가장 재밌었던 기능이었다. 유저는 각 아이템별로 월별 할부 금액을 선정하게 된다. 일종의 "국밥충" 드립을 치는 기능인데, 랜덤으로 할부 금액에 따라 살 수 있는 물건의 갯수를 메세지로 출력하는 기능이다. 구현은 간단하게 0~4까지 랜덤한 수를 받아, 그 수에 따라 각기 다른 메세지가 출력되도록 했다.
2) 페이지 이동 기능
페이지 이동 기능이다. 기획안에는 가로 슬라이드로 구현하는 것으로 적혀있었으나, 다 구현해놓고 해당 부분을 확인하여(...) 일단 그대로 뒀다. DB에서 로그인한 유저가 저장한 Item들의 ObjectId를 리스트 형태로 받고, href를 통해 화살표를 클릭할 때마다 url parameter에 Item의 ObjectId를 포함시켜 페이지를 다시 불러오도록 했다.
3) DB에서 상품 정보 불러오기
item = db.item.find_one({'_id':ObjectId(tmp)}, {'_id':False})ObjectId를 통해 DB에서 정보를 불러오도록 했다.
4) 삭제 기능
db.item.delete_one({'_id':ObjectId(tmp)})ObjectId를 통해 DB에서 삭제하고, 메인 페이지로 리다이렉트 되도록 구성했다.
5) 완납 기능
db.item.update_one({'_id':ObjectId(tmp)}, {'$set': {'complete':True}})ObjectId를 통해 DB에서 Complete를 True로 변경하고, 리프레시 되도록 구성했다.
3. 추가적으로 해야할 것들
- 모달 적용
- JWT 이용해 로그인 유저 정보 확인
- DB 확인 및 Collection 맞춰보기
II. Date()를 통한 시간 계산
let now = new Date();
let past = new Date(2019-12-31T15:00:00.000+00:00);
// millisec 단위로 계산됨.
let time_gap_milli = now.getTime() - past.getTime();
// 해당 값에 숫자를 곱해줌으로써, 변환 가능.
let time_gap_sec = time_gap_milli * 1000;
let time_gap_min = time_gap_milli * 1000 * 60;
let time_gap_hour = time_gap_milli * 1000 * 60 * 60;
let time_gap_day = time_gap_milli * 1000 * 60 * 60 * 24;
let time_gap_mon = time_gap_milli * 1000 * 60 * 60 * 24 * 30;
// 소수점이 싫다면 센스있게 parseInt를 써주자.
let time_gap_month = parseInt(time_gap_mon);III. random()
정수 ~ 정수 범위의 수 random으로 받는 방법
let [변수이름] = Math.floor(Math.random() * ([최대값] - [최소값] + 1)) + [최소값];
let num = Math.floor(Math.random() * (4 - 0 + 1)) + 0;IV. ObjectId 형변환
[ObjectId] = str([ObjectId])