개발 프로젝트의 폴더 구조는 프로젝트의 종류와 요구사항에 따라 다를 수 있지만, 일반적으로 사용되는 폴더와 그 설명을 더 추가하겠습니다.
### 주요 폴더 및 설명
1. **src (Source)**
- **components**: 재사용 가능한 UI 컴포넌트.
- **containers**: 상태를 관리하고 컴포넌트를 감싸는 컨테이너 컴포넌트.
- **pages**: 라우팅되는 페이지 컴포넌트.
- **services**: API 호출, 비즈니스 로직, 데이터 처리 등.
- **utils**: 유틸리티 함수, 헬퍼 함수 등.
- **models**: 데이터 모델이나 타입 정의.
- **controllers**: (백엔드의 경우) 요청을 처리하고 응답을 반환하는 컨트롤러.
- **routes**: (백엔드의 경우) 라우팅 설정.
- **hooks**: React 커스텀 훅.
- **contexts**: React Context API 관련 파일.
- **store**: Redux 또는 다른 상태 관리 라이브러리 관련 파일.
- **styles**: CSS, SCSS 또는 스타일링 파일.
- **assets**: 이미지, 폰트, 아이콘 등.
2. **public**
- **images**: 정적 이미지 파일.
- **styles**: 정적 CSS 파일.
- **scripts**: 정적 자바스크립트 파일.
3. **config**
- **environment**: 환경별 설정 파일 (예: development, production).
- **database**: 데이터베이스 설정 파일.
- **webpack**: Webpack 설정 파일.
- **jest**: Jest 설정 파일.
4. **tests**
- **unit**: 단위 테스트 코드.
- **integration**: 통합 테스트 코드.
- **e2e**: 엔드 투 엔드 테스트 코드.
5. **build**
- **설명**: 빌드된 파일을 포함하는 디렉토리입니다. 일반적으로 배포 가능한 파일들이 포함됩니다.
6. **node_modules**
- **설명**: 프로젝트의 npm 패키지들이 설치되는 디렉토리입니다. 이 디렉토리는 일반적으로 버전 관리 시스템에서 제외됩니다.
7. **logs**
- **설명**: 애플리케이션의 로그 파일을 포함하는 디렉토리입니다.
8. **.github**
- **workflows**: GitHub Actions 워크플로우 파일.
9. **.vscode**
- **설명**: Visual Studio Code 설정 파일을 포함하는 디렉토리입니다. 프로젝트별 편집기 설정을 관리할 수 있습니다.
10. **constants**
- **설명**: 애플리케이션에서 사용되는 상수를 포함하는 디렉토리입니다.
- **예제**: API URL, 액션 타입, 설정 값 등.
11. **middlewares**
- **설명**: (백엔드의 경우) Express 등의 미들웨어를 포함하는 디렉토리입니다.
12. **interfaces**
- **설명**: TypeScript 인터페이스를 포함하는 디렉토리입니다. 데이터 구조와 타입 정의를 위한 파일들을 포함합니다.
13. **enums**
- **설명**: 열거형 타입을 정의하는 파일을 포함하는 디렉토리입니다.
14. **locales**
- **설명**: 다국어 지원을 위한 번역 파일을 포함하는 디렉토리입니다.
### 예제 폴더 구조
```
my-project/
├── src/
│ ├── assets/
│ │ ├── fonts/
│ │ └── icons/
│ ├── components/
│ ├── containers/
│ ├── pages/
│ ├── services/
│ ├── utils/
│ ├── models/
│ ├── controllers/
│ ├── routes/
│ ├── hooks/
│ ├── contexts/
│ ├── store/
│ ├── styles/
│ ├── constants/
│ ├── middlewares/
│ ├── interfaces/
│ ├── enums/
│ └── locales/
├── public/
│ ├── images/
│ ├── styles/
│ └── scripts/
├── config/
│ ├── environment/
│ ├── database/
│ ├── webpack/
│ └── jest/
├── tests/
│ ├── unit/
│ ├── integration/
│ └── e2e/
├── build/
├── node_modules/
├── logs/
├── .github/
│ └── workflows/
├── .vscode/
├── package.json
├── tsconfig.json
├── README.md
└── .gitignore
```
이 폴더 구조는 프로젝트의 복잡성과 요구사항에 따라 조정될 수 있습니다. 예를 들어, 작은 프로젝트는 단순화된 구조를 가질 수 있으며, 큰 프로젝트는 더 세분화된 디렉토리 구조를 필요로 할 수 있습니다.
네, CSS, SCSS 또는 스타일링 파일들은 `public` 디렉토리와 `src` 디렉토리 모두에 존재할 수 있습니다. 각각의 위치는 다소 다른 목적을 가지고 있습니다.
### `public/styles` 디렉토리
- **목적**: 정적 파일을 저장합니다.
- **용도**:
- 이 디렉토리에 있는 파일들은 그대로 서비스되고, 서버에 의해 변환이나 번들이 필요하지 않습니다.
- HTML 파일에서 직접 참조할 수 있습니다.
- **예시**: 초기 HTML 파일이 로드될 때 포함되는 CSS 파일들.
### `src/styles` 디렉토리
- **목적**: 프로젝트의 소스 코드와 함께 관리되는 스타일 파일을 저장합니다.
- **용도**:
- CSS 전처리기(SCSS, Less 등)를 사용하는 경우, 소스 코드와 함께 빌드 프로세스에 포함됩니다.
- JavaScript 또는 TypeScript 파일에서 import하여 사용할 수 있습니다.
- **예시**: React 컴포넌트에 scoped 스타일을 적용하거나, CSS 모듈을 사용하는 경우.
### 예제 프로젝트 구조
#### `public/styles` 디렉토리에 스타일링 파일을 두는 경우
```html
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
```
#### `src/styles` 디렉토리에 스타일링 파일을 두는 경우
```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/main.scss'; // SCSS 파일을 import
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
```
### 결론
- **`public/styles`**: 정적 스타일 파일. 빌드 프로세스의 영향을 받지 않고 그대로 제공됩니다.
- **`src/styles`**: 소스 코드와 함께 관리되는 스타일 파일. 빌드 과정에서 번들링, 변환 또는 최적화됩니다.
대부분의 경우, 스타일 파일은 `src/styles`에 위치하며, 이는 컴포넌트 기반의 스타일링이나 CSS 전처리기 사용 등 더 많은 유연성을 제공합니다. `public/styles`는 정적 리소스를 관리할 때 사용되며, 주로 초기 로딩 스타일링에 사용됩니다.
'부가정보' 카테고리의 다른 글
| TIL 24.06.19 ! 작업중 에러처리 튜터님 설명 (0) | 2024.06.19 |
|---|---|
| 더미 테스트 할때 체크해야 하는것 (0) | 2024.06.16 |
| import 한 파일을 한번만 통으로 가져올때 (0) | 2024.05.28 |
| insomnia 대신 사용할만한 프로그램 thunderclient (0) | 2024.05.28 |
| npm과 yarn 2가지를 같이 사용하면 안되는 이유 (0) | 2024.05.28 |
