-
[CS Study] MVVM && FLUX네트워크/CS Study 2023. 6. 20. 22:59
디자인패턴이란 무엇인가?
디자인패턴이란 소프트웨어의 개발 방법을 공식화 한 것으로 일종의 규칙이다 이를 통해 구현자들 간의 커뮤니케이션의 효능을 높이기 위해서 사용해야 하는 것이다.
이러한 디자인 패턴의 대표적인 예시가 바로 MVVM, FLUX, MVC 와 같은 것들이다. 이것들에 대해서 한번 알아보자!
MVVM 과 FLUX의 특징
먼저 뷰를 통해 보여진 내용에 대해서 사용자가 액션을 하게 되면 커멘트 패턴으로 모델뷰에 액션이 전달됩니다 이때 뷰모델은 모델에게 데이터를 요청하게 되고 모델에 요청에 응답하여 데이터를 준 것을 뷰 모델에서 가공하고 저장하게 되고 이걸 뷰가 데이터바인딩해서 화면에 나타나게 한다.장점으로는 의존성을 없애므로 독립적으로 모듈을 개발 할 수 있지만 뷰모델이 상당히 복잡한 구조라는 것이 흠이다.
이자식은 FLUX 패턴이라고 불리는 녀석이다. 페이스북에서 개발을 했는데 얘기를 들어보니 점점 애플리케이션의 규모는 커지는데 MVC 패턴으로는 감당하기 힘들 것같아서 만들었다고 보면 되겠다. 보니깐 단방향 패턴으로써 화살표를 가르키는 방향으로만 영향을 줄 수 있다.
액션은 사용자가 view에서 버튼을 누른다거나 무튼 요청을 하는 행위이고 이 액션은 디스패쳐로 전달이 된다.
디스패쳐에 전달 된 액션은 디스패쳐 내에 있는 콜백함수를 통해서 스토어를 변경 할 수 있게끔 작용하고 이 디스패쳐라는 놈은 중앙허브 같이 교통정리도 해주고 각 스토어마다 있는 콜백함수를 액션에 따라 연결도 해주는 바쁜 놈이다 그렇게 디스패쳐의 콜백함수를 통해 변경 된 값은 스토어에 저장이 되고 이 내용이 뷰를 통해 반영이 되고 반영 된 내용에서 다시 액션을 취하고 무한 반복하고 이게 FLUX이다
단방향으로 진행되다보니 좋다.
참고:
https://m.hanbit.co.kr/channel/category/category_view.html?cms_code=CMS6705039023
https://minprogramming.tistory.com/entry/MVVM%EA%B3%BC-FLUX%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
https://velog.io/@andy0011/Flux-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80
'네트워크 > CS Study' 카테고리의 다른 글
[항해99 WIL] ES5 VS ES6 (0) 2023.06.21 [CS Study] Closure (0) 2023.06.21 [CS Study] 스코프란 & 호이스팅이란 무엇일까??? (1) 2023.06.19 [CS Study] fetch / axios && API란 무엇일까? (1) 2023.06.18 async /await 에 대하여 (2) 2023.06.14