디렉토리 구조

부트캠프 프로젝트에서 가장 많은 도움을 받은 부분이면서, 현재도 가장 난감한 부분중 하나가 프로젝트 구조를 만드는 것이다. 물론 여기에는 컴포넌트를 나누는 디자인 패턴과 각 파일을 어떤 기준으로 나눌 것이냐는 부분도 있지만, 프로젝트를 하면서 가장 처음 마주하는 부분이 디렉토리 구조이다. 다른 개발자분들의 각자 기준이 명확하고 다양한 부분이지만, 내가 프로젝트를 파악하는 기준을 세우면, 단순한 구조 이상의 역할을 할 것이다.

Bulletproof

src
|
+-- assets            # assets folder can contain all the static files such as images, fonts, etc.
|
+-- components        # shared components used across the entire application
|
+-- config            # all the global configuration, env variables etc. get exported from here and used in the app
|
+-- features          # feature based modules
|
+-- hooks             # shared hooks used across the entire application
|
+-- lib               # re-exporting different libraries preconfigured for the application
|
+-- providers         # all of the application providers
|
+-- routes            # routes configuration
|
+-- stores            # global state stores
|
+-- test              # test utilities and mock server
|
+-- types             # base types used across the application
|
+-- utils             # shared utility functions

bulletproof by alan2207

React 프로젝트의 경우 대부분의 파일과 코드가 src폴더 안에서 다뤄진다. alan2207님의 추천 하위 폴더들을 살펴보면 다음과 같다.

• assets: 정적자원들의 집합소
• components: 앱에 전반적으로 쓰이는 컴포넌트 디렉토리
• config: 전역에서 사용되는 값, 환경변수 등을 저장하는 디렉토리
• features: 기능 단위로 작성된 모듈의 집합소
• hooks: 앱에 전반적으로 쓰이는 Hook 디렉토리
• lib: 미리 구성한 상태에서 호출되는 라이브러리를 저장하는 디렉토리
• providers: 앱에 사용되는 모든 공급자(ex. BrowserRouter, Style Provider)의 집합소
• routes: route 모음
• stores: 전역 상태 저장소
• test: 테스트 도구 및 목데이터 서버
• types: 앱에 사용되는 타입 모음
• utils: 앱에 사용되는 유용한 도구 모듈을 저장하는 디렉토리

src/features/awesome-feature
|
+-- api         # exported API request declarations and api hooks related to a specific feature
|
+-- assets      # assets folder can contain all the static files for a specific feature
|
+-- components  # components scoped to a specific feature
|
+-- hooks       # hooks scoped to a specific feature
|
+-- routes      # route components for a specific feature pages
|
+-- stores      # state stores for a specific feature
|
+-- types       # typescript types for TS specific feature domain
|
+-- utils       # utility functions for a specific feature
|
+-- index.ts    # entry point for the feature, it should serve as the public API of the given feature and exports everything that should be used outside the feature

src 바로 아래 있는 폴더 중에도 feature폴더의 경우 각 기능에 필요한 내용을 모아놓기 때문에, 비교적 더 복잡하고 규모가 크다.

• api: 기능과 관련한 API 요청
• assets
• components
• hooks
• routes
• stores
• types
• utils
• index.ts: 기능과 관련하여 필요한 모든 코드, 파일을 내보내는 코드
  assets, components, hooks, routes, stores, types, utils의 경우 src 안에도 생성된 폴더이다. 이는, 전역적으로 쓰이는 코드, 파일들과 특정 기능에만 쓰이는 것들을 따로 관리하기 위함이다.

마무리

굶어 죽는 디렉토리와 배터져 죽는 디렉토리가 없기를..