(소프트웨어)디자인 패턴

디자인 패턴?

소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다.
-위키백과-

한마디로 "효율적인 코드 작성 설계방식"

 

*소프트웨어 설계의 공통적 문제에 대한 표준적 해법입니다! ⇒ 바로 코드로 변환할수있는 형태x

 

 

이런거 공부해서 어디다 써요?

물론 소규모 프로젝트할때나, 처음 공부를 할때는 필요없다고 생각될것입니다.

그러나 우리가 사용하는 react,vue과 같은 라이브러리,프레임 워크들이 어떠한 디자인 패턴을 이용해서 만들어졌는지를 파악하고

대규모로 작업을 할때 훨씬더 효율적인 코드를 작성하도록 도와줍니다!

 

 

 

대표적인 디자인 패턴

MVC(Model-View-Controller)

• Model : 응용프로그램의 동작 및 데이터를 관리합니다.
• View : UI를 화면에 표출시킵니다.
• Controller : 사용자의 입력을 받아 Model을 조작하고 View를 업데이트 시킵니다.

web Application에서의 기본적인 MVC구성요소

 

동작 순서

1. 사용자의 Action들은 Controller에 들어오게 됩니다.
2. Controller는 사용자의 Action를 확인하고, Model을 업데이트합니다.
3. Controller는 Model을 나타내줄 View를 선택합니다.
4. View는 Model을 이용하여 화면을 나타냅니다.

*MVC에서 View가 업데이트 되는 방법

• View가 Model을 이용하여 직접 업데이트 하는 방법
• Model에서 View에게 Notify 하여 업데이트 하는 방법
• View가 Polling으로 주기적으로 Model의 변경을 감지하여 업데이트 하는 방법.

장단점

장점

• MVC 패턴의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순합니다. 단순하다 보니 보편적으로 많이 사용되는 디자인패턴입니다.

단점

• MVC 패턴의 단점은 View와 Model 사이의 의존성이 높다는 것입니다. View와 Model의 높은 의존성은 어플리케이션이 커질 수록 복잡하지고 유지보수가 어렵게 만들 수 있습니다.
• 뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때, 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이 연관된 모델을 다시 갱신하고, 엮이고 엮이는 관계를 추적하기가 힘들다.
• 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수가 없음
• 앱이 복잡해질수록 생기는 업데이트 루프도 복잡해짐

 

react에서는 flux를 사용해서 단점을 해결함

 

MVVM(Model-View-ViewModel)?

• Model : 응용프로그램의 동작 및 데이터를 관리합니다.
• View : UI를 화면에 표출시킵니다.
• ViewModel : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.

mvvm

동작순서

• 사용자의 Action들은 View를 통해 들어오게 됩니다.
• View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달합니다.
• View Model은 Model에게 데이터를 요청합니다.
• Model은 View Model에게 요청받은 데이터를 응답합니다.
• View Model은 응답 받은 데이터를 가공하여 저장합니다.
• View는 View Model과 Data Binding하여 화면을 나타냅니다.

장단점

장점

• 뷰 모델이 모델과 뷰 사이의 어댑터로서 변경이 생겼을 때 변경을 최소화할 수 있다.
• 모델과 뷰 모델이 뷰로부터 독립적이다.
  • 뷰 모델과 모델을 플랫폼 독립적으로 개발할 수 있다.
  • 테스트하기 쉽다.
• 개발 기간 동안 개발자와 디자이너가 동시에 독립적으로(병렬적으로) 작업할 수 있다.
  • UI 디자인이 나오지 않았더라도 미리 정의된 모델과 뷰 모델을 먼저 개발할 수 있기 때문에 병렬적인 업무 프로세스가 가능하다.

단점

• 거대하고 복잡한 앱을 위해서 고안된 디자인 패턴인 만큼, 소형 앱에서 사용하게 되면 오버헤드가 커진다.
• 앱이 너무 거대해지면 앱의 메모리 소모가 데이터 바인딩때문에 커진다.

 

참고자료

[디자인패턴] MVC, MVP, MVVM 비교

 

MVVM 패턴