2020/06/10 Medium 블로그에 작성한 내용 이사🚗
LunchBox 프로젝트로 Frontend를 Vue로 Backend를 스프링부트를 사용하고 있다. 틀은 잡아놨는데 구조가 잘 파악되지 않아 정리해놓으면서 Vue와 스프링부트가 메세지를 주고 받기 위한 테스트를 진행하기 위해 통신을 하는 방법도 정리하겠다.
프로젝트 구조
일단 우리 프로젝트 구조는 이렇다. lunchbox-front는 vue 프로젝트가 있고 src에는 스프링부트 프로젝트가 있다.
현재 vue는 8081포트를 사용하고 스프링부트는 8080 포트를 사용한다.
일단 lunchbox-front에서 axios모듈을 설치해준다.
Axios란?
구글링을 해보면
“axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest 를 다루지 않고 “AJAX 호출”을 할 수 있습니다.”
라고한다.
Q. AJAX 호출을 할 수 있다고 하는데 그게 뭔가?
A. 자바스크립트를 사용하는 비동기통신이며 클라이언트와 서버 간 xml데이터를 주고 받는 기술이다.
axios는 Promise기반의 자바스크립트 비동기 처리방식을 사용해서 요청후 .then()으로 결과 값을 받아서 처리하는 형식으로 구성된다.
axios 설치
먼저 lunchbox-front로 가서 axios 모듈을 설치해준다.
npm install --save axiosaxios 모듈 사용
axios를 사용하는 스크립트 위에 axios를 선언해준다.
나는 app.vue의 스크립트 상단에 추가해주었다.
const axios = require('axios');Front — vue.config.js 수정
outputDir : lunchbox-front가 build될 때 빌드 결과물로 생기는 html, css, js 파일들이 저장되는 경로를 지정한 것이다.
indexPath : index.html 파일이 생성될 위치를 지정
decServer : 스프링부트의 내장 was의 주소를 작성한다.
Front — App.vue 수정
<script> 부분의 코드만 간단히 설명하자면
axios.get으로 ‘/data’에서 데이터를 불러온다. 여기서 매개변수로 msg를 전달한다. 밑에 작성한 HelloController에서 @RequestMapping 으로 해당 요청을 처리하고 .then이 실행된다.
Back — HelloController 작성
‘/data’ 요청을 처리한다.
참고로
@RequestParam(“가져올 데이터의 이름”) [데이터타입] [가져온데이터를 담을 변수]
이어서 앞에서 axios.get(“/data”)에서 params에 적어주었던 mdg값을 가져와서 다른 문자열과 붙이고 Map으로 반환한다.
