📚 [Spring] #5. 회원 관리 예제 - 웹 MVC 개발

이가은·2024년 4월 11일

목록 보기

5/13

📕 회원 웹 기능 - 홈 화면 추가

📖 홈 컨트롤러 추가

@Controller
public class HomeController {
    @GetMapping("/") //처음 도메인 경로(localhost:8080/)
    public String home() {
        return "home"; //templates 내의 home.html 찾아 반환
    }
}

✔ @GetMapping("/")의 "/"는 처음 도메인 경로("/")를 의미한다. 그래서 localhost:8080로 들어가면 home.html에 해당하는 화면이 뜬다.

📖 회원 관리용 홈

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p></div>
</div> <!-- /container -->
</body>
</html>

🎈 실행 화면

✔ static의 index.html 화면이 아닌 home.html이 띄워지는 이유는 Controller가 정적 파일보다 우선순위가 높기 때문이다!

📙 회원 웹 기능 - 등록

📖 MemberController

@GetMapping("members/new")
public String createForm() {
	return "members/createMemberForm";
}

@PostMapping("/members/new")
public String create(MemberForm form) {
	Member member = new Member(); //새로운 member 생성
	member.setName(form.getName()); //form으로부터 getName

	memberService.join(member); //생성한 member를 회원가입

	return "redirect:/"; //회원가입이 끝나면 홈으로 리다이렉트
}

✔ http://localhost:8080/members/new에 접속했을 때 사용되는건 GET 방식이며, MemberController 내에서 ("/members/new")에 매핑되는 createForm 메서드가 호출된다.
✔ viewResolver에 의해 createForm이 선택되고 thymeleaf 템플릿 엔진이 return 코드에서 반환되는 html을 렌더링하여 화면에 보여준다.
✔ 화면에서 이름을 입력하고 등록 버튼을 누르면 POST 방식으로 입력한 name이 넘어가게 된다.
✔ MemberController 내에서 ("/members/new")에 @PostMapping 되어 있는 create 메서드가 호출된다. 가져온 name을 memberService의 join 메서드를 통해 회원가입시키고 페이지를 다시 홈으로 리다이렉트 시킨다.
✔ 주로 데이터를 조회할 때는 GET 메서드를, 데이터를 전달(등록)할 때는 POST 메서드를 사용한다.

🎈 실행 화면

✔ 주어진 input에 이름을 작성하고 등록 버튼을 누르면 다시 메인 페이지로 리다이렉트된다

📒 회원 웹 기능 - 조회

@GetMapping("/members")
public String list(Model model) {
	List<Member> members = memberService.findMembers();
	model.addAttribute("members", members);
	return "members/memberList";
}

<tr th:each="member : ${members}">
	<td th:text="${member.id}"></td>
	<td th:text="${member.name}"></td>
</tr>