1. 폼 데이터(form data), 2. DTO(Data Transfer Object)

• 폼 데이터(form data)

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

    • <form>태그는 웹 브라우저에서 서버로 데이터를 전송할 때 사용.
    • 전송할 때 어디로(where), 어떻게(how) 보낼지 등을 적어서 보냄.

  • <form> 태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아서 받음.

    • 이 객체를 DTO(Data Transfer Object)라 함.
    • DTO로 받은 데이터는 최종적으로 데이터베이스(DB, Database)에 저장됨.

    

---

1-1. 폼 데이터를 DTO로 받기.

@Controller     // 컨트롤러 선언.
public class ArticleController {
    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }
}

{{>layouts/header}}

<form class="container">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>


{{>layouts/footer}}

---

1-2. 폼 데이터 전송.

• <form>태그에 속성을 추가해줌.
  • action : 어디에 보낼지.
    • URL연결 주소를 적음.
    • action="/articles/create" method="post"
    • 8080/articles/create 페이지로 폼 데이터를 보낸다는 의미.
  • method : 어떻게 보낼지.
    • 속성값으로 get, post 2가지를 설정할 수 있음.

---

1-3. 폼 데이터 받기.

• action, method 속성 정보를 설정했으니 서버의 컨트롤러가 이 정보를 조합해서 사용자가 전송한 폼 데이터를 받도록.
  • 뷰 페이지에서 폼 데이터를 post 방식으로 전송했으니 컨트롤러가 받을 때도 @PostMapping()으로 받음.
  • 마찬가지로 action="/articles/create"로 설정했으니 @PostMapping("/articles/create")으로 맞춰줌.

---

1-4. DTO 생성.

• 폼 데이터를 받을 때 DTO에 담아서 받음.

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

    public ArticleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }
}

@PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        return "";
    }

• 폼에서 전송한 데이터를 메서드 매개변수로 받음.
  • ArticleForm 타입의 form 객체를 매개변수로.

---

1-5. 입력 폼과 DTO 필드 연결.

• DTO의 2개의 필드(title, content)에 값이 들어가려면 입력 폼에 필드명을 지정해줘야 함.
  • DTO의 필드명과 동일한 이름을 name의 속성 값으로 작성해 주면 입력 폼에서 작성한 데이터가 DTO의 해당 필드와 연결됨.

    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>

---

1-6. DTO를 DB에 저장.

1-6-1. JPA.

• JPA(Java Persistence API)
  • Java언어로 DB에 명령을 내리는 도구.
  • 데이터를 객체 지향적으로 관리할 수 있게 해줌.
    • 엔터티(Entity) : 자바 객체를 DB가 이해할 수 있게 만든 것. 이를 기반으로 테이블이 생성됨.
    • 리파지터리(Repository) : 엔터티가 DB 테이블에 저장 및 관리될 수 있게 하는 인터페이스

JPA의 역할

DTO를 DB에 저장하는 과정 (DTO -> Entity로 변환)출처

---

1-7. DTO를 Entity로 변환.

@Entity     // 해당 클래스가 엔터티임을 선언.
public class Article {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    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;
    }
}

• 엔터티(Entity) 클래스
  • @Entity : 해당 클래스가 엔터티임을 선언.
    • JPA에서 제공하는 어노테이션(Annotation)이고, 이 @Entity어노테이션이 붙은 클래스를 기반으로 DB에 클래스 이름과 동일한 테이블이 생성됨.
  • @Column : DB 테이블의 각 열(column)과 연결됨.
  • @Id : PK(Primary Key)로 선언.
  • @GeneratedValue : PK값을 자동으로 생성하게 함.
    (PK 생성 주체 : JPA 구현체와 데이터베이스가 협력)
    • @GeneratedValue(strategy = GenerationType.IDENTITY) : PK에 AUTO_INCREMENT 적용.
      (PK 생성 주체 : 데이터베이스가 직접 생성 (AUTO_INCREMENT))

public class ArticleForm {
		
        // 코드 생략.
        
    public Article toEntity() {
        return new Article(null, title, content);
    }
}

• toEntity()메서드.
  • 폼 데이터를 담은 DTO인 form 객체를 엔터티 객체로 변환시켜줌.
  • ArtlcleForm객체에 id정보는 없으므로 첫 번째 전달값은 null

public interface ArticleRepository extends CrudRepository<Article, Long> {
}

• Repository
  • CrudRepository<T, ID>
    • JPA에서 제공하는 인터페이스.
    • 이것을 상속받아서 엔터티를 관리(생성, 조회, 수정, 삭제)할 수 있음.
    • <>안에 2개의 제네릭 요소를 받음.
      • Article : 관리 대상 엔터티의 클래스 타입.
      • Long : 관리 대상 엔터티의 PK값 타입.

@Controller     // 컨트롤러 선언.
public class ArticleController {
    @Autowired
    private ArticleRepository articleRepository;

   // 코드 생략.
   
    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
		Article article = form.toEntity();                  // DTO -> Entity 변환
        
        Article saved = articleRepository.save(article);
        return "";
    }
}

• Article article = form.toEntity(); : DTO -> Entity로 변환.
• private ArticleRepository articleRepository; : 객체 선언.
  • @Autowired : 스프링 부트가 미리 생성해 놓은 repository 객체를 주입.
    • 의존성 주입(DI, Dependency Injection)이라고 함.
• Article saved = articleRepository.save(article); : article 엔터티를 저장하고, 저장된 Article 객체를 반환.

---

1-8. DB 데이터 조회. (H2 DB)

• application.propertis -> spring.h2.console.enabled=true작성.

  • H2 DB에 웹 콘솔로 접근할 수 있도록 허용.

• Run탭을 보면 H2 console available at '/h2-console'. Database available at 뒤로 JDBC:h2...가 있음.

  • JDBC H2 DB가 메모리에서 동작하고 있는 곳의 주소값.
    - 이 값을 localhost:8080/h2-console -> JDBC URL에 넣고 Connnect 누르면 됨.
    

• H2 DB는 모든 입출력을 메모리 모드에서 돌리기 때문에 서버를 재시작하면 DB에 저장된 내용이 전부 삭제됨.

  • 메모리 DB(휘발성 DB)이기 때문.