Vue 3 프로젝트에 Vue Router와 Axios 적용하기 (Vite 기반)

Vue 3 + Vite 프로젝트를 기반으로 Vue Router를 적용하고, Axios로 외부 API를 호출하는 방법을 A부터 Z까지 정리해보겠습니다.

---

0. 프로젝트 준비

Vue 프로젝트가 아직 없다면 아래 명령어로 생성해주세요:

npm create vite@latest vue-router-axios-app

설정 옵션:

• Framework: Vue
• Variant: JavaScript 또는 TypeScript (원하는 대로)

cd vue-router-axios-app
npm install
npm run dev

---

1. Vue Router 설치 및 설정

✅ 설치

npm install vue-router

✅ 폴더 구조 생성

src/
├── router/
│   └── index.js
├── views/
│   ├── HomeView.vue
│   └── AboutView.vue

📄 src/router/index.js 작성

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', name: 'Home', component: HomeView },
  { path: '/about', name: 'About', component: AboutView }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

📄 src/views/HomeView.vue 예시

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

📄 src/views/AboutView.vue 예시

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

📄 main.js에 Router 등록

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

createApp(App)
  .use(router)
  .mount('#app')

---

2. 라우터 링크 추가

📄 App.vue 수정

<template>
  <div>
    <nav class="flex gap-4 p-4 bg-gray-100">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

이제 기본적인 라우팅은 완성되었습니다!
Home, About 메뉴를 클릭하면 페이지가 이동합니다.

---

3. Axios 설치 및 API 호출하기

✅ 설치

npm install axios

📄 src/api/axios.js (Axios 인스턴스 생성)

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000
})

export default api

---

📄 예제: HomeView.vue에서 API 호출하기

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api/axios'

const posts = ref([])

onMounted(async () => {
  try {
    const res = await api.get('/posts')
    posts.value = res.data.slice(0, 5) // 상위 5개만 출력
  } catch (e) {
    console.error('데이터 불러오기 실패:', e)
  }
})
</script>

<template>
  <div>
    <h1 class="text-xl font-bold mb-4">📄 최근 게시물</h1>
    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-2">
        <strong>{{ post.title }}</strong>
        <p>{{ post.body }}</p>
      </li>
    </ul>
  </div>
</template>

결과:

• jsonplaceholder에서 게시글 데이터를 받아와 리스트 형태로 출력됩니다.
• API 연결이 제대로 되었다면 제목과 본문이 화면에 나타납니다.

---

팁: 에러 처리 & 로딩 UI

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api/axios'

const posts = ref([])
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    const res = await api.get('/posts')
    posts.value = res.data.slice(0, 5)
  } catch (e) {
    error.value = '데이터를 불러오는 중 문제가 발생했습니다.'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div>
    <h1>최근 게시물</h1>
    <div v-if="loading">로딩 중...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="post in posts" :key="post.id">
        <strong>{{ post.title }}</strong>
        <p>{{ post.body }}</p>
      </li>
    </ul>
  </div>
</template>

---

✅ 마무리 정리

기능	적용 여부
Vue Router	✅
Axios	✅
API 통신	✅
에러 핸들링	✅

Vue 3와 Vite 조합은 정말 빠르고 유연한 개발 환경을 제공합니다.
오늘 작성한 Vue Router와 Axios 적용 방법으로, 여러분의 Vue 프로젝트에 라우팅과 외부 API 호출 기능을 쉽게 추가
이후에는 상태관리(Pinia)나 인증(JWT) 기능도 연동해볼 수 있습니다.