태그

Nuxt

Nuxt

Nuxt.js

What is Nuxt.js

  • Vue.js 어플리테이션을 만드는 프레임워크
  • 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측, 서버 측 사이에 많은 기능 제공

Function

  • Vue2
  • Vue Router
  • Vuex
  • Vue Server Renderer
  • Vue-meta

Feature

  • Vue 파일 쓰기
  • 코드 분할 자동화
  • 서버 사이드 렌더링
  • 라우팅 시스템
  • 정적 파일 전송
  • ES2015+ 지원
  • JS & CSS 코드 번들링 및 압축
  • 전처리기 지원: SASS, LESS, Stylus 등

Use Nuxt Template

  1. starter 템플릿 다운로드 및 설치(vue-cli)
    vue init nuxt-community/starter-template <project-name>
    vue-cli가 설치되지 않았다면, npm install -g @vue/cli @vue/cli-init
  2. 설치
    cd <project-name>
npm install
  3. 프로젝트 실행(localhost:3000)
    npm run dev

Starting from scratch

  1. 빈 디렉토리 생성
    mkdir <project-name>
cd <project-name>
  2. package.json 수정
    {
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}
nuxt를 어떻게 실행할 것인지 명시, scripts는 npm run dev 명령어를 통해 Nuxt.js를 실행할 것임
  1. Nuxt 설치
    npm install --save nuxt
  2. pages 폴더
    Nuxt.js는 pages 디렉토리 내의 모든 *.vue 파일을 애플리케이션의 라우트로 변환함
    pages 디렉토리를 생성
    mkdir pages
  3. pages/index.vue에 첫 번째 페이지 생성
    <template>
  <h1>Hello world!</h1>
</template>
  4. 프로젝트 실행
    npm run dev
Nuxt.js는 pages 디렉토리를 지속적으로 감시하기 때문에 새로운 페이지가 추가되어도 애플리케이션을 다시 시작할 필요가 없음

Directory Structure

  • Assets
    • Less, SASS, Javascript 같은 컴파일되지 않은 asset들을 포함하는 디렉토리
  • Components
    • Vue.js 컴포넌트를 포함하는 디렉토리
  • Layouts
    • 애플리케이션의 레이아웃을 포함하는 디렉토리
    • 이 디렉토리 이름은 변경할 수 없음
  • Middleware
    • 애플리케이션의 미들웨어를 포함하는 디렉토리
    • 페이지나 레이아웃이 렌더링되기 전에 실행할 사용자 정의 함수를 정의할 수 있음
  • Pages
    • 애플리케이션의 뷰와 라우트를 포함하는 디렉토리
    • Nuxt.js는 모든 .vue파일을 읽고 애플리케이션의 라우터를 생성
    • 이 디렉토리 이름은 변경할 수 없음
  • Plugins
    • vue.js 애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인을 포함하는 디렉토리
  • Static
    • 정적 파일들을 포함하는 디렉토리
    • 파일들은 /에 연결됨
    • ex) /static/robots.txt 은 /robots.txt 로 연결
    • 이 디렉토리 이름은 변경할 수 없음
  • Store
    • Vuex Store 파일을 포함하는 디렉토리
    • Vuex Store 옵션은 Nuxt.js 프레임워크에 의해 실행되며, index.js 파일을 생성하면 프레임워크가 자동으로 옵션을 활성화함
    • 이 디렉토리 이름은 변경할 수 없음
  • nuxt.config.js
    • 사용자 정의 설정 파일
    • 이 디렉토리 이름은 변경할 수 없음
  • package.json
    • 애플리케이션의 의존성과 스크립트를 포함하는 파일
    • 이 디렉토리 이름은 변경할 수 없음

Aliases

별칭 디렉토리
~ or @ srcDir
~~ or @@ rootDir
설정을 변경하지 않았다면, srcDir은 rootDir와 같음
INFO: vue 템플릿 내에서 assets 이나 static 디렉토리에 링크할 필요가 있다면 ~assets/your_image.png, ~static/your_image.png 처럼 입력해야 함

Configuration

  • build
    • 생성된 vendor.bundle.js 파일에 모듈을 추가하여 앱 번들의 크기를 줄일 수 있음
    • 외부 모듈 사용 시 정말 유용
  • cache
    • 캐시된 컴포넌트를 사용하여 렌더링 성능을 향상시킬 수 있음
  • css
    • 모든 페이지에서 전역으로 사용할 CSS파일 / 모듈 / 라이브러리 파일을 설정할 수 있음
  • dev
    • nuxt.js의 개발 또는 프로덕션 모드를 정의 할 수 있음
  • env
    • 클라이언트 및 서버에서 사용 가능한 환경 변수를 정의 할 수 있음
  • generate
    • 어플리케이션에서 Nuxt.js가 HTML 파일로 변환할 모든 동적인 경로에 대한 각각의 params 값을 정의 할 수 있음
  • head
    • 애플리케이션의 모든 기본 메타를 정의 할 수 있음
  • loading
    • Nuxt.js를 사용하여 기본적으로 불러올 loading 컴포넌트를 사용자 정의 할 수 있음
  • plugins
    • 루트 vue.js 어플리케이션을 인스턴스화 하기 전에 실행할 Javascript 플러그인을 정의 할 수 있음
  • rootDir
    • nuxt.js 어플리케이션의 위치를 정의 할 수 있음
  • router
    • vue-router의 기본적인 Nuxt.js 구성을 덮어 쓸 수 있음
  • srcDir
    • nuxt.js 어플리케이션의 src 디렉토리를 정의 할 수 있음
  • transition
    • 페이지 transition 기능의 기본 속성을 정의 할 수 있음

Routing

  1. 기본 라우트
    pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
이렇게 되면 아래와 같이 자동으로 생성됨
router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] }
  1. 동적 라우트
    파라메터가 있는 동적 라우트를 정의하기 위해서는 앞에 밑줄이 붙은 .vue 파일이나 폴더를 정의해야 함
    pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

    router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}
users-id 라우트는 :id?라는 선택적 경로를 가집니다. 만약 이를 필수 경로로 만드려면 users/_id 폴더 안에 index.vue 파일을 만듬
3. 라우트 파라미터의 유효성 페트
ex) pages/users/_id.vue export default { validate ({ params }) { // Must be a number return /^\d+$/.test(params.id) } }
만약 validate 메소드가 true를 반환하지 않는다면 Nuxt.js는 자동으로 404 error 페이지를 로딩할 것
4. 중첩 라우트
  • 자식 뷰를 포함하고 있는 폴더와 같은 이름 으로 Vue 파일을 생성해야 함
  • 부모 컴포넌트(.vue file)에 <nuxt-child/> 태그 필수
    pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

    router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}
  1. 동적 중첩 라우트
    pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

    router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

Transition

Global Settings

Nuxt.js의 기본 트랜지션 이름은 "page"

Middleware

  • 모든 미들웨어는 middleware/ 디렉토리에 있어야 함. 파일 이름은 곧 미들웨어의 이름(ex- middleware/auth.js는 auth 미들웨어가 됨

Views

  • Document
    • HTML file
    • 커스터마이징 가능
    • html 템플릿을 확장하기 위해 app.html
    • 기본 템플릿
     <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>
         {{ HEAD }}
     </head>
     <body {{ BODY_ATTRS }}>
         {{ APP }}
     </body>
 </html>
  • Lyaout
    • Vue compoennt + Nuxt options: middleware and head
    • 기본 레이아웃
      <!-- layouts/default.vue -->
  <template>
      <nuxt/> <!-- 페이지 컴포넌트를 레이아웃에 렌더링하기 위하여 -->
  </template>
    • 에러 페이지
      • layouts/error.vue 파일 추가
      • 태그 포함 X
    • 사용자 정의 레이아웃
      • 페이지 컴포넌트를 레이아웃에 렌더링하기 위하여 태그 작성
      • layouts/blog.vue
      <template>
    <div>
        <div>My blog navigation bar here</div>
        <nuxt/>
    </div>
</template>

      <script>
    export default {
        layout: 'blog'
    }
</script>
  • Page
    • Vuew component supercharged with Nuxt options (asyncData, fetch, head, layout, middleware, scrollToTop, transition, validate)
    • asyncData: 비동기적으로 만들 수 있음
    • fetch: 페이지가 렌더링되기 전에 스토어를 채우기 위해 사용됨
    • head: 현재 페이지에 대한 특정 메타 태그 설정
    • layout: layouts 폴더에 정의된 레이아웃을 지정할 수 있음
    • transition: 페이지에 대한 특정 트랜지션 설정
    • scrollToTop: 리본값은 false. 페이지를 렌더링하기 전에 페이지를 맨 위로 스크롤할 것인지, 중첩 라우트를 위해 사용됨
    • validate: 동적 라우트에 대한 유효성 검사
    • middleware: 페이지를 렌더링하기 전에 호출됨
  • HTML Head
    Nuxt는 headers와 html attributes를 갱신하기 위해 vue-meta를 사용
// vue-meta 옵션
{
  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
}
  • 기본 메타 태그
    • Nuxt.js를 사용하면 nuxt.config.js에 head 속성을 사용함으로써 기본 메타를 정의할 수 있음(
    • ex) 사용자 정의 구글 폰트, 사용자 정의 뷰포트 설정

참고

Nuxt.js
라벨:

댓글

댓글 쓰기

가장 많이 본 글