스프링 부트 백엔드 개발 강좌, 블로그 화면 구성 예제, 사전 지식 타임리프

안녕하세요! 오늘은 스프링 부트를 사용하여 블로그의 백엔드 개발을 하는 방법에 대해 자세히 알아보겠습니다. 이 강좌에서는 블로그의 기본적인 화면 구성을 위한 예제를 다룰 예정이며, 실습을 통해 스프링 부트와 타임리프를 활용하는 방법을 함께 배우겠습니다.

강좌 목표

  • 스프링 부트의 기본 구조 이해
  • 타임리프를 사용하여 동적인 웹 페이지 구성
  • 블로그의 기본적인 CRUD 기능 구현
  • API 설계 및 데이터베이스 연동 기초 배우기

사전 지식: 타임리프

타임리프(Thymeleaf)는 자바에서 웹 애플리케이션의 뷰를 작성하기 위한 템플릿 엔진입니다. HTML을 기반으로 하며, JSP와 비슷한 역할을 수행하지만, 더 많은 기능과 유연성을 제공합니다. 타임리프의 장점 중 일부는 다음과 같습니다:

  • 자연스러운 템플릿: 작성한 템플릿이 일반 HTML 파일로도 유효하다는 점.
  • 다양한 뷰 옵션: HTML, XML, JavaScript, CSS 등 다양한 뷰를 지원.
  • 서버 측 처리 및 클라이언트 측 처리 모두 가능.

스프링 부트 프로젝트 설정하기

먼저, 스프링 부트 프로젝트를 설정하는 방법을 알아보겠습니다. IntelliJ IDEA 또는 Spring Initializr를 사용하여 새 프로젝트를 생성할 수 있습니다.

1. Spring Initializr 접속: https://start.spring.io/
2. Project: Gradle Project 선택
3. Language: Java 선택
4. Spring Boot: 2.5.4 이상의 버전 선택
5. Project Metadata 입력:
   - Group: com.example
   - Artifact: blog
6. Dependencies 추가:
   - Spring Web
   - Spring Data JPA
   - H2 Database
   - Thymeleaf
7. Generate 클릭하여 프로젝트 다운로드

프로젝트 구조

프로젝트를 생성하면 기본적인 파일 구조가 생성됩니다. 이 구조를 이해하는 것이 중요합니다.

  • src/main/java: 자바 소스 코드가 위치하는 폴더입니다.
  • src/main/resources: 정적 리소스 및 템플릿 파일이 위치하며, application.properties 파일이 포함되어 있습니다.
  • src/test/java: 테스트 코드가 위치하는 폴더입니다.

블로그 모델 설정

이번 블로그 애플리케이션에서는 기본적으로 포스트(Post) 모델을 설정하겠습니다. 다음과 같은 단계를 통해 포스트 모델을 정의합니다.

package com.example.blog.model;

import javax.persistence.*;

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

    private String title;
    private String content;

    // 생성자, 게터, 세터
    public Post() {}

    public Post(String title, String content) {
        this.title = title;
        this.content = content;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

데이터베이스 설정

H2 데이터베이스를 사용하여 간단하게 데이터를 저장할 수 있습니다. application.properties 파일에서 데이터베이스 설정을 다음과 같이 합니다.

spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

레포지토리 인터페이스 생성

JPA를 사용하여 데이터베이스와의 상호작용을 쉽게 하기 위해 Repository 인터페이스를 생성합니다.

package com.example.blog.repository;

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

public interface PostRepository extends JpaRepository {
}

서비스 클래스 생성

서비스 클래스는 비즈니스 로직을 처리하는 곳입니다. 포스트에 대한 CRUD 기능을 포함시킵니다.

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 findAll() {
        return postRepository.findAll();
    }

    public Post findById(Long id) {
        return postRepository.findById(id).orElse(null);
    }

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

    public void deleteById(Long id) {
        postRepository.deleteById(id);
    }
}

컨트롤러 클래스 생성

스프링 MVC의 컨트롤러를 통해 웹 요청을 처리합니다. 포스트의 목록을 반환하고, 포스트를 추가하는 메소드 등을 포함합니다.

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.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class PostController {
    @Autowired
    private PostService postService;

    @GetMapping("/")
    public String listPosts(Model model) {
        model.addAttribute("posts", postService.findAll());
        return "post/list";
    }

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

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

타임리프 템플릿 생성

마지막으로, 블로그의 화면을 구성하기 위해 타임리프 템플릿 파일을 생성하겠습니다. 기본 HTML 파일을 작성하고 데이터를 출력하는 방법을 살펴보겠습니다.

포스트 목록 화면

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>블로그 포스트 목록</title>
</head>
<body>
    <h1>블로그 포스트</h1>
    <a href="@{/post/new}">새 포스트 추가</a>
    <ul>
        <li th:each="post : ${posts}">
            <a th:href="@{/post/{id}(id=${post.id})}">
                <span th:text="${post.title}"></span></a>
        </li>
    </ul>
</body>
</html>

포스트 작성 화면

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>새 포스트 작성</title>
</head>
<body>
    <h1>새 포스트 작성</h1>
    <form action="#" th:action="@{/post}" th:object="${post}" method="post">
        <label for="title">제목:</label>
        <input type="text" id="title" th:field="*{title}" required/>
        <br/>
        <label for="content">내용:</label>
        <textarea id="content" th:field="*{content}" required></textarea>
        <br/>
        <button type="submit">작성하기</button>
    </form>
    <a href="@{/}">목록으로 돌아가기</a>
</body>
</html>

결론

이번 강좌에서는 스프링 부트를 이용한 백엔드 개발과 타임리프를 활용한 간단한 블로그 화면 구성을 살펴보았습니다. 이번 예제를 통해 스프링 부트의 기본적인 작동 방식을 이해하고, 타임리프를 사용하여 동적인 웹 페이지를 만드는 방법을 익힐 수 있었습니다.

더 나아가, 이 예제를 기반으로 다양한 기능을 추가하거나, 다른 디자인 패턴을 적용해보세요. 스프링 부트와 타임리프를 사용하여 실제 애플리케이션을 개발하는 과정에서 많은 것을 배우게 될 것입니다.

감사합니다!