반응형
#김영한 #스프링 #Spring #인프런 #인프런수업
본 포스팅은김영한선생님의스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술
강의를 기반으로 작성되었습니다.
홈화면 추가
- controller 패키지 내부에 HomeController 클래스 추가
@Controller
public class HomeController {
@GetMapping("/")
public String home(){
return "home";
}
}Controller를 명시하고 @GetMapping Annotaction을 명시해준다
@GetMapping(“/”) 경우 도메인주소를 의미함
localhost:8080/ 으로 접근 했을때 home.html로 이동한다
- resource패키지/templates패키지 안에 home.html 파일추가
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div>
<h1> hello Spring</h1>
<p> 회원 기능 </p>
<p> <a href="/members/new"> 회원 가입 </a>
<a href="/members"> 회원 목록 </a>
</p>
</div>
</div>
</body>
</html>이전 static에 만든 html은 무시하고 템플릿에있는 home.html로 이동하는 이유는 , 매핑된 컨트롤러가 없을 경우 정적컨텐츠로 이동하는 반면 지금처럼 매핑을 한 경우 컨테이너안에 bean이 등록되어있으므로 해당 home.html로 이동하는 것 이다
회원 가입 만들기
- localhost:8080/으로 진입 후 회원 가입을 클릭했을때 절차를 만든다
- controller패키지에 MemberController 클래스 내부 메서드 추가와 MemberForm 클래스 생성후 소스작성
MemberController 클래스 내부 메소드 추가
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
------------------------------------------------------
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}- templates패키지 내부에 members 패키지 생성
- createMemberForm.html 생성
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div>
<p> 회원 가입 </p>
</div>
<form action="/members/new" method="post">
<div class="form-group">
<label for="name"> 이름 </label>
<input type="text" id="name" name="name" placeholder="이름을 입력하라" />
</div>
<button type="submit"> 등록 </button>
</form>
</div>
</body>
</html>동작 설명
- home.html 파일
<a href="/members/new"> 회원 가입 </a>클릭 이벤트 발생 - home.html > MemberController로 이동
@GetMapping(“/members/new”) 매핑된 createForm메서드 실행
return되는 "members/createMemberForm"으로 이동 - createMemberForm.html에 있는 Form태그 로직 진행
submit버튼이 발생되면form action을 진행하는데
경로는 “/members/new” 이고 처리하는 메서드는post방식으로 데이터를 전달
전달되는 데이터 :<input type="text" id="name" name="name" placeholder="이름을 입력하라" />에 있는 name(변수명)이 key 이고 저장된 데이터가 value가 되어 전달된다 - 다시 MemberController로 이동되며 전달 방식이
post였으므로@PostMapping되어있는 create메서드 진행
MemberForm은 createMemberForm.html 입력된name변수를 매개변수로 전달받는다
Member 객체를 새로 생성하며 새로운 객체에 매개변수로 전달된MemberForm form데이터를 대입한다
그리고 memberService에 join메서드를 통해 회원가입을 진행한다
리턴값인redirect:/를 통해 첫 화면으로 이동한다
✋ 잠깐 redirect:/ 는 무엇인가요 ✋
Spring MVC에서 사용하는 특별한 문법으로
컨트롤러 메소드가 뷰 이름을 반환할 때 사용한다
이 문법은 클라이언트에게 HTTP 상태 코드 302를 전송하며
지정된 경로(URL)로 즉시 리디렉션 하라는 지시를 내린다
사용하는 이유는 PRG패턴(Post/Redirect/Get)을 구현하기 위함이고
이 패턴은 웹 양식을 제출 한 뒤 새로고침을 했을때와 같은
데이터 중복에서 전송되는것을 방지하는데 유용하다
데이터를 POST로 서버에 보낸 뒤 리디렉션을 통해 GET요청으로
페이지를 보여주게 함으로써 사용자가 새로고침을 해도 동일한
POST 요청이 반복되지 않도록 하는 것 이다
반응형
'🌱 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 > ⠀⠀⠀⠀ SᴛʀɪɴɢBᴏᴏᴛ' 카테고리의 다른 글
| Spring Boot - 스프링 통합 테스트 (0) | 2023.12.27 |
|---|---|
| Spring Boot - 웹 MVC개발 :: 회원 웹 기능 조회와 DB접근 (0) | 2023.12.27 |
| Spring Boot - 스프링 빈과 의존관계 (1) | 2023.12.27 |
| Spring Boot - 회원관리예제만들기 (0) | 2023.12.27 |
| Spring Boot - Spring의 API (0) | 2023.12.27 |
