코딩자율학습단 스프링부트_3장

폼 데이터란

폼 데이터란 HTML 요소인 <form> 태그에 실려 전송되는 데이터.

<form> 태그는 택배에 비유할 수 있는데,

택배를 보낼 때 수령자와 배송형태 배송지 주소 등을 작성하는 것처럼 폼 태그도 이와 같은 역할.

폼 태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아 받는데 이 객체를 DTO라고 부름.

DTO로 받은 데이터는 최종적으로 데이터베이스에 저장.

---

폼 데이터를 DTO로 받기

templates 디렉터리에서 articles 폴더를 만들고 new.mustache 파일 생성.

2장에서 만들었던 헤더와 푸터 추가해 주고 부트스트랩으로 폼 만들기.

그다음은 이제 ArticleController를 만들어서 뷰 페이지를 보여주기 위해 메서드 추가.

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ArticleController {

    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }
}

만든 폼 태그에다가 정보를 보내기 위해 어디에 어떻게 보낼지의 속성 추가.

<form class="container" action="/articles/create" method="post">

com.example.firstproject 아래에 dto 패키지 만들고 ArticleForm 자바 파일 생성해 주기.

입력 폼에서 제목과 내용을 전송할 예정이니 이것을 받을 필드(변수) 만들고 생성자 추가.

폼 데이터를 잘 받았는지 확인하기 위해 toString() 메서드도 추가해 주면 ArticleForm의 코드작성은 완료.

package com.example.firstproject.dto;

public class ArticleForm {
    private String title;
    private String content;

    // 전송받은 제목과 내용을 필드에 저장하는 생성자 추가
    public ArticleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Override
    public String toString() {
        return "ArticleForm{" +
                "title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

다시 ArticleController에 가서 이번에는 데이터를 받을 것이니 PostMapping으로 함수 만들어주고,

폼 데이터를 DTO로 받아서 println으로 잘 담겼는지 확인하는 코드까지 작성해 주기.

@PostMapping("/articles/create")
public String createArticle(ArticleForm form) {
	System.out.println(form.toString());
	return "";
}

머스테치 파일로 다시 가서 input과 textarea 태그에 필드명으로 name 추가해 주고 결과 확인하면,

인텔리제이 콘솔에 잘 나오는 것을 확인할 수 있다.

---

DTO를 데이터베이스에 저장하기

데이터베이스란 쉽게 말해 데이터를 관리하는 창고로 DB의 모든 데이터도 행과 열로 구성된 테이블에 저장해 관리.

JPA란 자바 언어로 DB에 명령을 내리는 도구로, 데이터를 객체 지향적으로 관리할 수 있게 해 줌.

JPA의 핵심 도구로는 엔티티와 레파지토리가 있음.

엔티티는 자바 객체를 DB가 이해할 수 있게 만든 것으로 이를 기반으로 테이블이 만들어짐.

레파지토리는 엔티티가 DB속 테이블에 저장 및 관리될 수 있게 하는 인터페이스.

이제 DTO를 엔티티로 변환하는 코드를 ArticleController 먼저 작성.

// DTO를 엔티티로 변환
Article article = form.toEntity();

코드로 작성했을 때 오류가 떴는데 이제 오류를 해결하기 위해 먼저 Article 클래스 만들기.

alt + enter키를 누르고 목록에서 Create class 'Article'을 선택한 다음 패키지 생성 위치를 바꾸고 생성.

이제 Article 클래스에 아래 코드를 작성.

package com.example.firstproject.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;

@Entity
public class Article {
    @Id
    @GeneratedValue
    private Long id;

    @Column
    private String title;

    @Column
    private String content;

    public Article(Long id, String title, String content) {
        this.id = id;
        this.title = title;
        this.content = content;
    }

    @Override
    public String toString() {
        return "Article{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

이제 toEntity() 메서드 추가하기.

toEntity() 메서드는 DTO인 form객체를 엔티티 객체로 변환하는 역할.

toEntity()에 마우스를 올리고 Create method 'toEntity' in 'ArticleForm'을 클릭해서 메서드 추가.

toEntity() 메서드에 리턴 값으로 생성자 입력 양식에 맞게 작성.

public Article toEntity() {
	return new Article(null, title, content);
}

다음으로 레파지토리로 엔티티를 DB에 저장하기.

컨트롤러 필드 선언부에 ArticleRepository 타입의 articleRepository 객체를 선언.

articleRepository.save()가 있다고 가정하고 아래 코드 작성해서 article 엔티티를 저장해 saved 객체에 반환.

Article saved = articleRepository.save(article);

ArticleRepository 패키지와 파일 생성하고 코드 작성 후 결과 확인

---

DB 데이터 조회하기

h2 DB에 접속하기 위해 필요한 설정 먼저 해주기.

application.properties라는 파일에 'spring.h2.console.enabled=true' 코드 추가 후 서버 재실행하기.

'http://localhost:8080/h2-console'로 접속해서 아래 화면 나오면 성공.

인텔리제이 RUN 텝에서 jdbc 주소 찾아서 입력한 이후 h2 접속 연결 완성시키기.

그다음은 제목과 내용 입력 후 submit 하여 테스트 데이터 만든 후 select 문으로 확인.

insert into article(id, title, content) values(3, '3333', 'cccc') 쿼리로,
데이터 추가 후 확인해도 결과가 잘 들어가는 것을 볼 수 있음.