vue axios 로 외부 API 호출 응답 받기, vue cli 환경변수 env 세팅 #16

Vue 애플리케이션에서 외부 API와 통신하는 방법을 알아본다.

이번 포스트에서는 Axios를 활용한 HTTP 요청 처리와 Vue CLI 환경변수(.env) 설정 방법을 정리한다.

 

1. Axios란?

 

Axios 는 Node.js와 브라우저에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리이다.

 

✅ Axios의 주요 기능

• HTTP 요청(GET, POST, PUT, DELETE 등) 지원

• 요청 및 응답을 인터셉트하여 가공 가능

• 자동 JSON 변환 및 데이터 직렬화 지원

• 요청 취소 및 타임아웃 설정 가능

 

2. Axios 설치 방법

 

Vue 프로젝트에서 Axios를 사용하려면 npm을 통해 라이브러리를 설치해야 한다.

 

📌 설치 명령어

# Axios 설치
npm install axios

📌 주의: 명령어 실행 시 프로젝트 루트 디렉터리에서 실행해야 한다.

 

3. Vue CLI 환경변수(.env) 설정

 

외부 API URL 및 키를 관리하기 위해 환경변수를 사용하면 코드에서 직접 URL을 노출하지 않고

개발/테스트/운영 환경에 따라 유동적으로 설정할 수 있다.

 

✅ Vue CLI는 환경변수를 쉽게 관리할 수 있도록 .env 파일을 지원한다.

 

📌 환경변수 파일 생성

프로젝트 루트 디렉터리에 .env 파일을 생성하고 아래 내용을 추가한다.

# 외부 API URL 설정
VUE_APP_NANET_API_URL=http://localhost:4000/api/pubd/nanet_main/

📌 주의: Vue CLI에서는 환경변수 이름이 VUE_APP_ 으로 시작해야 한다.

📌 환경변수 반영을 위해서는 npm run serve 명령어를 실행하여 프로젝트를 재시작해야 한다.

 

4. API 통신을 위한 Axios 모듈 생성

 

axios 모듈을 활용하여 API 요청을 담당하는 별도의 파일을 생성한다.

 

📌 파일 경로: ./assets/api.js

import axios from 'axios';

var api_res = [];

export default {
    async getNanetAPI(param) {
        try {
            const response = await axios.get(process.env.VUE_APP_NANET_API_URL, {
                params: {
                    search: param.search,
                    pageno: param.pageno,
                    displaylines: param.displaylines
                },
            });

            // API 응답 데이터를 가공하여 반환
            api_res = response.data.response.recode.map((items) => {
                return {
                    item: items.item
                };
            });

            return api_res;
        } catch (error) {
            console.error('API 호출 오류:', error);
            return [];
        }
    },
};

 

✅ 이 파일의 역할

• axios.get() 을 사용하여 API 요청을 보냄

• .env 파일에서 API URL을 불러와 사용 (process.env.VUE_APP_NANET_API_URL)

• API 응답을 받아 필요한 데이터만 가공 후 반환

• try-catch 문을 사용해 오류 처리

 

5. API 요청 및 응답 처리 (검색 결과 리스트 페이지)

 

이제 검색 결과 리스트 페이지에서 Axios를 활용한 API 요청을 수행해 본다.

 

📌 파일 경로: ./pages/ResultList.vue

<template>
    <div>
        <h2><p v-bind:align="myCenter">검색 결과</p></h2>  

        <table>
            <thead>
                <tr>
                    <th v-bind:align="myCenter">제어번호</th>
                    <th v-bind:align="myCenter">자료명</th>
                    <th v-bind:align="myCenter">저자명</th>
                    <th v-bind:align="myCenter">발행자</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(items, i) in this.api_list" :key="i">                    
                    <td>
                        <a v-on:click="goDtl(items.item)" class="underline"> {{ items.item[0].value }} </a>
                    </td>
                    <td>{{ items.item[1].value }}</td>
                    <td>{{ items.item[2].value }}</td>                    
                    <td>{{ items.item[3].value }}</td> 
                </tr>
            </tbody>
        </table> 

        <p v-bind:align="myCenter">
            <a class="underline" v-on:click="goNext(-1)"><b>이전</b></a>            
            &nbsp;&nbsp;
            <a class="underline" v-on:click="goMain"><b>Main</b></a>
            &nbsp;&nbsp;
            <a class="underline" v-on:click="goNext(1)"><b>다음</b></a>
        </p>

        <!-- 상세페이지 모달 -->
        <rDtl v-show="modalCheck" :items="items" @childClose="modalClose"></rDtl>
    </div>
</template>

<script>
import router from '../assets/index'
import rDtl from './ResultDtl'
import api from '../assets/api'

// 파라미터 설정
var param = {
    search: '', 
    pageno: '', 
    displaylines: '', 
};

export default {
    data: () => ({
        myCenter: 'center',        
        api_list: [], 
        items: [],  
        modalCheck: false,
        pageNo: 1,
        displayNum: 10,        
    }),
    components: {        
        rDtl
    },   
    props: {
        srhs: {
            type: String,
            required: true,
            default: '',
        }        
    },
    created() {
        this.CallThisApi();
    },
    methods: {
        async CallThisApi() {
            param.search = "자료명,"+this.srhs;
            param.pageno = this.pageNo;
            param.displaylines = this.displayNum;
            try {
                this.api_list = await api.getNanetAPI(param);
            } catch (error) {
                console.error('API 호출 오류:', error);
            }
        },
        goDtl(rData) {            
            this.items = rData;
            this.modalCheck = true;            
        },
        goMain() {
            router.push({ name: 'searchMain' }).catch(() => {});
        },
        goNext(no) {
            if (no === -1) {
                if (this.pageNo < 2) {
                    alert('첫 번째 페이지입니다.');
                } else {
                    this.pageNo -= 1;
                    this.CallThisApi();
                }
            } else {
                this.pageNo += 1;
                this.CallThisApi();
            }
        },
        modalClose() {
            this.modalCheck = false;
        }
    },
};
</script>

 

✅ 주요 기능 정리

• created(): 페이지가 렌더링될 때 API를 호출하여 데이터를 가져옴

• CallThisApi(): Axios를 사용하여 API를 호출하고 응답 데이터를 api_list에 저장

• 검색 결과를 테이블로 출력

• 이전/다음 페이지 버튼 클릭 시 API 재호출

• 모달을 활용하여 상세페이지 표시

 

6. 마무리

 

이번 포스트에서는 Vue에서 Axios를 활용한 API 호출 방법과 .env 환경변수 설정을 알아보았다.

다음 포스트에서는 상세페이지를 모달 창으로 구현하고 Vuetify의 v-data-table을 적용하는 방법을 다뤄본다.

 

💡 다음 글에서 다룰 내용:

✅ 상세페이지를 Modal 팝업으로 구현하기

✅ Vuetify의 data tables components 적용하기

 

☞ 국회도서관 자료검색 API 호출하는 django 설치는 이전 글 참고

API Server django python Framework 설치 #1

 

☞ vue, vue cli 설치는 이전 글 참고

vue, vue cli 설치하고 버전 확인 #12