아키텍처 구성요소 체크리스트

아키텍처를 구성할 때 필요한 요소들에 관한 내용이다. 구조나 설계자마다 폴더명을 작명하는 것이 다르다. 그래서 역할과 폴더 예제를 통해서 기술하겠다.

아키텍처 체크리스트

• 컴파일되지 않은 에셋들을 포함하는 구성요소가 있는가?
• 정적 파일들을 포함하는 구성요소가 있는가?
• 페이지나 컴포넌트에 접근하기 전에 실행할 사용자 정의함수를 정의하는 구성요소가 있는가?
• 테스트 파일들을 포함하는 구성요소가 있는가?
• 라우터를 정의하는 구성요소가 있는가?
• 상태관리를 하는 구성요소가 있는가?
• 외부 라이브러리를 애플리케이션에 사용하도록 연결하는 구성요소가 있는가?
• 상수를 정의하는 구성요소가 있는가?
• 컴포넌트를 포함하는 구성요소가 있는가?
• 컴포넌트 볼륨을 줄일 수 있는 구성요소가 있는가?
• 페이지 단위를 분리할 수 있는 구성요소가 있는가?
• 프로젝트 환경 설정을 포함하는 구성요소가 있는가?

운영

• 서비스 장애 모니터링을 포함하는 구성요소가 있는가?
• 사용률를 기록할 수 있는 구성요소가 있는가?
• 성능 개선 포인트를 찾기 위한 디버깅 전략이 있는가?

사례

Angular와 Nuxt의 아키텍처를 빌딩한 사례이다. 기본적으로 Angular와 Nuxt에서 제공한 기능들이 있다. 하지만 미흡한 부분은 추가적으로 추가작업을 진행했다.

Angular

├─ e2e
│  └─ src
├─ 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.spec.ts
│  │  │        ├─ child2.ts
│  │  │        └─ child2.html
│  │  ├─ core
│  │  │  ├─ core.module.ts
│  │  │  ├─ apis
│  │  │  ├─ guards
│  │  │  ├─ helpers
│  │  │  └─ states
│  │  └─ shared
│  │     ├─ shared.module.ts
│  │     ├─ components
│  │     ├─ directives
│  │     └─ pipes
│  ├─ assets
│  └─ environments

• [assets] 컴파일되지 않은 에셋들을 포함하는 구성요소가 있는가?
• [assets] 정적 파일들을 포함하는 구성요소가 있는가?
• [guards] 페이지나 컴포넌트에 접근하기 전에 실행할 사용자 정의함수를 정의하는 구성요소가 있는가?
• [e2e/src, *.spec.ts] 테스트 파일들을 포함하는 구성요소가 있는가?
• [app.routing.ts] 라우터를 정의하는 구성요소가 있는가?
• [states, *.state.ts] 상태관리를 하는 구성요소가 있는가?
• [*.helper.ts] 외부 라이브러리를 애플리케이션에 사용하도록 연결하는 구성요소가 있는가?
• [constants] 상수를 정의하는 구성요소가 있는가?
• [shared/components, modules] 컴포넌트를 포함하는 구성요소가 있는가?
• [helper, pipe, directive] 컴포넌트 볼륨을 줄일 수 있는 구성요소가 있는가?
• [feature.module.ts] 페이지 단위를 분리할 수 있는 구성요소가 있는가?
• [src/enviroments] 프로젝트 환경 설정을 포함하는 구성요소가 있는가?

Nuxt

├─ nuxt.config.ts
├─ assets
├─ components
├─ constants
├─ directives
├─ filters
├─ layouts
├─ middleware
├─ pages
├─ plugins
├─ static
├─ store
└─ test

• [assets] 컴파일되지 않은 에셋들을 포함하는 구성요소가 있는가?
• [static] 정적 파일들을 포함하는 구성요소가 있는가?
• [middleware] 페이지나 컴포넌트에 접근하기 전에 실행할 사용자 정의함수를 정의하는 구성요소가 있는가?
• [test] 테스트 파일들을 포함하는 구성요소가 있는가?
• [pages, Auto Routing] 라우터를 정의하는 구성요소가 있는가?
• [store] 상태관리를 하는 구성요소가 있는가?
• [plugins] 외부 라이브러리를 애플리케이션에 사용하도록 연결하는 구성요소가 있는가?
• [constants] 상수를 정의하는 구성요소가 있는가?
• [components] 컴포넌트를 포함하는 구성요소가 있는가?
• [directives, filters] 컴포넌트 볼륨을 줄일 수 있는 구성요소가 있는가?
• [pages] 페이지 단위를 분리할 수 있는 구성요소가 있는가?
• [nuxt.config.ts 프로젝트 환경 설정을 포함하는 구성요소가 있는가?