[7일차] 7장 : 게시글 수정하기: Update

길벗 IT도서에서 주관하는 코딩 자율학습단 8기 : Spring Boot 파트에 참여한 기록입니다 [ 목록 ]

 

7.1 데이터 수정 과정

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

 

7.2 <수정 페이지> 만들기

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

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

• article의 사용 범위를 {{#article}} {{/article}} 처럼 지정하지 않으면 점(.)을 사용해야 함
• 부트스트랩 CSS 적용

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

@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";
}

7.2.3 수정 폼 만들기

{{>layouts/header}}
{{#article}}
    <form class="container" action="" method="post">
        <div class="mb-3">
            <label class="form-label">제목</label>
            <input type="text" class="form-control" 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}}">Back</a>
    </form>
{{/article}}

{{>layouts/footer}}

 

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) : 클라이언트와 서버 간에 데이터를 전송할 때의 통신 규약. 전 세계 표준. 기기 간에 각종 신호 처리 방법, 오류 처리, 암호, 인증 방식 등을 규정
  • FTP(File Transfer Protocol) : 파일 전송을 위한 프로토콜
  • SMTP(Simple Mail Transfer Protocol) : 이메일 전송을 위한 프로토코
• HTTP(HyperText Transfer Protocol) : 웹 서비스에 사용하는 프로토콜
  • 대표적인 메서드 4개
    • POST : 데이터 생성 요청
    • GET : 데이터 조회 요청
    • PATCH(PUT) : 데이터 수정 요청
    • DELETE : 데이터 삭제 요청
  • 데이터 관리에서 가장 기본이 되는 동작 생성, 조회, 수정, 삭제를 CRUD(Create Read Update Delete)라고 부르는데 HTTP 메서드와 일치

7.3.2 더미 데이터 설정하기

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

spring.jpa.defer-datasource-initialization=true

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

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

• <form> 태그는 예전에 만들어져서 PATCH 메서드를 지원하지 않으므로 POST 사용
• 데이터 수정을 위해 id도 보내주는데, 화면에 보이지 않도록 타입을 hidden으로 지정

7.3.4 수정 데이터 받아 오기

• ArticleController.java에 edit 메서드 만들고 DTO로 데이터 받기
• 기존 DTO는 id를 안썼으므로, 필드 추가 후 toEntity()메서드에도 추가

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

 

 

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

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

 

localhost:8080/h2-console 접속해서 ARTICLE 보기

 

 

업데이트문 적용 : UPDATE article SET title = 'KKKK', content = 'AAAA';

 

업데이트+조건 적용 2 : UPDATE article SET title = '가나다라', content = '1111' WHERE id = 2;

 

🚀 1분 퀴즈

다음 표에 들어갈 용어 또는 명령어를 작성하세요.

데이터 관리	SQL	HTTP
데이터 생성(Create)	INSERT	( POST )
( 데이터 조회(Read) )	SELECT	GET
데이터 수정(Update)	( UPDATE )	PATCH(PUT)
데이터 삭제(Delete)	DELETE	DELETE

 

✅ 셀프 체크

Membe 게시판에 정보 수정 기능 추가하기

@GetMapping("/members/{id}")
public String show(@PathVariable Long id, Model model) {
    Member memberEntity = memberRepository.findById(id).orElse(null);
    model.addAttribute("member", memberEntity);

    return "members/show";
}

@GetMapping("/members/{id}/edit")
public String edit(@PathVariable Long id, Model model) {
    Member memberEntity = memberRepository.findById(id).orElse(null);
    model.addAttribute("member", memberEntity);
    return "members/edit";
}

@PostMapping("/members/update")
public String edit(MemberForm form) {
    Member memberEntity = form.toEntity();

    Member target = memberRepository.findById(memberEntity.getId()).orElse(null);

    if (target != null) {
        memberRepository.save(memberEntity);
    }

    return "redirect:/members/" + memberEntity.getId();
}

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

{{>layouts/header}}
{{#member}}
    <form class="container" action="/members/update" method="post">
        <input name="id" type="hidden" value="{{id}}">
        <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="text" class="form-control" name="email" value="{{email}}">
        </div>
        <div class="mb-3">
            <label class="form-label">Password</label>
            <textarea class="form-control" rows="3" name="password">{{password}}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <a href="/members/{{id}}">Back</a>
    </form>
{{/member}}

{{>layouts/footer}}

 

 

🏓 더 알아 볼 내용

1. data.sql 사용법

• 단순한 SQL 파일이 아닌 스프링 부트 애플리케이션이 실행될 때 같이 실행 되는 파일. 즉, DB의 초깃값을 세팅해 주는 역할
• 특징
  • 반드시 src/main/resources 디렉터리에 위치
  • 파일 이름을 data.sql로 하고 싶지 않은 경우 yml 혹은 properties 파일에 다음과 같은 옵션을 설정하면 파일 이름을 변경 가능
    • spring.datasource.data={your-script-name.sql}
• data.sql은 MySQL, PostgreSQL과 같은 인메모리 DB가 아닌 DB를 사용할 때 쉽게 사용 가능
• 그러나 인메모리 DB(예: H2 DB)에서는 직접적으로 사용하기가 어려움
  • 스프링 애플리케이션이 실행되면서 H2 DB를 초기화하는데, data.sql은 이보다 먼저 실행되기 때문
  • 따라서 이를 해결하려면 defer-datasource-initialization 옵션을 설정 필요

2. defer-datasource-initialization 옵션

• defer-datasource-initialization 옵션은 스프링에서 제공하는 기능 중 하나로, data.sql 파일이 hibernate 초기화 이후에 동작하게 하기 위한 옵션
• 이 옵션을 true로 설정하면 JPA가먼저 데이터베이스 스키마를 자동으로 생성한 후 SQL 파일을 실행. 따라서 data.sql을 보다 안전하게 사용 가능
• 이외에 다른 방법
  • JPA를 사용하지 않고 데이터베이스 스키마를 직접 정의한 SQL 파일을 실행하는 방법
  • MySQL 같은 인메모리 DB가 아닌 DB를 사용하는 방법