[게시판 CRUD 만들기] 7장 | 게시글 수정하기: Update

7.1 데이터 수정 과정

해당 글을 불러옴 ➡️ 수정가능한 입력 상태로 만듦 ➡️ 내용을 입력 ➡️ 다시 전송해 DB에 반영

1. <수정> 페이지 만들고 기존 데이터 불러오기
   1. <상세 페이지>에서 [Edit] 버튼 클릭
   2. 요청 받은 컨트롤러가 해당 글의 id로 DB에서 데이터 찾아옴
   3. 컨트롤러는 가져온 데이터를 뷰에서 사용할 수 있도록 모델에 등록
   4. 모델에 등록된 데이터를 <수정 페이지>에서 보여준다. 
2. 데이터를 수정해 DB에 반영한 후 결과를 볼 수 있게 <상세 페이지>로 리다이렉트
   1. 폼 데이터(수정 요청 데이터)를 DTO에 담아 컨트롤러에서 받는다
   2. DTO를 엔티티로 변환
   3. DB에서 기존 데이터를 수정 데이터로 갱신
   4. 수정 데이터를 <상세 페이지>로 리다이렉트

---

7.2 <수정 페이지> 만들기

1. [Edit] 버튼을 클릭해 Edit 요청을 받을 컨트롤러 만들기

➡️ 수정할 데이터 가져오기

2. 모델에 데이터 등록하기 : 뷰페이지에서 사용하려면 필수! 

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model){
        Article articleEntity = articleRepository.findById(id).orElse(null);
        model.addAttribute("article", articleEntity);
        return "articles/edit";
    }

 

3. 수정 폼 만들기(서버로 데이터 전송)

edit.mustache에 value속성 추가

• 제목은 <input> 태그의 value="{{article.title}}" 속성 추가해 가져온다 
• 내용은 <textarea>태그의 콘텐트 영역에 {{article.content}}추가해 가져온다

<input type="text" class="form-control" name="title" value="{{title}}">
<textarea class="form-control" rows="3" name="content">{{content}}</textarea>

{{#article}}{{/article}} 로 사용 범위 지정해서 {{title}}로만 접근이 가능하다. 

만약 사용범위 지정 안했으면 {{article.title}}로 접근해야 한다. 

---

7.3 수정 데이터를 DB에 갱신하기

✔️ 클라이언트와 서버 간 처리 흐름 4가지 기술로 체크

• MVC(Model-View-Controller) : 서버 역할을 분담해 처리하는 기법
• JPA(Java Persistence API) : 서버와 DB간 소통에 관여하는 기술
• SQL(Structured Query Language) : DB데이터를 관리하는 언어
• HTTP(HyperText Transfer Protocol) : 데이터를 주고받기 위한 통신 규약

7.3.1 HTTP 메서드

✔️ 프로토콜(protocol) : 컴퓨터 간에 원활하게 통신하기 위해 사용하는 전 세계 표준

✔️ HTTP : 웹 서비스에 사용하는 프로토콜인데, 클라이언트의 다양한 요청을 메서드를 통해 서버로 보낸다. 

• POST: 데이터 생성 요청
• GET: 데이터 조회 요청
• PATCH(PUT): 데이터 수정 요청
• DELETE: 데이터 삭제 요청

7.3.2 더미 데이터 설정하기

src > main > resources 에 data.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');

src > main > resources 디렉토리의 application.properties 파일에 옵션 추가해 추가 설정해줘야 한다. 

스프링부트 2.5부터는 data.sql로 데이터 초기화 권장하지 않아서 추가설정 해주는 것! 

7.3.3 <수정 페이지> 변경하기

<form class="container" action="/articles/update" method="post">
    <input name="id" type="hidden" value="{{id}}">

• 데이터를 수정해서 서버에 데이터를 전송해야 하니까 POST 사용하고, 수정한 폼 데이터를 /articles/update로 보낸다. 
• form태그는 PATCH 메서드를 지원하지 않아 POST를 사용한다. (GET, POST만 사용 가능)
• 몇 번 id의 article을 수정하는지 알아야 하므로  <input>태그 만들어 id 속성 추가 후 type='hidden'통해 보이지 않게 숨긴다. 
  • id는 화면에 표시할 필요가 없기 때문!

➡️ 수정 폼으로 제목, 내용과 히든 속성인 id를 서버에 전송할 수 있다. 

7.3.2 수정 데이터 받아 오기

update() 기본 틀 만들기

데이터 수정 요청을 처리하는 메서드 

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

• 수정 폼에서 전송한 데이터는 DTO로 받으므로, 매개변수로 DTO를 받아온다. 
  • 수정폼에 <input>태그에 id를 추가해 DTO를 정의하는 ArticleForm에도 id를 추가해야 함!
  • toEntity() 메서드의 매개변수에도 id를 추가해 줘야 한다.  

public class ArticleForm {
    // 외부에서 직접 수정할 수 없게 private으로 설정
    private Long id;
    private String title; // 제목 받을 필드
    private String content; // 내용을 받을 필드

    // 전송받은 제목과 내용을 필드에 저장하는 생성자 추가
    // 데이터를 잘 받았는지 확인
    public Article toEntity(){
        return new Article(id, title, content);
    }
}

7.3.5 DB에 저장하고 결과 페이지로 리다이렉트하기

1️⃣  엔티티를 DB에 저장하기

데이터를 DTO에 담음  ➡️ DTO를 엔티티로 변환 ➡️ 수정 결과 페이지로 리다이렉트

    // /articles/update로 오는 post요청을 아래 메서드에서 처리
    @PostMapping("/articles/update")
    public String update(ArticleForm form){
        log.info(form.toString());
        // 1. DTO를 엔티티로 변환하기
        Article articleEntity = form.toEntity(); // DTO(form)을 엔티티(articleEntity)로 변환
        log.info(articleEntity.toString());
        // 2. 엔티티를 DB에 저장하기
        Article target = articleRepository.findById(articleEntity.getId()).orElse(null);
        if (target != null){
            articleRepository.save(articleEntity); //엔티티를 DB에 저장
        }
        // 3. 수정 결과 페이지로 리다이렉트하기(혹은 뷰페이지 리턴)
        return "redirect:/articles/"+articleEntity.getId();
    }

1. ArticleForm 클래스에서 DTO를 Entity로 변환하는 toEntity()함수 있으니 form.toEntity() 통해 반환값을 Article타입(엔티티)으로 변환
2. 기존데이터를 가져오기 : articleRepository.findById(articleEntity.getId()).orElse(null)
   1. articleEntity의 getId()로 id 가지고 리포지토리에서 데이터 가져옴
   2. 받은 데이터를 엔티티 타입으로 받음
3. 만약에 기존 데이터가 있는 경우에 엔티티를 DB에 저장한다. 

2️⃣  결과 페이지로 리다이렉트하기

redirect:하고 공백 있으면 안된다!

7.3.6 SQL문으로 직접 DB 갱신하기

UPDATE 테이블명 SET 속성명=변경할값, 속성명=변경할값 WHERE 조건;

UPDATE article SET title = 'kkkk', content = 'AAAA';

➡️ 모든 제목과 내용을 kkkk, AAAA로 변경하기

UPDATE article SET title = '가가가가', content = '1111' WHERE id = 2;

➡️ id= 2인 글만 바꾸기