폴더 구조 설계

├─ src
│  └─ app
│     ├─ app.module.ts
│     ├─ constants
│     ├─ modules
│     │  └─ feature
│     │     ├─ feature.module.ts
│     │     ├─ feature.page.ts
│     │     ├─ feature.page.html
│     │     ├─ pipes
│     │     ├─ directives
│     │     ├─ shared
│     │     │  ├─ feature.helper.ts
│     │     │  ├─ feature.state.ts
│     │     │  └─ child.state.ts
│     │     └─ components
│     │        ├─ child.ts
│     │        ├─ child.html
│     │        ├─ child2
│     │        ├─ child2.ts
│     │        └─ child2.html
│     ├─ core
│     │  ├─ core.module.ts
│     │  ├─ apis
│     │  ├─ guards
│     │  ├─ helpers
│     │  └─ states
│     └─ shared
│        ├─ shared.module.ts
│        ├─ components
│        ├─ directives
│        └─ pipes

app.module.ts

루프 모듈을 정의하는 파일이다.

constants

상수를 포함하는 디렉토리이다.

modules

FeatureModule을 포함하는 디렉토리이다. FeatureModule은 기능단위의 모듈을 정의하며, 기능은 페이지 단위, 독립적으로 동작하는 팝업 단위가 될 수 있다.

modules/feature/shared

FeatureModule 내에서 두개 이상의 컴포넌트에서 사용할 서비스 파일을 포함한다.

core

CoreModule을 포함하는 디렉토리이다. 싱글턴 객체를 정의하는 파일로 역할에 맞게 각 폴더에 정의해서 사용한다.

shared

SharedModule을 포함하는 디렉토리이다. 재사용할 컴포넌트, 디렉티브, 파이프를 정의한다.

서비스 역할 분리

• filename.api.ts: 백엔드 API의 엔드포인트를 정의하는 파일이다.
• filename.helper.ts: 독립적으로 동작하는 헬퍼를 정의하는 파일이다.
• filename.state.ts: 상태관리를 정의하는 파일이다.
• filename.guard.ts: 가드를 정의하는 파일이다.