Nuxt.js를 사용해보자. 1탄

 

 

✏️Nuxt를 사용해보자 1탄.

 

현재 진행 중인 프로젝트 특정 페이지에 SSR(SEO 고려로 인한)로 새로 페이지를 제작할 일이 생겨 Nuxt.js를 사용하게 되었다. 

Vue.js를 그동안 사용해왔지만 Nuxt.js는 이전에 잠깐 맛보기만 했지 제대로 사용해본 적이 없어서 공식 문서를 기반으로 

Nuxt.js를 경험해보려고 한다. 

 

 

 

- Nuxt를 설치해보자

 

터미널에 명령어를 입력하여 간단하게 Nuxt를 설치할 수 있다. Vue Cli처럼 쉽게 시작할 수 있도록 거의 셋팅을 해준다. 

 

npx create-app-nuxt "Project name" 

 

위 명령어로 설치가 가능하고, 설치 전에 여러 옵션을 선택할 수 있다! 

 

UI 프레임워크, 서버 프레임워크, Eslint, Prettier, Axios.. 등등을 선택하여 같이 설치할 수 있고, 

물론 설치를 하지 않아도 상관은 없다. 

 

설치가 완료되면, npm run dev 명령어를 통해 실행할 수 있으며 http://localhost:3000 주소로 접속할 수 있다. 

 

서버 실행 후 localhost:3000 접속시 뜨는 화면

 

 

설치 후 생기는 폴더들

 

-- 아래는 공식문서에 기재된 내용이며, 디렉토리 관련 설명이 기재되어 있다.

 

assets 디렉토리는 Stylus나 Sass 파일, 이미지나 폰트와 같은 컴파일되지 않은 에셋들을 포함하는 폴더다.

components 디렉토리는 Vue.js 컴포넌트를 포함하는 폴더이며, asyncData나 fetch 메소드를 이 컴포넌트에서 사용하실 수 없다.

layouts 디렉토리는 애플리케이션의 레이아웃을 포함하는 폴더이며, 레이아웃은 페이지의 모습이나 느낌을 변경하는 데 사용된다. (예를 들어 사이드바를포함하는 것 같은, 이 디렉토리 이름은 추가적인 설정 없이는 변경할 수 없다)

middleware 디렉토리는 애플리케이션의 미들웨어를 포함하는 폴더이며, 미들웨어는 페이지나 레이아웃이 렌더링되기 전에 실행할 사용자 정의 함수를 정의할 수 있다. (이 디렉토리 이름은 추가적인 설정 없이는 변경할 수 없다)

pages 디렉토리는 애플리케이션의 뷰와 라우트를 포함하는 폴더이며, Nuxt.js는 모든 .vue 파일을 읽고 애플리케이션의 라우터를 생성한다.

plugins 디렉토리는 루트 vue.js 애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인을 포함하는 폴더이며, Global로 컴포넌트를 등록하고 Function이나 Constant를 주입(injection)할 수 있는 곳이다.

static 디렉토리는 서버의 루트(/static/robots.txt는 http://localhost:3000/robots.txt로 접근 가능)에 바로 연결되고, 변경되지 않을파일들을 담는다(예를 들어, favicon과 같은, 예를 들어: /static/robots.txt는 /robots.txt로 연결된다.)

store 디렉토리는 Vuex Store 파일을 포함하는 폴더이며. Vuex Store는 Nuxt.js에 의해 바로 사용이 가능하나, 기본적으로는 비활성화되어 있다. index.js 파일을 생성하면 프레임워크가 자동으로 Store를 활성화한다. (이 디렉토리 이름은 추가적인 설정 없이는 변경할 수 없다)

nuxt.config.js 파일은 Nuxt.js의 사용자 정의 설정을 포함하는 파일이다. (이 디렉토리 이름은 추가적인 설정 없이는 변경할 수 없다)

별칭 : ~ or @	디렉토리: srcDir
별칭:  ~~ or @@	디렉토리: rootDir

설정을 변경하지 않았다면, srcDir 은 rootDir 와 같다.