무슨 프로젝트를 해볼까??
공모전관련 프로젝트를 하기 위해서 아이디어 회의를 진행 했다.
각자 2가지 아이디어를 제시하고, 투표 결과로 프로젝트를 하기로 하였다.
아이디어는 총 4가지로
- 펫케어 프로젝트
- 공원, 두드림길, 운동장 api를 사용해 같이 운동멤버를 구하는 프로젝트
- 지도 API와 부동산 정보 데이터를 이용하여 주번 시세 일 수 있는 프로젝트
- 청년창업에 도움을 주는 상권분석현황 프로젝트
총 4가지 아이디어가 나왔다.
이 중에서 투표와 의견을 충분히 나눈 끝에
1번 펫케어 프로젝트를 진행하기로 하였다.
펫케어에는 다음과 같은 페이지/기능이 들어간다.
- 메인페이지
- 로그인/회원가입 페이지
- 프로필 페이지 - 반려 동물등록, 일정확인등...
- 갤러리(반려동물 자랑) 페이지 - CRUD
- 스케쥴관리 페이지 - 캘린더 기능 / 장소별, 개인별(CRUD) : 일정, D-day (병원 예약일, 생일등등 관리) 확인 및 관리
- 지도 페이지 - 동물병원 & 동물병원 / 산책로를 지도상 표기
여기서 서울시 공공 API가 들어가는 페이지는 지도 페이지이며 총 3가지의 API가 들어간다.
각 지역구별 API
동물병원API동물약국API서울시 산책로 API
위의 API를 지도에 표시를 하기 위해서 외부라이브러리KaKaoMap API를 사용하기로 하였다.
여기서 내가 맡은 부분은
- 로그인 / 회원가입 Page
- 인증 / 인가
- 지도페이지
총 3가지인데.....
아... 제일 중요한것 두 가지(지도페이지, 인증 / 인가 ) 를 맡아서 부담감이 상당하다....
한편으로는 뿌듯했던게 내가 이전 프로젝트에서 만든 캘린더 컴포넌트 를 요번에 사용하기로 해서 뿌듯..
기술 스택
기술스택관련 회의를 진행하였고 프론트엔드에서 사용하는 중요 기술스택은 다음과 같다.
Next js
Page Router vs App Router
- 프로젝트를 시작하게 된 계기는 Next 프레임워크를 사용해보지 않았던 분때문이므로
- 다른 인원들은 page router 작업을 했지만, 이번 프로젝트에서는 각기 다른 기능과 페이지를 맡았으므로 Next에서 사용해보지 못한 기능들을 최대한 써보고 다음 프로젝트를 할 기회가 있으면 App router로 작업하기로 설득하였다.
Zustand vs Redux
- zustand는 redux대비 보일러 플레이팅 할 것이 없다.
- redux 대비 용량이 적다.
- redux 대비 사용하기 쉽다.
React-Query vs SWR
- 요번 프로젝트에서는 SSR을 사용할 것으로 예상되므로 전체 FE 인원 SSR을 사용 할때 Server와 통신할 때 React-Query의 새로운 method등을 사용 할 것으로 예상되 SWR대신 사용하기로 결정
- React-Query의 전반적인 용도와 쓰임새를 전부 알지 못하기에 사용하자고 하였다.
그리고... 70줄
이전 프로젝트에서 같이 협업한 장** ( 그는 취업했다... 부러버... ) 과 같이 서로 코드 작성관련 내용을 논의 했는데, 그분은 UI 컴포넌트 경우 50줄로 끊는 것을 목표로 한다고 하였다.
반대로 생각해보면 그만큼 컴포넌트를 쪼개는 것을 목표로 하는것인데....
꽤나 괜찮은 아이디어 인것 같아보였었다.
그리하여 코드 컨벤션을 논 할 때, UI Component 경우 70줄에 제한을 두자고 제안하였다.
70줄로 한 이유는
- 컴포넌트의 분리 : 아토믹 패턴(?)
- 컴포넌트를 분리할 수록 props로 전달 할 때
type도 커스텀 할 경우가 있을텐데 타입스크립트에서 안 사용해본 utility도 사용 할 수 있을 것 같아서 였다.
지금 생각해보면 70줄로 지정한 것은 한번쯤은 해봐도 괜찮을정도로 강추였다.
이제 프로젝트를 시작해보자
