[2025 1학기 스프링부트 스터디] 고윤정 #5주차

 

섹션 6 - 회원 관리 예제 - 웹 MVC 개발

 

5주차 스터디 시작합니다 ~ ~



 

회원 웹 기능 - 홈 화면 추가

 

먼저 홈 컨트롤러를 추가해줍니다

여기서 @GetMapping("/")은
Spring Boot에서 클라이언트의 HTTP GET 요청 중에서 루트 경로(/)로 들어온 요청을 처리하는 메서드에 붙이는 애노테이션입니다

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

 

그래서 이 코드는
사용자가 브라우저에서 localhost:8080으로 접속하면
→ home() 메서드가 실행되고,
return "home"이면
→ resources/templates/home.html이라는 뷰 파일(HTML 템플릿)을 찾아 렌더링합니당



그래서 home.html 파일도 만들어줬습니ㄷㅏ

 

이때!

지난번 강의에서
먼저 요청이 오면 스프링 컨테이너 안에 관련 컨트롤러가 있는지 먼저 찾고, 없으면 static 파일을 찾도록 되어있다고 배웠던 것처럼

지금은 @getMapping 을 만들어줬기 때문에 이전에 만들어둔 index.html 이라는 정적 파일보다 먼저 매핑이 있는 메서드가 실행되는 모습을 확인할 수 있슴니다
 ദ്ദി˶ ̇ ̵ ̇˶ )

회원 웹 기능 - 등록

 

templates 아래에 members 디렉토리를 만들고
createMemberForm이라는 html 파일을 만들어줍니다

 

 

이전에 만들어둔 MemberController 클래스에다가

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

 

 이 코드를 작성하고 실행해보면
members/new로 들어오면서 등록창이 생깁니다

 

이렇게 MemberForm 클래스를 만들어주면
여기에 있는 name이
아까 createMemberForm.html에 있는 name과 매칭이 되면서
값으로 들어오게 됩니다!!

이제 또 MemberController 클래스에

 

@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";

 

이 코드를 추가해주면
(아직 회원목록을 안 만들어서 에러가 나지만)
이름을 등록할 수 있습니당







여기서 @PostMapping은
Spring MVC에서 HTTP POST 요청을 처리하는 컨트롤러 메서드에 붙이는 애노테이션으로,
주로 form 데이터를 서버로 전송할 때 사용합니다

사용자가 <form>을 작성하고 제출하면
-> 브라우저가 POST /members/new 요청 전송
-> @PostMapping("/members/new")가 붙은 컨트롤러 메서드 실행
-> 파라미터가 MemberForm 같은 객체로 바인딩
-> 내부 로직 처리 후, 결과 페이지로 리다이렉트 또는 뷰 렌더링
이런 흐름으로 동작한다고 합니다!

 

지피티가 정리해준 @GetMapping 과 @PostMapping 비교표 첨부합니다!!!

 

회원 웹 기능 - 조회

이제 회원목록을 눌렀을때 조회가 되도록 해봅시당

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

 

이 코드를 추가하고

memberList.html 파일을 만들어준 뒤 실행해보면
회원목록에 추가해준 이름들이
정상적으로 뜬 걸 확인할 수 있습니다 ~~
(서버를 내렸다가 다시 키게되면 데이터가 다 지워짐)







여기서 짚고 넘어가야될 부분은
html에 작성해둔
⭐️th:each⭐️인데

th:each란?

Thymeleaf에서 리스트를 하나씩 꺼내서 HTML을 반복해서 만들어주는 기능 !!





즉,

 

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

 

이 코드는

members라는 여러 명의 회원 리스트가 있을 때
그 안에서 한 명씩 꺼내서 member라고 부르고
<tr>...</tr> 이렇게 한 줄씩 계속 만들어내는 것입니다!

• th:each="변수 : ${리스트}"
→ 리스트를 하나씩 꺼내 반복
• ${member.속성}
→ 꺼낸 객체의 정보를 출력






이렇게 회원 조회까지 다 알아보았습니다!

내용이 많이 어렵긴 했는데
지금까지 몇주에 걸쳐서 배운 내용들을
최종적으로 실행하면서 확인하는 섹션이어서
뭔가 하나를 마무리한 느낌이라 후련합니다 . . .

그리고
다음주부터 새로 시작할 내용이 조금 두렵네요 . . .

아무튼 이번주도 수고하셨습니다!!!!!!