hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 1편 spring boot 셋팅

[목표]

지금까지 vue3에 대한 예제만 다뤄봤다.

백엔드에 대한 설정과 기능들의 익숙함 계속 가져가야한다. 

 

그리하여

다음 몇 가지를 연습해 보도록 한다.

 

1. vue에서 rest api호출하여 값을 가져와보자.

2. vue에서 값을 보내어 데이터를 수정해보자. 

 

포스팅이 조금 길어질 것 같아 조금씩 나눠서 올리려고 한다. 

 

---

사전준비 

사전준비는 다음 두가지다.

1. vue.js (vscode든 웹스톰이든 뭐든..) 환경설정

2. spring boot 환경설정 (안했으면 하면됨... 금방함..)

 

먼저

이 포스팅을 보는 사람은 Vue.js와 spring boot에 대해 환경설정이 되어있다고 생각한다.

 

적어도 vue.js에 대한 환경설정을 해놓았다고 가정하고 하겠다.

 

spring boot에 대한 환경설정은 

코딩팩토리님이 잘 설명해놓았다. 보고 오시길 바란다.

https://coding-factory.tistory.com/616

 

---

Spring Boot 셋팅

셋팅은 다음 순서로 진행할 예정이다.

1. 프로젝트 생성
2. 컨트롤러 생성

 

1. 프로젝트 생성

프로젝트를 다음 사진을 보며 생성해보자

자바 버전은 상이할 수 있음. 설치된 버전으로 하시오

 

 

 

 

 

 

 

 

설치가 완료되었으면 다음 단계로 가보자

 

---

2. 컨트롤러 생성

 

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;
	}
}

 

여기까지

REST api를 위한 백엔드 설정이 끝났다.

 

이제 vue에 대한 설정으로 가보자