Vue.js에서 axios를 활용한 공공 API 데이터 가져오기:

Vue.js는 간결하고 유연한 구조로 프론트엔드 개발 생태계에서 널리 사용되는 프레임워크입니다. 이와 함께, axios는 자바스크립트에서 HTTP 요청을 간편하게 처리할 수 있는 라이브러리로, Vue.js 프로젝트에서 서버와 통신하는 주된 도구로 활용됩니다. 본 가이드에서는 Vue.js 프로젝트에서 axios를 이용하여 공공 API로부터 JSON 형태의 데이터를 가져오고, 이를 화면에 효과적으로 표시하는 방법을 상세하게 설명합니다.

728x90

 

1. 프로젝트 설정 및 axios 설치

먼저, Vue.js 프로젝트를 생성하고 axios 라이브러리를 설치합니다. Vue CLI를 사용하여 간편하게 프로젝트를 생성할 수 있습니다.

vue create my-project
cd my-project
npm install axios

 

2. 컴포넌트 생성 및 axios 설정

Vue.js 프로젝트에서 데이터를 가져오고 표시할 컴포넌트를 생성합니다. 예를 들어, 'ApiData.vue'라는 이름의 컴포넌트를 생성하고, 다음과 같이 axios를 설정합니다.

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

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

 

위 코드에서:

• template 부분은 화면에 표시될 HTML 구조를 정의합니다. v-for 지시어를 사용하여 가져온 데이터를 반복적으로 출력합니다.
• script 부분은 JavaScript 로직을 작성하는 부분입니다.
• data 옵션은 컴포넌트의 데이터를 정의합니다. items 배열에 API에서 가져온 데이터를 저장합니다.
• mounted 훅은 컴포넌트가 생성되고 DOM에 마운트된 후 실행되는 함수입니다. 여기서 axios를 사용하여 API를 호출하고, 응답 데이터를 items 배열에 저장합니다.

3. 공공 API 선택 및 URL 설정

위 코드에서 https://jsonplaceholder.typicode.com/posts 다양한 공공 API를 제공하는 서비스가 있으며, 각 API마다 제공하는 데이터 형식과 호출 방식이 다르므로 API 문서를 참고하여 적절한 URL과 파라미터를 설정해야 합니다.

예를 들어, 대한민국 정부에서 제공하는 공공 데이터 포털에서 원하는 데이터를 검색하고, 해당 데이터에 대한 API 정보를 확인하여 URL을 구성할 수 있습니다.

4. 에러 처리 및 로딩 표시

axios 요청 시 발생할 수 있는 에러를 처리하기 위해 .catch() 메소드를 사용합니다. 예를 들어, 네트워크 오류나 API 서버 오류가 발생할 경우 사용자에게 적절한 메시지를 표시하거나, 로그를 남길 수 있습니다.

또한, 데이터를 로딩하는 동안 로딩 표시를 보여주는 등 사용자 경험을 개선할 수 있습니다.

5. 데이터 가공 및 화면 표시

API에서 가져온 데이터는 원하는 형태로 가공하여 화면에 표시할 수 있습니다. 예를 들어, 날짜 형식을 변경하거나, 불필요한 데이터를 제거하는 등의 작업을 수행할 수 있습니다.

Vue.js의 다양한 기능을 활용하여 데이터를 효과적으로 표시할 수 있습니다. 예를 들어, computed 프로퍼티를 사용하여 데이터를 가공하거나, v-if 지시어를 사용하여 조건에 따라 요소를 표시/숨길 수 있습니다.

추가 고려 사항

• 데이터 캐싱: 자주 사용되는 데이터는 브라우저의 로컬 스토리지 또는 Vuex와 같은 상태 관리 라이브러리를 사용하여 캐싱하여 성능을 향상시킬 수 있습니다.
• 데이터 변환: API에서 제공하는 데이터 형식이 Vue.js 컴포넌트에서 사용하기 불편한 경우, 데이터를 변환하여 사용할 수 있습니다.
• 오류 처리: 다양한 오류 상황을 고려하여 사용자에게 친절한 오류 메시지를 표시하고, 개발자에게 유용한 로그를 남길 수 있도록 에러 처리를 철저히 해야 합니다.
• 보안: 공공 API를 사용할 때는 API 키나 토큰 등을 안전하게 관리해야 합니다.

728x90

 

Vue.js와 axios를 활용하면 간편하게 공공 API로부터 데이터를 가져와 웹 애플리케이션에 활용할 수 있습니다. 본 가이드를 통해 Vue.js 프로젝트에서 axios를 사용하여 데이터를 가져오고, 화면에 표시하는 방법을 익혔기를 바랍니다.

 

 

참고 자료:

• axios 공식 문서: https://axios-http.com/
• Vue.js 공식 문서: https://vuejs.org/