[springboot] 스프링 입문 - 5. 회원 관리 View

타입

스터디

태그

springboot

상태

Published

생성일

2022/07/22 09:45

최종 편집 일시

2023/02/27 03:14

상위 항목

1 more property

인프런 김영한님 스프링 입문 강의를 듣고 정리한 내용입니다

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

초급자를 위해 준비한 [웹 개발, 백엔드] 강의입니다. 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다. 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세요! 본 강의는 자바 스프링 완전 정복 시리즈의 첫 번째 강의입니다.

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8#

홈 화면

회원 등록 화면

회원 조회

홈 화면

HomeController 를 생성해준다.

controller/HomeController.java

@Controller
public class HomeController {

	@GetMapping("/")
	public String home(){
		return "home";
	}
}
Java
복사

/ 으로 GET 요청이 들어올 시 templates/home.html 을 리턴한다.

컨트롤러가 정적파일보다 우선순위가 높으므로 정적파일을 무시하고 템플릿 엔진이 처리해준다.

이제 그에 해당하는 View 를 만든다.

templates/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>
</body>
</html>
HTML
복사

결과

회원 등록 화면

form html 

회원을 등록하는 form 에 관한 view 템플릿 파일을 생성한다.

resources/templates/members/createMemberForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <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> <!-- /container -->
</body>
</html>
HTML
복사

MemberForm 데이터에 관한 클래스 생성

controller/MemberForm.java

public class MemberForm {
	private String name; // 맘대로 지어도 됨

	// getter 메서드명은 getName 으로 해야함
	public String getName() {
		return name;
	}

	// setter 메서드명 setName 으로 해야함
	public void setName(String name) {
		this.name = name; // createMemberForm.html 에 있는 id = "name" 인 input 에서 값 넘어옴
	}
}
Java
복사

멤버변수 이름은 마음대로 지어도 상관없지만, getter/setter 메서드 이름은 HTML 단에서 넘어오는 파라미터 이름에 맞게끔 지어줘야 한다.

name 속성의 값이 username 이라면 ⇒ getUsername(), setUsername()

참고

MemberController

MemberController 에서 /members/new GET 요청과 createMemberForm.html 을 매핑해준다.

controller/MemberController.java

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

form 에서 POST 로 넘어오는 form 내용을 받아서 DB에 저장한다.

@PostMapping("/members/new")
	public String create(MemberForm form){
		Member member = new Member();

		// form 에 getName() 으로 꺼내서 member에 Name set
		member.setName(form.getName()); 
		
		memberService.join(member);

		return "redirect:/";
	}
Java
복사

html 의 form 을 통해 POST 요청 시, http 메시지 바디에 있는 form 데이터를 스프링 컨트롤러가 알아서 해석하여 자동으로 form 객체에 넣어준다.

HTML 에서 넘어오는 name 속성의 값과 getter, setter 메서드명과 매핑 시키는 방식으로 데이터를 바인딩해준다.

•

예시

◦

HTML name 속성 : username

◦

getter 메서드명 : getUsername()

◦

setter 메서드명 : setUsername()

이여야 한다!

회원 조회

템플릿 뷰

templates/members/memberList.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>이름</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="member : ${members}">
                    <td th:text="${member.id}"></td>
                    <td th:text="${member.name}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>
HTML
복사

컨트롤러

MemberController 에서 /members GET 요청이 들어올 때의 로직 작성

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

		// 템플릿엔진의 "members" 속성에 members 담아서 뿌려줌
		model.addAttribute("members",members);
		return "members/memberList";
	}
Java
복사

memberService 의 findMembers() 메서드로 전체 회원을 불러오고 템플릿 엔진에 뿌려준다.

결과