Programmingnuxt

Nuxt와 Bootstrap4 기반의 Dashboard 만들기

4. Axios

, , , , ,

Nuxt.js

오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기 의 네번째 포스트로 Axios에 대해 작성해보겠습니다.

지난 포스트에서는 Nuxt & Express API 환경구성에 대해 작업해봤습니다. 본 포스트에서는 Nuxt에서 Axios를 사용하기 위한 환경세팅과 사용예제까지 다뤄보겠습니다.

개발 순서

  1. 프로젝트 생성 및 Github Repository 환경구성
  2. Heroku 배포 환경구성
  3. Nuxt & Express API 환경구성
  4. Axios
  5. Bootstrap & Bootstrap-vue 환경구성
  6. Page & UI 개발

Axios

Axios는 browser와 node.js 기반 어플리케이션을 위한 promise 기반의 HTTP client로, 서버 사이드에서는 native node.js http 모듈을 사용하고, 클라이언드 사이드에서는 XMLHttpRequests 기반으로 작동한다. Axios에 대한 자세한 사항은 Axios 공식 문서를 참고해주시고, 이번 포스트에서는 Nuxt에서 사용하기 위한 Axios에 대한 부분만 다뤄보도록 하겠습니다.

Axios with Nuxt

nuxt/axios

Nuxt에서 Axios를 사용하기 위해서는 우리가 아는 axios가 아닌 Nuxt에 통합 및 최적화된 nuxt/axios 를 설치해 사용해야한다.

기능

  • Automatically set base URL for client & server side
  • Exposes setToken function to $axios so we can easily and globally set authentication tokens
  • Automatically enables withCredentials when requesting to base URL
  • Proxy request headers in SSR
  • Fetch Style requests
  • Integrated with Nuxt progress bar
  • Integrated with Proxy Module
  • Auto retry requests with axios-retry

설치

설치하는 방법은 두 가지가 있다. 첫째는 Nuxt CLI로 앱 생성시 Nuxt.js modules 선택 옵션에서 설치하는 방법과 두번째는 일반적인 node package 설치 방법이다.

1
2
3
4
5
// Install by yarn
yarn add @nuxtjs/axios

// Install by npm
npm install @nuxtjs/axios

환경구성

설치가 완료되면 root 디렉토리에 위치한 nuxt.config.js 파일의 modules 프로퍼티에 아래와 같이 '@nuxtjs/axios'를 추가해주면 Axios를 통한 모든 요청에 동일한 설정을 적용할 수 있습니다.

1
2
3
export default {
  modules: ['@nuxtjs/axios']
}

이제 Nuxt app에서 $axios를 사용할 수 있습니다. ✨

옵션s

nuxt에서 설정할 수 있는 옵션은 아래와 같다.

  • Runtile Config
  • prfix, host and port
  • baseURL
  • browserBaseURL
  • https
  • progress
  • proxy
  • retry
  • credentials
  • debug
  • proxyHeaders
  • proxyHeaersIgnore
  • headers

하지만… 위 옵션들을 다 하기에는 너무 많으므로 현재 필요한 baseURL만 다뤄봤기 때문에 이 옵션만 다루고 나머지는 추후 포스팅 해보겠습니다.

baseURL

baseURL는 서버측 request를 작성하기 위해 사용되는 URL의 기본주소를 정의하는 옵션으로 nuxt.config.js에 아래와 같이 axios property에 baseURL을 지정해주면 된다.

1
2
3
4
5
// Axios module configuration
// See https://axios.nuxtjs.org/options
axios: {
  baseURL: process.env.baseURL || 'http://localhost:3000'
}

process.env.baseURL은 전역 환경변수에 baseURL을 정의한 전역 환경변수로써, process.env.API_URL을 사용할 경우 baseURL을 덮어쓸수 있다(override). 주의할 점은 baseURL과 proxy를 동시에 사용할 수 없으며 proxy 옵션을 사용하고 싶으면 baseURL 대신에 prefix에 정의할 필요가 있다.

1
2
3
4
5
6
7
8
9
// Option: Proxy
axios: {
  proxy: true // Can be also an object with default options
},

proxy: {
  '/api/': 'http://api.example.com',
  '/api2/': 'http://api.another-website.com'
}

일반적으로 요청할 full adresss를 입력해야 하지만 아래와 같이 baseURL 옵션을 설정하면 특정 API route의 경로만 입력해도 된다.

1
2
3
4
5
6
// `baseURL` 미지정
await $axios.$get('http://localhost:3000/api/something')


// `baseURL` 지정
await $axios.$get('/api/something')

Extension

공식적으로 지원하는 확장 기능은 아래와 같다.

  • Adding Interceptors
  • New Axios instance

이번에도 내가 필요한건 Interceptors 기능이므로 이것만 해보겠습니다.

Interceptors with Axios

Interceptors 기능은 요청 또는 응답 전에 API 통신 error 등을 handling 할 수 있는 기능들을 axios의 전역 환경에 적용할 수 있는 기능입니다.

먼저, plugins/axios.js를 생성해 아래의 코드를 입력 후 nuxt.config.js 파일에 plugin을 등록해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// plugins/axios.js

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}
1
2
3
4
5
6
7
// nuxt.config.js

export default {
  plugins: [
    '~/plugins/axios'
  ]
}

Helpers

nuxt/axios는 Interceptors 기능을 확장할 수 있는 Helpers API를 가지고 있습니다.

Interceptors

Axios plugin은 Interceptors를 쉽고 빠르게 등록할 수 있도록 도와주며 아래의 함수들은 기본적으로 그 어떠한 값도 반환하지 않습니다.

  • onRequest(config)
  • onResponse(response)
  • onError(err)
  • onRequestError(err)
  • onResponseError(err)

예시: (plugins/axios.js)

error에 대해 인터셉트(intercept)할 경우, 오류 전파를 방지하기 위해 resolved promise를 반환합니다.

1
2
3
4
5
6
7
8
9
export default function ({ $axios, error: nuxtError }) {
  $axios.onError(error => {
    nuxtError({
      statusCode: error.response.status,
      message: error.message,
    });
    return Promise.resolve(false);
  })
}

사용예제: Axios, Interceptors, Helpers

간단하게, Axios를 확장해보는 예제를 진행해보겠습니다.

에러 핸들링 시나리오

  1. 404 에러: redirect(404)
  2. 500 에러: redirect(500)
  3. 이외 에러: Promise.reject({ statusCode, message })

위 시나리오는 RestAPI 통신시 404, 500 에러가 왔을때 /404, /500 페이지로 redirect하고, 이외의 에러는 return Promise.reject(error)으로 원래의 HTTP error를 return 하려고 한다. 구현 코드는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// plugin/axios.js

export default function ({ $axios, redirect }) {
  // Set baseURL
  $axios.setBaseURL(process.env.baseURL || 'http://localhost:3000')

  // Add Interceptor
  $axios.onError((error) => {
    if (error.response.status === 500) {
      redirect('/500')
    } else if (error.response.status === 404) {
      redirect('/404')
    } else {
      return Promise.reject(error)
    }
  })
}

그리고 구현된 axios 플러그인을 nuxt.config.js에 등록해줍니다. axios 관련 설정은 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
// baseURL 의 경우, nuxt.config.js 또는 plugin/axios.js 중 한 곳에서 설정해주면 됩니다.
export default {
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/axios'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios'
  ]
}

마치며

지금까지 Nuxt에서 Axios 설치, 옵션 세팅 및 확장기능에 대해 다뤄봤습니다. 설치 및 사용하기 위한 옵션들이 기존의 SPA 앱을 만들기 위한 Vue.js에서와 많은 차이점이 있었고, Helper API, Extension 등의 내용을 살펴보면서 Nuxt 기반의 Axios는 어떻게 기능 확장을 할 수 있는지도 연습해봤습니다.

다음 포스팅에서는 본 프로젝트에서 사용할 UI Component인 Boostrap & Boostrap-vue 에 대해 다뤄보겠습니다. 수고 많으셨습니다!

참고

Share