게시판 만들고 새 글 작성하기 : Create

1. 폼 데이터와 <form> 태그

폼 데이터는 <form> 태그에 실려 전송하는 데이터를 말한다. <form> 태그에는 전송할 데이터를 어디에 어떻게 보낼지도 설정하는데, 어디에 보낼지는 action 속성으로, 어떻게 보낼지는 method 속성으로 설정한다.

 

2. DTO

폼 데이터에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아 받는데, 이 객체를 DTO(Data Transfer Object)라고 한다. DTO로 받은 데이터는 최종적으로 데이터베이스(DB, DataBase)에 저장된다.

 

3. 폼 데이터를 DTO로 받는 과정

[클라이언트]

① 뷰 페이지 만들기

[서버]

② 컨트롤러 만들기

③ DTO 만들기

④ 폼 데이터를 전송 받아 DTO 객체에 담기

 

4. 데이터베이스

데이터를 관리하는 창소로 줄여서 DB라고 한다. DB의 모든 데이터는 행과 열로 구성된 테이블에 저장되고 관리된다.

 

5. JPA

자바 언어로 DB에 명령을 내리게 하는 도구로, 데이터를 객체 지향적으로 관리하도록 도와준다. JPA의 핵심 도구로는 엔티티(Entity)와, 레파지토리(Repository)가 있다.

• 엔티티(Entity) : 자바 객체를 DB가 이해할 수 있게 만든 것으로, 이를 기반으로 테이블이 만들어진다.
• 레파지토리(Repository) : 엔티티가 DB 속 테이블에 저장 및 관리될 수 있게 하는 인터페이스이다.

6. DTO를 DB에 저장하는 과정

DTO를 엔티티로 변환 후 레파지토리를 이용해 엔티티를 DB에 저장한다.

 

7. 의존성 주입

외부에서 만들어진 객체를 필요한 곳으로 가져오는 기법을 의존성 주입(DI, Dependency Injection)이라고 한다. 스프링 부트는 @Autowired 어노테이션으로 의존성 주입을 할 수 있다.

 

8. SQL

SQL(Structured Query Language)은 테이터를 관리하기 위해 고안된 DB용 언어이다. DB에 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)하는 CRUD 조작을 수행한다.

 

9. SELETE 문

테이블에 저장된 데이터를 조회할 때 사용하는 SQL 명령어이다. 형식은 다음과 같다.

형식
SELETE 속성명 FROM 테이블명;

 

10. INSERT 문

테이블에 데이터를 생성(삽입)할 때 사용하는 SQL 명령이다. 형식은 다음과 같다.

형식
INSERT INTO 테이블명(속성명1, 속성명2, 속성명3, ...) VALUES (값1, 값2, 값3,...);

 

 

new.mustache

{{>header}}

<form class="container" action="/create" method="post">
    <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" row="3" name="content"></textarea>
    </div>
    <button type="submit">Submit</button>
</form>

{{>footer}}

 

 

ArticleController

package com.example.firstproject.controller;

import com.example.firstproject.dto.ArticleForm;
import com.example.firstproject.entity.Article;
import com.example.firstproject.repository.ArticleRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {

    @Autowired
    private ArticleRepository articleRepository;

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

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

        // 1. DTO를 엔티티로 변환
        Article article = form.toEntity();
        System.out.println(article.toString());

        // 2. 레파지토리로 엔티티를 DB에 저장
        Article saved = articleRepository.save(article);
        System.out.println(saved.toString());
        return "";
    }
}

 

 

Article

package com.example.firstproject.entity;

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

@AllArgsConstructor
@NoArgsConstructor
@ToString
@Builder
@Data
@Entity
public class Article {

    @Id // 엔티티의 대푯값 지정
    @GeneratedValue // 자동 생성 기능 추가(숫자가 자동으로 매겨짐)
    private Long id;

    @Column // title 필드 선언, DB 테이블의 title 열과 연결됨
    private String title;

    @Column // content 필드 선언, DB 테이블의 content 열과 연결됨
    private String content;

}

 

 

ArticleForm

package com.example.firstproject.dto;

import com.example.firstproject.entity.Article;
import lombok.*;

@Builder
@NoArgsConstructor
@AllArgsConstructor
@Data
@ToString
public class ArticleForm {

    private String title;
    private String content;

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

 

 

 

ArticleRepository

package com.example.firstproject.repository;

import com.example.firstproject.entity.Article;
import org.springframework.data.repository.CrudRepository;

public interface ArticleRepository extends CrudRepository<Article, Long> {


}

 

 

결과