프론트엔드 디자인패턴

프론트엔드 프로젝트에서 디렉토리 구조는 코드의 가독성, 유지보수성, 확장성에 중요한 역할을 함.

 

1. 레이어드 아키텍처 (Layered Architecture)

레이어드 아키텍처는 기능별로 나누기보다는 계층에 따라 파일을 분리하는 구조임. 주로 프레젠테이션 계층, 비즈니스 로직 계층, 데이터 계층으로 나뉨.

src/
├── components/          # UI 컴포넌트 (프레젠테이션 계층)
│   ├── Button.vue
│   ├── Header.vue
│   └── Footer.vue
├── services/            # 비즈니스 로직 처리 (비즈니스 계층)
│   ├── AuthService.js
│   ├── ApiService.js
│   └── UserService.js
├── store/               # 상태 관리 (비즈니스 로직, 상태 처리)
│   ├── index.js
│   └── user.js
├── utils/               # 공통 유틸리티 함수 (공용 로직)
│   ├── formatDate.js
│   └── helpers.js
└── views/               # 페이지 컴포넌트 (전체적인 UI를 담당)
    ├── Home.vue
    ├── About.vue
    └── Contact.vue

 

• components/: 재사용 가능한 UI 컴포넌트를 모아놓은 곳임. 주로 단순히 화면에 표시하는 로직을 담당.
• services/: API 호출, 인증, 사용자 관리 등 애플리케이션의 비즈니스 로직을 담당하는 곳.
• store/: 상태 관리를 위한 디렉토리로 Vuex 또는 Redux와 같은 상태 관리 라이브러리의 모듈들이 위치.
• utils/: 공통으로 사용되는 유틸리티 함수나 헬퍼 함수들을 모아놓은 곳.
• views/: 각 페이지를 구성하는 상위 컴포넌트들이 모인 디렉토리. 주로 라우트와 연결됨.

2. 기능기반 구조 패턴 (Feature-Based Structure)

FBS는 기능별로 프로젝트를 관리하는 방식임. 즉, 프로젝트를 특정 기능을 기준으로 디렉토리를 나누고, 그 하위에 해당 기능에 관련된 모든 파일을 배치함.

src/
├── auth/               # 인증 관련 모든 파일
│   ├── AuthService.js  # 인증 관련 서비스
│   ├── AuthView.vue    # 인증 페이지
│   ├── AuthStore.js    # 인증 관련 상태 관리 모듈
│   └── components/     # 인증 관련 컴포넌트들
│       ├── LoginForm.vue
│       └── RegisterForm.vue
├── dashboard/          # 대시보드 기능 관련
│   ├── DashboardView.vue
│   ├── DashboardService.js
│   ├── DashboardStore.js
│   └── components/
│       └── StatsCard.vue
├── shared/             # 공통으로 사용되는 컴포넌트 및 서비스
│   ├── Header.vue
│   ├── Footer.vue
│   └── ApiService.js
└── router/             # 라우팅 처리
    └── index.js

 

 

• auth/: 인증 기능에 관련된 모든 파일을 모아놓음. 서비스, 컴포넌트, 상태 관리 모듈 모두 같은 폴더 내에 위치.
• dashboard/: 대시보드 기능에 필요한 모든 파일을 모아놓음. 기능 중심으로 파일을 관리하므로, 특정 기능에 대한 코드를 한 번에 찾기 쉬움.
• shared/: 공통으로 사용되는 컴포넌트와 서비스 파일들. 예를 들어, 헤더나 푸터 같은 전역에서 사용되는 컴포넌트, 또는 공통적인 API 호출 로직.

3. 모노레포 (Monorepo) 구조

모노레포는 여러 개의 애플리케이션 또는 라이브러리를 하나의 저장소에서 관리하는 방식임. 일반적으로 여러 프로젝트가 하나의 저장소 안에 위치하며, 공통으로 사용하는 코드나 모듈을 공유할 수 있음.

monorepo/
├── apps/                # 여러 개의 애플리케이션
│   ├── web-app/         # 웹 애플리케이션
│   ├── mobile-app/      # 모바일 애플리케이션
│   └── admin-app/       # 관리자 애플리케이션
├── packages/            # 공통으로 사용되는 패키지들
│   ├── ui-components/   # 공통 UI 컴포넌트
│   ├── utils/           # 공통 유틸리티 함수
│   └── services/        # 공통 서비스 로직
└── tools/               # 빌드 및 배포 도구
    ├── build.js
    └── deploy.js

 

4. 모노리스 구조 (Monolithic Structure)

모노리스 구조는 프로젝트를 기능별이나 모듈별로 나누지 않고, 모든 파일을 하나의 앱 안에 집중시키는 방식임. 작은 프로젝트나 초기 개발 단계에서 빠르게 개발할 때 유용할 수 있음.

src/
├── components/        # 모든 UI 컴포넌트가 여기 포함됨
│   ├── Header.vue
│   ├── Footer.vue
│   ├── TodoList.vue
│   └── InputTodo.vue
├── services/          # 모든 서비스 로직이 여기 포함됨
│   ├── ApiService.js
│   └── AuthService.js
└── store/             # 상태 관리 모듈이 모두 여기에 포함됨
    ├── index.js
    └── user.js

이 구조는 모든 기능과 로직을 하나의 애플리케이션에 포함시키기 때문에, 작은 규모의 프로젝트에서는 빠른 개발이 가능하지만, 프로젝트가 커지면 관리가 어려워질 수 있음.

5. 퍼널 패턴 (Funnel Pattern)

퍼널 패턴은 소프트웨어 개발에서 데이터나 이벤트 흐름을 단계별로 처리하는 구조를 말함. 이 패턴은 주로 데이터가 다양한 소스에서 흘러 들어와, 여러 단계를 거쳐 정제되고, 필요한 출력으로 변환되는 구조를 형성함. 데이터가 아래로 내려가면서 점차 구체화되거나 필터링되어 처리됨.

• 특징:
  • 데이터나 요청이 단계적으로 흐름을 따라가면서 처리됨.
  • 각 단계는 독립적으로 동작하며, 데이터가 상위 단계에서 하위 단계로 연속적으로 전달됨.
  • 중앙 집중식 처리 구조를 제공하여 복잡한 처리를 단계적으로 나눌 수 있음.

src/
├── input/                 # 입력 단계
│   ├── FormInput.vue
│   └── ApiInput.vue
├── processing/            # 처리 단계
│   ├── DataProcessor.js
│   └── ValidationService.js
├── output/                # 출력 단계
│   ├── RenderComponent.vue
│   └── ApiOutput.js

 

• input: 사용자 입력이나 API 요청 등 데이터 입력에 관한 컴포넌트나 모듈.
• processing: 데이터 처리, 검증, 변환 작업을 담당하는 처리 모듈.
• output: 최종적으로 데이터나 결과를 출력하는 렌더링이나 API 응답 부분.

6. 덕스 패턴 (Ducks Pattern)

덕스 패턴은 Redux 상태 관리에서 사용되는 패턴으로, 액션 타입, 액션 생성자, 리듀서를 한 파일에 모아놓고 관리하는 방식임. Redux 구조를 기능 기반으로 정리하여 각 모듈이 독립적으로 관리될 수 있도록 함.

• 특징:
  • 액션, 리듀서, 타입을 한 파일에 모아놓아 코드 관리가 간편함.
  • 파일 하나에서 기능을 모듈화하여 독립적인 구조를 유지할 수 있음.
  • 코드의 응집도가 높아지고, 유지보수가 쉬워짐.

src/
├── store/
│   ├── auth.js            # 인증 관련 액션, 리듀서, 타입
│   ├── user.js            # 사용자 정보 관련 액션, 리듀서, 타입
│   ├── posts.js           # 게시물 관련 액션, 리듀서, 타입
│   └── index.js           # 모든 리듀서 통합

 

7. 기능기반 구조 패턴 (Feature-Based Structure, FBS)

기능기반 구조 패턴은 기능별로 디렉토리와 파일을 구성하는 방식임. 프로젝트를 특정 기능별로 나누어 각 기능에 대한 컴포넌트, 서비스, 상태 관리 등을 독립적으로 관리함.

• 특징:
  • 각 기능별로 관련된 파일들을 같은 폴더에 모아둠으로써 기능 단위로 코드 관리가 용이.
  • 기능 추가나 수정 시 해당 기능에만 집중할 수 있어 유지보수가 쉬워짐.
  • 프로젝트가 커져도 코드의 가독성과 관리가 쉬움.

src/
├── auth/                   # 인증 관련 기능
│   ├── components/         # 인증 관련 컴포넌트
│   ├── services/           # 인증 서비스
│   ├── store/              # 인증 상태 관리
│   └── views/              # 인증 화면
├── dashboard/              # 대시보드 관련 기능
│   ├── components/         # 대시보드 컴포넌트
│   ├── services/           # 대시보드 서비스
│   ├── store/              # 대시보드 상태 관리
│   └── views/              # 대시보드 화면
├── shared/                 # 공통으로 사용되는 파일
│   ├── components/         # 공통 컴포넌트
│   ├── services/           # 공통 서비스
└── router/                 # 라우터 설정
    └── index.js

 

• auth/: 인증과 관련된 모든 파일을 모아둔 디렉토리. 컴포넌트, 서비스, 상태 관리 모듈이 기능별로 한 곳에 모여 있음.
• dashboard/: 대시보드 기능과 관련된 컴포넌트, 서비스, 상태 관리가 한 디렉토리에 모여 관리됨.
• shared/: 모든 기능에서 공통으로 사용되는 컴포넌트나 서비스가 위치함.