본문 바로가기
백엔드/스프링

회원 관리 예제 - 웹 MVC 개발

by dustnn 2025. 5. 18.

MemberController를 통해 회원 등록하고 조회하는 방법을 알아볼 것이다.

 

1. 회원 웹 기능 - 홈 화면 추가

2. 회원 웹 기능 - 등록

3. 회원 웹 기능 - 조회

 

1. 홈 화면 추가

 

Controller 밑에 <HomeController>

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

 @Controller
 public class HomeController {
     @GetMapping("/") //홈 화면이 되는 것임.
     public String home() {
         return "home"; // home.html이 호출됨
     }
}

 

-> localhost 8080으로 들어오면 우선 @GetMapping 이 호출됨

-> "home.html이 호출됨

 

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> <!-- /container -->

</body>
</html>

 

<결과>

회원 가입 누르면 왼쪽, 회원 목록 누르면 오른쪽

 

 

* 우선순위: 컨트롤러 > 정적 파일

 

요청이 들어오면 먼저 스프링 컨테이너에 관련 컨트롤러가 있는지 찾고, 없으면 static 파일을 찾음

 

ex. 

8080 요청이 들어오면 

먼저 스프링 컨테이너에 home화면 관련 컨트롤러가 있는지 찾음

-> HomeController가 존재하므로 호출

(없는 경우에 디폴트로 호출되도록 해놓았던 index.html 무시)

 

 

2. 등록

 

1. <MemberController> - 회원 등록 폼 컨트롤러

2. <createMemberForm.html> - 회원 등록 폼 HTML

3. <MemberForm> - 회원 등록 컨트롤러

Controller 밑에 <MemberController>

 

회원 등록 폼 컨트롤러

@Controller
 public class MemberController {
     private final MemberService memberService;
     
     @Autowired
     public MemberController(MemberService memberService) {
         this.memberService = memberService;
     }
     
     @GetMapping(value = "/members/new") //home.html에 회원 등록
     public String createForm() {
         return "members/createMemberForm"; //createMemberForm 이라는 html을 만들 것임
     }
}

 

<createMemberForm.html>

 

회원 등록 폼 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>

<MemberForm>

 

회원 등록 컨트롤러

package hello.hellospring.controller;

public class MemberForm {
     private String name; //createMemberForm.html 안의 "name" 변수와 매칭되어 값이 들어옴
     
     public String getName() {
         return name;
     }

     public void setName(String name) {
         this.name = name;
     } 
}

 

<MemberController>: PostMapping 추가

 

@PostMapping

: MemberForm의 "name"과 createMemberForm.html의 "name" Mapping 후의 작업 의미

-> 회원 등록하고 홈화면으로 리다이렉션해줌

@Controller
 public class MemberController {
     private final MemberService memberService;
     
     @Autowired
     public MemberController(MemberService memberService) {
         this.memberService = memberService;
     }
     
     @GetMapping(value = "/members/new") //home.html에 회원 등록
     public String createForm() {
         return "members/createMemberForm"; //createMemberForm 이라는 html을 만들 것임
     }
     
     @PostMapping("/members/new")
     public String create(MemberForm form) {
     	Member member = new Member();
        member.setName(form.getName());
        
        memberService.join(member);
        
        return "redirect:/"; //홈화면으로 돌려보냄
     }
}

 

이름 입력하고 등록 버튼 누르면 다시 홈화면으로 리디렉션됨

 

정리

 

1. 회원 가입 버튼 누르면

 

2. @GetMapping -> members/new 로 들어감

MemberService의 @GetMapping이 실행되어 members/new 로 들어감

 

-> return "members/createMemberForm" 이므로 createMemberForm 호출됨

 

3. createMemberForm.html 실행됨

즉, 다음 화면이 뿌려지는 것이다.

 

4. 이름을 입력하고 등록 버튼 누르기

-> Post 로 넘어와 MemberController의 @PostMapping

* @GetMapping: 보통 데이터 조회할 때 사용

* @PostMapping: 보통 데이터 등록할 때 사용

createMemberForm.html

 

@PostMapping(value = "/members/new")
public String create(MemberForm form) {

     Member member = new Member();
     member.setName(form.getName());
     
     System.out.println("member = " + member.getName());
     
     memberService.join(member);
     
     return "redirect:/";
}

등록한 이름이 출력되는 걸 확인할 수 있다.

 

3. 조회

 

이번에는 다음과 같이 "회원 목록" 버튼에 해당하는 회원 조회 기능을 구현해볼 것이다.

 

<MemberController>: 조회를 위한 @GetMapping 추가

@Controller
 public class MemberController {
     private final MemberService memberService;
     
     @Autowired
     public MemberController(MemberService memberService) {
         this.memberService = memberService;
     }
     
     @GetMapping(value = "/members/new") //home.html에 회원 등록
     public String createForm() {
         return "members/createMemberForm"; //createMemberForm 이라는 html을 만들 것임
     }
     
     @PostMapping("/members/new")
     public String create(MemberForm form) {
     	Member member = new Member();
        member.setName(form.getName());
        
        memberService.join(member);
        
        return "redirect:/"; //홈화면으로 돌려보냄
     }
     
     @GetMapping(value = "/members")
     public String list(Model model) {
     	List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
     }
}

 

-> memberList.html 만들기

 

<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>

 

spring1, spring2 라는 회원 등록
회원 목록

 

 

서버를 내렸다가 다시 켜면 회원 목록이 다 초기화된다. -> 데이터베이스에 저장해야 함

'백엔드 > 스프링' 카테고리의 다른 글

코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문 3~5장  (1) 2025.06.01
스프링 DB 접근 기술  (0) 2025.05.18
스프링 빈과 의존관계  (1) 2025.05.18
비즈니스 예제  (0) 2025.05.12
[Inflearn] 좋은 객체지향 설계의 5가지 원칙 적용  (0) 2025.02.24

관련글

티스토리툴바