Taeyoung Kim
English

Engineering

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

5. 회원 관리 예제 - 웹 MVC 개발 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

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

🧩 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";
    }
}

→ 루트 URL(/) 요청 시 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>

참고:

스프링 부트에서는 컨트롤러가 정적 리소스보다 우선순위가 높다.

즉, / 요청 시 index.html보다 HomeController가 먼저 처리한다.

2️⃣ 회원 웹 기능 - 등록

🧭 회원 등록 폼 컨트롤러

@Controller
public class MemberController {

    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

→ /members/new 요청 시 회원 등록 화면을 반환.

📝 회원 등록 폼 HTML (resources/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>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>

🧱 폼 데이터 전달 객체 (DTO) — MemberForm.java

package hello.hellospring.controller;

public class MemberForm {
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

→ HTML의 name 필드 데이터를 자바 객체로 매핑하기 위한 폼 클래스.

⚙️ 회원 등록 처리 로직

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

→ 폼 데이터를 받아 Member 객체 생성 → MemberService를 통해 회원 저장 → 홈 화면으로 리다이렉트.

3️⃣ 회원 웹 기능 - 조회

🔍 회원 목록 조회 컨트롤러

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

→ 회원 목록 데이터를 Model에 담아 memberList.html에 전달.

📄 회원 리스트 HTML (resources/templates/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>

→ Thymeleaf의 th:each를 사용해 서버에서 전달받은 members 리스트를 반복 렌더링.

📘 참고

HTTP, HTML form 등 웹 MVC와 관련된 세부 개념은 별도의 스프링 웹 MVC 강의에서 다룰 예정.

📑 요약 구조

| 구분 | 내용 | | --- | --- | | 홈 화면 | HomeController 및 home.html 작성 | | 회원 등록 | MemberController, MemberForm, 등록 폼 HTML, POST 등록 처리 | | 회원 조회 | 회원 목록 조회 및 Thymeleaf 반복 렌더링 | | 기타 | MVC 구조의 핵심 흐름(Controller → Service → View) 실습 |