최종 프로젝트 회고 #10 - 칠리칠리 소품랜드 (소품샵 소개 프로젝트)

---

이번 주차에서는 카카오 맵 API 불러와서 지도를 띄우고 사용자에게 소품샵의 위치를 안내해주는 웹서비스 프로젝트에 대해 작성해보고자 한다.

---

팀 노션 링크

깃허브 링크

피그마 링크

버셀 배포 링크

---

마이페이지 - 저장한 소품샵과 작성한 리뷰들을 마이페이지에서 확인할 수 있는 기능 + 리뷰 기능을 맡았다.

---

이전에 해당 프로젝트에 대해 작성해 놓았던 til은 #42부터 #45까지 참고하면 된다.

---

Skills

1. React

   해당 프로젝트는 React를 기반으로 제작하였다. ts를 사용하지 않고 react를 사용한 이유를 묻는다면,, 아직 ts를 배우기 전에 진행한 팀 프로젝트이기 때문이다.

2. Context API

   AuthContext를 사용해 전역에서 인증 상태와 사용자 정보를 관리하였다. 로그인 및 로그아웃 상태, 사용자 정보 등을 AuthProvider를 통해 필요한 컴포넌트에서 접근하도록 설정하였다.

3. React Router

   PrivateRoute 컴포넌트를 통해 인증되지 않은 사용자를 로그인 페이지로 리디렉션하는 기능을 구현하였다. Navigate 컴포넌트로 페이지 이동을 제어한다.

4. React Query

   useQuery와 useMutation을 사용하여 서버와의 데이터 요청, 수정, 삭제 등의 비동기 작업을 수행하였다. queryClient를 이용해 캐시된 데이터를 관리하고, 상태를 업데이트한다.

5. Supabase

   백엔드로 Supabase를 사용하여 데이터베이스와의 통신을 담당하였다. 이전 프로젝트는 작성 할 프로젝트들 중 가장 테스크가 가벼워 위와 같이 구체적으로 작성하진 않았지만, 모든 백엔드는 수파베이스를 사용하였다.

6. Figma

   피그마로 와이어프레임을 작성하고 진행하였다. (위와 같이 모든 프로젝트에선 피그마로 와이어프레임을 작성하였다.)
   

7. slack

   팀원분들과의 소통 수단으로는 음성 + slack을 사용하였다. 기술 스택은 아닌데 굳이 적는 이유는 .. 슬랙 사용 경험이 있는 지원자를 선호하는 회사가 많아서 적어뒀다.
   

8. SweetAlert2

   Swal.fire로 사용자에게 알림 메시지(성공, 오류)를 표시하여 더 나은 ui를 제공하였다.

9. Tailwind CSS

   대부분의 프로젝트 스타일링은 Tailwind CSS로 진행하였다.

10. Vite

    개발 서버 속도가 빠르고, 코드 변경 시 즉각적인 반영(HMR)으로 효율적인 개발 환경을 제공하기 때문에 사용하였다.

---

마이페이지를 작업할 때는, 보통 좋아요를 누른 게시물이나 사용자가 작성한 댓글을 불러와서 보여주는 작업을 하게 된다.

보통 팀프로젝트와 같은 경우엔 모두가 한날한시에 작업에 들어가기 때문에 다른 팀원 분이 crud를 완성하기 전까지 ui만 짜놓으면 후반가서 시간이 부족해지는 경우가 있기 때문에 꼭 임시 더미데이터를 만들어서 작업해두어야한다.

안그러면 .. 대참사가 난다. (실제 다음 팀 프로젝트에서 마이페이지를 맡으신 분의 파트에서 대참사가 일어났었다...)