저번 강의에서는 스프링 빈과 의존관계에 대해서 학습해보았다.
이번 강의에서는 회원관리 예제를 통해 웹 MVC 개발 원리를 학습 해보자 !
1. 회원 웹 기능 - 홈 화면 추가
이전에 작성한 멤버 컨트롤에서 회원을 등록 조회하는 기능과 화면을 직접 만들어보자 !
기존에는 localhost:8080 으로 화면 접속시 index.html을 띄웠지만 이번에는 직접 만든 화면을 첫 화면에 띄어 보자 !
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";
}
}
2️⃣ 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>
💻 출력화면
@GetMapping("/")을 사용해서 서버를 키게되면 첫번째 보이는 화면은 "/"을 먼저 찾고
그에 메서드를 호출하는데 해당 메서드는 templates 폴더에 home.html 찾아서 화면을 띄어준다.
좀 더 자세하게 말하면 컨트롤러는 정적컨텐츠인 (/static/.html)보다 우선순위가 높다.
그렇기 때문에 서버를 켜면 컨트롤러를 먼저 찾게 되고 @GetMapping 되어 있는 home.html에 이동하게 된다.
또한 컨트롤러가 없을때인 index.html은 자동으로 무시되게 되는 것이다.
2. 회원 웹 기능 - 등록
위에서 구현한 화면에서 회원가입을 누르면 "/members/new"로 이동한다.
회원가입 기능을 수행하기 위해서 화면을 만들었으니 Controller을 만들어 보자
1️⃣ MemberController 등록 URL 맵핑하기
@GetMapping("/members/new")
public String createForm(){
return "members/createMembersForm";
}
2️⃣ members/new 화면 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
💻 출력화면
@GetMapping으로 요청받은 주소 "members/new"와 동일하지만, 위 코드는 @PostMapping으로 처리하므로 이전과 다르게 Mapping이 가능하다.
실제로 이름을 입력하세요에 입력값을 spring이라고 했을때 spring이 name으로 저장되어 전달되고 form.getName()으로 form 객체에서 입력값을 꺼내 회원 객체의 setName()메서드로 회원가입을 시키고,
return "recirect:/"로 홈 화면으로 돌아온다.
3. 회원 웹 기능 - 조회
1️⃣ MemberController 에서 조회 URL 연결하기
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}
2️⃣ members 화면 구현
<!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 템플릿 엔진이 동작한다.
모델을 넘겨받은 Thymeleaf 템플릿 엔진은 렌더링 후 변환된 html을 웹 브라우저에 띄운다.
'each'는 자바의 for each와 비슷한 문법으로 넘겨받은 members라는 객체 리스트에서 객체를 하나씩 꺼내
member에 담고, .id, .name으로 각 member의 id와 name을 출력한다.
이때 각 멤버 변수의 접근은 자바 프로퍼티 방식으로 id, name이 private이므로
property의 getter로 접근하여 값을 가져와 해당 화면처럼 출력하게 된다.
지금까지 데이터를 메모리 리포지토리에 저장했기 때문에 서버를 껐다 키면 이전 데이터가 없어진다.
실무에서 그랬다면, 상상만해도 끔찍하다!
다음시간에 데이터를 파일 또는 데이터 베이스에 저장하는 것을 해보자 !
'ON > 실습' 카테고리의 다른 글
| [Spring Boot] 스프링 DB 접근 기술 - JPA (0) | 2023.11.28 |
|---|---|
| [Spring Boot] 스프링 DB 접근 기술 - 순수 JDBC 와 JdbcTemplate (0) | 2023.11.27 |
| [Spring Boot] 스프링 빈과 의존관계 - 자바 코드로 직접 스프링 빈 등록하기 ② (0) | 2023.11.23 |
| [Spring Boot] 스프링 빈과 의존관계 - 컴포넌트 스캔과 자동 의존관계 설정 ① (0) | 2023.11.20 |
| [Spring Boot] 회원관리 예제 - 회원 서비스 테스트 ⑤ (0) | 2023.11.17 |
