소개
본 강좌에서는 스프링 부트를 이용하여 백엔드 웹 애플리케이션을 개발하는 방법에 대해 배워보겠습니다. 스프링 부트는 복잡한 설정 없이 신속하게 스프링 애플리케이션을 구축할 수 있도록 도와주는 프레임워크입니다. 본 강좌에서는 특히 블로그 웹 애플리케이션을 예제로 들어, 화면 구성과 HTML 뷰 만들기에 대해 자세히 설명하겠습니다.
목차
- 스프링 부트란?
- 블로그 화면 구성
- 프로젝트 구성
- HTML 뷰 만들기
- 테스트 및 배포
스프링 부트란?
스프링 부트는 스프링 프레임워크를 바탕으로 구축된 프로젝트로, 전통적인 스프링 애플리케이션의 설정을 간소화하여 개발자가 빠르게 프로토타입을 만들고 배포할 수 있도록 지원합니다. 스프링 부트의 주요 특징은 다음과 같습니다:
- 자동 설정: 스프링 부트는 기본적으로 많은 설정을 자동으로 수행하여 개발자가 복잡한 설정에 얽매이지 않도록 합니다.
- 스타터 종속성: 필요한 의존성을 한 번의 선언으로 쉽게 추가할 수 있게 도와줍니다.
- 내장 서버: 톰캣, 제티와 같은 내장 서버를 사용하여 별도의 서버 설정 없이도 애플리케이션을 실행할 수 있습니다.
- 간편한 프로파일 관리: 다양한 환경에서 필요에 따라 다르게 설정할 수 있는 기능을 제공합니다.
블로그 화면 구성
블로그 애플리케이션의 구조는 매우 간단합니다. 기본적으로 사용자가 게시물을 열람하고 작성할 수 있는 페이지로 구성됩니다. 또한, 각 게시물에는 댓글 기능과 태그 기능 등을 추가할 수 있습니다. 본 강좌에서는 간단한 화면을 구성해보겠습니다.
화면 구성 요소
- 헤더: 블로그의 제목 및 로고, 네비게이션 메뉴를 포함합니다.
- 게시물 리스트: 제목, 작성자, 작성일, 내용의 미리보기를 표시합니다.
- 게시물 상세 보기: 선택된 게시물의 내용 및 댓글을 보여줍니다.
- 푸터: 저작권 정보 및 블로그에 대한 추가 정보를 제공합니다.
프로젝트 구성
본 강좌에서 사용할 프로젝트는 스프링 부트를 기반으로 하며, Maven을 사용하여 필요한 종속성을 관리합니다. 먼저 `pom.xml` 파일에 필요한 의존성을 추가합니다.
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
HTML 뷰 만들기
HTML 뷰는 사용자에게 데이터를 표시하는 중요한 역할을 합니다. 스프링 부트에서는 Thymeleaf를 사용하여 동적인 HTML 뷰를 생성할 수 있습니다. 다음은 블로그의 기본 HTML 구조를 보여주는 예제입니다.
블로그의 기본 레이아웃
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>블로그 제목</title>
<link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<header>
<h1>나의 블로그</h1>
<nav>
<a th:href="@{/}">홈</a>
<a th:href="@{/posts}">게시물 리스트</a>
<a th:href="@{/new}">게시물 작성</a>
</nav>
</header>
<main>
<section class="posts">
<h2>최근 게시물</h2>
<div th:each="post : ${posts}">
<h3 th:text="${post.title}"></h3>
<p>작성자: <span th:text="${post.author}"></span> | <span th:text="${post.createdDate}"></span></p>
<p th:text="${post.content}"></p>
<a th:href="@{/posts/{id}(id=${post.id})}">자세히 보기</a>
</div>
</section>
</main>
<footer>
<p>저작권 © 2023 나의 블로그</p>
</footer>
</body>
</html>
게시물 상세 보기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>게시물 상세 보기</title>
<link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<header>
<h1 th:text="${post.title}"></h1>
<nav>
<a th:href="@{/}">홈</a>
<a th:href="@{/posts}">게시물 리스트</a>
</nav>
</header>
<main>
<article>
<h2 th:text="${post.title}"></h2>
<p>작성자: <span th:text="${post.author}"></span> | <span th:text="${post.createdDate}"></span></p>
<p th:text="${post.content}"></p>
</article>
<h3>댓글</h3>
<div th:each="comment : ${post.comments}">
<p><span th:text="${comment.author}"></span>: <span th:text="${comment.content}"></span></p>
</div>
<h3>댓글 작성</h3>
<form th:action="@{/posts/{id}/comments(id=${post.id})}" method="post">
<input type="text" name="author" placeholder="작성자" required />
<textarea name="content" placeholder="댓글 내용을 입력하세요" required></textarea>
<button type="submit">댓글 작성</button>
</form>
</main>
<footer>
<p>저작권 © 2023 나의 블로그</p>
</footer>
</body>
</html>
테스트 및 배포
스프링 부트 애플리케이션을 작성한 후, 테스트 및 배포 단계가 중요합니다. Spring Boot는 JUnit과 Mockito를 이용한 단위 테스트를 지원합니다. 또한, AWS, Heroku 및 다른 클라우드 서비스를 이용하여 손쉽게 배포할 수 있습니다.
단위 테스트 예제
import static org.mockito.Mockito.*;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.mockito.InjectMocks;
import org.mockito.Mock;
import org.mockito.MockitoAnnotations;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
public class PostControllerTest {
@InjectMocks
private PostController postController;
@Mock
private PostService postService;
@Autowired
private MockMvc mockMvc;
@BeforeEach
public void setup() {
MockitoAnnotations.openMocks(this);
mockMvc = MockMvcBuilders.standaloneSetup(postController).build();
}
@Test
public void testGetPost() throws Exception {
// 게시물 정보를 반환하도록 mock 설정
when(postService.getPostById(1L)).thenReturn(new Post(1L, "테스트 제목", "작성자", "내용"));
mockMvc.perform(get("/posts/1"))
.andExpect(status().isOk())
.andExpect(model().attributeExists("post"))
.andExpect(view().name("post/view"));
}
}
결론
본 강좌에서는 스프링 부트를 이용하여 블로그 애플리케이션의 백엔드를 구축하고, 기본적인 HTML 뷰를 작성하는 방법에 대해 배웠습니다. 스프링 부트의 장점을 활용하여 효율적으로 개발할 수 있었습니다. 실습을 통해 스프링 부트와 Thymeleaf의 기본 원리를 이해하고, 이를 실제 프로젝트에 적용할 수 있는 기초를 다졌습니다. 앞으로 더 많은 기능을 추가하고, 다양한 프로젝트에 응용하면서 스프링 부트에 대한 이해를 넓혀가길 바랍니다.