9. 그 외 뷰에 대한 추가 정보들

Vuex : 상태 관리 라이브러리

 

# 뷰엑스 (Vuex) : 애플리케이션의 상태 관리 (state management) 를 돕는 라이브러리이다.

(※ 상태 : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다.)

 

상·하위 컴포넌트 간에 props를 전달하는 과정에서, 이벤트 버스를 활용할 경우 셀 수 없이 많은 데이터 흐름이 발생하게 된다.

이때 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 하는 것이 상태 관리의 목적이다. (보통 규모가 크고 복잡한 애플리케이션에 필요하다.)

 

출처 : https://eunice-s.tistory.com/9

 

뷰의 반응성 (Vue Reactivity) : 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성

 

# 데이터가 변경되었을 때 어떻게 뷰에서 자동으로 화면을 갱신하는걸까?

뷰 인스턴스를 생성할 때 data 속성에 정의된 객체들은 getter, setter 의 형태로 변환이 된다. (내부적으로 필요한 속성)

또, 인스턴스가 화면에 올라가고 나서 특정 data 속성을 바꾸거나 접근하면 watcher 에서 이 사실을 감지하여 다시 화면을 그리게 된다.

​

이때! '인스턴스를 생성하는 시점!'에 data 에 대한 반응성이 생긴다.

따라서 인스턴스를 정의할 때 data 속성을 정의해주어야 반응성이 생기며 인스턴스를 생성하고 난 후에야 data 속성에 객체를 추가하는 방식에는 반응성이 생기지 않는다. (해당 객체에 변화가 있어도 화면을 갱신하지 않는다.)

 

클라이언트 사이드 렌더링 (CSR)과 서버 사이드 렌더링(SSR)의 차이

 

# 클라이언트 사이드 렌더링이든, 서버 사이드 렌더링이든 둘다 브라우저는 웹 페이지를 화면에 나타내는 역할을 한다.

다만, (SSR)완벽하게 그려진 HTML 페이지를 나타내느냐, (CSR)일부만 그려져 있고 추가로 더 그려야 할 것이 남아있는 HTML 페이지를 나타내느냐의 차이다.

​

# 클라이언트 사이드 렌더링 : 다 그려져 있지 않은 HTML 페이지를 브라우저에서 받고 프런트엔트 프레임워크와 같은 JavaScript 를 이용하여 나머지 부분을 그린다.

※ 프런트엔드 프레임워크 : React, Angular, Vue 등

​

# 서버 사이드 렌더링 : 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것을 의미한다.

 

# 장점

클라이언트 사이드 렌더링	서버 사이드 렌더링
매끄러운 화면 전환, 사용자 경험 향상	검색 엔진 최적화 (SEO, Search Engine Optimization) : 이미 다 그려져 있으니까
	초기 화면 렌더링 속도가 빠르다.