Tony Jun

학습 내용을 기록하는 기술 블로그

[Nuxt.js] 시작하기

4 분 소요

Nuxt.js : 인프런 장기효님의 강의와 강의노트를 기반으로 Nuxt.js에 대해 정리해보았습니다.
특정 개념에 대해 찾아보는 방식으로 활용하기 위해 작성되었기에 체계없이 정리된 점 양해부탁드립니다.

Nuxt

Nuxt란?

  • SSR 프레임워크 (서버에서 모두 작성해서 클라이언트로 보낸 뒤 화면에 그리는 방식)
  • 웹 애플리케이션 제작에 필요한 Vuex, Router, Axios와 같은 라이브러리를 미리 구성한 SPA, SSR, 정적 웹 사이트를 쉽게 제작할 수 있게 함.

왜 SSR 쓰는가?

  • 검색 엔진 최적화(SEO)
  • 빠른 페이지 랜더링
    • CSR의 경우 브라우저를 사용하는 디바이스 사양에 따라 랜덜이 속도가 달라짐
  • OG(Open Graph) Tag 적용

SSR 단점은?

  • 학습 비용 (Node.js)
  • 서버 빌드에 대한 이해
  • 브라우저 관련 API 다룰 때 주의 필요

Nuxt 장점 및 특징

장점

  • 검색 엔진 최적화
  • 초기 프로젝트 설정 비용 감소 및 생산성 향상
    • ESLint, Prettier
    • Router, Store 라이브러리 설정 파일 X
    • 파일 기반 라우팅 방식(라우터 설정 필요 X)
  • 페이지 로딩 속도
  • UX
  • 코드 스플리팅


시작하기

  • npm init nuxt-app learn-nuxt 명령어 수행 및 프로젝트 기본설정 
      $ npm init nuxt-app learn-nuxt
    
  create-nuxt-app v4.0.0
  ✨  Generating Nuxt.js project in learn-nuxt
  ? Project name: learn-nuxt
  ? Programming language: JavaScript
  ? Package manager: Npm
  ? UI framework: None
  ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  ? Linting tools: ESLint, Prettier
  ? Testing framework: None
  ? Rendering mode: Universal (SSR / SSG)
  ? Deployment target: Server (Node.js hosting)
  ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
  ? Continuous integration: None
  ? Version control system: Git
  • 설치 완료 후 실행 
      $ cd learn-nuxt
  $ npm run dev
  • Node 버전 변경이 안되는 현상 발생 시 참고… 
      # node version 변경이 안될 때(active 경로가 계속 유지될 때)
  $ ln -sf installed경로 active경로


프로젝트 구조

  • .nuxt
    • 빌드 파일
  • assets
    • 이미지, 리소스 등
  • components
    • Vue Component
  • layouts
    • router 기준 특정 url 에 접근했을 때 뜨는 페이지 컴포넌트의 최상위 루트 컴포넌트
  • middleware
    • SSR 진행 시 Server -> Browser 파일 넘기기전에 항상 실행시키는 함수
  • pages
    • 파일 기반 Routing
    • image
      • folder 가 URL Path가 됨.
      • File 로 _{pathVariable}를 만들면 URL에서 ~/{pathVariable}가 자동 맵핑됨.
  • plugins
    • Vue Plugin
  • static
    • 정적 자원(favicon)
  • store
    • Vuex의 store

개발

  • layouts
    • default.vue
      • <Nuxt /> == <router-view />

SSR 깜빡이는 현상 제거

asyncData

  • 넉스트 REST API 호출 방식
  • Vue Component 속성
  • 페이지 컴포넌트
    • pages 하위 폴더에서만 사용가능한 컴포넌트, pgaes 하위가 아니면 수행 안 됨.
    • 화면이 그려지기 전에 수행 됨. -> 그래서 this에 접근 불가능
async asyncData() {
    const response = await axios.get('http://localhost:3000/products')
    console.log(response)
    const products = response.data
    return {products}
}
  • params 사용법
async asyncData({ params }) { // params = router 정보($route) 
  const response = await fetchProductById(params.id)
  const product = response.data
  return {product}
}
  • v-model & props 사용
<!-- Parent-->
<template>
  <search-input v-model="searchKeyword"/>
</template>

<!-- Child-->
<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)"/>
</template>
<script>
export default {
  model: {
    // props 변수명 다르게 하고싶을 때 사용.(기본적으로 v-model 사용 시 props 는 value 를 써야함.)
  },
  props: {
    value: {  // value 를 props로 받아야 v-model 이 가능함.
      type: String,
      default: () => '',
    },
  }
}
</script>

CSS

글로벌 CSS 적용

  • nuxt.config.js 
    export default {
...
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
...
}


Vuex 사용 방법

img - 그림 출처

  • Vue.js 의 상태 관리 라이브러리이자 패턴을 의미(소개글)
  • Nuxt에서 Vuex를 기본 설정해둠.
  • store 폴더 밑에 javascript 생성 시 자동으로 vuex 스토어가 자동 빌드 됨

nuxtServerInit

  • store 의 action 함수
  • nuxtServerInit 라고 정의 되어있는 특수 함수
  • universal 모드에서 사용할 수 있는 함수
  • 서버사이드 렌더링 시점에 실행 됨
  • 스토어에 미리 데이터를 설정해 놓거나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용 (ex. 사용자 인증/인가 토큰)

fetch

  • 페이지 컴포넌트 뿐만 아니라 일반 뷰 컴포넌트에서도 사용할 수 있는 데이터 호출 속성
  • asyncData 와 동일한 시점에 수행됨
  • 용도
    • 컴포넌트가 생성되고 나서 실행됨
    • 브라우저에서 URL 주소 변경해서 페이지를 이동할 때
  • 주의
    • nuxt 2.12 이전 버전에서는 fetch() 안에 파라미터를 넘길 수 있었음. (이후 deprecated 됨)

환경변수

  • nuxt.config.js 
    export default {
// env config
env: {
  baseURL: process.env.NODE_ENV === 'production'
          ? 'https://my-json-server.typicode.com/TonyJev93/nuxt-sample-api'
          : 'http://localhost:3000'
}
}


배포

  • 배포 방법
  • nuxt.config.js 
    export default {
  target: 'server' // default, target or static
}

Heroku 배포

Json Server 배포

My JSON Server

  • (접속 URL)[https://my-json-server.typicode.com/]
  • 사용법 
    1. 다음과 같이 GitHub 레파지토리를 만든다. : <your-username>/<your-repo>
2. 레파지토리 안에 db.json 파일을 생성한다.
3. https://my-json-server.typicode.com/<your-username>/<your-repo> 에 접속한다.
  • ex) https://my-json-server.typicode.com/TonyJev93/nuxt-sample-api

SSG 배포

  • Static Site Generator
  • 가이드
  • 배포 방식 중 하나
  • 정적 Static Resource를 서버에 배포하는 방식 (<-> Server(Node.js hosting) 배포방식)
  • nuxt.config.js 
      export default {
      target: 'static'
  }
    • npm run generate 명령어로 수행
    • .dist 폴더에 빌드파일 생성됨
  • Netlify(CD, Continuous Delivery)를 이용하여 손쉽게 배포 가능
    • 접속 URL
    • deploy 방법 netlify
    • redirect 오류 해결(참고)
      • root 폴더에 netlify.toml 파일 생성 
        [[redirects]]
from = "/*"
to = "/index.html"
status = 200

Meta Tag

<script>
export default {
  head: {
    title: 'Shopping Item Detail',
    meta: [
      {
        hid: 'description', // 동일 meta hid 끼리 덮어 씌워짐
        name: 'description',
        content: '이 상품은 ~~입니다.'
      },
    ],
  },
}
</script>

메타태그 내에서 데이터를 연결하기 위해 아래와 같이 사용할 수 있다.

<script>
export default {
  // head 를 함수로 이용하면 데이터 연결 가능
  head() {
    return {
      title: `Shopping Item Detail - ${this.product.name}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `이 상품은 ${this.product.name}입니다.`
        },
      ],
    }
  },
}
</script>

OG Tag

  • OG 태그 관련 가이드
  • vue 파일내에 head 설정 
    <script>
export default {
// head 를 함수로 이용하면 데이터 연결 가능
head() {
  return {
    title: `Shopping Item Detail - ${this.product.name}`,
    meta: [
      {
        hid: 'og:title',
        property: 'og:title',
        content: `상품 상세 페이지`
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: `상품 상세 정보를 확인해보세요.`
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: `${this.product.imageUrl}`
      },
    ],
  }
},
}
</script>
  • 디버깅 도구들


Javascript Tip

someArray.map((item) => {
  return {
    ...item, // 기존 데이터 그대로 사용
    someProperty: value, // 그 중 someProperty에 해당하는 값 덮어쓰기
  }
})

위 소스는 아래와 같은 소스임.(축약 버전)

someArray.map((item) => ({
  ...item, // 기존 데이터 그대로 사용
  someProperty: value, // 그 중 someProperty에 해당하는 값 덮어쓰기
}))


VSCode Short-cut

Vue

Vue vscode snippets Plugin

  • vpr + enter


참고

댓글남기기