Nuxt.js에서 Axios 통신 시 로딩바 표시하기

by

Nuxt.js에서 데이터를 가져올 때 사용자에게 로딩 상태를 알려주는 것은 중요합니다. 이 글에서는 @nuxtjs/axios 모듈과 함께 간단한 로딩바를 표시하는 방법을 소개합니다.


1. @nuxtjs/axios 모듈 설치

npm install @nuxtjs/axios


nuxt.config.js에 모듈을 추가합니다:

modules: [
  '@nuxtjs/axios'
],


2. 로딩바 스타일 설정

assets/styles.css 파일에 로딩바의 CSS 스타일을 작성합니다:

.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #29f, #56d4e2);
  animation: loadingAnimation 1s infinite;
  z-index: 1000;
}

@keyframes loadingAnimation {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}


CSS 파일을 nuxt.config.js에 연결합니다:

export default {
  css: [
    '~/assets/styles.css'
  ]
}


3. Vuex 스토어에서 로딩 상태 관리

로딩 상태를 전역적으로 관리하기 위해 Vuex 스토어를 설정합니다.


store/index.js:

export const state = () => ({
  isLoading: false
});

export const mutations = {
  SET_LOADING(state, value) {
    state.isLoading = value;
  }
};


4. Axios 인터셉터 설정

plugins/axios.js에서 요청과 응답 인터셉터를 사용하여 로딩 상태를 업데이트합니다:

export default function({ $axios, store }) {
  $axios.onRequest(config => {
    store.commit('SET_LOADING', true);
    return config;
  });

  $axios.onResponse(response => {
    store.commit('SET_LOADING', false);
    return response;
  });

  $axios.onError(error => {
    store.commit('SET_LOADING', false);
    return Promise.reject(error);
  });
}


nuxt.config.js에 플러그인을 연결합니다:

plugins: [
  '~/plugins/axios.js'
],


5. 로딩바 컴포넌트 생성 및 사용

components/LoadingBar.vue:

<template>
  <div v-if="isLoading" class="loading-bar"></div>
</template>

<script>
export default {
  computed: {
    isLoading() {
      return this.$store.state.isLoading;
    }
  }
}
</script>


이제 layouts/default.vue 또는 원하는 페이지/레이아웃에 로딩바 컴포넌트를 추가합니다.

<template>
  <div>
    <LoadingBar />
    <nuxt />
  </div>
</template>

<script>
import LoadingBar from '~/components/LoadingBar.vue';

export default {
  components: {
    LoadingBar
  }
}
</script>


이로써, Nuxt.js 애플리케이션에서 Axios 요청 시 상단에 로딩바가 표시됩니다. 이 방법을 사용하면 사용자에게 데이터 로딩 상태를 시각적으로 표현하여 더 나은 사용자 경험을 제공할 수 있습니다.



Leave a Comment