서버에서 넘겨받은 HTML 코드에는body태그 본문에<div id="app"></div>밖에 없지만 화면에는Welcome To Your Vue.js App텍스트와 이미지가 있습니다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한Vue.js라이브러리가 그려준 것. 즉 브라우저에서 화면의 결과를 그려낸 것
서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점
어디서 화면에 보일 페이지의 내용을 그리느냐의 차이
클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리고 서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져줍니다.
서버 사이드 렌더링 장점
서버 사이드 렌더링을 쓰는 목적은 크게 "검색 엔진 최적화"와 "빠른 페이지 렌더링"
SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적.
서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있습니다. 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것
서버 사이드 렌더링의 단점
서버 사이드 렌더링은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요합니다. 따라서, 프런트엔드 개발 입문자 입장에서는 쉽지 않은 진입 장벽이 존재
또한, Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 합니다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에beforeCreate와created에서window나document와 같은 브라우저 객체에 접근할 수 없습니다.
서버 사이드 렌더링의 경우 컴포넌트가 최초로 생성되는 시점이 브라우저 위가 아니라 Node.js 환경이기 때문에 beforeCreate 나 created 에서 브라우저 객체를 접근할 수 없습니다. 대신 beforeMount 나 mounted에서 window와 document 를 접근할 수 있습니다.
서버사이드 렌더링 프레임워크로 Vue.js로 서버사이드 렌더링을 구현할때 가장많이 쓰는 프레임워크.. 서버사이드렌더링 기술은 실무자들의 가장 큰 고민인 빠른페이지 로딩속도와 성능 최적화에 대한 해답을 제시하고 있다. 더많은 사용자들에게 전달할 수 있도록 SEO와 사이트 정보 전달 측면에서도 강하다. 기존의 Vue SPA에 추가적인 규칙이나 기능들을 제공하며 웹 애플리케이션을 제작할 때 필요한 Vuex,Router,Axios 같은 라이브리들을 Nuxt.js에서 미리 구성하여 SPA, 서버사이드 렌더링, 정척 웹사이트를 쉽게 제작할 수 있다.
선수 지식으로는 Reactivity, Component, VueRouter, Vuex, axios 등이 필요하다.
서버사이드 렌더링이란? - 웹페이지 내용을 서버에서 모두 작성하여 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// 요청보내기 전 코드
return config;
}, function (error) {
// 요청에러 처리
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// 응답을 받기 전에 처리
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// 응답에러 전처리
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
Vuex는 vue.js 애플리케이션을 위한 상태관리 라이브러리 모든 컴포넌트들에 접근가능한 데이터 저장소로 컴포넌트간 공통으로 사용되는 데이터 속성을 저장한다. Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. Vuex는 기존 React의 Flux의 아키텍처를 따라가고 있고 React로 본다면 Redux와 비교 대상으로 볼 수 있다. Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다.
설치 (dependencies에 설치)
npm i vuex
store/index.js
//store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username: '',
},
});
main.js
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from '@/routes/index';
import store from '@/store/index';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
store,
}).$mount('#app');
npm run serve
크롬 Vue개발자도구
Vuex 구조
Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며,
이때 이 관리 포인트는 store 패턴을 사용하고 통상 store라고 불린다.
이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼 수 있다.
1. State
컴포넌트 간에 공유하는 데이터 = data() { ... }
Vue 컴포넌트에서 data로 볼 수 있다. 원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다. 이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다. mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트된다.
2. Mutations
동기로직
state를 변경하는 유일한 방법이고 이벤트와 유사하다. mutation은 함수로 구현되며 첫 번째 인자는 state를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있다. 여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능하다. 이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있다.
3. Actions
비동기 로직 = axios
Action은 mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능하다. 또한 mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경할 수 있다.
action에서는 첫 번째 인자를 context 인자로 받을 수 있으며 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함한다. 두 번째 인자는 mutation과 동일하게 payload로 받을 수 있다.
commit을 통해 mutation을 호출했다면 Action은 dispatch를 통해서 호출한다. context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있다는 것을 볼 수 있다.
4. Getters
중복된 데이터 처리
Getters는 쉽게 Vue 컴포넌트에서 Computed로 볼 수 있다.
말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산된다.
즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다. 이때 state는 원본 데이터로서 변경이 일어나지 않는다.
