개발을 시작하게 되면 프로젝트 폴더 구조를 어떻게 가져가야 할지 한 번씩은 생각해 보게 되는 부분인 것 같다. 프레임워크 또는 라이브러리를 사용하게 되면 자동으로 폴더 구조가 만들어지는데 그대로 사용해도 무방 할수도 있다. 하지만 프로젝트 규모와 성격에 맞게 수정하지 않는다면 유지 보수할 때나 새로운 인원이 투입 되었을 때 의외의 수고를 겪을 수 있다. 새 프로젝트를 진행할 때면 항상 효율적인 구조는 무엇일지 한번씩은 고민해 보는 것이 좋겠다.
사람마다 생각하는 방식도 다르고 프로젝트 성격도 다양하다. 그래서 완벽한 법칙은 없지만 고려 할 만한 일반적인 접근법들은 존재한다.
기본적으로 분류해 볼 수 있는 두가지 방법은 아래와 같다.
- 파일의 기능이나 라우트에 의한 분류
- 파일 유형에 의한 분류
// CSS, JS 파일을 기능 또는 라우트로 분류 하는 방법
├─ common│ ├─ Table.js│ └─ Table.css├─ about│ ├─ index.js│ ├─ About.js│ └─ About.css└─ contact ├─ index.js ├─ Contact.js └─ Contact.css
// 파일 유형에 따라 비슷한 파일끼리 묶어주는 방법
├─ api│ ├─ AboutAPI.js│ ├─ ContactAPI.js│ ├─ APIUtils.js│ └─ APIUtils.test.js└─ components ├─ About.js ├─ About.css ├─ Contact.js └─ Contact.css
위 두가지 방법을 혼합 하거나 추가로 폴더 구조를 확장해서 프로젝트 성격에 맞게 구성해 볼수 있겠다.
주의할 점은 너무 깊은 폴더 구조의 중첩은 피하자. 깊은 폴더 구조가 형성되면 파일을 임포트 하거나 파일 위치를 이동하게 될때면 어려움을 격을 수 있으니 3단계 이상은 신중하게 생각하도록 하자.
아래 예시는 개인적인 의견이 반영된 폴더 구조로 참고만 하는 것이 좋겠다.크게 Script와 Style을 구분하고 기능, 성격별로 나누어 보았다.
Folder Structure Example
.├─ README.md├─ webpack.config.js├─ package.json├─ ...└─ src ├─ scripts └─ styles
scripts
scripts├─ index.js├─ app.js├─ components│ ├─ common│ └─ ...├─ views│ ├─ main.js│ └─ ...├─ store│ ├─ auth│ ├─ index.js│ └─ ...├─ api│ ├─ index.js│ └─ ...├─ utils│ ├─ filters.js│ └─ ...├─ plugins│ ├─ Chart.js│ └─ ...└─ translations ├─ index.js ├─ en.json └─ ...
styles
styles├─ main.scss├─ plugins├─ layout├─ modules├─ pages├─ helpers│ ├─ functions.scss│ ├─ variables.scss│ ├─ mixins.scss│ └─ ...└─ base ├─ base.scss ├─ global.scss ├─ reset.scss ├─ typography.scss └─ ...
