기술스택

---

언어: TypeScript

라이브러리: React.js

스타일링: scss Module ⇒ scss 핵심 정리

패키지 매니저: pnpm

라이브러리

---

• react-router-dom: 페이지 라우팅을 위한 라이브러리
• react-hook-form: 비제어 컴포넌트로 폼을 관리하여 성능을 최적화하기 위한 라이브러리
• zod: 폼 입력값 유효성 검증 라이브러리 주로 react-hook-form과 함께 사용
• lucide-react: 여러 아이콘을 쉽게 불러오기 위한 라이브러리
• react-dropzone: 파일 드롭다운을 구현하기 위한 라이브러리
• recharts.js: 차트형식으로 UI로 보여주기 위한 라이브러리
• clsx: className을 여러 개 지정할 때 사용하는 라이브러리
• zustand: 전역 상태관리 라이브러리 ⇒ 핵심 정리 (필수 X)
• tanstack-query: 요청 데이터 캐싱하는데 사용 ⇒ 핵심 정리 (필수 X)
• axios: http요청 보낼 때 사용할건데 fetch로 충분하면 굳이 안써도 될듯 (필수 X)
• framer-motion: 애니메이션 css적용하기에 편리함 (필수 X)
• 지도는 아래 리스트 중에서 결정
  • google map api
  • naver map api
  • leaflet
• 번역 api는 아래 리스트 중에서 결정
  • google translation api
  • papago translation api
  • i18n

폴더 구조

---

 ┣ 📦public
 ┃ ┣ 📂images // 이미지 관리
 ┃ ┗ 📂fonts // 폰트 관리
 ┣ 📦src
 ┃ ┣ 📂components // 컴포넌트 관리
 ┃ ┣ 📂lib // 여러가지 함수, 값 관리
 ┃ ┃ ┣ 📂apis // 요청 관련 함수 관리 ex) 로그인 요청, 게시물 업로드 요청
 ┃ ┃ ┣ 📂constants // 상수 관리
 ┃ ┃ ┣ 📂hooks // 커스텀 훅 관리
 ┃ ┃ ┣ 📂schemas // Form 검증용 스키마 관리
 ┃ ┃ ┣ 📂types // 타입 관리
 ┃ ┃ ┗ 📂utils // 일반 함수 관리
 ┃ ┣ 📂pages // 페이지 관리
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.tsx // 프로젝트 루트 컴포넌트
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.tsx // 프로젝트 루트 컴포넌트
 ┣ 📜.env.local // 환경 변수를 관리하는 파일
 ┣ 📜.gitignore // git에서 제외하기 위한 파일
 ┣ 📜index.html // 루트 html 파일
 ┣ 📜package.json // 현재 프로젝트에 관한 정보와 pnpm을 통해 설치한 모듈들의 의존성을 관리하는 파일
 ┣ 📜pnpm-lock.yaml // pnpm 패키지 잠금 파일
 ┣ 📜tsconfig.json // 각 환경에서 타입스크립트 동작방식에 대한 파일
 ┗ 📜vite.config.json