SpringBoot - vue.js : 01. restApi 연동

SpringBoot - vue.js : 01. restApi 연동

Vue.js와 Spring Boot를 연동하는 방법은 프론트엔드인 Vue.js와 백엔드인 Spring Boot를 분리된 프로젝트로 개발한 뒤, RESTful API를 통해 서로 통신하도록 구성하는 것이 일반적입니다. 이를 위해 아래와 같은 순서로 진행할 수 있습니다.

1.Spring Boot 프로젝트 설정

Spring Initializr(https://start.spring.io/)를 사용하여 필요한 의존성을 추가하고, 프로젝트를 생성합니다. 대표적으로 Web, JPA, Lombok, H2, MySQL 등의 의존성을 추가할 수 있습니다.

2.Spring Boot 백엔드 구성

프로젝트에 필요한 도메인, 레포지토리, 서비스, 컨트롤러를 구현합니다. 컨트롤러에서 RESTful API를 정의하며, 이를 통해 Vue.js와 통신합니다.

3.Vue.js 프로젝트 생성

Vue CLI를 이용해 새로운 Vue.js 프로젝트를 생성합니다. 아래의 명령어로 Vue CLI를 설치하고 프로젝트를 생성할 수 있습니다.

npm install -g @vue/cli
vue create 프로젝트이름

4.Vue.js 프론트엔드 구성

Vue.js 프로젝트에서 필요한 컴포넌트를 구현하고, 이를 통해 UI를 만듭니다. 이때, 백엔드에서 생성한 RESTful API를 호출하는 데 필요한 axios 라이브러리를 설치합니다.

npm install axios

5.API 호출

Axios를 사용하여 Vue.js 프로젝트에서 Spring Boot 서버의 RESTful API를 호출합니다. 예를 들어, 사용자 목록을 가져오는 API 호출은 다음과 같이 구성할 수 있습니다.

import axios from 'axios';

axios.get('http://localhost:8080/api/users')
  .then(response => {
    this.users = response.data;
  })
  .catch(error => {
    console.error(error);
  });

6.CORS 설정

Spring Boot에서 CORS(Cross-Origin Resource Sharing) 설정을 추가하여, 다른 도메인(포트)의 Vue.js 애플리케이션에서 API 요청을 허용합니다. 이를 위해 Spring Boot의 WebMvcConfigurer를 구현하는 Java 클래스를 작성하고, addCorsMappings 메서드를 오버라이드합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081") // Vue.js 애플리케이션의 URL
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }

}

이러한 방식으로 Vue.js와 Spring Boot를 연동하여 프로젝트를 구성할 수 있습니다.