[스프링 입문] 회원 관리 예제

공부 내용을 정리하고 앞으로의 학습에 이해를 돕기 위해 작성합니다.

회원 웹 기능 - 홈 화면 추가

컨트롤러와 html을 추가했다.

HomeController

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

@GetMapping을 이용해서 "/"를 연결시킨다. "/"는 도메인의 첫 번째 주소다.
이후 "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>

그리고 실행 후 localhost:8080에 접속하면 아래와 같은 화면이 뜬다.

1. 이전 시간에 welcome page로 index.html이라는 파일을 작성 했는데 home.html이 작동한 이유

웹 브라우저에서 요청이 오면 스프링 컨트롤러안에 관련 컨트롤러가 있는지 먼저 찾고 없으면 static 파일을 찾는다.
localhost:8080 요청이 오면 관련 Controller에서 매핑된 html이 있는지 찾는다.
매핑된 url이 있기 때문에 home.html이 호출되고 끝이 난다. 따라서 기존의 index.html은 무시된다.

회원 웹 기능 - 등록

회원 가입 버튼을 눌렀을 때 회원가입 form이 뜨고, 이름을 입력했을 때 등록이 되는 기능을 만들 것이다.

그러기 위해 2가지 파일을 만들고(MemberForm, createMemberForm.html)

기존 컨트롤러에(MemberController) 코드를 추가할 것이다.

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

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

        memberService.join(member);

        return "redirect:/";
    }
}

기존에 작성했던 home.html의 회원가입 url이 /members/new 이기 때문에 @GetMapping에 "/members/new"를 매핑한다.
그리고 리턴으로 createMemberForm을 호출한다.
url에 직접 주소를 치는 것을 GET 방식이라고 한다. (조회)
데이터를 폼 같은 곳에 넣어서 전달할 때 POST 방식을 사용한다.
createMemberForm.html에서 post방식으로 값이 넘어오면 @PostMapping("/members/new")에 매핑된다.
MemberForm의 name을 Member 객체에 저장하고 join으로 등록한다.
등록이 되면 "redirect:/"를 통해 localhost:8080화면으로 돌아간다.

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>

화면에서 이름 입력 후 등록 버튼을 누르면 "/members/new"에 "post" 방식으로 넘어간다.
위에 작성한 MemberController @PostMapping 에 매핑된다.

localhost:8080에 접속 후 회원가입을 누르면 /members/new 화면으로 이동한다.

회원 등록하는 틀은 완성이 됐다. 이제 컨트롤러를 작성해보자

package hello.hello_spring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

MemberForm의 String name이 createMemberForm.html의 name ="name"에 매칭이 된다.

회원 웹 기능 - 조회

회원 목록을 눌렀을 때 등록했던 회원들의 목록이 보이는 기능을 만들 것이다.

home.html에서 회원 목록을 누르면 "/members"로 이동하도록 작성했다.

따라서 컨트롤러에 이렇게 코드를 추가한다.

MemberController

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

@GetMapping("/members")로 매핑해 주고 memberService.findMembers()를 통해 받은 값을 List에 담는다.
model.addAttribute함수를 이용하여 "members" 키에 매핑되는 값을 members 리스트 객체에 담는다.
return으로 memberList를 반환해 준다. -> templates/members 패키지의 memberList.html을 찾는다.

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>

members 리스트를 순회하면서 각 'member' 객체의 id와 name을 출력한다.
th:each는 Thymeleaf의 반복문을 위한 속성으로 ${members} 리스트의 각 요소를 member 변수로 참조하여 테이블 행 'tr'을 생성한다.
${members}는 컨트롤러에서 뷰로 전달된 데이터를 참조한다.
이를 통해 서버에서 전달된 데이터를 동적으로 HTML에 삽입할 수 있다.

저장된 회원의 목록을 볼 수 있다. 하지만 지금은 메모리에 데이터가 있기 때문에 서버를 껐다가 다시 실행하면 데이터가 초기화되기 때문에 파일이나 DB에 저장을 해야 한다. 다음 시간에 DB에 저장하는 과정을 진행해 볼 것이다.

'BackEnd > Spring' 카테고리의 다른 글

[스프링 입문] AOP (0)	2024.07.03
[스프링 입문] 스프링 DB 접근 기술 (0)	2024.07.02
[스프링 입문] 회원 관리 예제 - 스프링 빈과 의존관계 (0)	2024.07.01
[스프링 입문] 회원 관리 예제 - 백엔드 개발 (0)	2024.06.30
[스프링 입문] 스프링 웹 개발 기초 (0)	2024.06.28