뷰(Vue.js) 프로젝트에 뷰 액시오스(Vue Axios) 설치하기

---

프론트엔드로 뷰(Vue.js)를, 백엔드로 스프링부트(Spring Boot)를 개발하면서 두 환경을 연동하기 위해 'Axios'를 설치해야 합니다. 

뷰 Axios는 뷰에서 권고하는 HTTP 통신 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다.

 

---

뷰 액시오스 (Vue Axios)

Axios는 Promise 기반의 HTTP 통신 라이브러리입니다.

 

뷰 액시오스(Vue Axios) 설치

VSCode에서 Vue Axios를 설치하는 과정입니다.

 

1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다. 

• 방법:
  • 키보드: Ctrl + Shift + `
  • 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭

 

2. Axios 설치 명령어를 터미널에 입력하고 엔터를 클릭합니다.

• 명령어: npm install axios 혹은  npm i axios

 

3. 설치가 완료되었는지 터미널에 표시된 메시지를 통해 확인합니다.

정상적으로 설치가 진행되었다면, 가장 아래에 "found 0 vulerabilities"라고 표시됩니다. 

 

(참고) 아래와 같이 '1 high severity vulerability'로 표시된다면, 'npm audit fix' 명령어 입력합니다.

---

연동 방법

Frontend인 Vue 프로젝트와 Backend 프로젝트인 Spring Boot 프로젝트에서 관련 API가 모두 구현된 상태로 호출부만 연결하면 되는 상태라는 가정하에 진행합니다.

 

Spring Boot 프로젝트

Vue 프로젝트와 연동하기 위해 수정해야할 파일은 총 1개입니다.

아래 과정 생략시 CORS 이슈가 발생할 수 있습니다.

 

1. Vue 프로젝트에서 호출할 API가 정의된 Controller 파일 최상단에 @CrossOrigin 어노테이션을 추가합니다.

• @CrossOrigin: originis에 명시한 출처를 허용한다는 명시 기능의 어노테이션
  • origins = 허용할 출처가 될 URL 값

 

2. 우측 상단에 위치한 'Run > Run '{프로젝트명}Application''을 클릭하여 Spring Boot 프로젝트를 구동이 정상적으로 되는지 확인합니다.

 

Vue 프로젝트

Spring Boot 프로젝트와 연동하기 위해 수정해야할 파일은 총 2개입니다.

 

1. 'vue.config.js' 파일에 devServer에 대한 코드를 추가합니다.

• 경로: {프로젝트 Root 폴더}\vue.config.js
• 코드 설명:
  
  • devServer: proxy 정보를 설정할 웹팩 개발 서버

좌: 변경 전 우: 변경 후

 

vue.config.js 파일의 전체 코드가 궁금하신 분들은 아래 더보기를 클릭하여 참고바랍니다.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: ["vuetify"],
  outputDir: "../../backend/web-api-server/src/main/resources/static",
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
});

 

2. 테스트할 뷰 파일에 아래의 코드를 추가합니다.

<script>
  ...
  created: function () {
    this.getNotices();
  },
  methods: {
    getNotices: function () {
      this.$axios
        .get("/api/notices")  // ★ Server REST API 경로
        .then(function (response) {
          console.log("RESPONSE: " + JSON.stringify(response.data));
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  ...
</script>

 

3. 구동 명령어인 'npm run serve' 명령어로 입력 후 정상적으로 명령어가 수행하는지 확인합니다.

 

4. Chrome에서 개발자모드(F12)를 활성화한 후, Local 경로로 접속하여 정상적으로 통신이 성공했는지 확인합니다.

 

 

---

References

• Cracking Vue.js - Axios
• vue 프로젝트에서 API 호출하기 (Vue 버전 2)