프론트엔드에서 “구조를 어떻게 잡을까?”를 고민하다 보면 여러 패턴을 만나게 된다.
처음에는 전부 비슷해 보이지만, 크게 나누면 두 가지 관점으로 볼 수 있다.
1. 전역 아키텍처 패턴
2. 컴포넌트 디자인 패턴
전역 아키텍처 패턴은 앱 전체의 구조와 데이터 흐름을 다룬다.
컴포넌트 디자인 패턴은 컴포넌트를 어떻게 나누고 재사용할지를 다룬다.
전역 아키텍처 패턴은 애플리케이션 전체의 데이터 흐름, 상태 관리, 폴더 구조, 책임 분리를 설계하는 방식이다.
대표적으로는 다음을 볼 수 있다.
MVC
Flux
Layered Architecture
Feature-Based Architecture
Feature-Sliced Design
MVC는 Model, View, Controller로 역할을 나누는 전통적인 패턴이다.
Model = 데이터와 비즈니스 로직
View = 사용자에게 보이는 UI
Controller = 입력을 받아 Model과 View를 연결
구조가 단순해서 이해하기 쉽지만, 프론트엔드가 복잡해지면 View와 Model 사이의 관계가 얽혀 데이터 흐름을 추적하기 어려워질 수 있다.
장점:
- 역할 구분이 명확하다.
- 전통적인 구조라 이해하기 쉽다.
단점:
- 복잡한 UI에서는 데이터 흐름이 꼬일 수 있다.
Flux는 단방향 데이터 흐름을 중심으로 하는 패턴이다.