hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 3편 api 불러와보기
[목표]
vue와 spring boot에 대한 셋팅이 완료되었다.
이제는 api 요청을 해보자
현재 포스팅에서
CORS와 DB연결에 대한 오류를 만나게 된다.
의도적으로 오류를 만나는 순서 그대로 진행하였으니
천천히 보고 따라하며 함께 오류를 만나길 바란다.
그래야 기억에 오래 남는다!
바쁘신 분들은
제일 아래로
바로 넘어가면 된다.
spring-boot 서버 켜기
먼저 포트를 지정해주자
여기서 포트는 8082로 진행하지만
어떤 포트로든 열려있다면 상관없음
포트 설정이 끝났다면 서버를 켜보자
서버를 켰는데
다음과 같은 오류를 만날 것이다.
예상컨데
database에 대한 셋팅을 해놓고
연결 설정을 하지 않아서 생긴 문제인 듯 하다.
다음을 보며 database 연결을 안한다고
설정을 해보자
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
@SpringBootApplication(exclude={DataSourceAutoConfiguration.class})
public class Vueproject31Application {
public static void main(String[] args) {
SpringApplication.run(Vueproject31Application.class, args);
}
}변경한 뒤 다시 서버를 켜보자
잘 켜진다.
vscode에서 spring-boot로 api 요청하기
먼저
Browse에서 제공하는
Web API 메소드인 fetch로 불러 올 것이다.
[App.vue]
<template>
<button @click="test">Test Button</button>
</template>
<script>
export default {
methods: {
test(){
fetch('/bring')
.then((response)=>response.json())
.then((data)=>console.log(data[0], " ", data[1], " ", data[2], " "));
}
}
}
</script>
버튼을 누르면
현재 spring-boot 서버가 켜져있는
포트 8082의 bring 경로로 요청을 보낼 것이다.
테스트를 해보자
fetch에 실패했다.
그 이유는
CORS 때문이다.
CORS에 대해서는 검색하여 더 알아보길 바란다.
개발자, 통신에 대해서 중요한 개념이다.
간략하게 얘기하자면
지금 통신하고 있는 경로와 다른 곳에 요청하기 때문에
브라우저가 막는 것이다.
뷰(8081) -> 백엔드(8082)
바로 백엔드로 요청하는 게 아니다.
[요청할 때]
: 뷰(8081) -> 웹팩 -> 백엔드(8082)
[응답 받을 때]
:백엔드(8082) -> 웹팩 -> 뷰(8081)
결국
뷰 입장에서는 8081로 보내고 8081로 받는다.
fetch('/경로')
라고 설정했음에도 불구하고
포트를 8082로 보내어 데이터를 가져왔다는 것은
포트로 판단하지 않는다는 것이다.
해당 그림은 다음 주소에서 가져왔다.
https://velog.io/@skyepodium/vue-proxy-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
이를 해결하려면 다음과 같이 설정하자
[vue.config.js]
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
//8082로 가는 주소들 프록시 처리해줘
proxy: 'http://localhost:8082'
},
})
CORS 오류를 해결하기 위한
프록시 설정 끝!
이제 진짜 요청해보자!
요청했더니 제대로 된 결과가 콘솔에 찍혔다!
이제 DB를 연결하고
간단한 조건 검색 폼을 만들어서
조회하는 걸 만들어 볼 것이다.
바쁜분들을 위한 요약 소스
[vue파일 - App.vue]
<template>
<button @click="test">Test Button</button>
</template>
<script>
export default {
methods: {
test(){
fetch('/bring')
.then((response)=>response.json())
.then((data)=>console.log(data[0], " ", data[1], " ", data[2], " "));
}
}
}
</script>[vue파일 - vue.config.js]
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: 'http://localhost:8082'
},
})
[spring-boot파일 - TestController.java]
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Test2Controller {
private final Logger log = LoggerFactory.getLogger(this.getClass().getSimpleName());
@RequestMapping(value="/bring", method=RequestMethod.GET)
public List<String> bring(){
log.info("bring진입");
List<String> list = new ArrayList<String>();
list.add("스프링 부트에서 보낸 데이터1");
list.add("스프링 부트에서 보낸 데이터2");
list.add("스프링 부트에서 보낸 데이터3");
return list;
}
}
[spring-boot파일 - 프로젝트명Application.java]
해당 파일은 프로젝트명마다 다르다.
뒤에 ***Application.java 파일명을 찾아서 아래 소스로 수정하면 된다.
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
@SpringBootApplication(exclude={DataSourceAutoConfiguration.class})
public class Vueproject31Application {
public static void main(String[] args) {
SpringApplication.run(Vueproject31Application.class, args);
}
}