Folder Structure

public
src
src/assets
src/components
src/pages
src/resources
src/shared
src/App.tsx
src/main.tsx
src/vite-env.d.ts
나머지

├── root
│   ├── public
│   ├── src
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   ├── resources
│   │   ├── shared
│   │   │   ├── firebase
│   │   │   ├── types
│   │   │   └── util
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   ├── README.md
│   ├── eslint.config.js
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   └── vite.config.ts

public 폴더

• robots.txt 와 같이 소스 코드에서 참조되지 않는 에셋 저장
• URL을 얻기 위해 굳이 import 할 필요 없는 에셋 저장

src 폴더

asset 폴더

• 코드에 사용될 에셋 저장

components 폴더

• 앱 component 저장

pages 폴더

• 앱 page component 저장

resources 폴더

• 코드 내 하드코딩이 필요한 데이터 저장

shared 폴더

• 여러 component에서 사용되는 코드들 저장
• shared/firebase: firebase
• shared/types: type 저장
• shared/util: 유틸 함수 저장

App.tsx

• 앱 메인 진입점

main.tsx

• root에서 Wrapper 필요할시 해당 파일에서 감싸기

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);
// StrictMode Wrapper

vite-env.d.ts

• vite에서 build시 확인하는 global types

나머지

• 이하 생략 ...