[스프링 입문] #5. 회원 관리 예제 - 웹 MVC 개발 #30

YuDeokRin · 2024-03-06T15:19:07Z

YuDeokRin
Mar 6, 2024
Maintainer

5. 회원 관리 예제 - 웹 MVC 개발

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

순서
1. localhost:8080 → 스프링 컨테이너에서 URL 관련 맵핑을 찾는다. → 메소드 실행 끝
```
@Controller
public class HomeController {

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

}
```
2. localhost:8080 → 스프링 컨테이너에서 URL 관련 맵핑을 찾는다. 없다 → 정적 메소드를 찾아서 실행

2️⃣회원 웹 기능 - 등록

➡️등록할 때 동작 과정

회원가입 버튼 클릭
이름 입력
등록 버튼 클릭
“/”으로 redirect된다.

➡️등록할 때 코드 동작 과정

회원가입 버튼 클릭

viewResolver에서 templates에서 “members/createMemberForm”을 찾아서 반환해준다.

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

Thymeleaf 템플릿 엔진이 랜더링 해주고 화면을 뿌려준다.

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

input에서 name = “name”은 서버로 넘어올 때 키가 된다. input에 값을 넣어준 후 등록 버튼을 누르면
action="/members/new" 로 post방식으로 넘어간다.

Controller에서 action의 URL이 같은 걸로 호출이 된다.

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

		memberService.join(member);

		return "redirect:/";
}

MemberForm에 name에 값을 넣어준다. 주고 로직을 타고 redirect때문에 “/”로 넘어간다.

3️⃣회원 웹 기능 - 조회

회원 목록 클릭

호출되는 URL controller 에서 찾기

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

th:each 타임리프 문법 → 루프를 돎

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

브라우저에서 랜더링된 코드

<!DOCTYPE HTML>
<html>
<body>
<div class="container">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
            </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

6om1n · 2024-03-06T23:10:21Z

6om1n
Mar 6, 2024
Maintainer

최고 ! 마지막까지 더 파이팅합시다 ~!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[스프링 입문] #5. 회원 관리 예제 - 웹 MVC 개발 #30

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[스프링 입문] #5. 회원 관리 예제 - 웹 MVC 개발 #30

Uh oh!

YuDeokRin Mar 6, 2024 Maintainer

5. 회원 관리 예제 - 웹 MVC 개발

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

2️⃣회원 웹 기능 - 등록

➡️등록할 때 동작 과정

➡️등록할 때 코드 동작 과정

3️⃣회원 웹 기능 - 조회

Replies: 1 comment

Uh oh!

6om1n Mar 6, 2024 Maintainer

YuDeokRin
Mar 6, 2024
Maintainer

6om1n
Mar 6, 2024
Maintainer