-
[스프링부트 Step 14] - 회원 웹 기능 추가 (2) : 조회 본문
지난번 회원 가입 포스팅에 이어서 회원 조회도 바로 만들어 보겠습니다.
회원 조회를 어떻게 구현하면 좋을까요?
일단 회원 목록을 홈페이지에서 눌렀을 때 회원들이 모두 다 뜨게 만들면 좋지 않을까요?
이전에 home.html에서
회원가입과 더불어서 회원 목록을 클릭했을 경우 /members로 이동하게끔 세팅했었습니다.
따라서 이번에도 MemberController에 회원 목록 로직을 한 번 짜보도록 하겠습니다.
그리고 나서 Ctrl + Alt + V를 눌러 변수를 뽑아옵니다.
이게 예전에 만든 findMembers()메서드인데요.
return할 때 memberRepository.findAll()이라고 했으니 이 메서드를 실행하면 결과적으로 모든 회원들을 불러옵니다.
이때 불러온 members들을 List타입으로 가져오므로 List<Member> member라고 생성하여 members에 담습니다.
그리고 list에 Model model을 주어 이 model에 members들을 삽입할텐데요.
결과적으로 model에 조회한 모든 회원들을 담게 됩니다.
그리고 return "members/memberList"라고
이렇게 써주면 (membeers가 아니라 members 입니다.) 해당 html을 반환해야겠죠?
그럼 그 파일을 만들러 가봅시다.
<!doctype html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class = "container">
<div>
<table>
<thead>
<tr>
<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>
</body>
</html>급하신 분은 복붙하셔도 됩니다.
이제 본격적으로 타임리프를 사용해 볼 것입니다.
한 번 먼저 돌려보고 이해해보겠습니다.
숫자 하나랑 첫번째 두번째 세번째를 모두 등록시켰습니다.
그랬더니 결과가 짜잔
제가 입력하는 값에 따라 출력도 리스트로 쫙 뽑아온게 보이죠?
페이지 소스 보기를 눌러서 어떻게 구성되어있는지 한 번 살펴봅시다.
이렇게 나오네요.
우리가 입력한 이름들이 td에 담겨서 넘어오는걸 확인할 수 있습니다.
tr은 하나의 덩어리, td의 첫번째 줄은 번호, td의 두번째 줄은 이름이 들어왔네요.
우린 원래 model에 members들을 list형태로 담아놓았었습니다.
근데
<tr th:each="member :${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>이렇게 th:each라고 입력하면 루프를 돈다고 생각하면 되겠습니다. (타임리프 문법)
그래서 제일 첫 번째 줄에는 members에서 하나 꺼내와서 member에 담고 member의 id와 name을 출력합니다.
이 id와 name은 domain폴더의 member클래스에서 예전에 getter, setter를 통해 구현했었습니다.
참고해주세요.
우린 아직 DB를 사용하지 않기 때문에 등록했던 값들이 따로 저장소에 저장되거나 하지 않습니다.
저기에 목록 조회를 했을 때 뜨는 것은 단지 메모리에 저장되어있기 때문에 그렇습니다.
따라서 서버를 다시 재가동하면 다시 뜨지 않고 초기화되게 됩니다.
그래서 실무에서 이렇게하면 상당히 큰일날 것입니다..
이것이 DB를 사용하는 이유이기도 합니다.
그럼 다음 포스팅에선 DB를 사용해보고 어떻게 설정할지 등에 대해 다루어 보겠습니다.
감사합니다.
'백엔드 기술 정리 > 스프링 부트' 카테고리의 다른 글
| [스프링부트 및 JPA] - yml 파일에 대해 이해하기 (0) | 2022.01.27 |
|---|---|
| [스프링부트 Step 15] - 데이터 베이스 설치 (0) | 2022.01.06 |
| [스프링부트 Step 13] - 회원 웹 기능 추가 (0) | 2022.01.06 |
| [스프링부트 Step 12] - 자바 코드로 직접 스프링 빈 등록하기 (0) | 2022.01.04 |
| [스프링부트 Step 11] - 컴포넌트 스캔과 자동 의존관계 설정 (0) | 2022.01.01 |
