# 폼(form) 데이터 주고 받기 ## 미션 --- 데이터 전송 미션! 폼 태그를 제출(submit)하고,  그 값을 확인하시오.  ## 개념 --- #### ⭐️ HTTP 프로토콜 리뷰 - GET: 데이터 조회 요청 - POST: 데이터 생성 요청 - PUT/PATCH: 데이터 수정 요청 - DELETE: 데이터 삭제 요청  #### ⭐️ form 태그 주 속성 데이터 전송을 위한 form 태그. 주요 속성은 "method"와 "action"이다. ``` <!-- method: HTTP의 요청 방식을 결정. get/post 가능 --> <!-- action: 데이터가 전송 될 도착지 URL --> <form method="post", action="/articles"> ... </form> ``` #### ⭐ DTO 폼 데이터를 서버에서 사용하려면, 객체로 만들어야 한다. 이를 위해 DTO(Data Transfer Object)가 필요하다.  #### ⭐ 데이터 로그 남기기 서버는 24시간 돌아간다. 문제는 언제, 어떤 문제가 발생할 지 모른다는 것. 이러한 이유로 데이터 로깅(logging)은 필수다. 이는 자동차의 블랙박스와 같다. 문제 발생까지의 상황을 데이터로 기록하는 것이다. 이를 분석하여 문제 발생 원인과, 그 해결책을 마련할 수 있다.  ## 튜토리얼 --- #### ⭐ 사용 파일  #### ⭐ 뷰 페이지 1) form 태그 정보 추가: articles/new.mustache ``` {{>layouts/header}} <div class="jumbotron"> <h1>Article 등록</h1> <hr> <p>articles/new.mustache</p> </div> <!-- Form 태그, 아래 두 속성을 추가! method: HTTP 방식을 설정(GET/POST/...) action: 데이터를 보낼 url 주소지 --> <form class="container" method="post" action="/articles"> <div class="form-group"> <label for="title">제목</label> <!-- name="title" 추가, DTO의 필드명과 일치해야 함! --> <input name="title" type="text" class="form-control" id="article-title" placeholder="제목을 입력하세요"> </div> <div class="form-group"> <label for="content">내용</label> <!-- name="content" 추가, DTO의 필드명과 일치해야 함! --> <textarea name="content" class="form-control" id="article-content" placeholder="내용을 입력하세요" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">제출</button> </form> {{>layouts/footer}} ``` #### ⭐ 컨트롤러 2) 폼 태그 처리 메소드 추가: controller/ArticleController ``` @Slf4j // 로깅(logging) 기능 추가! Lombok 플러그인 설치 필요! @Controller public class ArticleController { ... @PostMapping("/articles") // Post 방식으로 "/articles" 요청이 들어오면, 아래 메소드 수행! public String create(ArticleForm form) { // 폼 태그의 데이터가 ArticleForm 객체로 만들어 짐! log.info(form.toString()); // ArticleForm 객체 정보를 확인! return "redirect:/articles"; // 브라우저를 "/articles" url로 보냄! } } ``` #### ⭐ DTO 3) 데이터 전송 객체 만들기: "dto/ArticleForm" ``` package com.example.myblog.dto; public class ArticleForm { private String title; private String content; public ArticleForm(String title, String content) { this.title = title; this.content = content; } public String getTitle() { return title; } public String getContent() { return content; } public void setTitle(String title) { this.title = title; } public void setContent(String content) { this.content = content; } @Override public String toString() { return "ArticleForm{" + "title='" + title + '\'' + ", content='" + content + '\'' + '}'; } } ``` #### ⭐ Lombok 플러그인 설치 4) Ctrl + Shift + A > plugins  #### ⭐ 결과 확인 5) 폼 데이터 전송  6) 서버 로그 확인  7) 혹시 한글이 깨진다면? 인텔리제이 VM, 프로젝트 파일 인코딩, 톰캣의 인코딩을 "utf-8"로 적용하자. ## 훈련하기 --- - Article 폼에 작성자(author)를 추가하고, 이를 DTO로 전달 받아, 로그로 확인하시오. - 작성한 프로젝트 코드를 저장(commit) 하고, 깃허브에 업로드(push) 하시오. ## 면접 준비 --- - 폼 태그의 역할? - DTO는 무엇이고, 왜 필요할까? - 데이터 로깅은 왜 사용? - Lombok은 왜 쓸까?