웹 기반 문서 편집기 제작 프로젝트

FE 구조 설계서와 상세 설계서

개요

• Main Framework : React.js v18
• State Management Library : TanStack React Query
• Style Library : styled-components
• Dev. Server URL : http;//localhost:3000
• NPM Command : packcage.json

패키지 구조

• Page Components
• (Smaller) Components
• API 함수
• React Query Hooks
• Utility

디렉토리

/src

• index.tsx : 스크립트 진입점 파일
• App.tsx : 메인 앱 컴포넌트
• App.css : 메인 스타일시트
• router.tsx : 라우터 파일
• setting.ts : 환경변수 파일
• pages/ : 페이지 컴포넌트 모음
• components/ : 세부 컴포넌트 모음
• hooks/ : React Query 상태관리 관련 Hook 모음
• apis/ : API호출 함수 모음
• types/ : 모델 타입 ㅗ음
• utils/ : 유틸리티 함수 및 객체 모음
• assets/ : 아이콘 및 이미지 모음

개발 환경 셋업

순서

• React App 생성 (typescript 기반)
• Craco 설정
  1.Craco 설치
  2. Webpack plugin 설치 및 설정
  3. 컴파일 환경 및 서비스 스크립트 설정
• 환경 설정
  .env 파일에 API base URL 설정

백엔드 설정

REACT_APP_API_BASE_URL 환경 변수에 지정, 전달

• Backend 는 로컬 개발 환경에서 "npm start" 에 의하여 실행한 상태를 가정
• 값: http://localhost:3031
• .env 파일에 저장하여 적용

프로덕션 환경변수

• "REACTAPP" 으로 시작하는 셸 환경변수를 window._ENV 객체에 저장
• ${PROJECT_ROOT}/frontend/build/env.js 파일로 생성
• settings.ts 를 통하여 API_BASE_URL 을 import

프론트엔드의 구현

npm install을 통해 다음 라이브러리 설치

• react-router-dom
• @tanstack/react-query
• styled-components
• open-color