🌟 첫 인턴 생활
'쉐어 그라운드' 에서 인턴 과정이 시작되었다. TypeScript, TypeORM, Clean Architecture, Design Pattern 등에 대하여 배우고 심도 있는 학습을 진행하였다.
금요일에 있을 세미나 발표(클린 아키텍처와 디자인 패턴에 대하여)를 대비하기 위해 디자인 패턴에 대한 글을 써보려고 한다.
역할을 분리하는 이유
혼자 개발할 때는 코드가 어떤 구조로 짜여지든 잘 동작할 것이다. 하지만, 팀 프로젝트 혹은 기업에서 개발을 할 경우? 그런 식의 코드 작성은 유지 보수 자체가 힘들 것이고 , 개발 효율도 0에 수렴할 것이다. 아키텍처와 디자인 패턴이 중요한 이유는 이렇게
염려의 분리(Separate of Concern)를 가능하게 해주는 것이라고 생각한다.
즉, 각자 역할을 나누어 관리를 함으로써, 유지 보수와 개발 효율을 향상시킬 수 있다.
📲 MVC Pattern
MVC 패턴은 Model + View + Controller로 이루어진 패턴입니다. MVC 패턴의 구조, 동작, 특징, 장점, 단점을 설명드리겠습니다.
구조
- Model : 웹 또는 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
- View : 유저에게 보여지는 UI(UserInterface) 부분입니다.
- Controller : 유저의 행동이나 입력(Action)을 받아 처리하는 부분입니다.
동작
MVC 패턴의 동작 순서는 아래와 같습니다.
- 사용자의 Action들은 Controller에 들어오게 됩니다.
- Controller는 사용자의 Action를 확인하고, Model을 업데이트합니다.
- Controller는 Model을 나타내줄 View를 선택합니다.
- View는 Model을 이용하여 화면을 나타냅니다.
MVC에서 View가 업데이트 되는 방법
- View가 Model을 이용하여 직접 업데이트 할 수 있습니다.
- Model에서 View에게 Notify 하여 업데이트 할 수 있습니다.
- View가 Polling으로 주기적으로 Model의 변경을 감지하여 스스로 업데이트 할 수 있습니다.
특징
- Controller는 여러개의 View를 선택할 수 있는 1:n 구조입니다.
- Controller는 View를 선택할 뿐 직접 업데이트 하지 않습니다. (View는 Controller를 알지 못합니다.)
장점
MVC 패턴의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순합니다. 단순하다 보니 보편적으로 많이 사용되는 디자인패턴입니다.
단점
MVC 패턴의 단점은 View와 Model 사이의 의존성이 높다는 것입니다. View와 Model의 높은 의존성은 어플리케이션이 커질 수록 복잡하지고 유지보수가 어렵게 만들 수 있습니다.
📲 MVP Pattern
MVP 패턴은 Model + View + Presenter를 합친 용어입니다. 이름에서 유추할 수 있듯이, Model과 View는 MVC Pattern에서처럼 그대로 사용되고, 하는 기능도 동일하게 유지됩니다. 그러나 Controller 대신 Presenter가 존재합니다. MVP 패턴의 구조, 동작, 특징, 장점, 단점을 아래에서 설명하겠습니다.
구조 (MVP)
MVP는 Model + View + Presenter를 말합니다.
Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
View : 유저에게 보여지는 UserInterface 부분입니다.
Presenter : View에서 요청한 정보로 Model을 가공하여 View에 전달해 주는 부분입니다. View와 Model을 붙여주는 접착제..? 역할을 합니다.
동작
MVP 패턴의 동작 순서는 아래와 같습니다.
- 사용자의 Action들은 View를 통해 들어오게 됩니다.
- View는 데이터를 Presenter에 요청합니다.
- Presenter는 Model에게 데이터를 요청합니다.
- Model은 Presenter에서 요청받은 데이터를 응답합니다.
- Presenter는 View에게 데이터를 응답합니다.
- View는 Presenter가 응답한 데이터를 이용하여 화면을 나타냅니다.
특징
- Presenter는 View와 Model의 인스턴스를 가지고 있어 둘을 연결하는 접착제 역할을 합니다.
- Presenter와 View는 1:1 관계입니다.
- View 는 Presenter 를 참조하며, Presenter 는 View 의 존재를 인지하고 있습니다.
- View 는 Model 의 존재를 모르며, MVC 패턴의 단점인 View 와 Model간의 의존성을 없애줄 수 있습니다.
장점
MVP 패턴의 장점은 View와 Model의 의존성이 없다는 것입니다. MVP 패턴은 MVC 패턴의 단점이었던 View와 Model의 의존성을 해결하였습니다. (Presenter를 통해서만 데이터를 전달 받기 때문에..)
단점
- MVC 패턴의 단점인 View와 Model 사이의 의존성은 해결되었지만, View와 Presenter 사이의 의존성이 높은 가지게 되는 단점이 있습니다. 어플리케이션이 복잡해 질 수록 View와 Presenter 사이의 의존성이 강해지는 단점이 있습니다.
- 코드 상으로는 View-Presenter 일대일 관계로 인해, 각 View 를 위한 각 Presenter 가 필요하게된다. 이로 인해 코드의 수가 기하급수적으로 증가하게 됩니다.
📲 MVVM Pattern
MVVM 패턴은 Model + View + View Model를 합친 용어입니다. Model과 View은 다른 패턴과 동일합니다. MVVM 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다.
구조 (MVVM)
MVVM는 Model + View + View Model를 말합니다.
Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
View : 사용자에서 보여지는 UI 부분입니다.
View Model : - View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.
- Controller 역할을 한다. 이름 그대로 View 를 위한 Model 이라고 보면 된다. 여기서 'View 를 위한 Model' 은 일반적인 Model 이 아닌 특정 View 에게 맞춰진 Model 을 의미한다.
동작
MVVM 패턴의 동작 순서는 아래와 같습니다.
- 사용자의 Action들은 View를 통해 들어오게 됩니다.
- View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달합니다.
- View Model은 Model에게 데이터를 요청합니다.
- Model은 View Model에게 요청받은 데이터를 응답합니다.
- View Model은 응답 받은 데이터를 가공하여 저장합니다.
- View는 View Model과 Data Binding하여 화면을 나타냅니다.
특징
- MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었습니다.
- Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 없앴습니다.
- View Model과 View는 1:n 관계입니다.
- ViewModel 은 View 의 존재를 모른다.
- View 는 Model 의 존재를 모른다. View 는 ViewModel 만을 고려한다. 결과적으로 View-Model 관계는 분리된다. 또한 현재 많은 변화를 요구하는 사용자 인터페이스에 있어, View 를 위한 View 가 중심이 되는 패턴이라고 볼 수 있다.
- MVP 의 문제점인 View-Presenter 관계의 의존성은 데이터 바인딩과 명령을 통해 해결하게 된다.
-Command 패턴: 객체의 행위( 메서드 )를 클래스로 만들어 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스를 설계하는 패턴
즉, 이벤트가 발생했을 때 실행될 기능이 다양하면서도 변경이 필요한 경우에 이벤트를 발생시키는 클래스를 변경하지 않고 재사용하고자 할 때 유용하다.- Data Binding(데이터 연결): 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. 많은 자바스크립트 프레임워크가 이러한 데이터 바인딩 기술을 제공하고 있다. 하지만 대다수의 자바스크립트 프레임워크가 단방향 데이터 바인딩을 지원하는 반면 AngularJS는 양방향 데이터 바인딩을 제공한다.
장점
MVVM 패턴은 View와 Model 사이의 의존성이 없습니다.
- Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴입니다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다.
- 그래픽 사용자 인터페이스(GUI; Graphic User Interface)의 개발을 비즈니스 로직 또는 백-엔드 로직(모델)로부터 분리시켜서, View가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다
⇒ 즉, MVC PATTERN부터 초래된 문제인 View와 Model의 의존성을 해결하고,MVP 의 문제점인 View-Presenter 관계의 의존성은 데이터 바인딩과 명령을 통해 해결하게 된다.
단점
- MVVM 패턴의 단점은 View Model의 설계가 쉽지 않다는 점입니다.
- 데이터 바인딩을 도와주는 라이브러리(ex. injector)를 함께 사용하지 않으면, 많은 기반 코드를 작성해야 함.
