스프링 부트 백엔드 개발 강좌, 블로그 화면 구성 예제, 수정 생성 기능 추가하기

블로그 화면 구성 예제 및 수정/생성 기능 추가하기

스프링 부트(Spring Boot)는 자바를 기반으로 한 프레임워크로, 요즘 웹 애플리케이션 백엔드 개발에 매우 인기가 높습니다. 이 강좌에서는 스프링 부트를 활용하여 간단한 블로그 시스템을 개발하는 과정을 단계별로 설명하겠습니다. 특히, 블로그 화면 구성 예제 및 포스트를 수정하고 생성하는 기능에 대해 자세히 다룰 것입니다.

1. 프로젝트 시작하기

먼저, 스프링 부트 프로젝트를 시작하기 위해 Spring Initializr를 이용합니다. Spring Initializr에 접속하여 아래와 같이 설정합니다:

  • Project: Maven Project
  • Language: Java
  • Spring Boot: 2.5.4 (최신 버전 선택)
  • Packaging: Jar
  • Java Version: 11
  • Dependencies: Spring Web, Spring Data JPA, H2 Database, Spring Boot DevTools

설정이 완료되면 ‘GENERATE’ 버튼을 클릭하여 프로젝트를 다운로드합니다. 다운로드한 ZIP 파일을 압축 해제하고, IDE(예: IntelliJ IDEA 또는 Eclipse)에 프로젝트를 열어 줍니다.

2. 블로그 포스트 엔티티 모델 만들기

우리가 만들 블로그의 포스트(Post) 모델을 정의합니다. 이를 위해 `Post`라는 클래스를 생성하고, JPA 애노테이션을 사용하여 데이터베이스의 구조를 정의합니다. 

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

    // getter, setter...
}

작성한 Post 클래스의 각 필드에는 적절한 애노테이션을 사용하여 JPA 엔티티로서의 속성을 부여해야 합니다.

3. 리포지토리 생성하기

이제 `Post` 엔티티를 다룰 수 있는 리포지토리 인터페이스를 생성해야 합니다. JPA를 사용하여 CRUD 작업을 쉽게 처리할 수 있습니다. 

java
@Repository
public interface PostRepository extends JpaRepository {
    List findAll();
    Optional findById(Long id);
}

4. 서비스 레이어 구성하기

후에 비즈니스 로직을 처리할 서비스 클래스를 작성합니다. 서비스 클래스는 리포지토리에 의존성을 주입받아 CRUD 기능을 제공합니다. 

java
@Service
public class PostService {
    private final PostRepository postRepository;

    @Autowired
    public PostService(PostRepository postRepository) {
        this.postRepository = postRepository;
    }

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

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

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

    public Post updatePost(Long id, Post postDetails) {
        Post post = getPostById(id);
        if (post != null) {
            post.setTitle(postDetails.getTitle());
            post.setContent(postDetails.getContent());
            return postRepository.save(post);
        }
        return null;
    }

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

5. 컨트롤러 설정하기

프론트엔드와 통신할 수 있도록 RESTful API를 제공하는 컨트롤러 클래스를 생성합니다. `@RestController`를 사용하여 HTTP 요청을 받아 처리할 수 있습니다. 

java
@RestController
@RequestMapping("/api/posts")
public class PostController {
    private final PostService postService;

    @Autowired
    public PostController(PostService postService) {
        this.postService = postService;
    }

    @GetMapping
    public List getAllPosts() {
        return postService.getAllPosts();
    }

    @GetMapping("/{id}")
    public Post getPost(@PathVariable Long id) {
        return postService.getPostById(id);
    }

    @PostMapping
    public Post createPost(@RequestBody Post post) {
        return postService.createPost(post);
    }

    @PutMapping("/{id}")
    public Post updatePost(@PathVariable Long id, @RequestBody Post post) {
        return postService.updatePost(id, post);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity deletePost(@PathVariable Long id) {
        postService.deletePost(id);
        return ResponseEntity.noContent().build();
    }
}

6. H2 데이터베이스 설정하기

개발 과정에서 간편하게 사용할 수 있는 H2 데이터베이스를 설정합니다. `application.properties` 파일에 다음과 같이 설정합니다: 

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

H2 데이터베이스 콘솔에 접근하려면 /h2-console 경로를 사용하시면 됩니다.

7. 블로그 화면 구성하기

블로그를 구성하는 화면을 HTML과 CSS를 활용하여 구현합니다. 예를 들어, 포스트의 목록과 각각의 포스트를 표시하기 위한 상세 페이지를 준비합니다. 

html




    
    블로그


    
블로그 포스트 목록

8. 수정/생성 기능 추가하기

사용자가 블로그 포스트를 생성하고 수정할 수 있는 기능을 추가합니다. 이를 위해 HTML 양식(form)을 이용하여 사용자 입력을 받을 수 있도록 구현해야 합니다. 

html

이 코드를 통해 사용자는 제목과 내용을 입력하여 새 블로그 포스트를 생성할 수 있습니다. 또한, 기존 포스트를 수정하는 기능도 유사한 방식으로 구현할 수 있습니다.

9. 결론

이번 강좌에서는 스프링 부트를 사용하여 간단한 블로그 시스템을 구축하는 방법을 알아보았습니다. 데이터베이스 설정, RESTful API 구성, HTML 화면 구현 및 포스트 생성/수정 기능 추가를 통해 웹 애플리케이션의 기본을 이해하고 실습해 볼 수 있었습니다. 이를 토대로 좀 더 복잡한 기능을 추가하거나, 다른 프레임워크와의 호환성을 장기적으로 고려하면서 프로젝트를 확장해 나가시기 바랍니다.

감사합니다! 여러분의 스프링 부트 백엔드 개발 여정이 성공적으로 이루어지기를 바랍니다.