스프링부트로 웹 페이지 만들어보기

윤형주 2025. 10. 5. 15:44

2025. 10. 5. 15:44

게시판의 여러 기능을 만들기전, 일단 게시판의 형태를 잡아볼까 합니다.

일단 가장 기초적인 글 작성 페이지부터 만들어보겠습니다.

1. 컨트롤러 작성

스프링부트에서는 컨트롤러가 URL 매핑을 담당합니다.

때문에 앞으로 글 목록 기능이나 수정 기능 등, 여러 기능을 만들어갈텐데 이번에 작성할 컨트롤러를 통해 그 기능에 맞는 알맞은 페이지로 연결시킬 예정입니다.

//BoardController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/board")
public class BoardController {
    @GetMapping("/save")
    public String saveForm() {
        return "save";
    }
}

간략하게 적어본 컨트롤러입니다.

@Controller는 이 클래스가 웹 요청을 처리하는 컨트롤러 클래스다 라는 것을 스프링에 알려주는 역할을 합니다.

위 코드에서는 컨트롤러 어노테이션으로 BoardController 클래스가 컨트롤러의 역할을 하도록 하였습니다.

@RequestMapping는 컨트롤러의 기본 URL 경로를 지정하거나, 또는 특정 메서드의 매핑 URL을 지정하는 어노테이션입니다.

코드의 경우 @Controller 아래에 붙임으로서 컨트롤러의 기본 URL 경로를 /board로 설정하는 역할을 했습니다.

BoardController 클래스 안에는 saveForm()이라는 메서드를 작성해주었습니다.

@GetMapping은 Get방식으로 들어온 요청을 아래 메서드가 처리하게 하는 어노테이션입니다.

코드에서는 @GetMapping("/save")로 작성하여 /save로 들어오는 요청을 아래 saveForm()메서드가 받게 하였습니다.

이때 컨트롤러의 기본 URL이 /board이기에 실제 /save경로는 /board/save가 됩니다.

saveForm()의 경우 /board/save로 요청이오면 save를 return해준다고 작성하였습니다.

이때 save라는 문자열을 return하는것이 아닌 스프링부트가 templates 폴더에서 save라는 이름의 HTML파일을 찾아서 그 파일을 보여주는 역할을 합니다.

저는 templates 폴더에 save.html을 작성해주었습니다.

2. 글 작성 페이지 생성

<!-- save.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>save</title>
</head>
<body>
<form action="/board/save" method="post">
    writer: <input type="text" name="boardWriter"> <br>
    pass: <input type="text" name="boardPass"> <br>
    title: <input type="text" name="boardTitle"> <br>
    contents: <textarea name="boardContents" cols="30" rows="10"></textarea> <br>
    <input type="submit" value="글작성">
</form>
</body>
</html>

투박하지만 단순한 글 작성 페이지입니다.

나중에 이쁘게 만들어줘야겠네요.

코드를 요약하면 post 방식으로 서버에 값을 전달하고, boardWriter, boardPass같은 파라미터가 key 역할을 합니다.

이때 서버에서는 key로 받은 값을 처리해야겠죠.

스프링부트에서는 DTO(Date Transfer Object) 클래스를 만들어서 위같은 폼 데이터를 한 번에 받을 수 있었습니다.

3. DTO(Date Transfer Object) 생성

//BoardDTO.java
package com.example.demo.dto;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString

public class BoardDTO {
    private Long id;
    private String boardWriter;
    private String boardPass;
    private String updatePass;
    private String boardTitle;
    private String boardContents;
    private int boardHits;
    private String boardCreatedAt;
}

이번 게시판에서 사용할 DTO 클래스입니다.

@Getter, @Setter, @ToString은 Lombok 라이브러리에서 제공하는 어노테이션입니다.

@Getter는 클래스의 모든 필드에 대해 getter 메소드를 자동 생성해줍니다.

원래는 getBoardWriter(), getBoardTitle() 처럼 get 메서드를 작성해줘야하지만, 그 코드들을 수동으로 작성하지 않아도 이미 작성된것처럼 사용할 수 있습니다.

@Setter 역시 거의 동일합니다. 대신 getter 메소드 대신 setter 메소드를 자동 생성해주는 역할을 합니다.

역시나 수동으로 set 메소드들을 작성해주지 않아도 그 기능을 사용할 수 있습니다.

@ToString도 비슷하게 모든 필드를 포함한 toString()메서드를 자동으로 생성해줍니다.

그 아래에 핵심인 BoardDTO 클래스가 있습니다.

클래스 안에는 여러 변수가 적혀있는데, 이게 폼 데이터를 담는 그릇의 역할을 해줍니다.

각각의 name 속성 값이 DTO의 필드와 매칭되어 저장되게 됩니다.

boardHits 같은 여러 필드의 경우 현재 HTML에 작성되지 않는 폼들이지만, 나중에 조회수 등을 더 추가하기 위해서 미리 작성하였씁니다.

데이터를 입력받을 폼과 그 폼의 값을 담을 그릇인 DTO는 작성했지만, 가장 중요한것이 빠졌습니다.

HTML을 잘보면 Post 방식으로 값을 받아 서버에 전달하게되는데, 아까 컨트롤러를 보면 Get방식으로 받는 값은 매핑이 되어있지만 Post로 들어오는 요청에 대해서는 매핑이 되어있지 않습니다.

때문에 현재는 입력받은 값이 DTO로 들어가지 못 합니다.

이 중간의 길을 컨트롤러에서 연결시켜줘야합니다.

4. 컨트롤러 추가 작성

//BoardController.java

//생략
public class BoardController {
    private final BoardService boardService;

    @GetMapping("/save")
    public String saveForm() {
        return "save";
    }
    @PostMapping("/save")
    public String save(BoardDTO boardDTO) {
        System.out.println("boardDTO = " + boardDTO);
        return "redirect:/board/";
    }

컨트롤러에 위와 같은 메서드를 추가해주었습니다.

@PostMapping은 @GetMapping과 비슷한 역할을 합니다.

대신 Get방식이 아닌 Post방식에 대해서 매핑을 해줍니다.

코드를 살펴보면 /board/save에 대해서 서버로 들어오는 Post 요청에 대해 save 메서드가 실행되게됩니다.

save(BoardDTO boardDTO)는 폼 데이터가 자동으로 BoardDTO 객체에 매핑되게합니다.

얘로 name이 boardWriter인 데이터는 자동으로 boardWriter라는 이름을 가진 DTO의 객체에 들어가게됩니다.

System.out.println("boardDTO = " + boardDTO); 구문은 디버깅용 출력 구문입니다.

사용자가 폼을 통해 입력한 데이터가 재대로 DTO에 매핑되었는지 확인하기 위해서 작성하였습니다.

return "redirect: /board/"; 은 return 값으로 /board로 리다이렉트 되게 해줍니다.

즉 글 작성이 완료하면 /board로 자동으로 연결됩니다.

이렇게 컨트롤러와 DTO, 글 작성 페이지를 만듦으로써 폼 -> DTO -> 컨트롤러로 이어지는 흐름을 만들어보았습니다.

다음에는 DB 연동과 데이터 저장에 대한 코드를 작성해야겠네요.

지금은 뼈대부터 만들어가느라 이래저래 투박하고 부족하지만, 완성이 되고 형태가 갖춰지면 css 등을 추가하여 외관도 꾸며보고자합니다.

다양한 값도 넣어보면서 입력과 검증의 취약점도 고쳐보고, 연결 과정에서 발생하는 문제도 짚어보면서 보안적인 측면에 대해서 공부해볼껍니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

웹 페이지를 만드는거나 스프링부트를 다뤄보는게 처음이라 생소하지만 굉장히 재밌게 공부하게되네요.

워게임이나 ctf 만 풀면서 웹 해킹을 공부하는것보다 직접 만들어보는 것이 다양한 지식을 얻게 되는것 같습니다.

그만큼 더 넓어진 시야를 가지는 첫 걸음인 느낌입니다.

아마 직접 스프링부트를 만져보지 않았다면 스프링부트내의 흐름이나 구조에 대해서 알지 못 했을 것 같네요.

'보안 > 실습' 카테고리의 다른 글

스프링부트로 웹 페이지 만들어보기 - 5. 글 작성 백엔드 (0)	2025.10.21
스프링부트로 웹 페이지 만들어보기 - 4. DB 연결과 스프링부트의 구조 (0)	2025.10.09
스프링부트로 웹 페이지 만들어보기 - 2. 프로젝트의 기본 구조 설명 (0)	2025.10.03
스프링부트로 웹 페이지 만들어보기 - 1. 서버와 개발 환경 셋팅 (0)	2025.09.29
스프링부트로 웹 페이지 만들어보기 - 0. 프로젝트 설계 (0)	2025.09.27

윤형주의 다락방