아키텍처

아래는 다양한 소프트웨어 아키텍처 스타일을 예시와 함께 정리한 자료입니다:

1. Layered Architecture (계층형 아키텍처)
설명
소프트웨어 시스템을 주요 기능 또는 관심사별로 계층(layer)으로 나눕니다.

구조
Presentation Layer: 사용자 인터페이스
Business Logic Layer: 비즈니스 로직
Data Access Layer: 데이터베이스와의 상호작용
예시
웹 애플리케이션:
- Presentation Layer: HTML, CSS, JavaScript (React 등)
- Business Logic Layer: Node.js 서버 로직
- Data Access Layer: MongoDB, MySQL 쿼리

 

 

 

 

2. Feature-Based Architecture (기능 기반 아키텍처)
설명
소프트웨어 시스템을 기능 단위로 나누어 모듈로 구성합니다.

예시
전자상거래 애플리케이션:
- Product Module: 제품 목록, 상세 정보, 검색 기능
- Cart Module: 장바구니 추가, 삭제, 수정 기능
- Checkout Module: 결제 정보 입력, 주문 처리 기능

 

 

 

 

3. MVC Pattern (Model-View-Controller)
설명
데이터(Model), 사용자 인터페이스(View), 제어 흐름(Controller)을 분리하여 관리합니다.

구조
Model: 데이터 및 비즈니스 로직
View: 사용자 인터페이스
Controller: 사용자 입력 처리 및 Model과 View 연결
예시
블로그 애플리케이션:
- Model: 게시글 데이터베이스 (Post 모델)
- View: 게시글 목록 HTML, 게시글 작성 폼
- Controller: 게시글 목록을 가져와서 View로 전달, 사용자가 작성한 게시글을 저장

 

 

 

 

 

4. MVVM Pattern (Model-View-ViewModel)
설명
View와 Model 사이에 ViewModel을 두어 데이터 바인딩을 통해 상호작용을 관리합니다.

구조
Model: 데이터 및 비즈니스 로직
View: 사용자 인터페이스
ViewModel: Model과 View를 연결하며 데이터 바인딩
예시
Todo 애플리케이션:
- Model: Task 데이터 모델 (할 일 항목)
- View: 할 일 목록 UI, 새 할 일 추가 폼
- ViewModel: 할 일 목록, 필터링 및 정렬 로직, 각 항목의 상태 관리

 

 

 

 

5. Component-Based Architecture (컴포넌트 기반 아키텍처)
설명
애플리케이션을 독립적인 컴포넌트 단위로 나누고 재사용 가능하게 구성합니다.

예시
프런트엔드 애플리케이션:
- Header Component: 로고, 네비게이션 메뉴
- Footer Component: 저작권 정보, 소셜 미디어 링크
- ProductList Component: 제품 목록, 필터 옵션
- ProductItem Component: 개별 제품 정보, 장바구니 추가 버튼

 

 

 

 

6. Event-Driven Architecture (이벤트 기반 아키텍처)
설명
이벤트의 생성과 이를 처리하는 리스너로 시스템을 구성합니다.

예시
실시간 채팅 애플리케이션:
- 이벤트: 사용자 메시지 전송, 새로운 메시지 수신
- 이벤트 핸들러: 새로운 메시지를 데이터베이스에 저장, 사용자 인터페이스에 메시지 표시

 

 

 

 

7. Microservices Architecture (마이크로서비스 아키텍처)
설명
애플리케이션을 작은 독립적인 서비스로 나누어 설계합니다.

예시
전자상거래 애플리케이션:
- User Service: 사용자 인증 및 관리
- Product Service: 제품 정보 관리
- Cart Service: 사용자 장바구니 관리
- Order Service: 주문 처리

 

 

 

 

 

8. Serverless Architecture (서버리스 아키텍처)
설명
클라우드 서비스 제공자가 서버 관리와 인프라를 담당하고 함수 단위로 애플리케이션을 구성합니다.

예시
이미지 처리 애플리케이션:
- 이미지 업로드 이벤트: 사용자가 이미지를 업로드할 때 함수가 실행되어 이미지를 처리하고 저장
- AWS Lambda, Azure Functions 등을 사용하여 함수 정의

 

 

 

 

 

 

 

9. Feature-Sliced Design (FSD)
설명
소프트웨어 시스템을 특정 기능 단위로 나누어 모듈화합니다.

구조
Feature/Domain: 특정 기능에 관련된 모든 코드 포함
Public API: 외부에 노출되는 API
UI: 사용자 인터페이스 컴포넌트
Model: 데이터 구조 및 비즈니스 로직
Service: 외부 API 호출이나 비즈니스 로직 서비스
Store: 상태 관리 코드
예시
전자상거래 애플리케이션에서 사용자 로그인 기능:
src/
  auth/
    api/
      authAPI.js         // 사용자 인증 관련 API 호출
    ui/
      LoginForm.js       // 로그인 폼 컴포넌트
      LogoutButton.js    // 로그아웃 버튼 컴포넌트
    model/
      userModel.js       // 사용자 데이터 모델
    service/
      authService.js     // 인증 관련 비즈니스 로직
    store/
      authStore.js       // 인증 상태 관리
  product/
    ...                  // 제품 관련 기능
  cart/
    ...                  // 장바구니 관련 기능
  order/
    ...                  // 주문 관련 기능

 

 

 

https://velog.io/@userhwseo/Atomic-Design

프론트엔드의 아키텍처? 디자인 패턴?

 

https://velog.io/@shyunju7/FSD

기능 분할 설계 (Feature-Sliced Design, FSD) 아키텍처