Redux - Design Patten

 

 

Design Patten : 검증된 해결책

 

 

 

 

 

패턴 === 되풀이 되는 사건이나 물체의 형태

디자인 패턴 === 설계 간 자주 발생하는 문제에 대한 모범 답안

프로그램을 개발하면서 생기는 문제점들에 대해서 해결할 수 있는 방법을 도출하고 그를 패턴화 해둔 것

 

 

 

바퀴를 재발명 하지마라 ( 재발견하지 말고 이미 만들어져있는 게 있다면 그것을 써라)

 

이미 여러사람들에 의해서 검증된 해결 방안, 이를 적용하면 코드를 효과적으로 개선할 수 있음

디자인 패턴을 활용하면 상대적으로 저수준의 문제들은 패턴을 이용해서 해결하면서 고수준의 문제에 집중할 수 있음

 

 

 

효율적인 소통 방식

 

개발을 하면서 원활한 소통을 위해서는 체계적인 규칙과 용어가 필요

디자인 패턴을 사용하면 매번 모든 디테일한 사항들을 장황하게 설명할 필요 없이 약속해둔 용어로 표현할 수 있기에좀 더 명확하고 확실하게 소통할 수 있음

 

 

 

 

유지 보수 용이

 

Design === 설계

검증된 디자인 패턴들은 코드 안에서 관심사 별로 역할을 분리해서 관리하도록 설계되어 있음

변경사항이 발생하면 수정이 필요한 부분만 수정하면 되기에 유지 보수에 용이

 

 

 

 

 

 

디자인 패턴의 종류

 

 

 

 

 MVC 패턴

 

: 1978년 발표, 모든 디자인 패턴들의 조상격으로 널리 쓰임

 

 

프로젝트의 구성 요소를 역할에 따라 model, view, controller 세가지로 관리하는 패턴

 

Model 은 데이터를 관리하는 역할

View 는 사용자에게 보여지는 UI를 담당

Controller 는 사용자의 Action에 의해 이벤트를 감지하고 처리하는 역할

즉, Model 또는 View를 업데이트 하는 로직을 담당 

각 구성요소들의 관심사의 분리(SoC, Seperation of Concern)가 잘 이루어져있기에 유지보수 및 확장이 용이

 

한계
프론트 엔드의 등장으로 기존의 MVC 패턴만으론 한계에 봉착하게 됨

양방향 데이터 흐름을 가지고 있는 MVC 패턴은 모델, 뷰, 컨트롤러가 소통하면서 서로에게 변화를 일으킬 수 있음

애플리케이션의 규모가 작을 땐 문제 없지만 

 

 

이렇게 애플리케이션의 규모가 커짐에 따라서 모델과 뷰들이 점점 더 많이 생겨나게 되었음

제일 큰 문제는 양방향 데이터 흐름이기 때문에 모델과 뷰간의 연쇄적인 변화가 발생하게 됨

 

-> 하나의 모델에서 문제가 발생하면 뷰가 변화되고 그 뷰가 변화됨에 따라서 다른 모델이 수정되는 식으로 연쇄적인 변화의 흐름이 이어짐

-> 어디서부터 문제가 발생되었는지 파악하기 쉽지 않음 = 애플리케이션의 동작을 예측하기가 힘들어짐

 

 

실제 메타 - 페이스북에서 이런 문제가 발생

 

-> 안 읽은 메세지가 있다는 표시가 있는데 실제 들어가보면 안 읽은 메세지가 없는 버그 발생

-> 버그를 고치려고 했지만 MVC 의 양방향성 때문에 발생하는 연쇄적인 변화로 인해 프로그램의 동작을 정확히 예측하기 어렵기에 버그가 지속적으로 발생

-> 이를 해결하기 위해 새로운 디자인 패턴을 만들고 발표하게 됨 (Flux)

 

 

 

 

 

 

Flux

 

: 단방향 데이터 흐름, 양방향성 MVC 패턴의 한계에 대처하기 위해 만들어짐

 

 

 단방향으로만 전개됨

 

Action : 특별한 로직 없이 어떤 변화를 일으키고 싶은지 설명하는 단순한 자바스크립트 객체

Dispatcher : 액션을 받아서 스토어에 전달하는 역할

Store : 데이터의 저장소 역할, Dispatch로 전달받은 Action에 따라서만 데이터를 변경, 그 외의 변경은 허용하지 않음

view : 데이터를 UI로 표현하는 역할, Store를 구독하고 있다가 데이터가 변경되는 UI에 반영

 

 

 

 

 

 

 

정리

 

 

 

디자인패턴은 애플리케이션 설계 중 자주 반복되는 문제에 대한 모범 답안

디자인 패턴을 사용하면 이미 검증된 해결책을 사용하여 효율적으로 소통할 수 있고 패턴이 가지고 있는 좋은 설계로 인해 유지 보수가 용이함

 

디자인 패턴 중 MVC는 애플리케이션의 구성요소를 역할에 따라 Model, View, Controller 로 나눈 구조

MVC는 양방향 데이터 흐름을 가지고 있어 연쇄적인 데이터 변화가 발생할 수 있음

양방향 데이터 흐름으로 인해 애플리케이션의 동작을 예측하기 힘들어지자 이를 극복하기 위해 Flux 패턴 탄생

Flux (구성요소 : Action, Dispatcher, Store, View) 단방향 데이트 흐름으로 애플리케이션의 변화를 예측하기 용이해짐