프론트엔드 아키텍처 구조 - MVC, MVVM

프론트엔드 개발에서 아키텍처를 설계하는 것은 애플리케이션의 유지보수성, 확장성 및 성능을 결정짓는 중요한 요소입니다.

특히, 관심사의 분리는 프론트엔드 아키텍처를 설계할 때 기본적으로 고려해야 하는 원칙 중 하나입니다.

예를 들어, 사용자 인터페이스(UI), 비즈니스 로직, 데이터 관리 등의 관심사를 분리함으로써 각각의 부분을 독립적으로 개발하고 테스트할 수 있습니다.

1️⃣ MVC 패턴

MVC 패턴은 애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)의 세 부분으로 분리하는 가장 일반적인 아키텍처 패턴 중 하나입니다.

 

🤖 구성 요소

🧩 Model (모델)

• 애플리케이션의 데이터와 비즈니스 로직을 관리
• 데이터의 상태를 유지하고 데이터 처리 규칙을 정의

 

🧩 View (뷰)

• 사용자에게 정보를 표시하는 역할
• 사용자 인터페이스를 구성하며 Model로부터 받은 데이터를 시각적으로 표현

 

🧩 Controller (컨트롤러)

• 사용자의 입력을 받아 처리하는 역할
• 사용자 요청에 따라 Model을 업데이트하고 그 결과를 View에 반영

 

👍 장점

• 관심사 분리(SoC)로 비즈니스 로직과 UI 로직을 독립적으로 관리
• 유지보수성과 확장성이 향상됨
• 각 컴포넌트별 독립적인 테스트 가능

 

👎 단점 및 한계

1️⃣ View와 Model 의존성 증가

입력 이벤트, 서버 통신, 상태 변화 등으로 View와 Model의 상호작용이 복잡해집니다.

양방향 데이터 흐름(사용자 입력 → Model → View 업데이트)이 많아지면 복잡도가 급격히 증가

 

2️⃣ Massive-View-Controller 문제

• 뷰와 모델이 많아질수록 컨트롤러의 책임이 과도해져 유지보수 어려움 발생
  • 서로 간의 의존성이 계속 생성되면서 복잡도가 증가
  • 컨트롤러가 뷰와 모델의 모든 복잡한 관계를 관리해야 하므로 점점 비대해짐
• SPA에서는 페이지 전환 없이 여러 상태와 화면을 관리해야 하므로 문제 심화

 

3️⃣ View의 계층적 구조 문제

• DOM의 트리 구조를 반영한 뷰 계층 관리 필요
• 빈번한 리렌더링으로 인한 성능 이슈가 발생
• DOM 조작의 최적화 기법이 필요

 

💡 결론

프론트엔드에서 순수한 MVC 패턴 적용 시 다음과 같은 해결책이 필요합니다:

• 복잡한 View-Model 관계의 단순화
• View 계층 처리를 통한 효율적인 DOM 관리

 

이를 해결하고자 다음과 같은 방법들이 나타났습니다.

• MVVM(Vue) : 양방향 바인딩을 단순화
• Virtual DOM(React) : 효율적인 DOM 관리
• Flux/Redux : 단방향 데이터 흐름으로 상태 관리 단순화

 

2️⃣ MVVM

https://www.youtube.com/watch?v=Y5vOfv67h8A&ab_channel=프롱트

MVVM 패턴은 MVC의 한계를 극복하기 위해 등장한 패턴으로 데이터 바인딩을 통해 뷰와 모델 사이의 동기화를 자동화하고 뷰모델(ViewModel) 이 뷰와 모델 사이의 중재자 역할을 합니다.

 

🤖 구성 요소

🧩 Model (모델)

• MVC와 동일하게 데이터와 비즈니스 로직을 담당

 

🧩 View (뷰)

• 사용자 인터페이스를 담당하지만 비즈니스 로직을 포함하지 않음
• ViewModel과 데이터 바인딩을 통해 자동으로 동기화

 

🧩 ViewModel (뷰모델)

• 뷰에서 사용하는 모델
• 뷰의 상태와 동작을 관리
• 모델의 데이터를 뷰에서 쉽게 사용할 수 있는 형태로 가공하여 제공
• 뷰의 이벤트를 받아 모델 변경으로 연결

 

🚗 데이터 바인딩

데이터 바인딩은 뷰와 모델이 자동으로 동기화되도록 하는 핵심 메커니즘입니다.

 

구현 방법

• Object.defineProperty()
• Proxy API
• Observer 패턴

 

예시

<script>
let name = 'beomsic';
</script>

<h1>Hello {name}!</h1>

<input bind:value={name} />

• bind:value={name}로 처리된 input의 value가 변경되면 자동으로 리렌더링되는 양방향 데이터 바인딩(Two-way Data Binding)을 보여줍니다.

 

👍 장점

• 뷰와 모델 간의 복잡한 의존성 해결
• 자동 동기화로 인한 개발 생산성 향상
• 테스트 용이성 증대
• 코드의 가독성과 유지보수성 향상

 

👎 단점

• 데이터 바인딩 비용: 규모가 커질수록 데이터 추적에 성능 이슈 발생 가능
• 양방향 바인딩 남용: 상태 추적이 어려워지고 디버깅 복잡도 증가
• 추상화 비용: ViewModel 설계와 관리가 추가됨

 

😎사용 사례

• Vue.js: MVVM 패턴을 기반으로 설계된 대표적인 프레임워크
• Angular: 양방향 데이터 바인딩과 컴포넌트 기반 아키텍처

 

3️⃣ Flux 아키텍처 (React)

https://www.youtube.com/watch?v=Y5vOfv67h8A&ab_channel=프롱트

 

Flux 아키텍처는 Facebook에서 React와 함께 소개한 단방향 데이터 흐름을 기반으로 하는 아키텍처 패턴입니다.

MVC 패턴의 복잡한 양방향 데이터 흐름 문제를 해결하기 위해 설계되었습니다.

 

⭐ 단방향 데이터 흐름

Flux의 가장 중요한 특징은 한 방향으로만 데이터가 흐르도록 제어한다는 점입니다.

View → Action → Dispatcher → Store → View

 

🤖 구성 요소

🧩 Action (액션)

• 애플리케이션에서 발생하는 이벤트나 사용자 인터랙션을 나타내는 객체
• type과 데이터(payload)를 포함

 

🧩 Dispatcher (디스패처)

• 액션을 받아서 등록된 모든 스토어에 전달하는 역할

 

🧩 Store (스토어)

• 애플리케이션의 상태와 비즈니스 로직을 포함
• 디스패처로부터 액션을 받아 상태를 업데이트
• 상태 변경 시 뷰에 알림

 

🧩 View (뷰)

• React 컴포넌트로 구현되는 사용자 인터페이스
• 스토어의 상태 변화를 감지하고 리렌더링
• 사용자 인터랙션 시 액션을 디스패치

 

🏃 동작 과정

1. 사용자 인터랙션: 뷰에서 이벤트 발생 (예: 버튼 클릭)
2. 액션 생성: 이벤트에 따른 액션 객체 생성
3. 디스패치: 액션을 디스패처에 전달
4. 스토어 업데이트: 디스패처가 모든 스토어에 액션 전달, 스토어에서 상태 변경
5. 뷰 업데이트: 스토어의 상태 변화를 감지한 뷰가 리렌더링

 

👍 장점

• 예측 가능한 상태 관리: 단방향 데이터 흐름으로 인한 명확한 상태 변화 추적
• 디버깅 용이성: 액션과 상태 변화를 순차적으로 추적 가능
• 확장성: 새로운 스토어와 액션을 쉽게 추가 가능
• 테스트 용이성: 각 구성 요소의 독립적인 테스트 가능

 

📌 Redux

Redux는 Flux 패턴을 더욱 간소화하고 예측 가능하게 만든 상태 관리 라이브러리입니다.

 

Redux의 핵심 원칙

• Single Source of Truth: 하나의 스토어에서 전체 상태 관리
• State is Read-only: 상태는 액션을 통해서만 변경 가능
• Changes are Made with Pure Functions: 순수 함수로 구현

 

🚀 정리

프론트엔드 아키텍처는 애플리케이션의 복잡성과 요구사항에 따라 선택되어야 합니다.

각 패턴은 고유한 장단점을 가지고 있으며 프로젝트의 성격, 팀의 경험, 그리고 장기적인 유지보수 계획을 고려하여 적절한 아키텍처를 선택하는 것이 중요한 것 같습니다.

관심사의 분리, 단방향 데이터 흐름, 예측 가능한 상태 관리라는 핵심 원칙을 바탕으로 프로젝트에 최적화된 아키텍처를 설계하는 것이 핵심!

📚 Ref.

https://f-lab.kr/insight/understanding-frontend-architecture

https://medium.com/@manyoung/프론트엔드-웹애플리케이션-아키텍쳐-비교분석-mvc와-mvvm-e446a0f46d8c

https://www.youtube.com/watch?v=Y5vOfv67h8A&ab_channel=프롱트

https://medium.com/twolinecode/프론트엔드-아키텍처의-구현-전략-chapter2-by-이동형님-fb6672e74524

https://medium.com/@heoh06/프론트엔트-기술면접-mvc-패턴-c0639999820a

https://f-lab.kr/insight/understanding-mvc-pattern-for-frontend?gad_source=1&gclid=Cj0KCQjwz7C2BhDkARIsAA_SZKb1xXqIITX1VVA3UrWKyLqZKNkZdzIP7mg4UDpo1IExFlTNI-zkrwsaApWEEALw_wcB