[Next.js] Next.js 협업 시 기획과 기술적 의사 결정

---

Next.js로 협업을 시작할 때의 단계와 고려할 사항을 살펴보자

---

1. 기획

• 기획 단계에서는 아이디어 회의, 역할 분담, 그리고 컨벤션 수립을 해야한다.
• 또한, API 문서 작성과 프로젝트 진척도를 관리해야한다. [참고할만한 노션↗️]

• 아이디어 회의
• 컨벤션 수립
  • [React Project Convention↗]
  • [Github Convention↗]
• 역할 분담
• API 문서 작성
• 프로젝트 진척도 관리 규정 수립
  • 일일 회의를 통해 프로젝트 진행 상황을 체크하는 것이 좋다.

예시: TodoList 관리 웹사이트 기획

① 주제: 동적 TodoList를 유저 별로 관리하는 홈페이지

② 주요 기능

• 페이지 구성: 메인 페이지, 투두 작성 페이지, 마이 투두 페이지
• 메인 페이지: 현재 존재하는 모든 TodoList가 보여짐
• TodoList 정보: 각 User의 이름이 적혀 있음
• TodoList 작성: 로그인한 유저만 가능
• 내 TodoList 페이지: 로그인한 유저만 접근 가능
• 회원가입 및 로그인: 로그인한 경우 메인 페이지로 Redirect
• 다크 모드: Next UI와 Zustand를 활용하여 구현

➡️ 페이지 권한 구분:

• 로그인 필수: 투두 작성, 상세보기
• 로그인 선택: 메인 페이지
• 로그인 금지: 로그인, 회원가입 페이지

2. 기술적 의사 결정

• 기술 스택: 각종 라이브러리는 어떤 것을 사용할 것이며, 그 이유는 무엇인지 정리
• 외부 API 사용: 프로젝트에서 사용할 API를 정리하고, 어떻게 사용할지 정의

3. 프로젝트 셋업

만약, Next.js로 인증/인가가 들어간 프로젝트를 기획하고 있다면, [Next.js에서 NextAuth를 사용한 인증 구현하기↗️] 포스팅을 참고하여 프로젝트의 구조를 잡자.

• git
  • 공동 세팅
  • 기초 틀 다 같이 세팅
  • 브랜치 분기
    
    
• 프로젝트 셋업
  • Next.js
    
    
• 각종 라이브러리 세팅
  • Client State 관리 : RTK, Zustand, Recoil
  • Server State 관리 : React Query, RTK Query, SWR
  • 디자인(UI) : Next UI, Tailwind CSS
  • 인증인가 : Next Auth