# 등록 페이지 만들기 ## 미션 --- 등록 폼 만들기 미션! "localhost:8080/articles/new"로 접속 시, 아래와 같은 페이지가 나오게 하시오.  ## 개념 --- #### ⭐ form 태그 서버로 데이터를 전송할 때 사용하는 태그. 바로 form 태그다.  폼 태그는 두 핵심 속성을 통해 서버로 데이터를 전송한다. 이들은 어디로 보낼지, 어떻게 보낼지에 대한 정보를 가진다. ``` <form action="보내질-주소-URL" method="보낼-방법"> ... </form> ``` ## 튜토리얼 --- #### ⭐ 뷰 페이지 1) 등록 페이지 생성: "articles/new.mustache" ``` {{>layouts/header}} <div class="jumbotron"> <h1>Article 등록</h1> <hr> <p>articles/new.mustache</p> </div> <form class="container"> <div class="form-group"> <label for="title">제목</label> <input type="text" class="form-control" id="article-title" placeholder="제목을 입력하세요"> </div> <div class="form-group"> <label for="content">내용</label> <textarea class="form-control" id="article-content" placeholder="내용을 입력하세요" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">제출</button> </form> {{>layouts/footer}} ``` #### ⭐ 컨트롤러 2) url 요청과 뷰 페이지를 연결: "controller/ArticleController#newArticle" ``` ... @Controller public class ArticleController { ... @GetMapping("/articles/new") // GET 요청이 해당 url로 오면, 아래 메소드를 수행! public String newArticle() { return "articles/new"; // 보여줄 뷰 페이지 } } ``` #### ⭐ 확인하기 3) 브라우저 접속: "localhost:8080/articles/new"  ## 훈련하기 --- - 상단 네비게이션바 "Article" 클릭 시, Article 목록 페이지가 나오게 하시오. - Article 목록 페이지에 버튼을 추가하고, 클릭 시 Article 등록 페이지가 나오게 하시오.  - 작성한 프로젝트 코드를 저장(commit) 하고, 깃허브에 업로드(push) 하시오. ## 면접 준비 --- - 폼 태그란 무엇? 또 주요 속성은?