[Spring] HTML Form을 이용해 게시글 작성하기

웹 애플리케이션에서 사용자가 게시글을 작성하려면 입력할 수 있는 Form을 제공하고, 사용자가 입력한 데이터를 서버로 전송하여 저장하는 과정이 필요하다.

이번에는 Spring Boot에서 HTML Form을 사용하여 게시글 작성 기능을 구현해 보았다.

1. HTML Form 만들기

먼저 사용자가 제목과 내용을 입력할 수 있는 Form을 만든다.

<form action="/posts/doWrite">
    <input type="text" name="title">
    <br>
    <textarea name="content"></textarea>
    <br>
    <input type="submit" value="작성">
</form>

<form>은 사용자가 입력한 데이터를 서버로 전송하기 위한 HTML 요소이다.

여기서 input과 textarea는 입력 방식에 차이가 있다.

• input : 한 줄의 텍스트를 입력할 때 사용한다.
• textarea : 여러 줄의 텍스트를 입력할 때 사용한다.

게시글 작성에서는 제목은 한 줄로 입력하고, 내용은 여러 줄로 입력할 수 있으므로 각각 input과 textarea를 사용하였다.

name 속성

각 입력 요소에 지정한 name은 서버에서 전달받을 데이터의 이름으로 사용된다.

<input type="text" name="title">
<textarea name="content"></textarea>

따라서 사용자가 입력한 제목과 내용은 서버에서 각각 title, content라는 이름으로 받을 수 있다.

2. GET과 POST

Form을 사용하여 데이터를 주고받을 때는 HTTP 메서드를 사용한다.

게시글 작성 기능에서는 Form을 보여주는 요청과 실제 데이터를 저장하는 요청을 구분하여 사용하였다.

작업	HTTP	메서드목적
게시글 작성 Form 조회	GET	Form을 보여준다.
게시글 작성	POST	입력받은 데이터를 저장한다.

GET은 서버의 데이터를 조회할 때 주로 사용하고, POST는 새로운 데이터를 생성하는 등의 작업에 사용한다.

따라서 게시글 작성 Form을 보여줄 때는 GET, Form에서 입력받은 데이터를 저장할 때는 POST를 사용한다.

3. Form을 보여주는 기능 만들기

Controller에서 작성 Form을 반환하도록 구현하였다.

@GetMapping("/posts/write")
@ResponseBody
public String write() {
    return """
            <form action="/posts/doWrite">
              <input type="text" name="title">
              <br>
              <textarea name="content"></textarea>
              <br>
              <input type="submit" value="작성">
            </form>
            """;
}

@GetMapping("/posts/write")를 사용했기 때문에 /posts/write로 GET 요청이 들어오면 write() 메서드가 실행된다.

@ResponseBody가 있기 때문에 메서드에서 반환한 문자열을 View 이름으로 해석하지 않고 HTTP 응답 본문으로 그대로 반환한다.

따라서 /posts/write에 접속하면 브라우저에 HTML Form이 표시된다.

4. Form 데이터를 서버로 전송하기

Form에 데이터를 입력한 뒤 작성 버튼을 누르면 action에 지정한 주소로 요청이 전송된다.

<form action="/posts/doWrite">

따라서 /posts/doWrite로 요청이 전송된다.

Controller에서는 이 요청을 처리할 메서드를 작성한다.

@PostMapping("/posts/doWrite")
@ResponseBody
public String doWrite(String title, String content) {
    Post post = postService.write(title, content);

    return "%d번 글이 작성되었습니다.".formatted(post.getId());
}

여기서 title과 content는 Form에서 전송한 데이터와 동일한 이름의 매개변수로 받을 수 있다.

<input type="text" name="title">
<textarea name="content"></textarea>

↓

String title
String content

즉, Form에서 입력한 값이 Controller의 메서드 매개변수로 전달된다.

이후 전달받은 제목과 내용을 저장한다.

 

이처럼 Form을 보여주는 기능과 Form 데이터를 처리하는 기능을 분리하면 각각의 역할을 명확하게 구분할 수 있다.

다음 글에서는 사용자가 제목이나 내용을 입력하지 않는 등의 잘못된 입력을 서버에서 검사하기 위해 Spring Validation을 적용해 보았다.