프론트엔드 코드 베이스에는 TypeScript와 함께 React를 사용합니다.

1. Build Tool : Vite - Yarn Build
2. Language : TypeScript
3. SPA : React
4. Styling : Emotion/Styled
5. Routing : React Router v6
6. 상태 관리 : Redux Tool Kit - RTK Query
7. 배포 : AWS / Git Actions
8. optional? : Jest TDD / StoryBook

<aside> 💡

React로 사용자와 상호작용이 많은 웹 페이지를 효율적으로 구현하고 관리합니다.

</aside>

<aside> 💡 Emotion 으로 스타일을 관리했습니다. 반복되는 스타일 컴포넌트를 재활용하고, props에 따른 스타일 변경에 용이합니다.

</aside>

<aside> 💡

Redux Toolkit / Query 를 활용하여 비동기 관련 로직과 전역 상태를 관리했습니다. API 응답 데이터를 캐싱함으로써 서버 통신 비용을 줄일 수 있습니다.

</aside>

<aside> 💡 Typescript를 사용해 빌드 이전 단계에서 오류를 미리 찾아, 코드 안정성을 높였습니다.

</aside>

폴더 구조 (Directory)

├─ src
│  ├─ api
│  ├─ assets
│  │  └─ esc-logo.svg
│  ├─ components
│  │  └─ commons
│  │  │  ├─ atoms
│  │  │  │  ├─ Button.tsx
│  │  │  │  ├─ Label.tsx
│  │  │  │  ├─ Title.tsx
│  │  │  │  └─ Input.tsx
│  │  │  └─ Responsive
│  │  └─ Header
│  │     └─ Header.tsx
│  ├─ constants
│  ├─ hooks
│  ├─ lib
│  │  ├─ utils
│  │  │  └─ cookies.ts
│  │  └─ styles
│  │     └─ palette.ts	
│  ├─ pages
│  │  └─ HomePage.tsx
│  ├─ routes
│  │  ├─ PrivateRoutes.tsx
│  │  └─ Layout.tsx
│  ├─ store
│  │  ├─ slice
│  │  │  ├─ authSlice.ts
│  │  │  └─ stadium.ts
│  │  ├─ store.ts
│  │  └─ types.ts
│  ├─ App.test.tsx
│  ├─ App.tsx
│  ├─ main.ts
└─ tsconfig.json
└─ package.json

⌨️ 코드 컨벤션(Code Convention)