[Vue+Nuxt.js] Nuxt.js 기본

 

Git Hub

 

 

 

🗂 목차

● [Vue+Nuxt.js] Nuxt.js 기본 
●[Vue+Nuxt.js] Nuxt.js 시작하기 
● [Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동  
●[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 목록 페이지와 상세 페이지 개발
● [Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발
●[Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기
● [Vue+Nuxt.js] Vuex 새로고침 시 초기화 되는 문제 해결

 

 

🗂 부록

● [FrontEnd] HMR(Hot Module Replacement)
● [Nuxt.js] 비동기 데이터 호출 방법
● V-Model 동작 원리와 활용 방법
● [Nuxt.js] NuxtServerInit

 

 

🗂 내가 만난 Error

● [vuex] expects string as the type, but found undefined.

 

 

 

 

 

 

🚀 Nuxt.js란?

    🔽  개요

Nuxt 공식 홈페이지

Nuxt란 Vue.js의 Framework입니다.

Vue.js는 JavaScript의 Framework인데, 이것에 또 Framework를 사용한다라고 보면 되는 것이에요.

참고로 Framework와 Library의 간단한 차이점은 얼마나 자유도가 높냐인데, Framework가 자유도가 낮은 편이고, 그 말인 즉, 정해져 있는 것이 많아 가져다가 쓰기만 하면 된다는 의미가 되는 것입니다.

Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크인데, 웹 애플리케이션을 제작할 때 필요한 Vuex, Router, Axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 애플리케이션 (Single Page Application), 서버 사이드 렌더링(Server Side Rendering), 정적 웹 사이트(Static Generated Website)를 쉽게 제작할 수 있게 해주는 도구인 것이에요.

 

💡 참고 사항
Server Side Rendering이란? 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식.

 

 

반응형

 

 

 

    🔽  특징

Nuxt.js의 특징을 요약하면 아래와 같이 나눌 수 있습니다.

● 서버 사이드 랜더링 방식
● 규격화된 Packge(폴더) 구조 (layout, sotre, middleware, plugins 등)
● pages 폴더 기반 자동 라우팅 설정
● 코드 스플리팅
● 비동기 데이터 요청 속성
● ES6/ES6+ 변환
● 웹팩을 비롯한 기타 설정

 

 

 

 

    🔽  Server Side Rendering

        📦 개요

Vue Single Page Application은 Server Side Rendering의 반대 개념인 Client Side Rendering 방식인 것이에요.

Server Side Rendering 방식은 예전부터 이어져 내려오는 전래동화와 같이 오래전부터 사용되는 기법이에요.

 

 

        📦 사용하는 이유

서버 사이드 방식을 쓰는 목적은 크게 `검색 엔진 최적화`와 `빠른 페이지 랜더링`을 위해서 입니다.
검색 엔진 최적화란 구글, 네이버와 같은 검색 사이트에서 검색했을 때 결과가 이용자에게 많이 노출될 수 있도록 최적화 하는 기법인 것이에요. 특히, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 Page 별로 적용하기 위해서는 서버 사이드 랜더링이 효율적이랍니다.

`빠른 페이지 랜더링` 빈 페이지가 전달 되었을 때, CSR 방식은 브라우저에서 열심히 내용을 그리는 작업을 할텐데, SSR 방식은 브라우저가 아닌 Server에서 그리는 것이에요. 브라우저는 이용자가 사용하는 컴퓨터에서 작업을 하게 되는데, 이용자는 저가형 컴퓨터를 이용하고 있을수도 있는 것이에요. 그렇다면 그 컴퓨터에서는 CSR 방식에서 일을 하는게 느릴 수 있을 수 있는 것이에요. Server는 크고, 가용성이 높은 장비닌까 Server에서 그리고 오면 더 빠를 수 있겠지요!

 

출처 : https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC%E1%84%80%E1%85%AA-%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC-%E1%84%8E%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%A5%E1%86%B7

 

또한, 서버 사이드 방식은 빈 HTML Page를 받아 브라우저에서 그리는 클라이언트 사이드 방식과 다르게 서버에서 미리 그려 브라우저로 보내주기 때문에 페이지 그리는 시간을 단축할 수 있다는 장점이 있는 것이에요. 이용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이에요.

 

 

        📦 단점

그렇다면 단점은 무엇이 있을까요? 서버 사이드 방식은 `Node.js`와 같은 Backend를 알아야 하고, 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이애가 필요해요. 진입 장벽이 좀 높다는 게 단점일 수 있겠지요.

또한, `Node.js` 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 하는 것이에요. `Vue Single Page Application`의 Life Cycle Hook과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 `beforeCreate`, `created`에서 `window`, `document`와 같은 브라우저 객체에 접근할 수 없답니다.

 

출처 : https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%AB-%E1%84%8A%E1%85%B3%E1%86%AF%E1%84%81%E1%85%A1

 

 

💡 참고 사항
Server Side Rendering의 경우 Component가 최초로 생성되는 시점이 브라우저 상이 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없다. 대신 beforeMount나, mounted에서 window와 document를 접근할 수 있다.

 

 

 

 

    🔽  Client Side Rendering

        📦 개요

URL이 변경이 되면 Event(hashchange Event)가 발생하게 되고, 이것이 바로 Vue Router의 내부 동작 방식 즉, 전체적인 SPA(Single Page Application)는 이런 Event를 통해 동작하고 있습니다. 결국 Event를 통해 화면을 바꿔주는 것이 SPA의 특징인 것이에요.

 

 

 

    🔽 둘의 차이점

먼저 Client Side Rendering을 이해하기 위해 Vue Cli로 생성된 Project의 결과를 볼 것이에요.

아래는 Vue CLI로 생성한 Project 기본 Code에요.

// src/main.js
import Vue from "vue";
import App from "./App.vue";

new Vue({
	render: (h) => h(App),
}).$mount("#app);

 

위 Code는 Vue의 객체를 생성하는 Code인데, 이 객체는 아래 index.html 파일의 app ID를 갖는 Tag에 부착이 되게 되는 것이에요.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="">
  <head>
    <!-- ... -->
  </head>
  
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

CLI로 Project를 생성한 뒤 `npm run serve`로 프로젝트를 실행하고, 브라우저를 확인하면 Vue 기본 Page가 뜰 것인데, 이 때 개발자 Panel의 `Network` Tab에서 `Doc`으로 필터링한 결과를 아래와 같이 준비해 보았어요.

 

 

서버에서 넘겨받은 HTML Code에는 `body` Tag 본문에 `<div id="app"></div>` 밖에 없지만, 화면에는 `Welcome To Your Vue.js App` Text와 Image가 있는 것이에요. 이것들 모두 Client(브라우저)에서 동작한 `Vue.js`가 그려준 것이랍니다. 즉, 브라우저에서 화면의 결과를 그려낸 것이에요.

서버 사이드와 클라이언트 사이드는 바로 어디서 화면에 보일 내용을 그리느냐의 차이인 것이에요. 클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리고 서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려 브라우저에 던져주는 방식인 것이에요.

 

출처 : https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC

 

 

        📦 Client Side Rendering

https://careers.google.com/

 

먼저 CSR 동작 방식을 이해하기 위해 Vue.js로 만들어진 Google의 Careers Homepage를 살펴보려고 해요.

개발자 도구(F12 Key)에서 `Network` Tab에 보면 아래와 같이 Filter가 여러개 있는 것을 볼 수 있어요.

 

 

일단 지금은 `All` Filter (아무 Filter를 걸지 않는다.) 상태인데, 여기서 `Doc(Document)` Tab을 선택해서 Server에서 받아온 Data를 확인해 볼 것이에요.

 

 

여기서 맨 위에 careers.google.com Document의 Response(응답)을 선택해서 확인 해 보면

 

 

이렇게 응답이 온 것을 확인할 수 있는데, 위의 93번째 줄 `<div id="app-root"></div>`를 보면 div Tag안에 어떤 내용도 없는 것을 확인할 수 있는 것이에요.

그런데, 개발자 도구 요소를 통해 확인해 보면 정말 어마어마하게 많은 Tag들이 있는 것을 볼 수 있는 것이에요.

그래야지 화면이 나올테닌까요!

즉, 위에서 본 것과 같이 SPA(Single Page Application)나, CSR(Client Side Rendering) 방식은 브라우저에서 html을 받아왔을 때, `<div id="app-root"></div>`안에 있는 모든 내용을 브라우저에서 그리는 방식입니다.

 

 

 

        📦 Server Side Rendering

이번에는 캡틴판교님의 Blog를 한번 개발자 도구로 확인해 볼게요.

 

위의 CSR과의 차이점은 개발자 도구에서 보면 CSR과 다르게 모든 Text, html Tag 등의 내용이 출력되는 것을 볼 수 있습니다.

 

 

 

 

    🔽 Nuxt.js를 사용하면 좋은점

Nuxt.js로 개발하면 아래와 같은 장점이 있습니다.

● 검색 엔진 최적화
● 초기 프로젝트 설정 비용 감소와 생산성 향상
    ◦ ESLint, Pretter.
    ◦ 라우터, 스토어 등의 라이브러리 설치 및 설정을 할 필요 없음.
    ◦ 파일 기반의 라우팅 방식으로 설정 파일 자동 생성.
● 페이지 로딩 속도와 이용자 경험 향상
    ◦ 브라우저가 하는 일을 서버에 나눌 수 있다.
    ◦ 모르면 지나칠 수 있는 코드 스플리팅 기본 설정.

 

 

 

 

참고 자료 : Nuxt.js 시작하기 - 인프런

                  Cracking Vue.js