SpringBoot-Board "week02 DB 테이블 생성부터 게시글 리스트까지."

dong.___.ju·2025년 4월 9일

2주차 DB 테이블 생성부터 게시글 리스트까지.

1주차에는 사용할 프로그램 설치, 기본 세팅, 프로젝트 생성까지 해보았다.

2주차에는

DB에 테이블 생성

게시글 작성폼 생성

글 작성 처리

게시글 리스트 까지 진행하고 내용을 포스팅 해보겠다.

1. DB에 테이블 생성하기.

MySQL Workbench에 들어가 스키마를 생성한다. 이름은 진행하는 프로젝트인 board로 생성하였다.

게시판에서 사용할 글 번호는 id(INT), 제목은 title(VARCHAR), 내용은 content(TEXT)로 선언하였다. 3개 모두 아무 내용도 안 들어간다면 글의 형식에 어긋나니 NOT NULL로 설정해 주었다.

1주차에 오류를 해결해서 오류없이 생성하였다.

2. 게시글 작성 폼 생성하기.

인텔리제이로 돌아가 HTML 파일을 생성해준다. 여기서 레이아웃으로 제목, 내용, 작성(등록) 버튼의 위치나 크기, 공백등을 지정해 줄 것 이다.
우선 간단하게 작성이라는 버튼을 하나 만들어주고
BoardController 파일을 수정 해보겠다.

BoardController 파일은 사용자 요청을 처리하고 응답을 반환하는 역할을 한다.

하단의 코드는 사용자가 /board/write 에 접속 하였을때 boardwrite.html를 반환하여, 제목과 내용을 입력할 수 있게 한다.

정상적으로 실행이 된다면 하단의 화면을 만나 볼 수 있다.
좌측엔 제목, 중앙은 내용이다.

하지만 이 형태는 게시글의 형태라고 보기엔 아직 부족하기 때문에 밑의 코드로 수정하여 보겠다.

폼 전체를 중앙에 배치하고, 제목 입력 필드의 크기와 스타일을 정의, 내용 입력 필드의 크기와 스타일을 정의 해주었다.

위의 코드로 수정하여 실행한 화면이다 아직 부족하지만, 제목과 내용 구역을 알아 볼 수 있게 수정해주었다.

폼을 작성하고 정상작동하는지 테스트 해보는것이라 별다른 오류 없이 생성하였다.

3. 글 작성 처리

글 작성 폼을 만들었으니 이제 폼에서 입력받은 데이터를 JPA를 이용하여 DB에 저장해보겠다.

아직 게시판은 만들지 않았으니 제목과 글을 입력후, 작성 버튼을 눌렀을때 그 값들이 정상적으로 반환되는지 확인해보는 과정을 해보겠다.
/board/writepro에 접속하였을때 반환값을 알 수 있게 만들었지만 /writepro페이지를 만들지 않았기에 인텔리제이에서 출력으로 반환값을 받아보겠다.

입력후 실행하여 제목과 글을 작성한후 작성 버튼을 누르면 밑의 사진의 값을 인텔리제이에서 볼 수 있다.
제목과 내용이 정상적으로 반환되는걸 확인 할 수 있다.

이제 DB에 저장하기위해 Repository를 구성하기 위해

board 하위 패키지로 repository, entyti를 만들어 보겠다.

/entyti/Board(테이블 이름이랑 동일하게)

여기에 선언된 id, title, content는 1번 MySQL에서 선언한 형식에 맞게 만들어주었다.

@Data는 @Getter, @Setter등 여러가지의 어노테이션이 합쳐서 필요한 메서드들을 자동으로 생성해주는 역할을 한다.

repository/BoardRepository
파일내에 엔티티인 Board, Id의 타입인 Integer을 넣어준다.

이제 우리가 입력한 데이터를 받아서 DB에 넘겨줘 보겠다.

/service/BoardService는 Controll과 Repository사이에서 연결해주는 다리 역할을 하며,
밑의 코드는 데이터를 받아 DB에 저장해준다.

/controller/BoardController에서 BoardService로 데이터를 넘겨주는 부분을 추가해주면 사용자가 작성한 데이터가 DB에 저장될 것이다.

이제 실행하여 제목 : 구름톤, 내용 : 유니브를 입력후 작성 버튼을 누르면

위와 같이 1번 id로 제목에 구름톤, 내용에 유니브가 입력된 것을 확인 할 수 있다.

위에서 사용한 lombok이 외부 플러그인 인줄 모르고 오탈자를 확인하고 코드를 여러번 정독한끝에 결국 외부 확장자인지 검색 하여 외부 플러그인에서 추가해주니 바로 해결되었다.

4. 게시글 리스트

이번에는 3번에서 작성한 게시글을 게시판 형태로 만들어 보겠다.

위 사진대로 입력후 실행해보겠다.

1번 id의 값은 사용자가 이미 입력한 값이 있기 때문에 2번부터 데이터를 120번 추가하였다.

이제 게시판에 사용할 데이터는 충분해졌으니 /board/list 폼을 만들어 보겠다 /board/list에 접속하였을 때 boardlist가 반환되게 만들어준다.

@GetMapping("/board/list")
    public String boardList(Model model){
        model.addAttribute("list", boardService.boardList());
        return "boardlist";
    }

boardlist를 아직 만들어주지 않았기에 /templates/boardlist를 만들어준다

        <head>
            <meta charset="UTF-8">
            <title>게시물 리스트 페이지</title>
        </head>

        <style>
            .layout{
                width : 500px;
                margin : 0 auto;
                margin-top : 40px;
            }

        </style>

        <body>
          <div class = "layout">
            <table>
              <thead>
                <tr>
                  <th>글 번호</th>
                  <th>제목</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>제목</td>
                </tr>
              </tbody>
            </table>
          </div>
        </body>

실행하여 /board/list에서 확인해보면 예쁘진 않지만 정상적으로 출력이 된 것을 확인 할 수 있다.

이제 DB에 저장되어있는 데이터를 /board/list에 불러와보겠다.

BoardService에 하단의 코드를 입력하면 board가 가지고 있는 데이터를 모두 반환해준다.

다시 BoardControll로 돌아와서 데이터를 보내줄 모델에 "list"란 이름으로 boardService.boardList()를 담아 보낼거다

마지막으로 boardlist.html을 수정해보겠다

<head>
                <meta charset="UTF-8">
                <title>게시물 리스트 페이지</title>
            </head>

            <style>
                .layout{
                    width : 500px;
                    margin : 0 auto;
                    margin-top : 40px;
                }

            </style>

            <body>
              <div class = "layout">
                <table>
                  <thead>
                    <tr>
                      <th>글 번호</th>
                      <th>제목</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each = "board : ${list}">
                      <td th:text="${board.id}">1</td>
                      <td th:text="${board.title}">제목</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </body>