웹 풀사이클 데브코스 TIL [Day 82] - Web Editor 프로젝트 FE 설계

JaeKyung Hwang·2024년 3월 22일

프로그래머스 웹 풀사이클 데브코스 TIL

목록 보기

80/85

2024.03.22(금)

🌿패키지 구조

.
└── src/
		├── index.tsx      # 스크립트 진입점 파일
		├── App.tsx        # 메인 앱 컴포넌트
		├── App.css        # 메인 스타일시트
		├── router.tsx     # 라우터 파일
		├── settings.ts    # 환경변수 파일
		├── pages/         # 페이지 컴포넌트 모음
		│   ├── Index.tsx
		│   ├── Login.tsx
		│   ├── Join.tsx
		│   ├── Error.tsx
		│   └── notes/
		│       ├── Index.tsx
		│       └── Detail.tsx
		├── components/    # 세부 컴포넌트 모음
		│   ├── LoginForm.tsx
		│   ├── JoinForm.tsx
		│   ├── NoteList.tsx
		│   ├── NoteTitleInput.tsx
		│   ├── NoteContentEditor.tsx
		│   ├── boundaries/
		│   │   ├── AppErrorBoundary.tsx
		│   │   └── RouteErrorBoundary.tsx
		│   └── hocs/
		│       ├── withUnauthenticated.tsx
		│       ├── withAuthenticatedUser.tsx
		│       └── withCurrentNote.tsx
		├── apis/          # API 호출 함수 모음
		│   ├── auth.api.ts
		│   └── notes.api.ts
		├── hooks/         # React Query 상태관리 관련 Hook 모음
		│   ├── useAuth.ts
		│   └── useNotes.ts
		├── types/         # 모델 타입 모음
		├── utils/         # 유틸리티 함수 및 객체 모음
		│   ├── https.ts
		│   └── getStatusFromError.ts
		└── assets/        # 아이콘 및 이미지 모음

CRA template에 존재하는 src 폴더 내 기본 파일 제거
- App.test.tsx
- index.css
- logo.svg
- reportWebVital.ts

🖥️개발 환경 셋업

프로젝트 루트 디렉토리에서

npx create-react-app frontend --template typescript

생성된 frontend 폴더로 이동 후 craco 설치
```
cd frontend
npm i @craco/craco
```

package.json의 scripts field에서 start, build, test를 craco를 통해 할 수 있도록 수정

{
	…,
  "scripts": {
    "start": "**craco** start",
    "build": "**craco** build",
    "test": "**craco** test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },
	…
}

경로 별칭 사용을 위한 플러그인 설치
```
npm i tsconfig-paths-webpack-plugin
```

tsconfig.json의 compilerOptions field 및 exclude field 설정

{
  "compilerOptions": {
	  …,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  …,
  "exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"]
}

craco.config.js 파일 생성 및 다음과 같이 설정

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

/** @type {import('webpack').Configuration} */
module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    },
  ],
};

확인 작업

실행
```
npm start
```
빌드 및 테스트
```
npm run build && serve -s build
```
기본 테스트
```
CI=true npm test
```

백엔드 설정 (추후 배포 시 다시 자세히 알아볼 예정)
- REACT_APP_API_BASE_URL 환경 변수에 지정, 전달
  - Backend는 로컬 개발 환경에서 "npm start" 에 의하여 실행한 상태를 가정
  - http://localhost:3031를 .env 파일에 저장하여 적용
- ⚠️ Production build에는 적용되지 않음
  - Production build를 실행하는 시나리오에서의 환경 변수 전달은 별도의 방법을 이용
    - frontend/build/env.js 파일을 컨테이너 빌드 타임에 생성
    - DOM 의 window.ENV 객체에 "REACT_APP" 으로 시작하는 환경 변수들을 담고
    - 이 중 "REACT_APP_API_BASE_URL" 환경변수 내용으로 backend endpoint를 동적으로 결정