[코딩 자율학습 스프링부트] 7장 게시글 수정하기 : Update

| 데이터 수정 과정

| 수정 페이지를 만들어 기존 데이터 불러오기

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

show.mastache 파일이 상세 페이지이므로 여기에 <a> 태그를 추가해 

edit 링크를 추가했습니다.

 

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

Edit 요청을 받을 컨트롤러를 연결했습니다.

ArticleController.java에 edit() 메서드를 만들었고

반환할 수정 페이지인 edit.mustache 파일을 만들었습니다.

 

그리고 @GetMapping()을 사용해 URL인 articles/{id}/edit을 작성해 연결했습니다.

컨트롤러에서 변수 사용은 중괄호 {} 하나인 것을 유의해야 합니다!

 

edit() 메서드에 DB에 있는 기존 데이터를 불러오는 코드를 작성했으며

articleReository의 findByID(id) 메서드를 사용해 데이터를 찾아 가져옵니다.

 

3) 모델에 데이터 등록하기

모델을 사용하려면 메서드의 매개변수로 MODEL 객체를 받아와 처리합니다.

또한 addAttribute() 메서드로 모델에 데이터를 등록해 

atricle이라는 이름으로 앞에서 가져온 articleEntity를 등록합니다. 

| 수정 폼 만들기

edit.mustache를 만들어 수정 폼을 만들었습니다.

---

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

클라이언트와 서버 간 처리 흐름 4가지 기술 

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

| HTTP 메서드

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

클라이언트의 다양한 요청을 메서드를 통해 서버로 보내는 역할을 하는 웹 서비스에 사용하는 프로토콜입니다.

 

HTTP의 대표적인 메서드

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

| 구현

1) 더미 데이터 설정하기

data.sql 파일을 만들어 더미 데이터를 자동으로 생성하도록 했습니다.

 

 

2) 수정 페이지 변경하기

앞서 6장에서 수정 페이지는 edit.mustache 파일에 만들었습니다.

<form> 태그에서 action 속성은 폼 데이터를 어디로 보낼지 URL을 지정하고

method 속성은 어떻게 보낼지 방식을 지정합니다.

 

3) 수정 데이터 받아오기

- update() 메서드 기본 틀 만들기 

URL 요청을 접수하고 데이터 수정 요청을 받는 메서드이며 post 방식으로 요청을 받았기 때문에

@PostMapping()을 사용했습니다.

 

- 수정 데이터를 DTO에 담기

수정 폼에서 전송한 데이터는 DTO로 받아오므로 메서드의 매개변수로 DTO를 받아옵니다.

그러나 수정 폼에서 <input> 태그로 id를 추가했으므로 

DTO를 정의하는 ArticleForm에도 id를 추가해야 합니다.

 

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

데이터를 DTO에 담았기 때문에 최종적으로 DB에 저장해야 합니다.

 

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

toEntity() 메서드를 호출해 반환 값을 Article 타입의 변수로 받습니다.

 

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

DB에서 기존 데이터를 가져와 수정하기 위해

findById() 메서드를 호출합니다.

getID() 메서드를 매개변수에 넣어 id 변수가 바뀌어도 자동으로 호출될 수 있도록 변경합니다.

orElse(null)을 통해 데이터가 없다면 null을 반환하도록 했습니다.

 

- 3 결과페이지로 리다이렉트 하기

컨트롤러에서 마지막 return 값으로 해당 id의 상세 페이지로 이동할 수 있는 URL을 넣었습니다.

URL의 id 부분은 엔티티에 따라 매번 바뀌므로 getID() 메서드를 호출했습니다.