데이터 Update

데이터 수정 과정

1단계 : <수정 페이지> 만들고 기존 데이터 불러오기

1. <상세 페이지>에서 [Edit] 버튼을 클릭한다.
2. 요청을 받은 컨트롤러는 해당 글의 id로 DB에서 데이터를 찾아 가져온다.
3. 컨트롤러는 가져온 데이터를 뷰에서 사용할 수 있도록 모델에 등록한다.
4. 모델에 등록된 데이터를 <수정 페이지>에서 보여준다. 그러면 사용자가 내용을 수정할 수 있는 상태가 된다.

2단계 : 데이터를 수정해 DB에 반영한 후 결과를 볼 수 있게 <상세 페이지>로 리다이렉트하기

1. 폼 데이터(수정 요청 데이터)를 DTO에 담아 컨트롤러에서 받는다.
2. DTO를 엔티티로 변환한다.
3. DB에서 기존 데이터를 수정 데이터로 갱신한다.
4. 수정 데이터를 <상세 페이지>로 리다이렉트한다.

<수정 페이지> 만들기

우선 상세 페이지인 show.mustache에 Edit 버튼을 만든다.

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>

그리고 ArticleController 클래스에 아래 코드를 입력

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model) {        // id 및 model 객체 받아 오기
        // 수정할 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        // 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);   // articleEntity를 article로 등록
        // 뷰 페이지 설정하기
        return "articles/edit";
    }

그리고 edit.mustache 뷰 페이지를 생성한다.

{{>layouts/header}}
{{#article}}
<form class="container" action="/articles/update" method="post">
    <input name="id" type="hidden" value="{{id}}">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input class="form-control" type="text" name="title" value="{{title}}">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content">{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="/articles/{{id}}" class="btn btn-primary">Back</a>
</form>
{{/article}}
{{>layouts/footer}}

이렇게 하면 상세 페이지에서 Edit버튼으로 해당 편집 페이지로 넘어가면, 내용이 먼저 input 박스에 들어가 있게 된다.

매번 스프링부트를 껐다 켜면 데이터가 다 없어져서, 데이터를 다시 입력하는 게 번거로우니, 더미(dummy) 데이터도 자동 생성하게 하겠다.
src > main > resources에 data.sql 파일을 생성하여, 아래 SQL문을 넣었다.

INSERT INTO article(id, title, content) VALUES(1, '가가가가', '1111');
INSERT INTO article(id, title, content) VALUES(2, '나나나나', '2222');
INSERT INTO article(id, title, content) VALUES(3, '다다다다', '3333');

또한 application.properties 파일에 spring.jpa.defer-datasource-initialization=true 옵션을 추가한다.
그러면 서버를 껐다 켤때마다 3개의 데이터가 들어가있게된다.

그리고 ArticleController 클래스로 돌아와, edit()메서드를 추가한다.

    @PostMapping("/articles/update")
    public String update(ArticleForm form) {
        log.info(form.toString());
        // 1. DTO를 엔티티로 변환하기
        Article articleEntity = form.toEntity();
        log.info(articleEntity.toString());
        // 2. 엔티티를 DB에 저장하기
        // 2-1. DB에서 기존 데이터 가져오기
        Article target = articleRepository.findById(articleEntity.getId()).orElse(null);
        if (target != null) {
            articleRepository.save(articleEntity);
        }
        // 3. 수정 결과 페이지로 리다이렉트하기
        return "redirect:/articles/" + articleEntity.getId();
    }

findById()메서드로 해당 id의 데이터를 찾아내고, 해당 데이터가 있다면 데이터를 저장하고, 없으면 그냥 넘어가서 redirect 된다.
정상적으로 접근한다면 클릭을 통해 수정 요청을 하므로 target이 null이 되지는 않지만, 실제로는 정상적인 수정 요청뿐만 아니라 비정상적인 수정 요청을 하는 경우도 있다. 즉, 실수 또는 악의적으로 잘못된 id를 입력하는 경우가 있을 수 있다. 따라서 수정 시 입력 대상의 존재 여부를 검증하도록 if 조건문을 넣었다.


이렇게 수정을 통해 값이 바뀜을 확인 할 수 있다.