1. 회원 웹 기능 - 홈 화면 추가
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";
}
}
먼저 우리가 사이트에 접속했을 때 가장 먼저 보게 되는 Home 역할을 하는 HomeController을 만든다.
앞서 배웠던 스프링 빈 개념을 토대로 @Controller 어노테이션을 사용하여
스프링 빈으로 컨테이너에 등록한다.
HomeController 클래스를 선언한다.
@GetMapping을 통해 웹 브라우저에서 기본주소로 접속했을 때,
그 요청을 바로 아래에 있는 home()메서드로 매핑해주는 역할을 한다.
사용자가 인터넷 주소에 url을 치고 엔터를 누르는 행위는 HTTP 메서드 중 GET 방식에 해당되므로 @GetMapping을 사용한다.
home()메서드는 실제 실행될 메서드이다. 반환 타입이 string인 이유는 웹 브라우저에
보여줄 html 템플릿 파일의 이름을 스프링에게 알려주기 위해서이다.
즉, return "home"을 통해 스프링 내부의 viewResolver가 이 문자를 낚아채
templates폴더 안에서 home.html이라는 파일을 찾아 thymleaf 엔진을 통해
화면을 렌더링하고 사용자에게 최종 웹 페이지를 보여주게 된다.
웹 브라우저 요청 -> 내장 톰캣 서버 -> 스프링 컨테이너 -> viewResolver -> html반환
이라는 구조를 따르게 된다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<h1>Hello Spring</h1>
<p>회원 기능</p>
<p>
<a
<a
href="/members/new">회원 가입</a>
href="/members">회원 목록</a>
</p>
</div>
</div> <!-- /container -->
</body>
</html>
이건 앞서 화면에 띄우고자 했던 템플릿 html 파일 코드이다.
렌더링 결과, 홈 화면은 다음과 같이 나온다.
2. 회원 웹 기능 - 등록
import hello.hello_spring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm() {
return "members/createMembersForm";
}
@GetMapping을 통해 url창에 members/new로 끝나는 url이 입력되면 이 메서드로 연결된다.
createForm() 메서드는 templates 폴더 아래에 members 폴더 안에 있는 createMembersForm.html 파일을 찾아서 화면의 띄우라고 viewresolver에게 명령을 내리는 메서드이다.
<!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 코드다.
<form action=" ~을 통해 사용자가 회원 가입 버튼을 눌렀을 때
데이터를 보낼 목적지 주소를 members/new로 설정한다.
mehod="post"를 통해 데이터를 보낼 때
url에 노출하지 않고 http 본문에 숨겨서 보내는 POST 방식을 사용한다.
그리고 입력칸을 만드는데 id와 name을 name속성에 적힌 데이터 값을 기준으로 매핑한다.
package hello.hello_spring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
이제 화면을 띄우고 데이터를 송신했으니, 데이터를 수신하고 처리(POST)할 단계다.
MemberForm 클래스는 앞서 input으로 받은 name을 받고,
getName과 setName을 통해 데이터를 꺼내거나 넘어온 데이터를 주입한다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
이 코드는 앞서 만든 MemberForm을 건네받아, 데이터를 확인하고 실제 회원 가입 처리를 한다.
@PostMapping을 통해 앞서 method="post"로 전송한 데이터를 수신한다.
create 메서드를 선언하는데
아까 만든 MemberForm 폼에서 사용자가 입력한 이름을 담아서 form매개변수로 던져준다.
실제 DB에 저장할 진짜 도매인 객체를 새로 하나 new로 만들어주고,
사용자가 입력한 이름을 getName으로 꺼내, setName으로 새 member 객체에 담는다.
join 메서드를 통해 새 객체 member을 새로 등록한다.
마지막으로 처리가 다 끝났으니,
브라우저에게 redirect을 통해 다시 홈 화면으로 돌아가라고 명령한다.
회원 가입 창의 렌더링 결과이다.
전체 등록 과정을 요약하면 다음과 같다.
1. 이름 입력 칸에 입력 후 등록 버튼 클릭
2. html <form> 태그에 의해 POST /members/new 주소로 데이터 전송
3. @GetMapping "members/new"로 create()메서드 실행
4. MemberForm 객체 생성, name 값 담기
5. create(MemberForm form) 실행, member 도매인 객체에 옮겨담기
6. join() 호출, 레포지토리에 값 저장
7. redirect를 통해 홈 화면으로 다시 돌아감
3. 회원 웹 기능 - 조회
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
이 코드는 웹 브라우저 화면에 가입된 모든 회원의 목록을 띄워주는 역할을 한다.
저장된 데이터를 조회(GET)하는 역할을 한다.
list라는 메서드를 정의한다.
Model이라는 객체에 데이터를 담아 전달하게 된다.
findMembers 메서드를 호출하여 지금까지 가입한 모든 회원 리스트를 가져와 members 리스트에 담는다.
담은 members 리스트를 model에 옮겨 담는다.
addAttribute(이름표, 실제데이터) 구조로 members 이름표에 방금 받은 실제 회원 리스트 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>
아까 반환한 html 파일 코드이다. 이걸 실행하여 화면에 렌더링한다.
이 코드에서는 th(타임리프) 문법을 사용한다.
자바의 fore each 반복문과 똑같은 문법을 사용한다.
$(members)는 회원 리스트 전체이다. 즉, members 리스트 안에서 회원을 한 명씩 차례대로 꺼내서
임시로 member라는 변수에 담는다.
$(member.id)는 방금 꺼낸 회원(member)의 아이디 값이고,
$(member.name)은 회원의 이름이다.
즉, 아이디를 첫 칸에 이름을 두 번째 칸에 적는다.
이는 실행 결과이다. 아이디와 이름이 잘 적힌 것을 볼 수 있다.
'백엔드' 카테고리의 다른 글
| Spring 입문 #7 - mySQL (2) (0) | 2026.05.09 |
|---|---|
| Spring 입문 #6 - mySQL (1) (0) | 2026.05.09 |
| Spring 입문 #4 - 스프링 빈과 의존관계 (0) | 2026.05.04 |
| Spring 입문 #3 - 회원 관리 예제: 회원 서비스 (2) | 2026.05.02 |
| Spring 입문 #2 - 회원 관리 예제 : 도메인, 레포지토리 (0) | 2026.03.30 |