Directory Structure

.
├── index.html
├── public
├── src
|   ├── App.tsx // main.tsx를 제외한 최상위 컴포넌트
|   ├── Pages // 라우팅 되는 페이지 디렉토리
|   │   ├── Landing // Page와 직접 연관된 컴포넌트를 모아두는 디렉토리 
|   │   │   └── LandingPage.tsx // 실제 Page 컴포넌트 (작명 컨벤션, ComponentName + Page.tsx)
|   │   └── index.tsx // Pages 폴더 내의 매인 컴포넌트 export를 위한 파일
|   ├── Router.tsx // 라우팅 파일
|   ├── assets // image, svg 등 자료를 모아두는 디렉토리
|   ├── components // 공통 컴포넌트 모음 디렉토리 
|   ├── main.tsx // CRA의 index.tsx와 동일 (촤상위 파일)
|   ├── store // 전역상태관리를 위한 디렉토리
|   ├── style // 공통 스타일링 디렉토리 (globalStyle 등)
|   ├── utils // custom hook, 함수, 상수, api 관리 디렉토리
|   │   ├── apis // api 모음 디렉토리
|   │   │   └── api.ts
|   │   ├── constants // 상수 모음 디렉토리
|   │   │   └── constant.ts
|   │   ├── functions // 함수 모음 디렉토리
|   │   │   └── temp.tsx
|   │   └── hooks // custom hooks 디렉토리
|   │       └── useObserver.tsx
|   └── vite-env.d.ts
└── stories // storybook test 디렉토리

Page Name Convention

ViewComponentName + Page.tsx

ex) MainPage.tsx

React dev mode start 명령어

$ yarn dev

Package.json 내 modules import

$ npm install | npm i | yarn install

필수 extensions

AWS 허용된 포트 목록