[Vue.js] Nuxt - 프로젝트 이전(Migration)

왼쪽이 vue2-movie-app, 오른쪽이 nuxt-movie-app이다

package.json 이전

devDependencies

전부 이전해준뒤, 필요없는 패키지를 삭제한다.

필요없는 패키지

- copy-webpack-plugin
- css-loader
- dotenv-webpack
- file-loader
- html-webpack-plugin
- netlify-cli
- style-loader
- vue-loader
- vue-style-loader
- vue-template-compiler
- webpack
- webpack-cli
- webpack-dev-server

dependencies

전부 이전한 뒤, 사용하지 않는 패키지를 삭제한다.

필요없는 패키지 (Nuxt 기본제공)

- vue

- vue-router

- vuex

src 이전

Vue에서는 src 폴더 내에 모든 리소스를 넣어서 관리했지만, Nuxt에서는 루트 경로에서 관리한다.

components 폴더 이전

기존 프로젝트의 components 폴더를 이전해준다.

RouterLink는 Nuxt에서 NuxtLink로 사용하므로 이전 후 찾아바꾸기로 전부 바꿔준다.

routes 폴더 이전

참조) Nuxt - Directory Structure (nuxtjs.org)

Directory Structure

Nuxt에서는 pages라는 폴더의 파일과 디렉터리 구조를 통해 라우팅 기능을 제공한다.

따라서 라우팅 기능을 제공하는 index.js가 필요없으므로 제거해준다.

또한, index.vue 파일을 홈페이지로 인식하므로 Home.vue를 index.vue로 바꿔준다.

 

라우팅 기능을 파일의 이름으로 제공하므로, 대소문자 구분이 철저해야한다.

우리는 페이지의 경로를 소문자로 제공하므로, 파일들의 이름을 소문자로 바꿔주자.

Movie.vue

우리는 movie에서 다음과 같이 /이후를 :id라는 파라미터 값으로 받아 유동적으로 사용했다.

이를 Nuxt에서는 디렉터리 구조를 통해 구현이 가능하다.

 

pages폴더 내에 movie 라는 폴더를 생성 후 Movie.vue를 그 안에 옮긴다.

이후 Movie.vue의 이름을 _id.vue로 고쳐주면 된다.

 NotFound.vue

Nuxt에서는 페이지를 찾지 못하면 layouts 폴더의 error.vue를 찾아 제공한다.

따라서 NotFound.vue를 layouts폴더로 이전한 뒤, error.vue로 이름을 바꿔준다.

App.vue 이전

Nuxt에서는 App.vue를 지원하지 않는다. 대신, layouts/default.vue가 그 역할을 대신한다.

plugins 폴더 이전

plugins 폴더를 이전해준다.

기존 vue 프로젝트에서는 플러그인들을 main.js에 선언했었다면,

Nuxt에서는 nuxt.config.js에 선언해주어야 사용할 수 있다.

/plugins/index.js 생성

nuxt.config.json 설정

선언할 때 '~/plugins' 라고만 작성해도 하위의 index.js를 찾아서 적용시켜준다.

loadImage.js 수정

loadImage 플러그인에서는 document 객체를 사용한다.

document 객체는 브라우저 환경에서 제공하는 객체로, 서버 사이드에서 렌더링을 할 때는 사용할 수 없다.

따라서 다음과 같이 서버사이드에서 동작할 때는 resolve를 바로 내어주고,

클라이언트 사이드에서 동작할 때에만 로직이 작동하도록 수정해주자.

나머지 파일 이전

/src/scss/main.scss -> /scss/main.scss

기존의 main.scss는 node_modules로 접근하기 위해서 다음과 같이 경로를 설정했었다.

Nuxt에서는 node_modules로 접근하는 경로를 ~ 로 제공한다. (뒤에 /를 붙이지 않음)

main.scss 파일 전역화

기존 vue 프로젝트에서는 webpack.config.js에서 main.scss 파일을 전역화 시켜주었다.

 

Nuxt에서는 @nuxtjs/style-resources 패키지를 통해 전역화 기능을 구현한다.

npm i @nuxtjs/style-resources

nuxt.config.js 에 다음의 코드를 넣어준다.

Store 폴더 이전

Nuxt 에서는 기본적으로 Store폴더 내부에 index.js가 있으면 Store 기능을 제공한다.

기본적으로 Nuxt에 포함된 기능이므로 기존에 index.js에 작성한 내용이 충돌할 가능성이 생겨서 index.js 내부의 로직은 전부 삭제해주어야 한다.

.babelIrc.js 이전

추가 설정 파일들은 nuxt.config.js의 build 부분에 작성하면 된다.

만약 단위 테스트를 하게 된다면, .babelIrc.js 파일을 프로젝트에 그대로 옮겨주어야 한다.

그 이유는, jest.config.js에 다음과 같이 .js 파일을 babel-jest를 통해 해석하기 때문이다.

.postcssrc.js 이전

autoprefixer는 구형 브라우저에 사용할 접두사를 자동으로 붙여주는 기능이다.

따라서 사용하기 위해서는 package.json에 browserslist를 작성해야 한다.

테스트 파일 이전

위의 하이라이팅 된 부분을 전부 이전해준다.

index.html 이전

Nuxt에서는 Index.html을 제공하지 않는 대신, nuxt.config.js에서 js형식으로 제공한다.

기본적으로 작성된 내용

기존의 index.html

따라서 index.html의 내용들을 js형식으로 변환하여 넣어주어야 한다.

http-equiv

어떤 렌더링 엔진을 사용할지를 전달하는 태그.

인터넷 익스플로러를 지원할 계획이면 추가해주는 것이 좋다. 그렇지 않다면 굳이 적어주지 않아도 무방하다.

만약 적어주고 싶다면 다음처럼 적어준다.

{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge'}

link 태그

다음처럼 이전해준다.

style 태그

nuxt.config.js에 바로 연결하지 않고, 외부 파일을 css: 속성에 명시해주는 방식으로 추가한다.

/assets/css/main.css 파일 생성 후 index.html의 style태그를 복사한다.

nuxt.config.js의 css 속성에 main.css 선언

이전 끝.