[TIL] 20240704 - 웹 기반 문서 편집기 제작 프로젝트(3)

FE 구조 설계서

---

• 개요

• 패키지 구조

  • Page Components

  • (Smaller) Components

  • API 함수

  • React Query Hooks

  • Utility

🧊 패키지 구조

디렉토리 : /src/pages

[Index.tsx]

• 경로 : “/”
• 내용 : 메인 랜딩 페이지

[Login.tsx]

• 경로 : “/login”
• 내용 : 로그인 페이지

[Error.tsx]

• 경로 : “/error”
• 내용 : 에러 페이지 (404, 401 등)
  
  

디렉토리 : /src/components

[NoteList.tsx]

• 내용 : 사용자가 작성한 노트의 목록
• 역할 : 노트를 클릭하여 해당 노트를 상세조회하거나 편집하는 페이지로 이동
  
  

디렉토리 : /src/utils

[http.ts]

• 내용 : Axios 클라이언트
• 역할 : REST API의 HTTP 요청을 위한 Axios 클라이언트 인스턴스 제공

개발 환경 셋업

---

React App 생성

npx create-react-app frontend --template typescript

Craco(Create-React-App Configuration Override) 설정

• Craco 설치
• Webpack plugin 설치 및 설정
• 컴파일 환경 및 서비스 스크립트 설정

npm i @craco/craco
npm i tsconfig-paths-webpack-plugin
npm i react-router-dom @tanstack/react-query styled-components open-color

• package.json

"scripts": {
	"start": "craco start"
	"build": "craco build"
	"test": "craco test"
}

환경설정

• .env 파일에 API base URL 설정

🧊 백엔드 설정

REACT_APP_API_BASE_URL 환경 변수에 지정, 전달

• http:localhost:3031
• .env 파일에 저장하여 사용