김로그 개발 잘 하고 싶다

Flux에 대해서 알아보자.


Facebook과 함께 성장한 Flux아키텍처에 대해서 알아보고 MVC패턴의 문제를 어떻게 극복했는지 알아보자.

Flux에 대해서 알아봅시다. 이 글은 Flux를 막 공부하기 시작한 사람이 공부한 내용을 정리하고 작성한 글입니다. 따라서 내용이 정확하지 않을 수 있습니다. 글에 오류가 있으면 따끔하게 지적해주세요!


디자인 패턴

소프트웨어 개발 방법에서 사용되는 디자인 패턴은, 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 이름을 붙여, 이후에 재이용하기 좋은 형태로 특정의 규약을 묶어서 정리한 것이다. - 위키피디아 디자인패턴

우선 MVC 패턴에 대해서 알아봅시다

mvc

출처 위키피디아

제가 처음 웹 개발을 접했을 때 Ruby on Rails 를 배웠는데 이때 MVC 패턴 에 대해서도 공부했던 기억이 납니다. MVC 패턴이란 어플리케이션을 세가지 구성요소로 나누어 개발하는 구조적 패턴을 말합니다. 여기서 MVC는 Model-View-Controller. 원래는 데스크탑의 GUI에 많이 사용되 었는데, 요즘은 웹 어플리케이션을 만드는데 많이 사용된다고 합니다. (Ruby on Rails, Django, ASP.NET MVC 등등…)

MVC 패턴의 구성과 각 구성요소들의 역할은 다음과 같습니다.

  • Controller 모델에 명령을 보내고 모델의 상태 변경, 관련된 뷰에 면령을 보내고 모델의 표시방법을 바꿀 수 있음
  • Model 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에게 알려줌, 이와 같은 통보를 통해서 뷰는 최신의 결과를 나타내고 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가, 제거, 삭제할 수 있음.
  • View 사용자가 볼 결과물을 생성하기 위해서 모델로부터 정보를 얻어 옴

Flux의 등장

결론 부터 말하면 Flux는 MVC가 가진 문제를 해결하기 위해 등장한 구조이다. MVC 패턴은 구조가 많이 복잡하지 않은 환경에서는 잘 작동한다.

MVC

하지만 Model이 많아지고 이를 표현하기 위한 View들이 많아지고 View를 통해 입력된 값이 모델에 영향을 주고 이런 로직들이 복잡해지게 되면

MVC

Model이나 Model에 관련된 View가 대량으로 추가되면 복잡도가 폭발적으로 증가하게 된다. Facebook과 같이 크기가 굉장히 크고 확장이 빈번하게 일어나는 어플리케이션이라면 이런문제가 필연적으로 발생할 것이다.

Facebook에는 알림(ㅜnotification)버그가 가장 유명한 예인데, Facebook에 접속해서 메시지 혹은 댓글 알림에 숫자가 떠있어서 클릭해보면 아무런 메시지가 없는 경우가 있었다. 클릭하면 알림은 사라지미만, 잠시 후에 알림이 다시 나타나고 클릭해보면 아무런 메시지가 없었다. 그리고 이 cycle은 계속 반복되었다.

작성중…


reference