서론 원티드 프론트엔드 세션에서 Redux 라이브러리를 파헤쳐보라는 조언에 하나씩 살펴보고 검색하면서 Flux 패턴에 대해 알게 되었다. Redux 뿐 아니라 사용해봤거나 알고 있는 라이브러리에서도 쓰이고 있음을 확인하고 “이건 꼭 알아야해 !” 라는 생각으로 정리를 시작하게 되었다. FLUX 패턴 2014 FaceBook F8 에서 발표된, Facebook의 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용되는 어플리케이션 아키텍쳐이다. React, Redux 등 관련 라이브러리에서 사용중인 일종의 디자인 패턴이다. 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 패턴과 같은 모습으로 새로운 코드 작성 없이 바로 사용할 수 있다. 탄생 배경 F8에서 밝힌 바에 따르면 Flux 패턴은 MVC 패턴의 예기치 못한 에러를 핸들링하기 위해 탄생했다고 한다. 위 그림에서 보듯 어플리케이션의 규모가 커지면 필연적으로 Model 과 View 의 종속관계가 증가되고, 의존성 또한 증가…

서론 Redux 작동 원리를 확인하면서 알게된 Flux 패턴. React와 다른 라이브러리 등에도 쓰이면서 반드시 알아야하는 개념이다는 생각이 들었다. 그런데 Flux 패턴의 시발점이 된 녀석이 있었다?! 반드시 알아야 해! 그래서 Flux 패턴을 정리하기 전 MVC 와 친구들을 정리한다. MVC, MVP, MVVM…? 그게 뭔디? 소프트웨어 디자인 패턴이다. UI와 비즈니스 로직를 분리해 코드를 관리하여, 상호 영향 없이 유지보수와 개발의 효율성을 높일 수 있는 설계 패턴이다. MVC Model-View-Controller 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 1979년 최초로 소개되어, 지금까지도 널리 사용되고 있다. 후술할 MVP, MVVM 패턴의 기반이 되는 개념이다. Controller Input을 받아 모델에 Action을 전달해 상태를 변경한다. 데이터와 비즈니스 로직 사이의 상호동작을 관리한다. Model…