Design Pattern 이란?

• 패턴 : 되풀이 되는 사건이나 물체의 형태
• 디자인 패턴 : 설계 간 자주 발생하는 문제에 대한 모범 답안
  프로그램을 개발하면서 생기는 문제점들에 대해서 해결할 수 있는 방법을 도출하고 그를 패턴화 해둔 것이다.

디자인 패턴을 사용하는 이유

1. 검증된 해결책이기 때문이다

프로그래밍에서는 '바퀴를 재발명 하지 마라' 라는 격언이 있다.
필요한 것을 매번 만들지 말고, 이미 만들어져 있는 것이 있으면 그것을 활용하라는 뜻으로, 자동차를 발명할때 바퀴부터 다시 발명해서 만들 필요가 없는 이치와 같다.
이미 여러 사람들에 의해 검증된 해결방안을 적용해 코드를 효과적으로 개선할 수 있고, 패턴을 활용해 상대적으로 저수준의 문제들이 해결되며 고수준의 문제에 집중할 수 있다.

2. 효율적인 소통방식이기 때문이다

개발을 하면 소통을 해야할 일이 많고, 원활한 소통을 위해서는 체계적인 규칙과 용어가 필요하다.
디자인 패턴을 사용하면 매번 모든 디테일한 사항들을 장황하게 설명할 필요 없이 약속해둔 용어로 표현할 수 있어 좀 더 명확하고 확실하게 소통할 수 있다.

ex) A 객체를 지켜보고 있는 요소들을 모두 관리하면서 A 객체에 변화가 생길 때 마다 지켜보고 있는 요소들한테 변화되었다는 메세지를 보내주세요. 그리고 지켜보고 있는 요소들은 언제든 A 객체를 지켜보는 것을 멈추거나, 다시 지켜볼 수 있도록 설계하면 될 것 같은데요?

'옵저버 패턴'을 사용하면 될 것 같은데요?

3. 유지보수가 용이하기 때문이다

• Design === 설계
  검증된 디자인 패턴들은 코드 안에서 관심사별로 역할을 분리해서 관리하도록 설계되어 있다. 그렇기 때문에 변경사항이 발생하면 수정이 필요한 부분만 수정하면 되기에 유지보수에 용이하다.

디자인 패턴의 종류

1. MVC 패턴 : 프로젝트의 구성 요소를 역할에 따라 Model, View, Controller 세가지로 나눠서 관리하는 패턴

• Model은 데이터를 관리하는 역할
• View는 사용자에게 보여지는 UI를 담당
• Controller는 사용자의 Action에 의해 이벤트를 감지하고 처리하는 역할 (Model 또는 View를 업데이트하는 로직을 담당)
• 각 구성요소들의 관심사의 분리(SoC)가 잘 이루어져있기에 유지보수 및 확장이 용이하다

View에서 User의 Action이 발생 > Controller로 해당 액션이 전달됨 > Controller에서 필요한 로직을 처리 후 > Model에게 접근해 데이터를 수정 > 수정된 데이터를 다시 View에게 전달해 화면 업데이트

#데이터 수정할 필요없이 View만 변경하면 될 경우, Controller가 Model에게 접근하지 않고 바로 View 조작하는 것도 허용

#데이터를 이용한 중간 처리 로직이 필요없을경우, Model에서 Controller를 거치지 않고 바로 View에게 데이터의 변경을 알리는 것도 허용

MVC의 한계 : Model과 View사이 양방향 데이터 흐름이 발생하면 연쇄적인 변화가 일어날 수 있고 문제가 발생시 어디서 문제가 발생했는지 파악하기 힘들어진다

2. Flux 패턴 : MVC패턴의 한계로 나오게 된 데이터 패턴으로, 단방향(Unidirectional data flow) 데이터 흐름이 특징인 패턴

• Action : 어떤 변화를 일으키고 싶은지 설명하는 단순한 자바스크립트 객체이다 (변화의 의도만을 표현)
• Dispatcher : 액션을 받아서 스토어에 전달하는 역할
• Store : 데티어 저장소 역할, Dispatch로 전달 받은 Action에 따라서만 데이터를 변경, 그 외의 변경은 허용하지 않는다
• View : 데이터를 UI로 표현하는 역할, Store를 구독하고 있다가 데이터가 변경되면 UI에 반영한다