HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (1)

HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (1)

안녕하세요! 이번 포스트에서는 HTML, CSS, JavaScript, Spring Boot 3.3.1, MyBatis, MySQL을 사용하여 간단한 게시판 애플리케이션을 만드는 방법을 다뤄보겠습니다. 첫 번째 포스트에서는 프로젝트 설정과 기본 구조를 설정하는 과정을 설명하겠습니다.

1. 프로젝트 개요

우리는 Spring Boot와 MyBatis를 사용하여 백엔드를 구축하고, HTML, CSS, JavaScript를 사용하여 프론트엔드를 만들 것입니다. MySQL을 데이터베이스로 사용하여 게시글 데이터를 저장합니다.

2. 개발 환경 설정

2.1 Java 및 IDE 설치

먼저 Java와 개발에 사용할 IDE(IntelliJ, Eclipse 등)를 설치합니다.

• Java 설치: OpenJDK 다운로드 페이지에서 OpenJDK 22를 다운로드하고 설치합니다.
• IDE 설치: IntelliJ IDEA 또는 Eclipse 중 하나를 선택하여 설치합니다.

2.2 Spring Initializr 사용

Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성합니다. Spring Initializr에서 다음과 같이 설정합니다:

• Project: Maven Project
• Language: Java
• Spring Boot: 3.3.1
• Project Metadata:
  • Group: com.example
  • Artifact: myboard
  • Name: MyBoard
  • Package name: com.example.myboard
  • Packaging: Jar
  • Java: 22
• Dependencies:
  • Spring Web
  • Spring Data JPA
  • MySQL Driver
  • Lombok

설정이 완료되면 "Generate" 버튼을 클릭하여 프로젝트를 다운로드합니다.

2.3 프로젝트 열기

다운로드한 프로젝트를 IDE(IntelliJ, Eclipse 등)에서 엽니다.

3. 데이터베이스 설정

3.1 MySQL 설치 및 설정

MySQL을 설치하고, 새로운 데이터베이스를 생성합니다.

CREATE DATABASE my_board;
  

3.2 application.properties 설정

src/main/resources/application.properties 파일에 데이터베이스 연결 설정을 추가합니다.

spring.datasource.url=jdbc:mysql://localhost:3306/my_board
spring.datasource.username=root
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
  

4. 프로젝트 구조 설정

기본 파일 및 디렉토리 구조를 설정합니다. 다음은 프로젝트 구조 예시입니다:

src/
├── main/
│   ├── java/
│   │   └── com/
│   │       └── example/
│   │           └── myboard/
│   │               ├── MyboardApplication.java
│   │               ├── controller/
│   │               ├── model/
│   │               ├── repository/
│   │               └── service/
│   └── resources/
│       ├── application.properties
│       └── static/
└── test/
  

5. 엔티티(Entity) 생성

게시판 애플리케이션에서 사용할 게시물(Post) 엔티티를 생성합니다.

package com.example.myboard.model;

import lombok.Data;

import javax.persistence.*;

@Data
@Entity
@Table(name = "posts")
public class Post {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;
    private String content;
}
  

6. 리포지토리(Repository) 생성

Post 엔티티를 관리할 리포지토리를 생성합니다.

package com.example.myboard.repository;

import com.example.myboard.model.Post;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Update;
import org.apache.ibatis.annotations.Delete;
import java.util.List;

@Mapper
public interface PostRepository {
    @Select("SELECT * FROM posts")
    List findAll();

    @Select("SELECT * FROM posts WHERE id = #{id}")
    Post findById(Long id);

    @Insert("INSERT INTO posts(title, content) VALUES(#{title}, #{content})")
    void save(Post post);

    @Update("UPDATE posts SET title=#{title}, content=#{content} WHERE id = #{id}")
    void update(Post post);

    @Delete("DELETE FROM posts WHERE id = #{id}")
    void delete(Long id);
}
  

7. 서비스(Service) 계층 생성

비즈니스 로직을 처리할 서비스 계층을 생성합니다.

package com.example.myboard.service;

import com.example.myboard.model.Post;
import com.example.myboard.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 getPostById(Long id) {
        return postRepository.findById(id);
    }

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

    public void updatePost(Post post) {
        postRepository.update(post);
    }

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

8. 컨트롤러(Controller) 생성

HTTP 요청을 처리할 컨트롤러를 생성합니다.

package com.example.myboard.controller;

import com.example.myboard.model.Post;
import com.example.myboard.service.PostService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

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

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

    @GetMapping("/{id}")
    public ResponseEntity getPostById(@PathVariable Long id) {
        Post post = postService.getPostById(id);
        if (post == null) {
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok(post);
    }

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

    @PutMapping("/{id}")
    public ResponseEntity updatePost(@PathVariable Long id, @RequestBody Post postDetails) {
        Post post = postService.getPostById(id);
        if (post == null) {
            return ResponseEntity.notFound().build();
        }
        post.setTitle(postDetails.getTitle());
        post.setContent(postDetails.getContent());
        postService.updatePost(post);
        return ResponseEntity.ok().build();
    }

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

9. 마무리

이제 Spring Boot 3.3.1과 MyBatis를 사용한 백엔드 설정이 완료되었습니다. 다음 포스트에서는 MySQL 데이터베이스 설정과 테이블 생성을 다루겠습니다. 많은 기대 부탁드립니다!

블로그 포스트에 대한 의견이나 질문이 있으시면 댓글로 남겨주세요!