스프링 입문 - 회원 관리 예제, 웹 MVC 개발

이 글은 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 커리큘럼에 맞춰서 작성된 글입니다😀

회원 웹 기능 - 홈 화면 추가

hello/hellospring/controller에 HomeContrller라는 클래스를 만들어주자.
http://localhost:8080/에 메인 화면이 바로 뜨도록 하기 위해 다음과 같이 코드를 작성한다.

예전에 쓴 글인 스프링 입문 - 스프링 웹 개발 기초에서 정적 컨텐츠 부분의 내용을 보면
Controller가 가장 우선순위가 높기 때문에 Controller에서 해당되는 케이스(@GetMapping)가 있는지 확인한 후
없다면 resources/static에 ~~~.html이 있는지 확인한다고 쓰여있다.
지금은 HomeController가 만들어져 있고 @GetMapping("/")이기 때문에
localhost:8080만 들어가도 페이지가 로드된다!
로드되는 home.html은 resources/templates에 만들어주자.

그러면 http://localhost:8080/에 접속 시 다음과 같은 화면이 뜨게 된다.

회원 웹 기능 - 등록

홈 화면이 추가됐으니 이제 회원을 등록하는 페이지를 만들고 등록 기능까지 추가해보자!
일단 회원 관련 서비스를 다루는 MemberController에서 다음의 코드를 추가한다.
굳이 /members/new로 설정하는 이유는 위의 home.html에서 회원가입 버튼을 눌렀을 때
/members/new로 이동하도록 설정을 했기 때문이다!

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

위의 코드대로라면 localhost:8080/members/new를 주소창에 입력했을 때
members/createMemberForm.html에 적힌 내용이 화면에 뿌려져야 한다!
때문에 해당 경로에 members라는 리포지토리와 createMemberForm이라는 html 파일을 만들어주자!

그리고 hello/hellospring/controller에 MemberForm이라는 클래스를 만들고 다음 코드를 작성한다.
이 때 필드의 name은 위의 createMemberForm에서 input 태그의 name="name"과 같다.
즉, 입력받는 내용이 key값으로 들어오게 된다!

이제 만든 MemberForm을 이용할 때가 됐다. /members/new에서 등록 버튼을 누를 때 반응하도록 만들어보자!
MemberController로 돌아가서 다음의 내용을 추가해주자.
여기선 @GetMapping이 아니라 @PostMapping을 써줘야 하는데, GET과 POST의 차이점을 알아야 한다.
간단히 설명하면 GET은 단순히 조회하는 용도로서 활용되고 POST는 등록하는 용도로 활용된다.
지금은 회원을 등록하는 과정이기 때문에 POST 방식을 적용했다고 보면 되겠다.
자세한 내용은 HTTP 메소드를 검색하면 많이 나온다😀
리턴값이 "redirect:/"이기 때문에 등록 버튼을 누르면 홈 화면으로 돌아오게 된다.

println()이 들어가 있어서 다음과 같이 테스트를 통해 콘솔창에서 확인이 가능하다.
log로 남기는게 적절하다고 말씀하셨지만 편의를 위해 이렇게 진행하신듯 하다!

회원 웹 기능 - 조회

멤버를 조회하는 기능을 만들어보자!
MemberController에서 localhost:8080/members에서 조회할 수 있도록 @GetMapping("/members")를 추가해주자!
인자로 들어오는 변수의 자료형은 이전에 만들었던 Model로 설정하고,
MemberService의 모든 멤버를 조회하는 findMember()를 활용해 다음과 같이 코드를 적으면 된다.

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

리턴값이 members/memberList이기 때문에 memberList.html에 다음의 내용을 추가한다.

tr 태그로 둘러싸인 다음 내용을 유심히 보면 thymeleaf 문법으로 적힌 내용이라 이해하기 어려운데
그냥 for each문으로 적힌거고 멤버를 하나씩 꺼내서 나열한다고 보면 된다!
실제로 Run을 하고 회원 가입에서 spring1, spring2을 등록 후 회원 목록으로 들어갔을 때
즉, http://localhost:8080/members로 들어갔을 때 다음과 같이 회원 목록을 확인할 수 있다!

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

이렇게 등록한 내용들은 메모리 안에 있기 때문에 자바를 내려버리면 내용이 다 사라진다고 한다.
이런 문제를 해결하려면 파일이나 데이터베이스에 저장해야 하므로 뒤에 데이터베이스 액세스를 다룬다고 한다!