🌐 사이드 프로젝트

---

f1 - format document : vscode에서 코드 포매팅하기

보통 어떤식으로 디렉토리를 구성해? 그냥 client 폴더에 박으면 이상해질 것 같은데

디렉토리 구조는 프로젝트의 확장성과 유지보수성을 고려하여 명확하게 구성하는 것이 중요해. 일반적으로 React 프로젝트에서는 다음과 같은 디렉토리 구조를 사용하는 것이 권장돼:

client/
  ├── public/                // 정적 파일들 (favicon, HTML 등)
  ├── src/                   // 애플리케이션의 모든 소스 코드
  │   ├── assets/            // 이미지, 폰트와 같은 정적 리소스
  │   │   └── images/
  │   │       └── logo.png
  │   ├── components/        // 재사용 가능한 컴포넌트
  │   │   └── LoginPage/
  │   │       ├── LoginPage.js
  │   │       └── LoginPage.css
  │   ├── App.js             // 루트 컴포넌트
  │   ├── index.js           // 진입점 파일
  │   └── ... 기타 필요한 파일들
  ├── package.json           // 의존성 및 설정 파일
  └── ... 기타 프로젝트 설정 파일들

src/ 디렉토리: 소스 코드가 위치하는 최상위 폴더로, 모든 애플리케이션의 코드를 포함해.

components/ 디렉토리: 재사용 가능한 컴포넌트를 넣어두는 폴더로, 이곳에 로그인 페이지와 같은 컴포넌트를 저장해. 각 컴포넌트를 별도의 폴더로 나누어 관련 파일(.js, .css, 이미지 등)을 한 곳에 모아두는 방식으로 관리하는 것이 좋아.

예를 들어, LoginPage는 하나의 폴더로 나누어 LoginPage.js와 LoginPage.css 파일을 포함하게 해. 이러면 유지보수가 쉬워지고 각 컴포넌트에 관련된 파일이 한 곳에 모이게 돼.
assets/ 디렉토리: 정적 리소스들(이미지, 폰트 등)을 저장하는 폴더야. 여기서는 images/ 폴더 안에 로고와 같은 이미지를 넣어두면 좋아.

예를 들어, logo.png 파일은 src/assets/images/logo.png에 위치하게 할 수 있어.