C2C Dev

MVC/Flux 개요

MVC(Model-View-Controller)

1970년대에 나온 구조, 경우에 따라 MVP, MVVM 구조도 있다.

• 바인딩 : 어떤 구성 요소의 실제 값이나 속성을 결정짓는 과정
• Model = 바인딩에 사용된 변수
• View = 사용자가 직접 보고 상호작용하는 영역
• Controller = 모델이랑 뷰 사이에서 데이터 흐름을 조절

AngularJS & Angular2 의 학습 분량 차이

공통 학습 내용

• JavaScript & DOM

차이점

• AngularJS : AngularJS
• Angular2 : TypeScript / Node.js etc..

Vue.js에서의 MVC패턴

methods 위에 있는 영역은 model

methods 안에 있는 함수는 controller

하단 css셀렉터에 있는 것은 view

Flux

페이스북에서 개발

데이터 흐름이 너무 복잡해지고 디버깅하기 어려워지는 문제 발생으로 인해서

단순화와 데이터 변화의 예측을 위해서 탄생

Action: 변화 발생하는 객체(버튼 클릭, 값 변화 등..)

Dispatcher : Action을 받아서 Store로 보내주는 허브(동기화 과정)

Store: Action의 상태(데이터)를 가지고 있고 관리하는 곳

View: 사용자 인터페이스 부분

동기 & 비동기

동기식

• 순차적으로 줄 세우는 식으로 진행

비동기식

• 딜레이를 줄이기 위해서 정해진 순서 없이 동시에 진행(작업 동작이 둘 이상인 경우)

동기 (Synchronous) 비동기 (Asynchronous)

회고 : 구조 패턴에 대해 디테일하게 알게 된 날이 되었다. 프로젝트 수행 시 고려 할 것