[Spring boot] 게시판 만들기 - MVC 처리하기 (2)

"본 포스팅은 [원 블로그]의 내용을 참고하여 개인 학습 목적으로 작성되었습니다. 원 저작자의 권리를 존중하며,
내용 수정이나 삭제 요청이 있을 시 즉시 조치하겠습니다."

저번 M(model)에 이어

이번엔 V(view), C(controller)를

진행해보겠슴니다

1. 컨트롤러 클래스 생성하기

MVC 중 C에 해당하는 컨트롤러 부분을 다룰텐데 컨트롤러는 M 과 V 사이의 연결다리 역할을 수행합니다

사용자(client)가 요청을 하면 가장 먼저 컨트롤러를 경유하게 되고

그 다음에 M, 즉 서비스 영역을 거치고 V(view) 부분을 화면으로 출력하게 되는 구조입니다

서비스 클래스와 동일한 위치에 PostController 클래스를 생성합니다

그 후 다음의 코드를 입력합니다

package com.study.domain.post;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
@RequiredArgsConstructor
public class PostController {

    private final PostService postService;

    // 게시글 작성 페이지
    @GetMapping("/post/write.do")
    public String openPostWrite(Model model) {
        return "post/write";
    }

}

@Controller	해당 클래스가 클라이언트의 요청을 처리하고 응답하는 클래스임을 나타내는 어노테이션
@GetMapping	@해당 URL 주소로 HTTP요청 메서드를 매핑하기 위한 어노테이션

컨트롤러 메서드는 일반적으로 클라이언트가 보는 화면인 HTML을 처리할 때는 리턴 타입을

String으로 선언하고 HTML 파일 경로를 리턴해줍니다.

추가적으로 openPostWrite 메서드에 파라미터로 전달되는 Model은 인터페이스로

컨트롤러에서 View로 데이터를 전달할 때 사용하는 매개체라고 생각하면 됩니다.

2. 화면 (View) 처리하기

이제부터는 V에 해당하는 사용자에게 보여지는 화면을 다룰 차례입니다

여기서부터는 html,css 를 주로 다루고 프론트엔드 영역은 카테고리와 벗어난다고

판단해서 코드에 대한 설명은 생략될 수 있습니다..!

간단한 구현 방식 이해

우선 HTML파일을 src/main/resources/templates 디렉터리 위치에 만들어야 합니다

스프링부트는 이 경로로 HTML파일을 읽습니다

templates 위치에 post 폴더를 만듭니다.

이 때 폴더를 만들면

이런 식으로 templates.post로 폴더가 보이면 개인적으로 불편하기에

설정을 해주어야 합니다

오른 쪽 위의 점 3개를 클릭한 후

Appearance -> Compact Middle Packages 설정 해제

Appearance - > Compact Middle Packages 부분이 체크 표시되어 있으면 클릭 후 체크를 해제하면

보기 편하게 바뀌게 됩니다.

post 파일에 write 라는 이름의 HTML파일을 만듭니다

그 후 다음의 코드를 입력합니다

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>The page is a write page</title>
</head>
<body>
    <h2>Welcome Spring Boot!</h2>
    <span th:text="${t}">여기는 제목입니다.</span>
    <span th:text="${c}">여기는 내용입니다.</span>
    <span>[[ ${w} ]]</span>
</body>
</html>

그 후 컨트롤러 클래스의 openPostWrite() 메서드를 다음과 같이 수정합니다

    // 게시글 작성 페이지
    @GetMapping("/post/write.do")
    public String openPostWrite(Model model) {
        String title = "제목",
               content = "내용",
               writer = "홍길동";

        model.addAttribute("t", title);
        model.addAttribute("c", content);
        model.addAttribute("w", writer);
        return "post/write";
    }

Model 인터페이스는 addAttribute() 메서드로 HTML파일에 데이트를 전송할 수 있습니다

String 데이터와 변수 값 2개의 파라미터를 필요로하며

두 파라미터를 같게 작성하는 것이 가독성이 좋습니다.

(우선은 간단히 앞글자만 따왔습니다)

그 후 간단히 웹 페이지 실행을 한 번 해볼건데

src/main/com/study에 있는 BoardApplication을 실행시켜줍니다

그 후 URL에 http://localhost:8080/post/write.do를 입력 후 들어가보면

다음과 같이 화면이 출력되는 것을 확인할 수 있습니다

CSS 적용과 레이아웃 처리

이 부분은 프론트엔드 위주 영역으로 카테고리와 벗어나다고 판단하여

빠르게 지나가겠습니다!

EIN 님 출처의 css 파일을 이용하였습니다.

파일을 공유는 불가능하고

저는 도뎡님의 글에서 도움을 받았습니다.

3. 컨드롤러 클래스 수정하기

HTML , CSS 처리는 마쳤고

이제 컨트롤러 클래스를 수정해야합니다

다음의 코드로 메서드를 수정 및 추가합니다.

    // 게시글 작성 페이지
    @GetMapping("/post/write.do")
    public String openPostWrite(@RequestParam(value = "id", required = false) final Long id, Model model) {
        if (id != null) { // 수정하는 경우에 이 조건문으로 들어옴 원래 신규 게시글에는 id가 null로 전송이 돼서 이 조건문 통과함
            PostResponse post = postService.findPostById(id);
            model.addAttribute("post", post);
        }
        return "post/write";
    }


    // 신규 게시글 생성
    @PostMapping("/post/save.do")
    public String savePost(final PostRequest params) {
        postService.savePost(params);
        return "redirect:/post/list.do";
    }

게시글 작성 메서드와 등록(생성)메서드를 생성한 것입니다.

@RequestParam

클라이언트가 전송한 HTTP를 컨트롤러로 전달받을 때 사용되는 어노테이션

신규 게시글에는 id 값이 null로 전달되지만 수정한 게시글의 경우 id 값이

null이 아닌 유효한 id 값으로 전달이 되기에 조건문을 추가해 주어야 합니다.

조건문의 내용은 id 값이 null이 아니라면 ( 게시글을 수정하는 경우라면 )

findPostById메서드로 게시글을 찾고 post로 HTML에 전달하는 내용입니다.

또한 required는 기본값이 true기에 false로 지정을 해주지 않으면

신규 게시글에는 id가 null이기에 오류가 발생합니다.

@GetMapping VS @PostMapping

코드를 보다보니 이 둘의 차이점이 궁금해졌다

우선 GetMapping은 URL에 데이터를 포함시켜 요청하고

데이터를 헤더에 포함하며

주로 조회할 때 사용한다는 특징이 있다

PostMapping은 URL에 데이터를 노출시키지 않고 요청하고

데이터를 바디에 포함하며

주로 노출되면 안되는 데이터를 저장할 때 사용한다

현재 진행중인 게시판을 예시로 들면

@GetMapping	게시글 작성 페이지 열기(조회)
@PostMapping	게시글 저장하기(데이터 생성, 처리)

이런 차이입니다.

또한 @PostMapping의 savePost() 메서드에서 리턴 값의 주소 앞에 redirect가 붙어있는데

redirect를 사용하면 다른 주소(보통 Get 요청)로 가라고 클라이언트에게 지시할 수 있다

Get요청으로 주로 보내는 이유는 Post 요청 후 새로고침했을 때

게시글이 또 저장되는 중복 처리문제가 발생하기 때문이다

만약 redirect 없이 return "/post/list.do";

이렇게 했으면 Spring이 "아~ 이건 View이름이구나~" 로 판단해서

HTML 템플릿 파일을 찾으려 할 것이다.

이제 BoardApplication을 실행하고 로컬 페이지로 들어가보면

이런 식으로 나오는 것을 확인할 수 있고

제목 , 이름 , 내용을 입력 후 저장을 누르면

아직 post/list.do관련 메서드를 처리를 안했기 때문에

오류가 발생하는 것이 정상이다

마지막으로 DB테이블을 확인해보면

다음과 같이 정상적으로 등록된 것을 확인할 수 있습니다.

마무리

- 블로그를 5번째 글까지 쓰다보니 처음보다 완성되는 데에 걸리는 시간이 확실히 줄어든 것 같아 뿌듯했습니다.

그렇지만 줄어든 만큼 심혈을 덜 기울이지는 않았습니다.

왜냐하면 처음보다 내용이 어려워진만큼 궁금한 것도 많이 생겼고 그만큼 더 공부하고 있기 때문입니다.

다음 글에서는 게시글 리스트 조회 기능을 다루어 보겠습니다.

'Spring boot' 카테고리의 다른 글

[Spring boot] 게시판 만들기 - 게시판 MVC 처리하기 (1) (0)	2025.03.17
[Spring boot] 게시판 만들기 - 게시판 CRUD 처리하기 (0)	2025.03.10
[Spring boot] 게시판 만들기 - 게시판 데이터베이스(Maria DB) 연동하기 (0)	2025.03.04
[Spring boot] 게시판 만들기 - 게시판 프로젝트 구조 (0)	2025.03.01

1. 컨트롤러 클래스 생성하기

2. 화면 (View) 처리하기

간단한 구현 방식 이해

CSS 적용과 레이아웃 처리

3. 컨드롤러 클래스 수정하기

@GetMapping VS @PostMapping

마무리

'Spring boot' 카테고리의 다른 글

티스토리툴바