본 게시물은 김영한님의 “스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술” 강의를 바탕으로 작성했습니다.
회원 관리 예제 - 웹 MVC 개발
회원 웹 기능 - 홈 화면 추가
홈 컨트롤러 추가
홈 화면으로 연결해주는 컨트롤러를 만듭니다.
package hello.hello_spring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}
홈 화면 추가
return “home”;이 home.html을 호출하기 때문에 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>
웹 브라우저에서 http://localhost:8080/ 에 접속하면 이전까진 정적 페이지인 index.html이 떴는데 위와 같이 home.html이 뜹니다. 웹 브라우저에서 Get 요청이 있으면 내장 톰캣 서버에서 해당하는 컨트롤러를 찾고, 없으면 정적 페이지를 보여줍니다. 즉, 컨트롤러가 정적 페이지보다 우선순위가 높습니다. 그래서 지금까지는 “/”에 해당하는 컨트롤러가 없어서 index.html을 보여줬었고 지금은 해당하는 컨트롤러를 찾을 수 있으니 HomeController에서 return하는 home.html을 보여줍니다.
회원 웹 기능 - 등록
회원 컨트롤러 수정
회원 가입 기능을 만들기 위해 회원 컨트롤러에 코드를 추가합니다.
...
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}
홈 화면에서 회원 가입 링크를 누르면 /members/new으로 넘어갑니다. 요청이 들어오면 members/createMemberForm.html을 반환하는 코드입니다.
회원 가입 화면 추가
회원 관련 페이지를 모아두기 위해서 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>
</form>
<button type="submit">등록</button>
</div> <!-- /container -->
</body>
</html>
홈 화면에서 회원 가입을 누르면 위와 같은 화면이 뜹니다. form 태그에서 /members/new로 post 요청을 보내고 input 태그의 name에 입력한 값이 포함되어 전송됩니다. 전송된 내용을 받기 위한 회원 등록 컨트롤러가 필요합니다.
회원 등록 컨트롤러
input 태그를 통해 입력받은 데이터를 받을 폼 객체를 만듭니다.
package hello.hello_spring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
name에 입력한 값이 들어오므로 name 변수를 만들어주고 Getter와 Setter도 만들어줍니다.
회원 컨트롤러에서 실제로 값을 받아서 회원을 등록하는 기능을 만들어보겠습니다. MemberController 파일을 수정합니다.
...
@Controller
public class MemberController {
...
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}
form 태그에서 보낸 값을 받도록 Post 방식으로 Mapping합니다. 전달받은 데이터의 name 값을 Getter로 받아 회원 객체의 Setter로 설정합니다. 이전에 구현한 가입 기능으로 회원을 등록합니다. 회원 가입이 끝났으니 **redirect:/**로 홈 화면으로 보냅니다.
하지만 아직 회원 가입을 해도 아무 것도 달라진 것을 볼 수 없습니다. 등록한 회원을 조회하는 기능을 만들어보겠습니다.
회원 웹 기능 - 조회
회원 조회 화면 추가
등록한 회원을 조회하는 화면을 먼저 만들어보겠습니다. 요청이 들어오면 연결할 수 있도록 컨트롤러 먼저 만듭니다. 회원 컨트롤러에 코드를 추가합니다.
...
@Controller
public class MemberController {
...
@@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
}
memberService에서 findMembers 메소드로 모든 회원을 찾아 List형태로 저장하고 Model에 members라는 이름으로 넣어 전달합니다. 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>th:each 문법은 members라는 List의 각 요소를 member로 받습니다. 각각의 member에 대해 id와 name 값을 text로 보여줍니다. 이때 실제 변수는 private 값이므로 Getter를 통해 값을 불러옵니다.
스프링 부트를 재부팅하고 http://localhost:8080/members에 접속하면 아래와 같은 화면이 뜹니다.
회원 가입 페이지에서 이름을 작성하여 등록하고 다시 조회 화면에 접속하면 아래와 같은 화면이 뜹니다.
회원 가입한 정보들은 메모리에 저장되어 있기 때문에 스프링 부트 서버를 재부팅하면 데이터가 모두 사라집니다. 이를 해결하기 위해 다음엔 DB에 대해 알아보겠습니다.
'Development > Spring' 카테고리의 다른 글
| [Spring] 스프링 입문 - 강의 정리 7 (0) | 2026.02.08 |
|---|---|
| [Spring] 스프링 입문 - 강의 정리 6 (0) | 2026.02.08 |
| [Spring] 스프링 입문 - 강의 정리 4 (0) | 2026.02.08 |
| [Spring] 스프링 입문 - 강의 정리 3 (0) | 2026.02.08 |
| [Spring] 스프링 입문 - 강의 정리 2 (0) | 2026.02.08 |