<aside> 💻

setup/initial 브랜치 작업 개요

1. 프로젝트 초기 세팅

• Git Repository 생성 및 로컬 세팅
• Vite + React + TypeScript 프로젝트 생성
• 필요한 패키지 설치

npm install @tanstack/react-query zustand axios react-router-dom @sentry/react
npm install -D @types/node tailwindcss postcss autoprefixer jest @types/jest @testing-library/react @testing-library/jest-dom

2. 프로젝트 구조 세팅

• 불필요한 파일 삭제 (react.svg, vite.svg, App.css)
• 기본 스타일 설정 (index.css)
• 폴더 구조 생성

src/
├── components/     # 재사용 가능한 컴포넌트들
│   ├── auth/      # 인증 관련 컴포넌트
│   └── common/    # 공통 컴포넌트
├── pages/         # 페이지 컴포넌트들
├── services/      # API 관련 로직
├── store/         # Zustand 스토어
├── types/         # TypeScript 타입 정의
├── hooks/         # Custom hooks
└── utils/         # 유틸리티 함수들

3. 개발 환경 설정

TypeScript 설정

• tsconfig 파일 분리 (tsconfig.json, tsconfig.app.json, tsconfig.node.json)
• 절대 경로 설정 (@/ alias)
  • vite.config.ts path alias 설정
  • tsconfig paths 설정

Tailwind CSS 설정

• tailwind.config.js 설정
• postcss.config.js 설정

4. 기능별 기본 구조 구현

라우팅 설정

• 기본 페이지 컴포넌트 생성 (Login, Register, Profile)
• App.tsx에 React Router 설정
• 기본 라우트 설정 ('/login', '/register', '/profile')

API 설정

• axios 인스턴스 생성
• 인터셉터 설정 (request, response)
• API 응답 타입 정의

상태 관리 설정

• React Query 설정
  • QueryClient 설정
  • Provider 추가 (main.tsx)
  • 기본 query hooks 구조 생성
• Zustand 설정
  • 인증 관련 타입 정의 (User, AuthState)
  • Auth 스토어 생성
  • 기본 상태와 액션 정의 (setUser, logout)

공통 컴포넌트 구현

• Button 컴포넌트 (variant, size 옵션)
• Input 컴포넌트 (label, error 처리) </aside>

프로젝트 세팅 상세 가이드

1. GitHub Repository 생성

1. Repository name: fe-onboarding-task
2. Description: React/TypeScript 기반의 JWT 인증 시스템 구현과 Jest를 활용한 테스트 코드 작성, Sentry 에러 모니터링 구축
3. Add README.md 체크
4. Public 설정

2. 로컬 프로젝트 세팅

1. 바탕화면에 fe-onboarding-task 폴더 생성
2. git clone 명령어 실행

git clone <https://github.com/sseulnim/fe-onboarding-task.git> .

3. Vite 프로젝트 생성

npm create vite@latest .

• Framework: React
• Variant: TypeScript + SWC 선택

4. 필요한 패키지 설치

# 기본 패키지 설치
npm install

# 추가 패키지 설치
npm install @tanstack/react-query# API 통신 상태 관리
npm install zustand# 전역 상태 관리
npm install axios# API 통신
npm install react-router-dom# 라우팅
npm install @sentry/react# 에러 모니터링# 개발 의존성 패키지 설치
npm install -D @types/node
npm install -D tailwindcss postcss autoprefixer
npm install -D jest @types/jest @testing-library/react @testing-library/jest-dom

5. 프로젝트 구조 정리

1. 불필요한 파일 삭제

- src/assets/react.svg
- public/vite.svg
- src/App.css