그 동안 공부했던 기술들을 바탕으로 침하하 사이트를 클론 코딩하는 프로젝트를 진행하기 위해 관련 내용을 정리한다.
사용할 스킬
Core
- 타입스크립트 / React(Next.js)
최근 Next.js 14버전이 릴리즈 되어 14버전의 app router 기반으로 프로젝트를 세팅한다.
상태 관리
- Recoil, React Query(서버 상태)
프로젝트의 전역상태는 Recoil, 서버상태는 React Query 를 사용하여 관리한다.
Mocking
- MSW
당장 백엔드 환경이 없으므로 MSW을 사용하여 mocking 환경을 구성한다.
구현 범위
침하하 사이트 아래와 같은 화면 및 기능을 제공한다.
- 홈
- 회원가입
- 로그인
- 게시판
- 게시글
- 글쓰기
- 글수정
- 마이페이지
- 알림
- 신고 건의
이번 토이 프로젝트에서는 공부했던 기술들을 바탕으로 먼저 간단한 CRUD 기능에 해당되는 홈, 게시판, 게시글, 글쓰기, 글수정, 글삭제 화면 및 기능을 우선 진행한다.
위 화면 및 기능을 우선 구현 후 회원 가입과 로그인 기능을 구현한다.
알림, 마이 페이지, 신고 건의 화면은 화면만 다를뿐 CRUD 기능에 벗어나지 않아 따로 진행하진 않는다.