[공부 기록] 첫 2주짜리 프로젝트

Codestates에서의 2주짜리 첫 프로젝트를 마무리하였다.
나는 팀장을 맡고 3명의 팀원들과 함께 2주동안 열심히 달렸다.
주로 백엔드를 작업했지만 막바지에 프론트엔드를 도와서 작업했다.

1. 프로젝트 소개

1-1. 개요

평소에 에너지가 적은 사람이여서 내 작은 몸뚱이 하나를 이끄는 것을 힘들어하는 편이다. 그것을 극복하고자 생산적인 일들을 습관으로 만듦으로써 적은 에너지로 뿌듯한 하루를 만든다. 그럴 때 유용하게 쓰는 것이 습관을 관리해주는 어플이다. 이런 어플들을 사용하면서 느꼈던 불만 중 하나는 내가 필요한 기능을 완전하게 모아둔 어플은 없었다는 것이다. 하나가 있으면 다른 것이 없곤 해서 늘 아쉬웠다.
이번 프로젝트를 시작할 때 평소에 가졌던 작은 불만인 이것이 떠올라서 가볍게 기획안을 냈고 관심있는 사람들이 모여 습관을 만드는 어플리케이션을 만들게 되었다.

1-2. 주요 기능

회원가입 & 로그인 & 로그아웃 (+암호화)
습관 만들기
달력에 전체 습관에 대한 성공률 기록 (클릭해서 이전 날짜 보기 기능x)
달력에 각 습관별 성공률 기록 (클릭해서 이전 날짜 보기 기능x)
습관 추가 & 수정 & 삭제
습관에 단위별로 기록할 수 있게 하기 (check, count, minute)
완료했을 경우 표시하기
특정 요일만 일정에 넣도록 하는 기능
연속으로 며칠동안 진행했는지, 총 몇 번 했는지 보여주기

1-3. Flow

프로젝트를 시작하기 전 미리 설계했던 Flow이다.
ZeroTo66_Flow

1-4. Schema

프로젝트를 시작하기 전 미리 설계했던 Schema이다.
ZeroTo66_Schema

1-5. 기술 Stack

프로젝트 때 사용했던 기술 스택은 아래와 같다.
Front-End : React, HTML, CSS Back-End : Mysql, Express, Sequelize, JWT ETC : EC2, S3, RDS

1-6. React Component

프로젝트를 시작하기 전 미리 설계했던 React Component이다.
ZeroTo66_React_Component

2. 프로젝트 진행

2-1. Tasks

총 3개의 스프린트로 8일동안 진행했던 task이다.
ZeroTo66_Sprint1 ZeroTo66_Sprint2 ZeroTo66_Sprint3-1 ZeroTo66_Sprint3-2

2-2. API 문서

프로젝트를 진행하며 작성했던 API 문서이다.
ServerAPI_1 ServerAPI_2 ServerAPI_3 ServerAPI_4

2-3. references

프로젝트를 진행하며 참고했던 자료들이다.
UI 참고 : https://www.habitify.me/
sequelize associate : https://victorydntmd.tistory.com/32
sequelize 한글 문서 : https://velog.io/@cadenzah/sequelize-document-1
HTTP 응답코드 메소드 정리 GET, POST, PUT, PATCH, DELETE, TRACE, OPTIONS : https://javaplant.tistory.com/18
크롬에서 비밀번호 유출 메시지 뜨는 이유 : https://m.zdnet.co.kr/news_view.asp?article_id=20190206092407#_enliple
dynamic origin of cors : https://expressjs.com/en/resources/middleware/cors.html
로그아웃할 경우 token 처리 : https://stackoverflow.com/questions/37959945/how-to-destroy-jwt-tokens-on-logout
JWT 이해하기 : https://medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-single-page-nodejs-applications-c403f7cf04f4
Draw AWS diagrams : https://app.cloudcraft.co/

3. 완성

3-1. 기능별 시연 gif

회원가입 & 로그인 & 로그아웃

signup login logout

습관 만들기

makeHabits

달력에 전체 습관에 대한 기록

totalCalendar

각 습관 별 정보와 완료할 때

detailOfHabit

습관 수정 및 삭제

modify delete

3-2. repositories

server : https://github.com/aiody/ZeroTo66-server.git
client : https://github.com/aiody/ZeroTo66-client.git

4. 후기

처음에 기획 단계에서 flow, schema, task를 미리 설정해두는 것이 프로젝트를 진행하는 것에 있어서 아주 강력한 무기가 된다는 것을 체험했다. 맨 땅에서 하나씩 쌓아 올라가는 경험 덕분에 무엇이든 만들 수 있을 것 같은 자신감도 생겼다. 클라이언트 쪽 코드가 많이 아쉽다. 덕분에 코드 리뷰를 할 때 어떤 관점에서 보고 피드백을 주어야 하는지 감이 잡힌다. 다음에는 프론트와 백엔드 양 쪽 다 잘 챙기면서 진행해야지.

아름이의 개발로그