🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• Axios를 설치하고 사용하는 방법을 익힌다.
• 외부 API로부터 데이터를 받아와 Vue 앱에 렌더링한다.

✅ 1. Axios 설치

Vue CLI 프로젝트에서 Axios는 별도 설치가 필요합니다.

npm install axios

설치 후, src/App.vue 또는 별도 API 모듈에서 import axios from 'axios' 사용

✅ 2. 사용할 외부 API

JSONPlaceholder에서 제공하는 샘플 API를 사용할 것입니다:

https://jsonplaceholder.typicode.com/todos?_limit=5

이 API는 가짜 할 일(todos) 데이터를 JSON으로 반환합니다.

💻 실습: API로 할 일 목록 불러오기

✅ App.vue

<template>
  <div class="todo-container">
    <h2>📡 외부에서 불러온 할 일 목록</h2>
    <button @click="fetchTodos">불러오기</button>
    <ul class="todo-list">
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :content="todo.title"
        @delete="removeTodo(todo.id)"
      />
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import TodoItem from './components/TodoItem.vue'

export default {
  components: { TodoItem },
  data() {
    return {
      todos: []
    }
  },
  methods: {
    async fetchTodos() {
      try {
        const res = await axios.get(
          'https://jsonplaceholder.typicode.com/todos?_limit=5'
        )
        this.todos = res.data
      } catch (err) {
        alert('데이터를 불러오는 데 실패했습니다.')
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style scoped>
.todo-container {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

button {
  display: block;
  margin: 0 auto 20px;
  padding: 8px 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background-color: #1976d2;
}
</style>

✅ 실행 결과

• 불러오기 버튼 클릭 시 외부 API에서 할 일 5개를 불러와 목록에 표시
• 각 항목은 TodoItem 컴포넌트로 렌더링되며, 삭제도 가능

🧠 개념 요약

✅ 마무리

• Axios는 Vue에서 가장 많이 사용하는 HTTP 통신 라이브러리입니다.
• 외부 API 연동은 실전 앱에서 거의 필수적인 기술입니다.
• 에러 처리를 통해 사용자에게 실패 알림을 줄 수도 있습니다.

GitHub - heroyooi/vue2-app at ch4