스프링 부트 백엔드 개발 강좌, 블로그 화면 구성 예제, 타임리프 사용을 위한 의존성 추가하기

소개

스프링 부트(Spring Boot)는 스프링 프레임워크를 기반으로 한 경량 웹 애플리케이션 프레임워크로, 개발자가 신속하게 애플리케이션을 구축할 수 있도록 도와줍니다. 특히 백엔드 개발에서 스프링 부트는 RESTful 웹 서비스, 데이터베이스 연동, 보안 처리 등 많은 기능을 제공합니다. 이번 강좌에서는 스프링 부트를 이용하여 블로그 화면을 구성하는 예제를 다루고, 타임리프(Thymeleaf) 사용을 위한 의존성 추가에 대해서도 알아보겠습니다.

블로그 화면 구성 예제

1. 프로젝트 생성

스프링 부트 프로젝트를 생성하기 위해 Spring Initializr를 사용하겠습니다. 다음의 설정을 선택하세요.

Project: Gradle Project
Language: Java
Spring Boot: 2.7.0 (최신 버전 선택)
Group: com.example
Artifact: blog
Name: blog
Description: 블로그 애플리케이션
Package name: com.example.blog
Packaging: Jar
Java: 11

이후 Dependencies 섹션에서 ‘Spring Web’, ‘Thymeleaf’, ‘Spring Data JPA’, ‘H2 Database’를 추가한 후, 프로젝트를 생성합니다.

2. 의존성 추가하기

스프링 부트 프로젝트가 생성되면, build.gradle 파일에서 필요한 의존성을 확인해 보겠습니다. 아래와 같이 의존성이 추가되어 있어야 합니다.

dependencies {
        implementation 'org.springframework.boot:spring-boot-starter-web'
        implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
        implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
        runtimeOnly 'com.h2database:h2'
    }

3. 블로그 도메인 설계

이제 블로그를 구성할 도메인 모델을 설계해 보겠습니다. 기본적으로 블로그 글(Post)을 표현하는 모델이 필요합니다.

package com.example.blog.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Post {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private String content;

    // getters and setters
}

4. 레포지토리 추가

레포지토리 인터페이스를 추가해 보겠습니다. 이는 데이터베이스와 상호작용하는 로직을 포함합니다.

package com.example.blog.repository;

import com.example.blog.model.Post;
import org.springframework.data.jpa.repository.JpaRepository;

public interface PostRepository extends JpaRepository {
}

5. 서비스 레이어 추가

블로그 글을 관리하기 위한 서비스 레이어를 추가하겠습니다. 여기서는 글을 생성하고 조회하는 메서드를 포함합니다.

package com.example.blog.service;

import com.example.blog.model.Post;
import com.example.blog.repository.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PostService {
    @Autowired
    private PostRepository postRepository;

    public List getAllPosts() {
        return postRepository.findAll();
    }

    public Post savePost(Post post) {
        return postRepository.save(post);
    }
}

6. 컨트롤러 추가

이제 웹 애플리케이션의 요청을 처리할 컨트롤러를 추가하겠습니다.

package com.example.blog.controller;

import com.example.blog.model.Post;
import com.example.blog.service.PostService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/posts")
public class PostController {
    @Autowired
    private PostService postService;

    @GetMapping
    public String listPosts(Model model) {
        List posts = postService.getAllPosts();
        model.addAttribute("posts", posts);
        return "postList";
    }

    @GetMapping("/new")
    public String newPostForm(Model model) {
        model.addAttribute("post", new Post());
        return "postForm";
    }

    @PostMapping
    public String savePost(Post post) {
        postService.savePost(post);
        return "redirect:/posts";
    }
}

7. Thymeleaf 템플릿 구성

이제 Thymeleaf를 사용하여 블로그 화면을 구성해 보겠습니다. src/main/resources/templates 폴더에 postList.html와 postForm.html 파일을 생성합니다.

postList.html

<!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
        <head>
            <title>블로그 글 목록</title>
        </head>
        <body>
            <h1>블로그 글 목록</h1>
            <a href="@{/posts/new}">새 글 작성</a>
            <ul>
                <li th:each="post : ${posts}">
                    <h2 th:text="${post.title}"></h2>
                    <p th:text="${post.content}"></p>
                </li>
            </ul>
        </body>
    </html>

postForm.html

<!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
        <head>
            <title>새 글 작성</title>
        </head>
        <body>
            <h1>새 글 작성</h1>
            <form th:action="@{/posts}" method="post">
                <label for="title">제목</label>
                <input type="text" id="title" name="title" required/>

                <label for="content">내용</label>
                <textarea id="content" name="content" required></textarea>

                <button type="submit">저장</button>
            </form>
        </body>
    </html>

결론

이번 강좌에서는 스프링 부트를 사용하여 간단한 블로그 애플리케이션을 구성하는 방법을 배웠습니다. 블로그 글을 작성하고 목록을 조회하는 기능을 구현했으며, 타임리프를 통해 HTML 템플릿을 작성하는 방법에 대해서도 알아보았습니다. 이 강좌를 바탕으로 더 복잡한 기능을 추가하여 나만의 블로그를 만들어보시기 바랍니다.

추가 자료

더 많은 내용을 익히고 싶다면, 다음의 자료들을 참고해 보세요.

소개