Nuxt.js 시작해보자

** 참고 : https://maxkim-j.github.io/posts/nuxt-ssr/

Nuxt로 살펴보는 서버사이드 렌더링의 핵심

 

디렉토리 구조

.nuxt : 빌드 결과물 폴더

assets : 스타일 시트, 이미지, 폰트 등 웹 리소스 폴더

components: vue 컴포넌트 폴더

 

layouts : 레이아웃 컴포넌트 폴더

* 레이아웃 컴포넌트 : 페이지의 레이아웃을 잡아주는 역할을 하는 컴포넌트

pages 에 정의된 페이지들을 URL 을 통해 접근할 때 기본적으로 화면에 표시되는 컴포넌트는 layouts/default.vue 가 된다.

위의 <Nuxt/> 가 특정 URL 에 해당하는 페이지 컴포넌트를 뿌리는 영역.

 

---

 

middleware : 미들웨어(페이지를 화면에 표시하기 전에 실행할 수 있는 함수) 파일 폴더

페이지나 레이아웃이 렌더링 되기 전에 호출되는 커스텀 훅(Hook)으로,

Vue 인스턴스가 생성되기 전에 호출되는 asyncData 보다 먼저 호출

 

** 참고 : Nuxt 라이프 사이클

-> asyncData 와 마찬가지로 context 를 인자로 받기 때문에 store, route, params, query, redirect 등에 접근 가능

서버 미들웨어와 구분하기 위해 해당 미들웨어는 라우트(Route) 미들웨어라고도 한다.

 

📌 익명 미들웨어(Anonymous Middleware) : 특정 페이지나 레이아웃에 종속되는 미들웨어로, 페이지나 레이아웃에서 직접 middleware 훅을 통해 명시하기 때문에 다른 페이지나 레이아웃에서 공유할 수 없음

 

📌 네임드 미들웨어(Named Middleware) : 여러 페이지나 레이아웃에서 공유될 수 있도록 middleware 디렉토리에서 파일로 관리되는 미들웨어로, Nuxt 환경 파일을 통해 전역적으로 적용하거나 반대로 각각의 페이지나 레이아웃을 통해 선별적으로 적용 가능

-> middleware 디렉토리에서 관리되는 파일의 이름이 미들웨어의 이름이 되기 때문에 네임드 미들웨어 라고 지칭

 

pages : 특정 URL에 접근했을 때 표시될 페이지 컴포넌트 폴더 (next.js 와 비슷한 부분)

뷰 라우터와 nuxt 라우터 비교

 

plugins: 뷰 플러그인 폴더

static : 빌드 했을 때 서버의 루트에 존재해야 하는 파일들의 폴더

ex) favicon or robots.txt 등의 파일 위치

store : vuex 폴더