[Spring Boot] 등록 처리

리버 River 2024. 5. 25. 18:12

2024. 5. 25. 18:12

1. 등록 처리와 화면 개발

등록 처리 시에는 @Valid를 이용해서 서버에서도 검증한 후에 등록하는 방식을 적용

@Valid를 위해서 bulid.gradle에 validation 관련 라이브러리를 추가

implementation 'org.springframework.boot:spring-boot-starter-validation'

BoardDTO에는 제목이나 내용, 작성자 등이 비어 있지 않도록 어노테이션들을 처리

public class BoardDTO {

    private Long bno;

    @NotEmpty
    @Size(min = 3, max = 100)
    private String title;

    @NotEmpty
    private String content;

    @NotEmpty
    private String writer;

    private LocalDateTime regDate;
    private LocalDateTime modDate;

}

1) BoardController 처리

🚀 등록 처리는 GET 방식으로 화면을 보고 POST 방식으로 처리
🚀 @Valid에서 문제가 발생했을 때 모든 에러를 errors라는 이름으로 RedirectAttributes에 추가해서 전송

@GetMapping("/register")
public void registerGet() {}

@PostMapping("/register")
public String registerPost(@Valid BoardDTO boardDTO,
                           BindingResult bindingResult, 
                           RedirectAttributes redirectAttributes) {
    log.info("board POST register...");

    if (bindingResult.hasErrors()) {
        log.info("has errors...");
        redirectAttributes.addFlashAttribute("errors", bindingResult.getAllErrors());

        return "redirect:/board/register";
    }

    log.info(boardDTO);
    Long bno = boardService.register(boardDTO);
    redirectAttributes.addFlashAttribute("result", bno);
    return "redirect:/board/list";
}

💡 addFlashAttribute()
- Spring Framework에서 제공하는 메소드로, 주로 리다이렉트 시 데이터를 일시적으로 저장하는 데 사용
- Flash 속성은 리다이렉트 이후에만 유효하며, 한 번 읽히면 소멸하는 특성이 있음
- 이를 통해 사용자는 브라우저를 새로고침하거나 직접 URL을 입력해도 해당 데이터가 유지되지 않도록 할 수 있음

2) register.html 처리

🚀 templates/board 폴더에 register.html을 추가

<!DOCTYPE html>
<html lang="en"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layout/basic.html}">
<head>
    <meta charset="UTF-8">
    <title>Board Register</title>
</head>

<div layout:fragment="content">
    <div class="row mt-3">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Board Register
                </div>
                <div class="card-body">

                </div>
            </div>
        </div>
    </div>
</div>

<script layout:fragment="script" th:inline="javascript">
</script>

🚀 <div class="card-body"> 부분에는 <form> 태그를 이용해서 입력할 수 있는 부분을 추가
🚀 게시물 등록에는 제목 title, 내용 content, 작성자 writer가 추가

<div class="card-body">
<form action="/board/register" method="post">
    <div class="input-group mb-3">
        <span class="input-group-text">Title</span>
        <input type="text" name="title" class="form-control" placeholder="Title">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Content</span>
        <textarea class="form-control col-sm-5" rows="5" name="content"></textarea>
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Writer</span>
        <input type="text" name="writer" class="form-control" placeholder="Writer">
    </div>

    <div class="my-4">
        <div class="float-end">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-secondary">Reset</button>
        </div>
    </div>
</form>
</div><!-- end card body -->

3) @Valid의 에러 메서드 처리

🚀 등록은 @Valid를 통해서 검증하므로 검증에 실패하면 다시 앞의 화면으로 이동
🚀 이때 addFlashAttribute()를 통해서 'errors' 라는 이름으로 에러 메시지들이 전송됨

<script layout:fragment="script" th:inline="javascript">
    const errors = [[${errors}]];
    console.log(errors);

    let errorMsg = '';

    if(errors) {
        for (let i = 0; i < errors.length; i++) {
            errorMsg += `${errors[i].field}은(는) ${errors[i].code} \n`;
        }
        alert(errorMsg);
    }
</script>

💡 Thymeleaf의 인라인 기능을 이용하면 'errors'를 자바 스크립트의 배열로 처리할 수 있기 때문에 이를 이용해서 앞의 메시지를 작성할 수 있음
💡 브라우저를 통해서 아무것도 입력하지 않은 상태에서 submit이 실행되면 경고창이 보임
💡 콘솔창에는 배열로 만들어진 에러 메시지를 출력

4) 정상적인 처리와 모달창

🚀 등록 화면에서 필요한 내용들이 추가되면 정상적으로 '/board/list'로 이동하는 것을 확인
🚀 목록 화면으로 이동했을 때 BoardController에서 RedirectAttributes의 addFlashAttribute()를 이용해서 'result'라는 데이터를 추가적으로 전달. addFlashAttribute()로 전달된 데이터는 쿼리 스트링으로 처리되지 않기 때문에 브라우저의 경로에는 보이지 않음
🚀 list.html에서는 이렇게 전달된 result 변수를 이용해서 모달창으로 처리

list.html의 <script> 태그의 마지막 부분에 코드 추가

// show modal
const result = [[${result}]];

if(result) {
    modal.show();
}

경고창이 동작한 것을 확인후에 모달창을 추가
- 모달창의 코드는 부트스트랩의 Componets 메뉴를 통해서 확인

✓ list.html에 모달창 코드를 추가

✓ 자바스크립트에서는 부트스트랩의 함수를 이용해서 모달창이 보이도록 처리

<div class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

// show modal
const result = [[${result}]];

const modal = new bootstrap.Modal(document.querySelector(".modal"));

if(result) {
    modal.show();
}

✓ 변경된 코드가 적용되면 등록 후에는 모달창이 보이게 되고, 직접 '/borad/list'로 접근할 때는 모달창이 보이지 않게 됨
✓ 이를 이용해서 사용자에게 어떠한 처리가 완료 되었는지에 대한 결과를 알려줄 수 있음

[ 내용 참고 : IT 학원 강의 ]

저작자표시 비영리 변경금지

'Spring & Spring Boot' 카테고리의 다른 글

[Spring Boot] 수정/삭제 처리 (0)	2024.05.25
[Spring Boot] 조회 처리 (0)	2024.05.25
[Spring Boot] 컨트롤러와 화면 처리 · 목록 화면 출력 (0)	2024.05.25
[Spring Boot] 서비스 계층과 DTO의 구현 (0)	2024.05.25
[Spring Boot] Spring Data JPA (2) Querydsl (0)	2024.05.25

ID_ allriver