지난 후기에서 1차 todo list 까지 작성을 했기에 2차 과제부터 작성을 하도록 하겠다.
2차 프로젝트 시작 전에...
팀장이 되고 1차 프로젝트를 마무리 한 후에 한가지 나름의 고민이 있었다.
- 과제진행 방식은 각자 과제 내용을 개발 후 하나의 Best practice를 선정하는 것
- 과제를 개별로 수행하는 시간도 모자란데 best practice를 선정하는 시간 또한 많이 소요됨
- 과제 제출기한에 맞춰서 제출을 하기에는 시간이 부족할 수도 있다!!
는 결론에 도달했다.
Best practice를 뽑는 시간은 아직 어떻게 줄여야할 지 감이 없는 상황...
그래서 내가 생각한 방법은 다음과 같다.
각자 과제를 수행하기위한 시작점(폴더구조, lint & prettier설정)을 과제를 같이보며 맞춰서 팀원들이 빠르게 과제를 수행할 수 있도록 하는것!!
그리고 중간중간 과제 피드백을 진행!!
그러면 빠르게 과제가 수행될 것이고 best practice를 선정할 시간이 많이 주어질 것이라 생각했다.
그래서 만든 것이
🗂️ project starter pack !!
큰 특징이 있지는 않지만 현 우리 팀이 사용하는 스펙인
vite, typescript, react, react-router-dom. eslint, prettier
설정을 미리 한 레포를 우리팀 github 조직에 만들어두고 매 과제마다 사용하게 한 것이다.
폴더 구조는 과제를 함께 읽으며 필요한 폴더를 같이 생각하고 위 설정에 덧붙여서 새로 과제 레포를 만들었다.
위 레포 설정이 있어서 팀원들끼리 많은 설정을 미리 맞추고 시작할 수 있었던 것 같다.
위 project starter pack에 관한 글은 여기서 볼 수 있다.
바로가기
✈️ 여행 상품 구매 리스트 뷰와 필터링 페이지 & 장바구니 기능 구현 프로젝트
주어진 여행 상품 리스트 정보를 가지고 간단한 필터링 기능이 있는 메인 페이지와 구매한 구매목록을 볼 수 있는 사이트를 제작하는 과제이다.
📝 과제에서 중요하게 생각한 부분
Main page - Trip list view & filtering
페이지 라우팅과 필터링에 대한 부분이다 .
프론트에서 서버로부터 받아온 데이터를 목적에 맞게 잘 보여주는 것은 매우 중요한 일 !!
과제 요구사항은 다음과 같았다.
- 페이지에 접속하면 /main 라우트로 가도록 한다.
- 상품 정보를 받아와 전체 리스트를 보여준다.
- 리스트에 필요한 정보를 표출하고 modal 버튼을 만들어 modal로 상세 정보를 볼 수 있도록 한다.
- 예약 버튼을 만들어 장바구니에 상품을 담을 수 있도록 한다.
- 가격과 위치로 다중 필터링을 적용한다.
다른 부분은 크게 어려운 점이 없었다.
특히나 이번 프로젝트에서 요구한 UI styling을 위한 라이브러리로 Chakra UI를 지정해줬는데 매우 편하게 스타일링을 할 수 있어서 UI는 쉽게 구현할 수 있었다.
이번 과제 때 처음 알아서 좀 헤맨건 비밀이다...중요한 파트는 바로 filtering!!
아무 생각없이 과제를 읽고 생각한대로 필터링을 구현했는데 나중에 팀원들과 의견을 공유하니 필터링에 대한 부분에 의견이 좀 나뉘었다.
- 값에 대한 필터링을 range로 할지 number input 으로 할지
- 지역 필터링을 중복 허용으로 할지 말지
음... 생각지못한 곳에서 의견이 좀 나뉘었다.
하지만 각자 해온 결과물의 필터링 파트에서 가장 예쁘고 과제의 의도랑 가장 적합한 걸로 선정을 하기로 했고 결과는
값 -> range , 지역 -> 중복허용 버튼 클릭
으로 필터링을 하도록 구현했다.
Reservation page
장바구니 페이지의 요구사항은 다음과 같았다.
- 예약한 리스트를 보여주고 삭제 가능하게 구현
- 구매수량 변경 가능하게 구현
- 총 결재액 수를 계산하여 보여줘라
여기서는 큰 이견없이 순조롭게 잘 구현이 되었다.
추가적으로 장바구니에 담긴 구매목록을 유지하기위해 localStorage에 해당 내용을 저장하고 사용하는 것으로 했다.
우리 팀은 구매 목록 유지를 위해 localStorage를 사용했는데 필터링 내용 유지를 위해 url Search param를 사용한 팀도 있었다.
-> 필터링 유지는 생각하지 못햇던 부분이었는데 다음에 과제 필터링 기능이 있다면 적용을 해보면 좋을 듯 싶다.
redux-toolkit slice 분리 및 필터 data reselect
이번 과제에서 우리 팀은 전역 상태관리로 redux, redux-toolkit 을 사용했다.
사실 모든 팀원이 사용한 건 아니지만 best practice로 채택되어 넣게 되었다. ㅎㅎredux 내에서는 전체 여행상품 리스트를 다루는 trip slice 과 예약 리스트를 다루는 reservation slice로 관심사를 구분하여 다뤘다.
┣ 📂store
┃ ┣ 📂reservation
┃ ┃ ┣ 📜reservationSelector.ts
┃ ┃ ┗ 📜reservationSlice.ts
┃ ┣ 📂trip
┃ ┃ ┣ 📜tripSelector.ts
┃ ┃ ┗ 📜tripSlice.ts
┃ ┗ 📜store.ts-
각 slice 내에서 전역으로 다루는 state가 순수함을 유지할 수 있도록 노력했다.
-
filtering을 기준으로 값을 변경하는 것을 컴포넌트에서 직접 다루게 하지 않고 가격 state와 지역 state를 만들어 slice에 저장
- 컴포넌트에서는 가격에 지역 state에 따라 이미 filtering 된 상태만 가질 수 있도록 했다.
- 예약 페이지의 총 구매 가격, 예약한 총 상품 수도 기존 reservation slice에 있는 예약 상품 리스트를 reSelect 하여 값을 다뤄 컴포넌트에서는 신경을 쓰지 않도록 했다.
결론
많은 인원이 참여했고 ( 한 분이 중간부터 참석을 하지않아 7명이서 진행했다.) 사람이 많으니 나의 의견을 어필하는 과정에서 설득력있는, 합리적인 이유를 제시하는 것이 얼마나 중요한지 깨달았다. + 개념에 대해서 정확히 알고있어야 설득력을 더할 수 있다는 것도 알게 되었다.
2편에서 후기를 끝내겠다는 매우 아둔한 생각이었다... 3편으로 돌아오겠다.
