[Vue.js] 백엔드/프론트엔드 연결하기 with axios

앞선 글을 통해 springboot의 port로 8081로 바꿔주었다.

2022.01.24 - [PROJECT/SpringWebToturial] - [Spring Boot] 열리는 Port 변경하기

따라서 프론트엔드는 8080, 백엔드는 8081의 port를 가지고 있다.

---

1. proxy 설정

proxy 설정을 해주지 않으면 8080 포트가 base가 되고, cors 문제가 생긴다.

이후 MSA를 할 때, 추가적인 설정이 필요하겠지만 일단 base port를 8081로 설정한다.

 

📁 vue.config.js

module.exports = {  
    devServer: {  
      proxy: {
        '/':{
          target:  "http://localhost:8081",
          changeOrigin: true,
        }
      }
    },
    ...
  };

- devServer를 생성한 후, proxy를 설정한다.

- '/' url에 적용하는 것으로, 백엔드의 port를 넣어준다. api의 url이 나왔다면 해당 링크를 쓰면 된다.

- changOrigin을 true로 해줘야 cros 문제를 해결할 수 있다.

 

 

2. axios 다운로드 및 설정

1. 먼저 axios를 다운로드 한다. frontend가 존재하는 폴더에 해당 명령어를 입력한다.

📍npm install axios

 

2. axios service 생성

그냥 axios를 바로 사용해도 되지만, service class를 생성하여 접근한다. 이를 통해 얻을 수 있는 건 보다 나눠지는 영역들..?

📁service/axios.service.ts

import axios, { AxiosInstance } from 'axios';

export default class AxiosService {

    static readonly Instance: AxiosInstance = axios.create({
        timeout: 10000,
    });
}

- axios를 import 해서 가져올 수 있다.

- baseURL을 설정할 수 있는 데, proxy 설정을 해놨기 때문에 기본적으로 8081을 향한다.

 

 

3. axios 서비스 이용

📁component.vue

컴포넌트에 axios를 이용 할 것이다. 내가 원하는 것은 로딩과 동시에 get을 통해 게시판의 값을 가져오는 것이다.

> vue의 lifecyle을 이용해 mounted 함수에 axios를 적용했다.

<script lang = "ts">
import Vue from 'vue';
import AxiosService from '../../service/axios.service';

export default Vue.extend({
    data() {
        return {
            mainBoardList: [],
        };
    },
    async mounted() {
        const response = await AxiosService.Instance.get('/v1');
        this.mainBoardList = response.data;
    }
    
});
</script>

- axios.service를 가져왔다.

- 위에서 mainBaordList를 보여줘야 하기 때문에 data 형식을 지정했다.

- mounted()를 통해 DOM이 생성 될 때, 데이터를 같이 넣어준다.

- 가져온 Service에서 instance에 접근해 get을 가져온다. v1은 내가 지정한 백엔드 uri다.

 

📌 은근 애먹었던 부분

data()에서 만들어진 값을 mounted에서 가져올 수 있는가?라는 문제에 봉착했다.

this를 이용해 간단하게 접근할 수 있었다.

 

 

4. template에서 이용하기

this.mainBoardList를 이용했기 때문에, 이후 그냥 다른 vue component처럼 {{mainboardList[0].title}}을 사용하면 된다.

 

끝