[javascript] Vue Router와 RESTful API 호출

18 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크입니다. Vue.js의 핵심 컴포넌트 중 하나는 Vue Router입니다. 이 라우터는 애플리케이션을 위한 강력한 네비게이션 기능을 제공하며 SPA(Single Page Application)를 구축하는 데 도움이 됩니다.

이 블로그에서는 Vue Router를 이용하여 RESTful API를 호출하는 방법에 대해 알아보겠습니다. RESTful API는 HTTP 요청을 통해 데이터를 생성, 읽기, 갱신, 삭제(CRUD)하는 방법을 제공하는 웹 서비스를 위한 아키텍처 스타일입니다.

Vue Router 설정

먼저, Vue 프로젝트에서 Vue Router를 설정해야 합니다. vue-router 패키지를 설치하고, router/index.js 파일에 라우트를 정의합니다.

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 다른 라우트 정의
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

RESTful API 호출

이제 RESTful API를 호출하여 데이터를 가져오는 방법을 살펴봅시다. Vue 애플리케이션의 컴포넌트에서 Axios 또는 Fetch API를 사용하여 서버에 HTTP 요청을 보낼 수 있습니다.

// 컴포넌트에서 RESTful API 호출
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    axios.get('https://api.example.com/items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

위의 예시에서는 Axios를 이용하여 RESTful API에서 데이터를 가져와 화면에 표시하는 방법을 보여주고 있습니다.

이렇게 Vue Router를 설정하고 RESTful API를 호출하여 데이터를 가져오면, Vue.js 애플리케이션에서 강력한 라우팅과 데이터 처리를 결합하여 효율적이고 동적인 웹 애플리케이션을 만들 수 있습니다.

이상으로 Vue Router와 RESTful API 호출에 대해 알아보았습니다.

참조: