간단하게 많이 사용하는 패턴을 정리를 해보자.
웹개발시 쓰이는 패턴들은 다양하게 존재한다.
그 중에서 3개를 보게되면 공통점은 모두 화면에 보여주는 로직과 실제 데이터가 처리 되는 로직이 분리되어 있다는 것이다.
솔직히 패턴을 사용하지 않고도 충분히 짤 수는 있겠지만 모든 것은 나중에 한 번에 터지듯이 쌓이다 보면 한꺼번에 리팩토링을 하기에는 무리가 있는 것이다.
MVC 패턴은 3가지의 요소로 구성이 되어있다.
- Controller : 사용자의 입력을 받고 처리하는 부분
- Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
- View : 사용자에게 제공되어 보여지는 UI 부분
처음 알게된 패턴이 바로 이 패턴이었다. 당시 내용은 스프링으로 작업을 할 때 많이 봤었다.
- 사용자가 처음 주소를 입력하고 Enter를 누르게 되면
Controller
에 먼저 요청이 들어간다. - 이에
Controller
는 해당 주소에 맞는 데이터를Model
에 요청을 하며 불러오게 되고, Model
은 해당 데이터들을 보여줄View
를 선택해서 화면에 보여주게 된다.
MVC의 단점은 View와 Model이 서로 의존적이라는 점이다.
여기서는 한눈에 보아도 눈에 띄는 것은 바로 Presenter
입니다.
- Presenter :
View
에서 요청한 정보를Model
로 부터 가공해서View
로 전달하는 부분 - Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
- View : 사용자에게 제공되어 보여지는 UI 부분
이제 사용자의 입력의 시작은 View
에서 시작을 한다. 이에 Presenter
는 Model
과 View
의 중간자 역할을 한다. 데이터를 처리하는 Model
과 View
는 서로 의존성이 떨어지게 된다.
View
로 사용자의 입력이 들어옵니다.View
는Presenter
에 작업 요청을 합니다.Presenter
에서 필요한 데이터를Model
에 요청 합니다.Model
은Presenter
에 필요한 데이터를 응답 합니다.Presenter
는View
에 데이터를 응답 합니다.View
는Presenter
로부터 받은 데이터로 화면에 보여주게 됩니다.
이것의 단점은 이제 Model
과 View
의 의존성은 떨어지게 되었지만 View
와 Presenter
가 1:1로 강한 의존성을 가지게 된다는 것입니다.
이제는 Presenter
, Controller
대신하여 ViewModel
이라는 것이 생겼습니다.
- ViewModel :
View
를 표현하기 위해 만들어진View
를 위한Model
- Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
- View : 사용자에게 제공되어 보여지는 UI 부분
MVVM
은 2가지 디자인 패턴을 사용한다고 한다. 바로 Command패턴
과 DataBinding
입니다.
위의 2가지 패턴으로 인해 View
와 ViewModel
은 의존성이 완전히 사라지게 됩니다.
MVP
과 마찬가지로 View
에서 입력이 들어오며, 입력이 들어오게 되면 Command
패턴을 통해 ViewModel
에 명령을 내리게 되고(Action) DataBinding
으로 인해 ViewModel
의 값이 변화하면 바로 View
의 정보가 바뀌에 되는 것입니다.
View
에 입력이 들어오면Command
패턴으로ViewModel
에 명령을 합니다.ViewModel
은 필요한 데이터를Model
에 요청 합니다.Model
은ViewModel
에 필요한 데이터를 응답 합니다.ViewModel
은 응답 받은 데이터를 가공해서 저장 합니다.View
는ViewModel
과의Data Binding
으로 인해 자동으로 갱신 됩니다.
위와 같은 MVVM 패턴은 SPA에서 리액트나 뷰의 진형에서 사용되고 있는 패턴이다. 모든 패턴들이 완벽하지는 않다 시간이 지나고 사용을 하면서 발전하는 것이 바로 패턴인 것이다. 🏃