수업
코멘토(https://bit.ly/3D9XCOz) 실무 PT 두 번째 수업. 이번 주 수업은 양이 많아 듣는 동안 허우적... 근데 머릿속이 정리가 안돼서 질문도 못 함 ㅎ... 자료 다시보고 과제에 질문같이 올려야지~ 했는데 그래도 강의자료 다시보니 이해가 가는 것 같다.
데이터 바인딩
화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.
웹사이트를 이용하다 보면 클릭 한 번 할 때마다 사이트가 변한다. 사이트가 변한다는 건 데이터가 변경된다는 뜻이다. 주로 클릭이 많지만 그 외에도 데이터를 변경시키는 사용자의 동작은 아주아주 많다.
js를 처음 배우면 투두리스트를 주로 만든다. 그럼 할 일을 한 개 추가하면 <li>태그가 추가되는 식으로 구현하게 될 것이다.
그러기 위해 querySelector로 추가될 <ul>태그를 가져오고 거기에 자식으로 넣고 마지막에 넣을지 중간에 넣을지 그때그때 확인해야 하고... 아주 귀찮고 많은 작업을 해야 한다. 그리도 돔 탐색은 많이 안 할수록 좋다 돔 트리는 아주아주 크기 때문에.
그래서 데이터 바인딩을 해야 한다. 할 일을 추가하면 데이터가 변경되고 브라우저는 변경된 데이터에 맞춰 렌더링을 업데이트한다. 돔 트리를 하나하나 조작을 하지 않아도 우리가 원하는 화면을 얻을 수 있다.
MVC
데이터 바인딩을 하는 패턴 중 하나가 MVC.
컨트롤러가 입력을 받고 모델이 데이터를 업데이트한다. 그리고 뷰는 업데이트된 데이터에 맞춰 렌더링만 한다.
그런데 이게 클라이언트 사이드 렌더링 시대가 오면서 뭔가 복잡해졌다. 컨트롤러가 입력을 받는다. 서버에서는 클라이언트의 request가 입력이 되지만 클라이언트는 입력이 사용자의 조작이다. 근데 조작은 view에서 일어난다. 부트 캠프에서 이벤트 핸들러를 view랑 controller 중에 누가 가지는 게 맞는 가로 논의 많이 했었던 기억이 난다.
Model
- API Result entities & UI States
View
- UI definitions
Controller
- Event handlers
- dispatchers
- 활용한 모델 변경
- View <> Model 연결
모질라 사진 대로라면 view가 controller에 입력을 전달해 주고 controller도 view를 직접 업데이트를 하게 되니까 이벤트 핸들러는 controller가 가지는 걸로.
Model - View - Whatever
그래서 나온 것이 MVVM. VM은 view model로 view를 위한 데이터를 처리하는 model이다.
model한테 데이터를 받아 view model이 처리하고 view가 받아 렌더링 한다.
이름에 whatever가 들어가는 것처럼 vm 외에 다른 패턴들도 있다.
Proxy
proxy는 대리인이라는 뜻을 가지고 있다. 어떤 객체를 대신해 중간에 핸들러를 가로채 작업을 대신해서 수행해 준다. Vue.js에서는 proxy 패턴을 사용해 양방향 데이터 바인딩이 가능하다. 양방향 데이터 바인딩은 view가 바뀌면 model이 바뀌고 model이 바뀌면 view가 바뀌는 것을 말한다.
react.js는 단방향 데이터 바인딩을 기반으로 한다. 그래서 상태가 바뀌면 그걸 감지하고 상태(데이터)에 맞춰 렌더링(뷰)을 새로 한다.
