[Vue.js] Nuxt.js 강의 요약

1. 소개 영상

- Nuxt.js Vue 서버사이드 렌더링 프레임워크

 

 

2. 개발환경 구성 & VS Code 플러그인 목록

 

3. Nuxt.js 소개

- 공식 홈페이지 : nuxtjs.org

- 빠른 페이지 로딩 속도가 장점

- SEO와 사이트 정보 전달이 가능한 점이 장점

- 기존 Vue.js 프레임워크 기반의 "서버사이드 렌더링 프레임워크" 이다.

- 기존 Vue.js 에서 사용하던 뷰액스, 뷰라우터, 액시오스 등이 프레임워크에 내장되어 있다.

 

4. 서버 사이드 렌더링이란?

- 서버에서 페이지를 그려서, 클라이언트로 보낸 후 화면에 표시하는 기법

 

5. 클라이언트 사이드 렌더링이란? [CSR, Client Side Rendering]

- 기본 vue-cli를 통해 구축하는 것처럼, 싱글 페이지 어플리케이션

- js 라이브러리가 동작하면서, html을 클라이언트 단에서 생성하여, 화면의 표시

 

6. 클라이언트 사이드 렌더링과 서버 사이드 렌더링 결과 비교

- 새로고침 후, 크롬 네트워크 탭에서 "doc" 유형만 필터링해서 보았을 때,

클라이언트 사이드 렌더링의 경우 html 페이지 내 <div id="app"></div>만 존재한다.

서버 사이드 렌더링의 경우 html 페이지 내 실제 내용이 존재한다.

 

7. 서버 사이드 렌더링을 왜 쓸까? [Nuxt의 장점] 

- 가장 큰 이유는 검색 엔진 최적화(SEO, Search Engine Optimization)

- 빠른 페이지 렌더링(로딩)

* 코드 스플리팅(로딩되는 페이지에 필요한 모듈만 로드하는 기술)

- 페이지를 SNS에 공유 시, 페이지 URL별 정보[Open Graph(OG) 정보]를 보여줄 수 있음  

- 초기 프로젝트 설정 비용 감소와 생산성 향상(ESLint, Prettier, 라우터, 스토어 설정 필요 없음)
* 파일 기반의 라우팅 방식, 설정 파일 자동 생성이 편리

 

왜 안쓸까? [Nuxt의 단점]

- 학습 비용, 고려해야 할 점이 많다.

 

8. Nuxt.js의 특징

- 서버 사이드 렌더링

- 규격화된 폴더구조(layout, store, middleware, plugins) : pages 폴더 기반의 자동 라우팅 설정

 

9. Nuxt 프로젝트 생성

- 공식 페이지 내에서 Get Started -> Installation

 

npm init nuxt-app [프로젝트명]

- 프로젝트명 : [프로젝트명]

- 언어 : JS

- PackageManager : npm

- UiFramework : None

- Linting tools : ESLint, Prettier

- Testing Framework : None

- Rendering Mode : Universal(SSR, SSG, Static Site Generation, 정적페이지생성)

- Deployment Target : Server

- Development tools : jsconfig.json

- Continus Integration : None

- Version Control System : Git