Vue 3에서 Axios 인터셉터 구현하기

Vue 3에서 Axios 사용하기

Vue.js 3 환경에서 Axios를 사용하는 방법은 Vue.js 2.x와 크게 다르지 않지만, 일부 수정과 업데이트가 필요하다. 아래에서는 Vue.js 3에서 Axios를 정의하고 사용하는 방법을 살펴보자.

먼저, Axios와 Vue.js 3.x를 설치해야 한다. npm이나 yarn 같은 패키지 관리자를 사용하여 설치할 수 있다:

npm install axios vue@next

이제 Vue.js 3 애플리케이션에서 다음과 같이 Axios를インポート하고 사용할 수 있다:

import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const userList = ref([])
    const requestError = ref(null)

    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/users')
        userList.value = response.data
      } catch (err) {
        requestError.value = err.message
      }
    }

    onMounted(() => {
      fetchUsers()
    })

    return { userList, requestError }
  }
}

위 코드는 Axios를 사용하여 GET 요청을 보내고, API 엔드포인트 /api/users에서 사용자 데이터를 가져온다. 응답 데이터는 Vue 컴포넌트의 userList 변수에 할당되고, 요청 중 오류가 발생하면 requestError 변수에 오류 메시지가 저장된다.

Vue.js 3에서는 Axios를 Vue 3의 반응형 API로 래핑해야 한다. 위 코드에서는 ref 함수를 사용하여 userList와 requestError 변수를 반응형 객체로 변환했다.

또한, Vue 3에서는 Axios를 플러그인으로 등록하고 Vue 인스턴스에서 전역 설정을 할 수 있다:

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

// Axios를 전역 속성으로 등록
app.config.globalProperties.$http = axios

app.mount('#app')

위 코드는 Axios를 Vue 플러그인으로 등록하고, Vue 인스턴스의 전역 속성 $http에 할당한다. 이렇게 하면 애플리케이션의 어떤 컴포넌트든 쉽게 Axios에 접근할 수 있다.

globalProperties

globalProperties는 Vue 3에서 도입된 전역 설정 객체로, 애플리케이션의 어디서든 사용자 정의 전역 속성과 메서드를 추가할 수 있게 해준다.

Vue.js 3에서는 app.config.globalProperties 객체를 사용하여 전역 속성과 메서드를 추가할 수 있다. 이렇게 하면 각 컴포넌트에서 개별的にインポート하지 않고도 Vue 인스턴스에서 직접 접근할 수 있다.

예를 들어, globalProperties에 전역 속성 $config를 추가하는 방법은 다음과 같다:

const app = createApp(App)

app.config.globalProperties.$config = {
  apiBaseUrl: 'https://api.example.com',
  timeout: 5000
}

app.mount('#app')

이렇게 하면 Vue 컴포넌트에서 $config를 통해 이 전역 속성에 접근할 수 있다:

export default {
  setup(props, { app }) {
    const config = app.config.globalProperties.$config
    return { config }
  }
}

마찬가지로 globalProperties에 전역 메서드를 추가할 수도 있다:

const app = createApp(App)

app.config.globalProperties.$log = function(message) {
  console.log(`[LOG] ${new Date().toISOString()}: ${message}`)
}

app.mount('#app')

Vue 컴포넌트에서 이 전역 메서드를 호출할 수 있다:

export default {
  setup() {
    // 전역 메서드 호출
    const logger = (msg) => {
      console.log(`[LOG] ${new Date().toISOString()}: ${msg}`)
    }
    logger('Component mounted')
    
    return {}
  }
}

주의할 점은 globalProperties에 추가된 전역 속성과 메서드가 모든 Vue 컴포넌트에서 공유되고, 모든 컴포넌트 인스턴스에 상속된다는 것이다. 따라서 추가하는 전역 속성과 메서드가 컴포넌트 인스턴스의 속성이나 메서드와 충돌하지 않도록 주의해야 한다.

ctx (컴포넌트 컨텍스트)

Vue 3에서 ctx는 컴포넌트 컨텍스트 객체로, 컴포넌트 인스턴스의 모든 속성과 메서드를 포함한다.

Vue 3의 컴포넌트에서는 setup() 함수를 사용하여 컴포넌트의 로직 코드를 작성한다. setup() 함수는 ctx 파라미터를 받는데, 이 객체는 많은 속성과 메서드를 포함하고 있어 컴포넌트 인스턴스에 접근하고 조작할 수 있게 해준다.

다음은 ctx 객체의 주요 속성과 메서드이다:

  • attrs: id, class, style 등 컴포넌트에 전달된 비반응형 속성을 포함한다.
  • emit: 커스텀 이벤트를 발생시키는 데 사용된다. 임의의数量的 매개변수를 전달할 수 있다. 예를 들어, ctx.emit('custom-event', arg1, arg2)는 custom-event라는 커스텀 이벤트를 발생시키고 arg1과 arg2를 전달한다.
  • expose: 컴포넌트의 속성과 메서드를 노출하여 부모 컴포넌트가 접근할 수 있게 한다. 예를 들어, ctx.expose({ userData, loadUser })는 userData 속성과 loadUser 메서드를 부모 컴포넌트에 노출한다.
  • slots: 모든 슬롯内容的 함수를 포함하며, v-slot 또는 slot-scope를 사용하여 슬롯을 정의할 수 있다.
  • listeners: 컴포넌트에 바인딩된 모든 이벤트 리스너를 포함한다. v-on 또는 @로 이벤트를 바인딩할 수 있다.
  • root: 현재 컴포넌트 트리의 루트 컴포넌트 인스턴스이다.
  • refs: 컴포넌트에서 ref로 등록된 모든 DOM 요소 또는 컴포넌트 인스턴스를 포함한다. ctx.refs.elementName으로 접근할 수 있다.

ctx 객체의 속성과 메서드는 모두 읽기 전용이다. 값을 수정할 수 없다. 컴포넌트 인스턴스의 속성이나 메서드를 수정해야 한다면 setup() 함수에서 ref, reactive, computed 같은 반응형 API를 사용하여 반응형 변수와 메서드를 생성해야 한다.

Proxy

Proxy는 ES6에서 도입된原生 객체로, JavaScript 객체의 작업을 런타임에 동적으로 가로채고 처리할 수 있게 해준다. 프로그래밍 가능한 프록시를 제공하여 대상 객체 작업을 전처리하고 필터링할 수 있으므로, 데이터 바인딩, 데이터 검증, 속성 인터셉트 등 많은 고급 기능을 구현하는 데 사용할 수 있다.

Proxy 객체의 기본적인 사용 방법은 다음과 같다:

const target = { username: 'Alice', level: 25 };
const handler = new Proxy(target, {
  get: function(obj, prop, receiver) {
    console.log(`Accessing property: ${prop}`);
    return obj[prop];
  },
  set: function(obj, prop, value, receiver) {
    console.log(`Setting property: ${prop} = ${value}`);
    obj[prop] = value;
    return true;
  }
});

console.log(handler.username);  // "Accessing property: username", "Alice"
console.log(handler.level);     // "Accessing property: level", 25
handler.location = "Seoul";     // "Setting property: location = Seoul"

위 예제에서는 target이라는 일반 객체를 생성하고, Proxy 객체로 래핑했다. Proxy对象的 두 번째 파라미터에는 인터셉터 객체로 get과 set 메서드를 정의했다. proxy 객체에서 속성을 읽으면 get 메서드가 트리거되어 로그를 출력하고 대상 객체의 해당 속성 값을 반환한다. 속성을 설정하면 set 메서드가 트리거되어 로그를 출력하고 대상 객체의 해당 속성 값을 업데이트한다.

get과 set 메서드 외에도 Proxy는 apply, construct, defineProperty, deleteProperty, getOwnPropertyDescriptor, getPrototypeOf, has, isExtensible, ownKeys, preventExtensions, setPrototypeOf 등 많은其他的 인터셉터 메서드를 제공한다. 이러한 인터셉터 메서드에서 다양한 전처리 및 필터링 작업을 수행하여 다양한 고급 기능을 구현할 수 있다.

주의할 점은 Proxy 객체는 객체에만 작동하고 원시값에는 작동하지 않는다. 또한, Proxy 객체가 대상 객체를 래핑하기 때문에 일정한 성능 오버헤드가 발생하므로 신중하게 사용해야 한다.

getCurrentInstance

ctx와 getCurrentInstance는 모두 Vue 3의 전역 API로, 컴포넌트에서 현재 컨텍스트와 현재 컴포넌트 인스턴스 객체를 가져오는 데 사용되지만, 역할이 완전히 동일하지는 않다.

ctx는 컴포넌트 인스턴스 객체와 일부 추가 속성 및 메서드를 포함하는 컨텍스트 객체이다. 컴포넌트의 템플릿과 컴포지션 API에서 사용할 수 있다. ctx에는 attrs, emit, slots, root 등 많은 속성과 메서드가 포함되어 있어 컴포넌트의 데이터와 메서드에 더 쉽게 접근할 수 있다. 예를 들어, ctx.attrs를 통해 컴포넌트의 속성에 접근하고, ctx.emit을 통해 커스텀 이벤트를 발생시킬 수 있다.

getCurrentInstance는 현재 컴포넌트 인스턴스 객체를 가져오는 전역 API이다. 컴포넌트의 템플릿과 컴포지션 API에서 사용할 수 있다. ctx와 달리, getCurrentInstance는 컴포ONENT 인스턴스 객체를 포함하는 컨텍스트 객체가 아닌 현재 컴포넌트 인스턴스 객체 자체를 반환한다. 이는 getCurrentInstance를 통해 컴포넌트 인스턴스 객체의 모든 속성과 메서드에 접근할 수 있음을 의미한다. 예를 들어, getCurrentInstance().exposed를 통해 노출된 컴포넌트 메서드에 접근할 수 있다.

주의할 점은 ctx와 getCurrentInstance 모두 Vue 3의 API로, Vue 2에는 존재하지 않는다는 것이다. Vue 2에서는 this를 사용하여 컴포넌트 인스턴스 객체와 컴포넌트의 데이터 및 메서드에 접근할 수 있다.

태그: vue3 axios JavaScript Proxy frontend

5월 22일 16:24에 게시됨

인기 태그

©2026 괴물 클럽