🏀 프로젝트 결과물
⚾ 프로젝트 주요 기능
- 회원가입, 로그인, 로그아웃 구현
- 포켓몬 팬아트 CRUD 구현
- 포켓몬 이름별, 도감번호별 검색기능
- 커스텀 모달, toast 구현
- 게시글 클릭 시 상세페이지 조회
- 프로필사진, 닉네임 수정
- 좋아요 구현
- 좋아요한 게시물, 팬아트 쓴 게시물 불러오기
🥎 Stacks
Next.js, TypeScript, React, Tailwind CSS, Tanstack Query, Zustand, Supabase..
🏈 회고
👍 Keep
- 일주일 동안 집중도 있게 프로젝트를 진행했다.
- 하고자 기획했던 모든 기능을 잘 구현했다.
- 내가 개인 프로젝트로 진행했던 프로젝트에서 더 발전시킨 결과물로 만들어 보는 경험이 생겼다.
- 기간 안에 맡은 일을 잘 해냈으며, 할 일이 다 끝나고 시간이 남았을 때 다른분들의 작업을 도와주거나 전반적인 스타일을 점검하고 수정하는 등 프로젝트의 완성도를 위해 노력했다.
- PR, 코드 리뷰, 잦은 커밋 등을 통해 원활히 협업이 진행되도록 노력했다.
- Supabase를 활용한 CRUD 구현이 가능해졌다.
- Tailwind CSS를 활용한 스타일링 방법에 익숙해졌으며, cva를 활용한 재사용 가능한 컴포넌트를 만들 수 있게 되었다. (버튼, 페이지 등)
- Next.js를 활용한 App router 방식의 프로젝트를 구현할 수 있게 되었으며, route handler에 대해서 공부하고 프로젝트에 적용할 수 있는 능력을 갖게 되었다.
- 사용자 경험을 고려한 UI 구현을 하였다. (팬아트 등록, 수정, 삭제 시 버튼 Disabled로 하고 등록 중.. 표시가 뜨도록 설정)
🫵 Problem
- api 호출 시간이 너무 길고 불안정해 페이지 이동 시마다 로딩 시간이 너무 길었던 것이 아쉽다.
- 팬아트 수정 모달을 만들 때, 백드롭 부분을 스크롤링 안 되게 구현하면 좋을 것 같았는데 다른 모달 코드랑 섞이면서 결국 구현을 하지 못한 점이 아쉽다.
✍️ Try
- 다음 협업에서는 PR 템플릿을 사용하여 협업을 진행해 보아도 좋을 것 같다.
- 이번 프로젝트트 Next.js를 이용한 프로젝트에 익숙하지 않았기도 했고 route handler 부분도 헷갈려서 조금 더 직관적으로 코드를 이해하기 위해 route.ts 코드를 CRUD 폴더를 다 따로 만들어서 각각 구현했지만, 같은 카테고리 안에서 사용되는 API 코드 같은 경우는 한 route.ts 파일 안에서 구현하는 것이 좋을 듯하다.
- 처음 웹페이지에 접속할 때 로딩 시간이 긴 것은 사용자가 어느 정도 이해할 수 있지만, 접속 후 페이지 간 이동에서 로딩 시간이 긴 것은 사용자 경험에 좋지 않다. 다음 프로젝트 시에는 이 점을 유의하자.
🌸😊🌸