[면접,CS] 아키텍처 패턴

부스트캠프에서 처음 공부를 시작할때 캠퍼들이 언급하는 단어 중 가장 많이 들은 것은 MVC 패턴이었다.

그때 나는 MVC패턴이 뭔지 왜 필요한지 몰라서 혼자 찾아보면서 공부했던 기억이 있다.

 

이번에 아키텍처 패턴과 프론트엔드에서의 아키텍처 흐름에 대해서 알아보자

 

아키텍처란?

아키텍처라는 말은 설명하기 어렵다.

사전적 의미로는 시스템 구성 및 동작원리를 나타내는 것이다.

하지만, 이러한 설명은 이해가 잘 안된다.

 

여러가지 자료를 찾던 중 이 자료를 보고 한번에 이해할 수 있었다.

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?

 

코드의 어치가 커지고 정리가 안되는 상황에서 하나씩 규칙을 만들어가며 개발을하고, 이런 과정이 반복되면 패턴이 만들어 진다.

이러한 패턴을 모두가 이해하고 따를 수 있도록 하는 구조를 아키텍처라고 한다.

 

---

MVC 패턴

Model,View,Controller라는 영역으로 나눈 것이 MVC패턴이다.

 

Model (데이터)

데이터를 주관하는 영역을 Model이라고 한다.

객체, api데이터, db 등 모든 데이터가 포함될 수 있다.

 

View (화면)

우리가 바라보는 화면이다.

웹 프론트에서는 HTML과 CSS로 만들어지는 결과물이다.

 

Controller (컨트롤러)

Model과 View를 연결하는 중간 역할을 하는 것을 Controller라고 한다.

 

 

MVC 패턴이 나온 이유?

- 화면을 다루는 문제와 데이터를 다루는 부분을 분리하기 위해

- Model과 View의 의존관계를 최소화하기 위해

 

 

장점

1. 어플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다.

2. 재사용성과 확장성이 용이하다.

 

단점

어플리케이션이 복잡해질수록 Model과 View의 관계가 복잡해진다.

 

---

MVP 패턴

C가 P(presenter)로 교체된 패턴으로 V와 P는 1:1관계로 MVC보다 더 강한 결합을 가지고 있다.

---

MVVM 패턴

MVC패턴을 사용하다 보니 데이터를 찾아서 데이터를 변경하고, 이벤트를 연결하고 수정하는 과정 등에서 불편한 점을 발견하게 된다.

기존 DOM을 조작하는 코드가 사라지고 angular,react,vue와 같은 라이브러리, 프레임워크에서 담당하게 된다.

View를 그리는 Model만 다루게 되었다는 의미로 ViewModel이라고 불러 MVVM이라고 불리는 패턴이 만들어진다.

 

---

Container-Presenter 패턴

MVVM이 화면단위가 아니라 조금 더 작은 단위로 만들어서 조립하는 방식으로 발전하게 되면서 Component 패턴이 만들어진다.

우리한테 익숙한 개념이며, 컴포넌트는 재사용이 가능해야 한다는 원칙으로 비즈니스 로직을 포함시키지 않게 발전된다.

 

비즈니스 로직을 담당하는 컴포넌트를 Container 컴포넌트라 부르고, 데이터만 뿌려주는 컴포넌트를 Presenter 컴포넌트로 분리하며 Container-Presenter 패턴이 만들어졌다.

 

 

하지만, 이러한 구조는 컴포넌트 구조가 복잡해지면서 Props Drilling 문제가 발생한다.

이러한 문제를 해결하기 위해 하기와 같은 FLUX패턴이 만들어 졌다.

 

---

FLUX 패턴

FLUX 패턴은 MVC 패턴의 문제점을 개선해 단방향 아키텍처를 위해 만들어졌다.

이러한 FLUX 패턴을 이용한 구현체가 Redux이다.

 

이때부터 비즈니스 로직을 컴포넌트에서 분리하고 관리해주는 상태관리의 개념이 나타났다.

 

MVC에서 FLUX으로 오면서 달라진 부분

• 공통적으로 사용되는 비지니스 로직의 Layer와 View의 Layer를 완전히 분리되어 상태관리라는 방식으로 관리한다.
• 각각의 독립된 컴포넌트가 아니라 하나의 거대한 View 영역으로 간주한다.
• 둘 사이의 관계는 Action과 Reduce라는 인터페이스로 분리한며 Controller는 이제 양방향이 아니라 단반향으로 Cycle을 이루도록 설계한다.

 

정리
1. HTML, CSS, JS의 탄생 : 관심의 분리와 느슨한 결합
2. jQuery까지의 시대 : Dom을 쉽게 사용하자!
3. HTML + JS를 합쳐서 사용하자 : MVC 컴포넌트 방식의 탄생
4. 선언적으로 만들자 : MVVM 웹 프레임워크
5. 컴포넌트간 데이터 교환이 복잡하다! : Container - Presenter 방식
6. Props Driiling문제 발생 : FLUX, Redux
7. 무겁고 복잡해... : hooks, context, Recoil, Zustand,Jotai
8. 서버 API관리 : React Query, SWR, Redux Query

 

 

---

Reference

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?

 

프론트엔드 아키텍처의 가장 최근 트렌드는? | 요즘IT