웹 MVC
웹 개발에서 사용하는 소프트웨어 디자인 패턴 (model, view, controller로 구성됨)
- model: 웹 어플리케이션의 데이터, 비즈니스 로직 처리
- view: UI를 구성
- controller: 사용자 입력을 처리하고, model과 view를 연결
먼저 요청이 오게 되면 스프링 컨테이너에서 관련 컨트롤러를 찾고, 없으면 static 파일을 찾도록 동작을 진행한다.
 |
 |
home.html
// HomeController
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}controller 디렉토리에 HomeController 파일에서 Controller 어노테이션을 명시하고, getMapping을 시켰다.
로컬 서버로 들어가게 되면 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>
</body>
</html>templates 디렉토리 내에 home.html 파일을 생성하였다.
해당 페이지와 관련이 있는 HomeController라는 관련 컨트롤러가 존재하기 때문에 static 폴더에 있는 index.html은 무시되고 home.html이 랜더링 된다.
createMemberForm
// MemberController
@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());
System.out.println("member = " + member.getName());
memberService.join(member);
return "redirect:/";
}MemberController 클래스 내에 getMapping과 PostMapping을 추가하였다.
도메인은 ./members/new로 매핑을 시키고, 정적 페이지의 경우 createMemberForm.html을 랜더링하고,
post 방식으로 처리해야할 경우에는 MemberForm 클래스 내의 getter, setter를 이용하여 Member라는 객체에 데이터를 할당한다. 그리고 memberService내의 join 메소드에 데이터를 제공하여 최종적으로 레포지토리에 저장하는 로직까지 처리하게 된다.
// memberForm
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
(참고) memberService -> join
public Long join(Member member) {
validateDuplicateMember(member); // 중복 회원 검증
memberRepository.save(member);
return member.getId();
}
<!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>
</body>
</html>form 태그를 통해 입력 값을 /members/new 도메인으로 post 방식으로 전달한다.
실행 결과
members/new 도메인으로 접속하여 이름을 입력하면, controller에 따라 로직을 거치고 Spring!을 출력하는 것을 확인할 수 있다.
memberList
// memberController
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}memberController에 getMapping을 적용하여 모든 member를 출력하는 메소드를 생성한다.
Model은 spring프레임워크 내에 내장된 라이브러리를 import하였고, model 객체에 데이터를 추가하는 addAttribute 메소드를 실행시킨다. 최종적으로 members/memberList 도메인에 접속하면 데이터가 나오도록 출력을 시켜야 한다.
// memberList
<!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>
</body>
</html>memberList의 html 파일 내에서 table 태그를 통해 iterator 기능을 이용하여 테이블 형식으로 데이터를 출력한다.
'GDSC활동 > GDSC 스터디' 카테고리의 다른 글
| spring 4주차 - section 5 (0) | 2024.11.07 |
|---|---|
| spring 2,3주차 - section 3,4 (1) | 2024.10.10 |
