Spring boot - vuejs를 사용하는 스프링 부트 프로젝트 만들기
- 프로그래밍/스프링
- 2021. 8. 25.
이번 글에서는 프론트엔드를 Vue.js를 Spring boot를 백엔드를 사용하는 간단한 프로젝트를 만들어보겠습니다. Spring boot만으로도 웹 개발의 생산성을 높일 수 있지만 프론트엔드에서 사용되는 자바스크립트 프레임워크인 Vue.js를 사용한다면 더 빠르고 쉽게 웹 개발을 할 수 있습니다. 물론 Vue.js 외에도 React.js나 Angular.js를 이용해도 좋습니다.
스프링 부트 프로젝트 만들기
먼저 백엔드에 해당하는 스프링 부트 프로젝트를 만들어보겠습니다. 빌드 도구를 이용할 수도 있지만 조금 더 손쉽게 만들어보기 위해 스프링 부트 프로젝트를 Spring Boot initializr를 이용해보겠습니다.
아직은 프로젝트를 구성하시는 게 어려우시다면 위에 설정한 내용을 참고해서 스프링 부트 프로젝트를 만들어주세요. 빌드 도구는 Gradle을 이용하고 언어는 Java, 스프링 부트 버전은 2.5.4, 자바 버전은 8입니다. 라이브러리는 Spring Web과 Thymeleaf를 선택해서 추가해주세요.
Controller 클래스 만들기
Spring Boot initializr를 이용해서 스프링 부트 프로젝트의 기본 구조를 만들었다면, 이제는 요청을 처리할 수 있는 컨트롤러를 추가할 차례입니다. @Controller를 이용해서 index.html 파일을 반환하는 컨트롤러를 코드를 아래와 같이 작성해주세요.
@Controller
public class HomeController {
@GetMapping
public String index() {
return "index";
}
}위에서 정의한 컨트롤러 예제 코드는 Spring Web의 Model을 사용하기 때문에 반환 값인 "index"에 따라 ViewResolver가 특정 위치에 존재한 index.html 파일을 찾습니다. 조금 더 자세한 설명은 index.html 파일을 추가하는 내용에서 설명하도록 하겠습니다.
tip. @Controller는 스프링 웹을 통해 컨트롤러를 손쉽게 등록하는 에노테이션이고, @GetMapping은 요청(Rquest)을 처리를 정의할 때 사용하는 에노테이션입니다.
index.html 파일 추가하기
Controller 클래스 만들기에서는 컨트롤러를 통해 index.html 파일을 반환할 수 있게 만들었습니다. 이번에는 반환하는 index.html 파일을 만들어 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
안녕하세요!!!
</body>
</html>Thymeleaf를 사용하면 기본 값(defalult)으로 templates/ 폴더를 바라봅니다. 프로젝트 내에서의 경로는 src/main/resources/templates입니다. 즉 컨트롤러를 통해 찾아가는 "index"의 경로는 resources/templates/index.html입니다. resources/templates 폴더에 index.html 파일을 추가하시면 됩니다.
프로젝트 기본 구조 완성 확인 하기
제시한 과정을 순차적으로 따라 하셨다면, 위의 이미지와 같이 구성된 프로젝트를 확인하실 수 있습니다. 컨트롤러의 위치는 다른 패키지를 이용하거나 옮기셔도 문제가 없지만, index.html 파일은 resources/teplates 폴더 아래에 위치해야 합니다.
Vue.js를 스프링 부트 프로젝트에 사용하기
Vue.js를 사용하는 방법은 간단합니다. index.html 파일의 <body>가 닫히는 태그 전에 Vue.js 파일을 import 해주세요. import 하는 방법은 CDN을 사용할 수 도 있고, 프로젝트에 직접 다운로드 받은 파일을 포함하는 방법도 있습니다.
<!-- <body> 태그 맨 마지막에 import 구문을 넣어주세요. -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>실무에서 사용되는 경우에는 Webpack과 Babel transpiler를 사용해서 프론트엔트 프로젝트를 빌드하고 배포하여 사용합니다. Vue.js 와 같은 자바스크립트 프레임워크는 CDN과 같이 js 파일을 import 해서 간단하게 사용할 수 있습니다. 다만 복잡한 기능을 필요로 하거나 세세한 부분을 개발하기에는 어려움이 있습니다.
Vuejs와 Vue 컴포넌트 사용해보기
<div id="root">
<ul>
<li style="margin-bottom: 12px; list-style: none;" v-for="user in users">
<user-card v-bind:user="user" v-bind:key="user.id"/>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
Vue.component('user-card', {
props: ['user'],
template: `
<div>
<div>Name: {{ user.name }}</div>
<div>Description: {{ user.description }}</div>
</div>`
});
var app = new Vue({
el: '#root',
data: {
users: [
{
id: "1",
name: "Tester1",
description: "Tester1"
},
{
id: "2",
name: "Tester2",
description: "Tester2"
},
{
id: "3",
name: "Tester3",
description: "Tester3"
}
]
}
});
</script>예제 코드는 Vue 컴포넌트를 이용해 화면에 사용자 목록을 보여주는 화면을 작성한 코드입니다. Vue.js의 기본 사용법은 Vuejs의 공식 사이트를 이용해서 학습하시기를 추천드립니다. 예제 코드를 index.html 파일에 적용 후 스프링 부트 프로젝트를 재실행해주세요.
최종적으로 모든 과정이 끝나면 위의 이미지와 같은 화면을 보실 수 있습니다. Vue.js에 대한 설명은 이 글에서 다루지 않는 내용이기 때문에 바로 Vue.js를 사용해 화면에 대한 코드를 작성하였습니다.
끝맺음
이 글에서 제시한 프로젝트 구성은 스프링 부트와 Vue.js를 같이 사용하게 만들어져 있습니다. 스프링 부트에 Vue.js를 import 해서 사용하는 구조이기 때문에 쉽게 사용할 수 있는 구조이지만 토이 프로젝트가 아닌 실무에서는 사용하기 추천드리기는 어렵습니다. 이 글에서 사용한 코드는 github 저장소에 올려놓았습니다.
'프로그래밍 > 스프링' 카테고리의 다른 글
| Spring Boot - 스프링 부트 Whitelabel 에러 처리 방법 (0) | 2021.10.26 |
|---|---|
| Spring - 실무에서 사용하는 React + SpringBoot 프로젝트 만들기 with Gradle (4) | 2021.09.01 |
| Spring error - Failed to configure a DataSource 에러 원인과 해결 방법 (0) | 2021.08.18 |
| Spring - JSP를 사용하는 스프링 부트 (Spring Boot) 프로젝트 만들기 (2) | 2021.07.08 |
| Spring error - Port 8080 was already in use (4) | 2021.04.15 |