TIL #54 React 심화 프로젝트

하루 하나씩 작성하는 TIL #54

---

---

새 프로젝트가 발제 되었고, 우리 조는 이전에 개인과제로 작업하였던 포켓몬 도감을 업그레이드 하는 방향으로 하였다.

필자는 디테일 페이지에서 포켓몬 세부정보 가져오기 일부 수정, 슬라이드바로 포켓몬 진화 정보 가져오기를 맡았다.

기존 작업했던 것과는 다르게 브랜치명 앞에 feat를 붙여 인당 하나의 브랜치를 가지고 작업하는 것이 아닌, 여러 개의 브랜치로 나누어 세분화하여 작업하기로 하였다. => 충돌 예방에 좋다.

---

• 7/8 (월) : S.A 작성, 역할분담, 기술 스택 결정, 와이어프레임, 사전 세팅 작업
  • 프로젝트 결정
    • 1차 - 점심 전까지
    • 최종 - 21시 전까지
  • 와이어프레임
    • 18시까지 만들기

---

프로젝트

• 프로젝트 명 : 포켓몬 도감 플러스
• 소개
  • 한 줄 정리 : 포켓몬 도감에 기능을 추가한 프로젝트
  • 내용 : 본 프로젝트는 기존에 포켓몬 도감에 댓글 CURD 및 인증/인가 기능을 추가하였습니다. 사용자는 좋아하는 포켓몬을 찜할 수 있으며, 마이페이지에서 이를 확인할 수 있습니다.
  • 추가적인 기능은 계획 중에 있습니다.

---

프로젝트 기능 구현

➊ 주요 기능 목록 작성 및 역할 분배

• 기능 구현(1차 회의내용) 공통 기능

  1. 포켓몬 api 사용

     로그인 구현 시

  2. 찜하기 가능

  3. 마이페이지 접근 가능

  4. 댓글 작성 가능

  5. 로그아웃 가능

---

커밋 컨벤션

✨ update : 해당 파일에 새로운 기능이 생김
🎉 add : 없던 파일을 생성함, 초기 세팅
🐛 bugfix : 버그 수정
♻️ refactor : 코드 리팩토링
🩹 fix : 코드 수정
🚚 move : 파일 옮김/정리
🔥 del : 기능/파일을 삭제
🍻 test : 테스트 코드를 작성
💄 style : css
🙈 gitfix : gitignore 수정
💡 comment : 주석 변경
🔨 script : package.json 변경(npm 설치 등)
📝 chore : 그 외 잡다한 것들
​

---

브랜치 컨벤션
기능별로 나누기

ex) header, api, + 세분화는 언제든지 가능
→ header/design, header/feature
main
dev
feat/auth
feat/ui
feat/mainPage
feat/detailPage
feat/detailPage/comment
feat/myPage
feat/detailPage/list
feat/detailPage/slider

---

환경 설정 및 기술 스택

• prettier 설정
• db 설계 (supabase)
• 기술스택
  • yarn
  • 전역 상태 관리 - zustand
    • 서버 상태 관리 - Tanstack query
  • Tailwind CSS
  • 통신 API: fetch API
  • Next.js
  • React
  • Supabase
• 사용 API: pokeapi.co

---

내일은 포켓몬 디테일 페이지 리스트를 수정할 예정이다.