Nuxt.JS 정의 및 특징
Nuxt.JS 정의
Nuxt.JS는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어주기 위한 프레임 워크입니다.
Nuxt.JS 특징
- Vue 파일 사용
- 코드 분할 자동화
- SSR 통한 SEO
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES2015+ 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리
- 전 처리기 지원
Nuxt.JS 디렉토리
| asserts | CSS, Image 등등 Front 관련 리소스를 포함한 디렉토리 |
| components | 애플리케이션에서 사용될 컴포넌트들을 포함하여 해당 경로에 위치된 컴포넌트들은 Nuxt.JS의 비동기 데이터 함수인 asyncData 또는 fetch 함수를 쓸수 없다. |
| layouts | 애플리케이션 전체에 대한 레이아웃을 포함한다. 기본으로 default.vue 가 생성되어있을 텐데 상황에 맞게 변경할 있다. |
| middleware | 애플리케이션에서 사용될 middleware를 포함한다. 페이지 또는 레이아웃이 렌더링 되기 전에 실행되며, middleware 를 페이지나 레이아웃에 바인딩하였다면 해당 페이지나 레이아웃이 실행되기전에 매번 실행된다. |
| module | Nuxt 프레임워크의 핵심 기능을 확장하고 통합 및 추가 할 수 있다. 사용자가 직접 모듈 작성할 수 있다. |
| pages | 실제 애플리케이션 페이지 구성을 포함하여 해당 디렉터리 구조에 따라 자동 Router 가 생성된다. 해당 디렉터리는 이름 변경할 수 없다 |
| plugins | 애플리케이션에 바인딩 될 외부 혹은 내부 Plugin을 포함하고 있다. 애플리케이션이 인스턴스화 되기 전에 실행하며 전역적으로 구성 요소를 등록하고 함수 또는 상수를 삽입할 수 있다. |
| static | 해당 디렉터리는 정적인 파일들을 포함하고 있다. 구성에 따라서 html, javascript 등 파일을 포함시킬 수 있다. |
| store | 애플리케이션에서 사용될 Vuex 의 store 파일들을 포함하고 있다. 기본적으로 비활성화 상태이다. 해당 디렉터리는 이름 변경할 수 없다. ※ 해당 Vuex 에 관련한 것은 추가적으로 추후 정리하여 업로드할 예정이다. |
※ 해당 초록색으로 표시된 디렉터리는 이름을 변경할 수 없다.
SSR 이란?
- Server Side Rendering 의 줄임말로 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식입니다.
장점
- 서버를 이용해 페이지를 구성하여 빠른 포기 응답을 경함할 수 있다.
단점
- 모든 요청에 대해 필요한 부분을 수정하는 게 아닌 새로운 HTML 페이지를 내려주기 때문에 속도 저하가 생길 수 있다.
'언어 > NodeJS' 카테고리의 다른 글
| Vuex 란 무엇인가 (0) | 2022.09.06 |
|---|---|
| [Vue2x] Progress Bar 적용 (0) | 2022.09.06 |
| [NuxtJS] 명령어 정리 (0) | 2022.09.02 |
