스프링 부트 백엔드 개발 강좌, 블로그 화면 구성 예제, 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의 기본 원리를 이해하고, 이를 실제 프로젝트에 적용할 수 있는 기초를 다졌습니다. 앞으로 더 많은 기능을 추가하고, 다양한 프로젝트에 응용하면서 스프링 부트에 대한 이해를 넓혀가길 바랍니다.