개발 환경 세팅(10.28) 고려사항

[KingNono1030]

프로젝트 구조 및 폴더링

• 폴더 구조 설정: 공용 컴포넌트, 페이지, 훅, 상태 관리 등 주요 파일을 용도에 따라 명확히 구분

📂 src
├── 📂 app                # Next.js의 App Router 폴더
│   ├── 📂 (routes)       # 라우트 그룹
│   │   ├── 📂 home       # 메인 페이지 (루트 페이지)
│   │   │   └── page.tsx
│   │   ├── 📂 about      # 서브 페이지 예시
│   │   │   └── page.tsx
│   │   └── layout.tsx    # 전체 앱의 레이아웃
│   └── 📂 api            # API 라우트 (예: Next.js 서버 구성 요소)
│       └── user
│           └── route.ts
├── 📂 components         # 공용 컴포넌트
│   ├── 📂 Button
│   │   └── Button.tsx
│   │   └── Button.test.tsx
│   └── 📂 Modal
│       └── Modal.tsx
│       └── Modal.test.tsx
├── 📂 hooks              # 커스텀 훅
│   └── useFetch.ts
├── 📂 state              # 상태 관리
│   └── userStore.ts
├── 📂 utils              # 유틸리티 함수
│   └── formatDate.ts
├── 📂 styles             # 전역 스타일링 파일
│   └── globals.css
└── 📂 types              # 타입 정의
    └── user.ts

📂 src
├── 📂 app                # Next.js의 App Router 폴더
│   ├── 📂 (routes)       # 라우트 그룹
│   │   ├── 📂 home       # 메인 페이지 (루트 페이지)
│   │   │   └── page.tsx
│   │   ├── 📂 about      # 서브 페이지 예시
│   │   │   └── page.tsx
│   │   └── layout.tsx    # 전체 앱의 레이아웃
│   └── 📂 api            # API 라우트 (예: Next.js 서버 구성 요소)
│       └── user
│           └── route.ts
├── 📂 components         # 공용 컴포넌트
│   ├── 📂 Button
│   │   └── Button.tsx
│   │   └── Button.test.tsx
│   └── 📂 Modal
│       └── Modal.tsx
│       └── Modal.test.tsx
├── 📂 hooks              # 커스텀 훅
│   └── useFetch.ts
├── 📂 state              # 상태 관리
│   └── userStore.ts
├── 📂 utils              # 유틸리티 함수
│   └── formatDate.ts
├── 📂 styles             # 전역 스타일링 파일
│   └── globals.css
└── 📂 types              # 타입 정의
    └── user.ts

• 컴포넌트 구조 정의: 재사용 가능한 공통 컴포넌트와 페이지별 컴포넌트를 미리 나누어 정의

코드 스타일 및 규칙 설정

• 코드 스타일 통일: ESLint와 Prettier를 함께 설정해 코드 스타일을 통일. Airbnb, Standard, Google 등 규칙 중 하나를 선택

AirBnb

• 컨벤션 가이드 작성: 커밋 메시지, 파일 및 폴더 이름 규칙 등을 명확히 정의하고, 이를 팀과 공유. 예시) 커밋 메시지에 Gitmoji를 추가하거나, 메시지 앞에 작업 타입을 붙이는 방식.

Git 워크플로우 전략

• 브랜치 전략: main, develop, feature/기능명 브랜치를 활용한 Git 전략을 미리 정하고, 병합 시 PR 리뷰를 필수로 하는 규칙을 정해 협업의 일관성을 유지.

main ← dev ← feature/기능명

브랜치 타입	설명	예시
feature	새로운 기능 개발	feature/user-profile
fix	버그 수정	fix/validation-error
hotfix	긴급 수정	hotfix/logout-issue
refactor	코드 리팩토링	refactor/update-logic
chore	설정 수정, 패키지 업데이트 등	chore/update-eslint
docs	문서 작업	docs/update-readme

• GitHub Discussions 활용: 코드 리뷰, 버그 수정, 기능 추가 등 커뮤니케이션을 GitHub Discussions에 기록해 협업의 흐름을 문서화.

상태 관리 설정

• Zustand 세팅: 각 상태의 역할을 명확히 구분하여 전역 상태와 로컬 상태를 적절히 관리. 전역 상태는 인증 상태, 사용자 정보 등을 담고, 컴포넌트 간 독립적인 상태는 컴포넌트 내부 상태나 React Hook Form으로 처리.

Persist 미들웨어: 상태를 로컬 스토리지 등에 저장하여 새로고침 후에도 상태를 유지하려면 zustand/middleware의 persist를 사용할 수 있습니다.

환경 변수 관리

• 환경 변수 세팅: .env 파일을 활용해 API 키, 서버 URL 등 민감한 정보를 관리. .env.example 파일을 생성하여 개발 환경에 필요한 변수들을 명시.

패키지 설치 및 스크립트 설정

• 필수 패키지 설치: 프로젝트에서 사용할 주요 패키지 (React Hook Form, Tailwind CSS, Zustand 등)를 설치하고 기본 설정을 완료.
• 스크립트 설정: package.json에 개발 및 빌드 스크립트를 추가하여, npm run dev, npm run build 등의 명령어로 쉽게 프로젝트를 실행하고 배포 가능.

CI/CD 설정

• 자동화된 테스트와 배포: GitHub Actions 또는 Vercel을 사용해 커밋 시 자동 빌드 및 테스트가 실행되도록 설정하여 코드 안정성을 확보할 수 있습니다.
• 배포 환경 세팅: Vercel 또는 Netlify에 프로젝트를 연결해, main 브랜치에 머지될 때마다 자동으로 배포되도록 설정하면, 변경 사항을 빠르게 확인할 수 있습니다.

개발 서버 및 테스트 환경 설정

• 로컬 개발 서버 세팅: 서버와 프론트엔드 간 로컬에서 API 요청을 테스트할 수 있도록 proxy 설정을 추가해 두면 유용.
• 테스트 라이브러리 설정: Jest와 React Testing Library를 설치해 단위 테스트와 통합 테스트가 가능하도록 미리 세팅하면 테스트 환경 구축이 용이.