[도서] Do it! Vue.js - Vuex, 반응성, 서버 사이드 렌더링이란?

Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961

Vuex

어플리케이션의 상태 관리(state management)를 돕는 라이브러리이다.

상태란?

특정 데이터를 여러 컴포넌트가 공유하는 데이터

props/이벤트버스로도 상태를 전달할 수 있지 않나요?

props의 단점: 로그인 폼에서 메인 컴포넌트로 데이터 이동 시에 로그인과 최상위 컴포넌트를 거쳐서 데이터를 전달해야하는 단점이 있다.
이벤트 버스의 단점: 상-하위 간의 데이터 전달 구조를 따르지 않아 단방향 데이터 흐름이 아닌 셀 수 없이 많은 데이터 흐름(Countless Ways Data Flow) 이 된다는 단점이 있다.

뷰의 반응성

뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성이다.

반응성으로 아래 내용을 공부할 수 있어요.

• 프레임워크 내부적으로 화면을 그리는 방법
• 가상 돔이 동작하는 방법
• 화면을 빠르기 위해 브라우저에 부하를 주지 않고 돔을 추가, 삭제하는 방법

데이터가 변경될 때 뷰에서 자동으로 화면을 갱신하는 방법

1. 인스턴스 생성될 때 data 속성에 정의된 객체는 특정 변환 작업을 거친다. (data에 정의된 모든 속성을 getter, setter 형태로 변환)
2. 인스턴스가 화면에 올라가고 난 뒤 인스턴스의 data 속성을 바꾸거나 접근하면 watcher에서 사실 감지 후 다시 화면을 그리라는 신호를 보낸다.

watcher 속성이란?
모든 컴포넌트에 존재하는 속성으로 화면을 다시 그리는 데 중요한 역할을 한다.

만약 인스턴스를 생성하고 data 속성을 추가한다면?
data 속성의 반응성은 '인스턴스를 생성하는 시점'에 생기므로 인스턴스 생성 이후 data 속성을 추가한다면 그 객체에는 반응성이 생기지 않는다.

📄 서버 사이드 렌더링

클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이

클라이언트 사이드 렌더링: 일부만 그려져 있어 추가로 그려야 할 것이 남아있는 HTML 페이지를 브라우저에서 받고 프론트엔드 프레임워크와 같은 자바스크립트를 이용하여 나머지 부분을 그리는 것.

• 강점: 매끄러운 화면 전환으로 사용자의 경험이 향상된다.

서버 사이드 렌더링: 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것

• 강점: 화면의 내용이 이미 다 그려진 상태로 클라이언트에 넘어오기 때문에 내용의 노출 정도가 높아 검색 엔진에서 높은 점수를 받는다. / 화면 렌더링 속도가 빠르다.