💡 게시판 만들기

박상민·2023년 9월 3일

project 게시판

나의 작은 프로젝트

목록 보기

1/10

게시글 리스트

java, spring을 공부하며 이를 이용해서 작은 프로젝트라고 해봐야겠다고 늘 생각을 했습니다.
늘 미루기만 하다가 진짜 뭐라도 해야겠다는 생각에 가장 평범한 게시판 만들기를 시작했습니다.

개발 도구

혼자 시작하기에는 막막해서 한코딩님의 게시판 만들기를 따라서 게시판을 작성해본 후 저만의 게시판을 만들었습니다.

메인 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 페이지</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>게시판 메인 페이지</h1>
    <a class="btn" href="board/write">게시글 작성</a>
    <a class="btn" href="board/list">게시글 리스트</a>
</div>
</body>
</html>

GPT를 활용해서 만든 메인 페이지입니다. GPT에게 게시글 작성 버튼과 게시글 리스트 버튼을 만든 뒤 꾸며달라고 했더니 예쁘게 작성해줬습니다. html 부분은 문외환이나 다름이 없다보니 막막했는데 GPT를 사용하니 재미도 있고 문제가 되던 부분도 해결이 되었습니다.

게시글 작성 페이지

게시글 작성 페이지는 제목, 작성자, 내용을 작성할 수 있게 만들었고 제목의 길이는 25자 제한을 두었습니다. 또한 내용은 일정 길이가 넘어가면 자동으로 줄바꿈이 되도록 설정하였습니다.

// BoardRepository
package com.studyweb.webboard.repository;

import com.studyweb.webboard.entity.Board;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface BoardRepository extends JpaRepository<Board, Integer> {
}

Repository는 JpaRepository를 상속 받아서 사용을 했고

// 게시글 작성 처리
@PostMapping("/board/write")
public String boardWrite(Board board, Model model) {
    boardService.save(board);
    model.addAttribute("message", "글 작성이 완료되었습니다.");
    model.addAttribute("searchUrl", "/board/list");

    return "message";
}

'작성 완료' 버튼을 누르면 /board/write로 요청이 가서 위의 로직이 실행이 됩니다. boardService에 구현되어 있는 save를 통해서 DB에 정보가 저장이 되고 model.addAttribute("message", "글 작성이 완료되었습니다."); 부분이 실행이 되면서 화명에 '글 작성이 완료되었습니다.'라는 메시지가 띄어지도록 만들었습니다.

게시글 리스트 페이지

게시글 리스트 페이지는 위 사진처럼 만들었고 제목을 클릭하면 게시글 상세 페이지로 이동하게 만들었습니다.
작성 시간 구현에 대해서는 다음 글에서 작성하도록 하겠습니다.

게시글 상세 페이지

게시글 상세 페이지입니다. 게시글 삭제, 수정, 목록으로 돌아가기 버튼이 있고 게시글을 수정한다면 수정 시간이 표시되도록 만들었습니다.

DB는 Maria DB를 사용하였고
JpaRepository 인터페이스를 상속받아서 Repository 기능을 구현했습니다. 이 부분은 추후에 JPA 프로그래밍을 공부해서 모두 수정을 할 계획입니다.

프론트의 디자인은 제가 html, css 지식이 없기 때문에 모두 Ghat-GPT의 도움을 받았습니다. 프론트 부분은 어떻게 만들지.. 고민하다가 GPT를 사용해봤는데 수정할 부분도 많았지만 매우 유용하게 사용했습니다.

이 글은 추후에 수정이 될 수도 있습니다. 현재의 조잡한 게시판을 보고 조금 현타가 왔다가 이대로는 안되겠다 싶어서 급하게 블로그를 작성했기 때문에 정리도 안 되어있고 내용도 많이 부족하기 때문입니다.

우선 다음으로 작성할 글은 작성시간, 수정시간 기능의 추가와 페이징 처리, 검색 기능 등을 추가할 계획입니다.

그 이후에는 로그인 기능, Validation, 필터 등등의 기능을 추가하며 현재의 조잡한 게시판을 업그레이드할 계획입니다.

자세한 코드는 아래의 Github 링크를 참조해주세요!

https://github.com/pp8817/ToyProjectBoard

박상민

스프링 백엔드를 공부중인 대학생입니다!

다음 포스트

💡 게시판 만들기

나의 작은 프로젝트

💡 게시판 - JPA Auditiong으로 작성 시간 추가

0개의 댓글