7일차

~7.3 수정 데이터를 DB에 갱신하기(종이책 p197~228)

7장 게시글 수정하기: Update

7.1 데이터 수정 과정

게시판에 작성한 글을 수정하려면 해당 글을 불러와 수정할 수 있는 입력 상태로 만들어야 한다. 그다음 내용을 입력하고 다시 전송하면 DB에 반영돼 최종적으로 수정된다.

데이터 수정 실습은 크게 2단계로 나누어진다.

1. 수정 페이지 만들고 기존 데이터 불러오기
2. 데이터를 수정해 DB에 반영한 후 결과를 볼 수 있게 상세페이지로 리다이렉트하기

7.2 수정 페이지 만들기

상세 페이지에 Edit 버튼 만들기

상세 페이지인 show.mustache 파일의 </table> 아래에 <a> 태그를 추가하고 href 속성 값으로 연결하려는 URL 을 작성한다.

<a href=”/articles/{{article.id}}/edit”>Edit<a>

• article의 사용 범위를 {{#article}}{{/article}} 형식으로 지정한 경우에는 {{id}} 만 써도 되지만 지정하지 않았다면 점(.)을 사용해서 article.id로 사용해야 한다.

눈에 잘 띄도록 class=”btn btn-primary” 속성을 추가해준다.

서버를 실행하고 내용을 제출한 후 목록 페이지를 보면 Edit 버튼이 잘 나오는 것을 확인할 수 있다.

Edit 요청을 받아 데이터 가져오기

아직 Edit 요청을 받을 컨트롤러를 만들지 않았기 때문에 Edit 버튼을 클릭하면 에러 페이지가 뜬다.

ArticleController.java 파일에 edit() 메서드를 추가한다.

1. 반환할 수정 페이지를 articles 디렉터리 안에 edit.mustache 파일로 설정한다.
2. URL 요청을 받는 @GetMapping()을 작성하고 괄호 안에는 show.mustache 파일에서 “/articles/{{article.id}}/edit” 주소로 연결을 요청했으므로 URL인 “/articles/{id}/edit”을 작성한다.
   • 뷰 페이지에서는 변수를 사용할 때 중괄호를 두 개({{}}) 쓰지만 컨트롤러에서 URL 변수를 사용할 때는 하나({})만 쓴다.

수정할 데이터 가져오기

1. @PathVariable 어노테이션과 함께 Long id를 매개변수로 받아 온다.
2. DB에서 기존 데이터를 가져올 때는 리파지터리를 이용한다. 따라서 articleRepository의 findById(id) 메서드로 데이터를 찾아 Article 타입의 articleEntity로 저장한다. 만약 데이터를 찾지 못했다면 null을 반환한다.

모델에 데이터 등록하기

뷰 페이지에서 사용할 수 있도록 모델에 데이터를 등록한다.

1. 매개변수로 model 객체를 받아온다.
2. addAttribute() 메서드로 모델에 데이터를 등록한다. article이라는 이름으로 등록한다.

수정 폼 만들기

1. src/main/resources/templates/articles에 edit.mustache 파일을 만든다.
2. 헤더-푸터의 샌드위치 구조를 만든다.
3. 수정 폼은 글을 작성하는 입력 폼과 비슷하기 때문에 new.mustache의 <form class=”cotainer” ・・・> ・・・</form> 부분을 복사 붙여넣기 한다.
4. <form> 태그의 action 속성값을 공백으로 만든다. 이 부분은 다음 절에서 채워넣는다.
5. 수정 페이지에서 Back을 누르면 상세 페이지로 돌아가야 하므로 href 속성 값을 “/articles/{{article.id}}”로 수정한다.
6. 수정 페이지에서 데이터를 보여주기 위해 edit.mustache 파일을 수정한다.
   • <input> 태그의 value=”{{article.title}}” 속성을 추가해 제목을 가져온다.
   • <textarea> 태그의 콘텐트 영역에 {{article.content}}를 추가해 내용을 가져온다.

※ article.xxx 라는 표현이 반복되는 게 싫다면 {{#article}}{{/article}}로 감싸서 article의 사용 범위를 지정해주면 된다. 그러면 xxx라고만 쓰면 된다.

서버를 실행해서 Edit 버튼을 누르면 제목과 내용이 잘 출력되고 edit 페이지로 넘어가는 것을 확인할 수 있다.

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

클라이언트와 서버 간에 데이터를 전송할 때는 다양한 통신 규약, 즉 프로토콜을 따른다. 프로토콜(protocol)은 컴퓨터 간에 원활하게 통신하기 위해 사용하는 전 세계 표준이다.

프로토콜의 종류는 다양한데 그 중 웹 서비스에 사용하는 프로토콜은 HTTP(HyperText Transfer Protocol)이다. HTTP는 클라이언트의 다양한 요청을, 메서드를 통해 서버로 보내는 역할을 한다. 대표적인 메서드로는 POST, GET, PATCH(PUT), DELETE가 있다.

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

이제 HTTP 메서드로 데이터 수정을 요청하고 실제 DB에 반영하도록 한다.

더미 데이터 설정하기

먼저 더미 데이터를 설정하도록 한다. 서버를 껐다 켤 때마다 매번 데이터를 입력하는 게 번거로우니 이를 개선해 더미(dummy) 데이터를 자동 생성할 수 있도록 한다.

1. src/main/resoucres 디렉터리에 data.sql 파일을 생성한다.

2. sql 문으로 데이터 3개를 넣는다.

   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’);
   

3. 스프링 부트 2.5 버전부터 data.sql을 사용한 데이터 초기화를 권장하지 않기 때문에 src/main/resources 디렉터리에 있는 application.properties 파일을 열고 spring.jpa.defer-datasource-initialization=ture 옵션을 추가한다.

수정 페이지 변경하기

수정 페이지의 코드는 edit.mustache 파일에 있는데 파일의 <form> 태그를 보면 action과 method 속성이 있다. action 속성은 폼 데이터를 어디로 보낼지 URL을 지정하고, method 속성은 어떻게 보낼지 방식을 지정한다.

여기서는 action 속성 값으로 수정한 폼 데이터를 “articles/update”로 보내고, method 속성 값은 “post”로 둔다.

• <form> 태그가 옛날에 만들어진 규격이라 PATCH 메서드를 지원하지 않고 GET과 POST 메서드만 지원하기 때문에 수정 요청을 POST로 보낸다.

수정 폼에서 서버로 보낼 데이터가 하나 더 있는데, id를 보내줘야 한다. id가 몇 번인 article을 수정하는지 알려 줘야 하므로 <input> 태그를 만들어 value=”{{id}}” 속성을 추가하고, 화면에 표시할 필요가 없으므로 type=”hidden” 속성을 추가해준다.

<input name=”id” type=”hidden” value=”{{id}}”>

수정 데이터 받아오기

1. update() 메서드 기본 틀 만들기
   • ArticleController.java 파일에 update() 메서드를 작성한다.
   • POST 방식으로 요청을 받았기 때문에 @PostMapping()을 사용한다. 괄호 안에는 action 속성에서 정의한 “/articles/update”를 작성한다.
2. 수정 데이터를 DTO에 담기
   • 메서드의 매개변수로 DTO를 받아 온다.
   • 수정 폼에 <input>태그로 id를 추가했으므로 DTO를 정의하는 ArticleForm에도 id를 추가해야한다. dto/ArticleForm에 id필드를 추가하고 생성자에도 id를 작성해준다.

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

데이터를 DTO에 담았다면 최종적으로 DB에 저장해야 한다. 이를 위해 다음 3단계를 거친다.

1. DTO를 엔티티로 변환하기

   • ArticleForm 클래스에 만들어 놓은 toEntity()메서드를 사용하여 반환값을 Article 타입의 articleEntity라는 이름으로 받는다.

   	Article articleEntity = form.toEntity()

2. 엔티티를 DB에 저장하기

   • 먼저 DB에서 기존 데이터를 가져와야 한다. 리파지터리를 이용해 articleRepository.findById() 메서드를 호출한다.

     Article target = articleRepository.findById(articleEntity.getId()).orElse(null);

   • DB에서 기존 데이터를 가져오고 나면 기존 데이터의 값을 갱신하는 코드를 작성한다.

     if (target != null) {
     	articleRepository.save(articleEntity); // 엔티티를 DB에 저장(갱신)
     }

3. 수정 결과 페이지로 리다이렉트하기

   • 수정된 내용이 반영된 상세 페이지로 이동할 수 있도록 마지막 return 값으로 리다이렉트한다.

     return “redirect:/articles/” + articleEntity.getId();

서버를 재시작하고 수정 페이지에서 Submit을 누르면 제대로 리다이렉트 페이지로 이동한 것을 확인할 수 있고, 제목과 내용 역시 잘 수정되는 것을 볼 수 있다.

SQL 문으로 직접 DB 갱신하기

1. localhost:8080/h2-console 페이지에 접속해 Connect 한다.

2. SQL문으로 다음과 같이 작성하면 갱신할 수 있다.

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