Spring/JPA

[JPA] 웹 계층 개발

lumana 2024. 10. 9. 14:34

JPA 개발 - 웹 계층 개발

#Spring/DB/JPA

홈 컨트롤러

package jpabook.jpashop.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@Slf4j
public class HomeController {
    @RequestMapping("/")
    public String home() {
        log.info("home controller");
        return "home";
    }
}

@Slf4j : 로깅을 위해서 사용

스프링 부트 타임리프 기본 설정


spring:
  thymeleaf:
  prefix: classpath:/templates/
  suffix: .html

스프링 부트 타임리프 viewName 매핑
- resources:templates/ +{ViewName}+ .html
- resources:templates/home.html

반환한 문자(home )과 스프링부트 설정 prefix , suffix 정보를 사용해서 렌더링할 뷰( html )를 찾는다

타임리프 템플릿 등록

home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div class="jumbotron"> <h1>HELLO SHOP</h1>
        <p class="lead">회원 기능</p> <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a> </p>
        <p class="lead">상품 기능</p> <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a> </p>
        <p class="lead">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a> <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p> </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

<head th:replace="fragments/header :: header">

<div th:replace="fragments/bodyHeader :: bodyHeader" />

<div th:replace="fragments/footer :: footer" />

이 위치에 있는 header를 가져와서 replace 한다.

타임리프의 Include-style layout을 사용한 것인데,
실무에서 코드 중복을 없애려면 Hierarchical-style layout을 써주는게 좋음

참고 : 뷰 템플릿 변경사항을 서버 재시작 없이 즉시 반영하기

builds.gradle 파일에 spring-boot-devtools를 추가하고

html 파일을 빌드한 뒤에 recompile(shift + command + F9) 해주면 된다.

fragments/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
 to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-
 ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="/css/jumbotron-narrow.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>

 fragments/bodyHeader.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="header" th:fragment="bodyHeader">
    <ul class="nav nav-pills pull-right">
        <li><a href="/">Home</a></li>
    </ul>
    <a href="/"><h3 class="text-muted">HELLO SHOP</h3></a>
</div>

fragments/footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
    <p>&copy; Hello Shop V2</p>
</div>

view 리소스 등록

부트스트랩 사용

resources/static 하위에 css , js 추가
resources/static/css/jumbotron-narrow.css 추가

jumbotron-narrow.css 파일

/* Space out content a bit */
body {
    padding-top: 20px;
    padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
    padding-left: 15px;
    padding-right: 15px;
}
/* Custom page header */
.header {
    border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
}
/* Custom page footer */
.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
    .container {
        max-width: 730px;
    }
}
.container-narrow > hr {
    margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
    margin: 40px 0;
}
.marketing p + h4 {
    margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }
}

회원 등록

폼 객체를 사용하여 Presentation Layer와 Service Layer를 명확하게 분리해줘야 한다.
컨트롤러에서 원하는 validation이랑, Domain에서 원하는 validation이 다르기 때문.

폼 객체를 만들어서 화면에 핏한 Form 데이터를 받자.

package jpabook.jpashop.controller;

import jakarta.validation.constraints.NotEmpty;
import lombok.Getter;
import lombok.Setter;

@Getter @Setter
public class MemberForm {
    @NotEmpty(message = "회원 이름은 필수 입니다")
    private String name;

    private String city;
    private String street;
    private String zipcode;
}

@NotEmpty(message = "회원 이름은 필수 입니다")
javax.validation에 있는 것. 이름을 필수로 설정해주고, 스프링이 Validation 해줌. 값이 비어있으면 오류 발생.

이대로 처리해주면 값이 비어있으면 사용자에게는 Whitelabel Error가 넘어오는데, 이것보단 사용자에게 이름 입력을 안했다고 폼에 알려주는게 좋다. BindingResult로 폼까지 끌고가면 이 메시지가 출력된다. 아래에서 확인해보자.

MemberController

package jpabook.jpashop.controller;

import jakarta.validation.Valid;
import jpabook.jpashop.domain.Address;
import jpabook.jpashop.domain.Member;
import jpabook.jpashop.service.MemberService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class MemberController {
    private final MemberService memberService;

    @GetMapping("/members/new")
    public String createForm(Model model) {
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }

    @PostMapping("/members/new")
    public String create(@Valid MemberForm form, BindingResult result) {

        if (result.hasErrors()) {
            return "members/createMemberForm";
        }

        Address address = new Address(form.getCity(), form.getCity(), form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);

        memberService.join(member);
        return "redirect:/";
    }

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

	@GetMapping("/members/new")
    public String createForm(Model model) {
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }

컨트롤러가 화면을 이동시킬 때 memberForm이라는 빈 껍데기 맴버 객체를 가지고 가고 있다.
validation을 해주기 때문에 빈 껍데기를 가져가는 것

참고 | 모델에 form 이름을 “form”으로 지정하면 타임리프에서 예외는 발생하긴 하지만, 예외 메시지 로직을 제대로 처리 못하는 듯

	@PostMapping("/members/new")
    public String create(@Valid MemberForm form, BindingResult result) {

        if (result.hasErrors()) {
            return "members/createMemberForm";
        }

        Address address = new Address(form.getCity(), form.getCity(), form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);

        memberService.join(member);
        return "redirect:/";
    }

@Valid : @Valid를 달아주면 스프링이 @NotEmpty, @NotNull 이런 걸 스캔해서 validation 해준다.

BindingResult : 스프링이 제공하는 BindingResult. 오류가 여기에 담겨서 여기에서 실행된다.
오류가 있으면(hasErrors()) 특정 동작을 지정해줄 수 있다. 여기선 페이지를 내려주고 있다.

스프링이 BindingResult를 화면까지 끌고가줘서 사용자는 어떤 에러가 있는지 확인할 수 있다.
(타임리프 html의 fields.hasErrors를 확인해보자)

참고로, 이름만 없고 나머지 값들이 입력된 상태로 submit해도 기존 form 데이터를 끌고가주기 때문에 그대로 남아있는다.

return “redirect:/“ : 저장이 되고 리로딩되면 사용자가 헷갈릴 수 있음. 리다이렉팅 해주자.
첫 번째 페이지로 넘어간다.

회원 등록 폼(templates/members/createMemberForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<style>
    .fieldError {
        border-color: #bd2130;
    }
</style>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/members/new" th:object="${memberForm}"
          method="post">
        <div class="form-group">
            <label th:for="name">이름</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">
            <p th:if="${#fields.hasErrors('name')}"
               th:errors="*{name}">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="city">도시</label>
            <input type="text" th:field="*{city}" class="form-control"
                   placeholder="도시를 입력하세요"> </div>
        <div class="form-group">
            <label th:for="street">거리</label>
            <input type="text" th:field="*{street}" class="form-control"
                   placeholder="거리를 입력하세요"> </div>
        <div class="form-group">
            <label th:for="zipcode">우편번호</label>
            <input type="text" th:field="*{zipcode}" class="form-control"
                   placeholder="우편번호를 입력하세요"> </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

th:object="${memberForm}”
form 안에서는 이 객체(memberForm)를 계속 사용하겠다~

<input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">

th:field="*{name}"
memberForm object의 name을 참고하겠다. 근데 *이 있으니 Getter를 통해서 가져오겠다.

th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">

'name'에 오류가 있으면 맨 위 fieldError css를 적용해서 빨간색 껍데기를 적용해준다.

<p th:if="${#fields.hasErrors('name')}"<br> th:errors="*{name}">Incorrect date</p>
th:errors에서 name필드에서 에러메시지를 뽑아서 출력해준다. 애노테이션에 지정한 메시지가 출력되는 것

th:field="*{city}
보통 폼을 만들 때 id랑 name을 적어준다. 근데 id = city, name = city로 중복해서 적어야 한다,
th:field라고 적으면 city라는 이름을 가지고 id과 name 속성을 만들어준다.
직접 id = ~~ name = ~~ 적어도 되긴 함.

<button type="submit" class="btn btn-primary">Submit</button>
submit을 누르면 폼 데이터가 /members/new에 메서드가 post로 넘어간다. postController를 만들어보자.

회원 목록 조회

회원 목록 조회 컨트롤러

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

여기서 DTO나 폼 객체를 넘기지 않고, 엔티티를 넘기고 있는데
사실은 뿌릴 때도 DTO나 폼 객체를 사용해서 필요한 데이터만 출력해줘야 한다.

API를 만들때는 엔티티를 절대 반환하면 안 된다!!

조회한 상품을 뷰에 전달하기 위해 스프링 MVC가 제공하는 모델( Model ) 객체에 보관
실행할 뷰 이름을 반환

회원 목록 html(templates/members/memberList.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th> <th>도시</th> <th>주소</th>
                <th>우편번호</th> </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
                <td th:text="${member.address?.city}"></td>
                <td th:text="${member.address?.street}"></td>
                <td th:text="${member.address?.zipcode}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

위 컨트롤러에서 memberList를 모델에 넘겨줬다.
<tr th:each="member : ${members}">에서는 for문 순회하듯이 각 리스트의 멤버를 출력해준다.
{~~} 안에 있는 ?는 null이면 더 이상 진행하지 않도록 해준다.

참고: 타임리프에서 ?를 사용하면 null 을 무시한다.

참고: 폼 객체 vs 엔티티 직접 사용  요구사항이 정말 단순할 때는 폼 객체( MemberForm ) 없이 엔티티( Member )를 직접 등록과 수정 화면에서 사용해도 된다. 하지만 화면 요구사항이 복잡해지기 시작하면, 엔티티에 화면을 처리하기 위한 기능이 점점 증가한다. 결과적으로 엔티티는 점점 화면에 종속적으로 변하고, 이렇게 화면 기능 때문에 지저분해진 엔티티는 결국 유지보수하기 어려워진다. 실무에서 엔티티는 핵심 비즈니스 로직만 가지고 있고, 화면을 위한 로직은 없어야 한다. 화면이나 API에 맞는 폼 객체나 DTO를 사용하자. 그래서 화면이나 API 요구사항을 이것들로 처리하고, 엔티티는 최대한 순수하게 유지 하자.

상품 등록

BookForm을 Item 대표로 하나만 만든다.

package jpabook.jpashop.controller;

import lombok.Getter;
import lombok.Setter;

@Getter @Setter
public class BookForm {
    private Long id; // 상품 수정을 위해서 폼 객체에 id가 있어야 함

    private String name;
    private int price;
    private int stockQuantity;

    private String author;
    private String isbn;
}

상품 등록 컨트롤러
기존 강의 자료에 Validation 추가

package jpabook.jpashop.controller;

import jakarta.validation.Valid;
import jpabook.jpashop.domain.item.Book;
import jpabook.jpashop.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemService itemService;

    @GetMapping("/items/new")
    public String createForm(Model model) {
        model.addAttribute("bookForm", new BookForm());
        return "items/createItemForm";
    }

    @PostMapping("/items/new")
    public String create(@Valid BookForm form, BindingResult result) {
        // 여기서 setter로 정해주는 대신 생성 메서드를 사용해주는게 좋다.
        if (result.hasErrors()) {
            return "items/createItemForm";
        }
        Book book = new Book();
        book.setName(form.getName());
        book.setPrice(form.getPrice());
        book.setStockQuantity(form.getStockQuantity());
        book.setAuthor(form.getAuthor());
        book.setIsbn(form.getIsbn());

        itemService.saveItem(book);
        return "redirect:/";
    }
}

setter가 굉장히 많다 생성 메서드를 만들어서 사용하자.

상품 등록 뷰(items/createItemForm.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"></head>
<style>
    .fieldError {
        border-color: #bd2130;
    }
</style>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"></div>
    <form th:action="@{/items/new}" th:object="${bookForm}" method="post">
        <div class="form-group">
            <label th:for="name">상품명</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')} ? 'form-control fieldError' : 'form-control'">
            <p th:if="${#fields.hasErrors('name')}"
               th:errors="*{name}">잘못된 입력입니다.</p>
        </div>
        <div class="form-group">
            <label th:for="price">가격</label>
            <input type="number" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="stockQuantity">수량</label>
            <input type="number" th:field="*{stockQuantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="author">저자</label>
            <input type="text" th:field="*{author}" class="form-control" placeholder="저자를 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="isbn">ISBN</label>
            <input type="text" th:field="*{isbn}" class="form-control" placeholder="ISBN을 입력하세요">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer"></div>
</div> <!-- /container -->
</body>
</html>

주의: PDF에서 html 파일을 복사할 때 줄바꿈 때문에, form-control 이 formcontrol 이라고 붙는 경우가 있다. 이 경우 form-control 로 수정해야 한다.

상품 등록

상품 등록 폼에서 데이터를 입력하고 Submit 버튼을 클릭하면 /items/new 를 POST 방식으로 요청
상품 저장이 끝나면 상품 목록 화면( redirect:/items )으로 리다이렉트

상품 목록

상품 목록 컨트롤러

@GetMapping("/items")
public String list(Model model) {
    List<Item> items = itemService.findItems();
    model.addAttribute("items", items);
    return "items/itemList";
}

상품 목록 View

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <div>
        <table class="table table-striped">
            <thead> <tr>
                <th>#</th> <th>상품명</th> <th>가격</th> <th>재고수량</th> <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${items}">
                <td th:text="${item.id}"></td>
                <td th:text="${item.name}"></td>
                <td th:text="${item.price}"></td>
                <td th:text="${item.stockQuantity}"></td>
                <td>
                    <a href="#" th:href="@{/items/{id}/edit (id=${item.id})}" class="btn btn-primary" role="button">수정</a>
                </td> </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
</html>

중요 : 상품 수정

엔티티를 수정하는 방법에는 크게 두 가지 방법이 존재한다.

변경 감지
merge

두 가지 방법으로 각각 상품 수정 기능을 구현해보자.

참고 | JPA는 merge 방식보다 변경 감지로 가이드를 하고 있다.

상품을 업데이트 하기 위해서는 GET 요청에 따라 폼에 기존 데이터를 넘겨주는 메서드와, 실제로 엔티티를 수정하는 메서드 두 가지가 필요하다.

상품 수정 폼

@GetMapping("/items/{itemID}/edit")
public String updateItemForm(@PathVariable("itemID") Long itemId, Model model) {
    Book item = (Book) itemService.findOne(itemId);

    BookForm form = new BookForm();
    form.setId(item.getId());
    form.setName(item.getName());
    form.setStockQuantity(item.getStockQuantity());
    form.setPrice(item.getPrice());
    form.setAuthor(item.getAuthor());
    form.setIsbn(item.getIsbn());

    model.addAttribute("bookForm", form);
    return "items/updateItemForm";
}

@PathVariable을 통해 URL 경로에 있는 itemId값을 파라미터로 매핑해준다.

Tip | 물론 이렇게 setter를 남발하는게 좋은 방법은 아니지만, 여러 세터를 각각 작성하기 귀찮을 때는

폼 클래스에 가서, multi-line select를 한 뒤 한 번에 복붙해주면 편하다.

(맥 기준 옵션키를 두 번 누른 상태로 방향키를 누르면 여러 줄 선택이 된다)

옵션을 누르고 좌 우 방향키를 누르면 한 칸씩 이동이 아니라, 접근제어자 타입 .. 요런식으로 이동

주의 | 악의적인 사용자가 id를 조작해서 넘기는 경우도 있기 때문에, 실무에서는 유저가 이 아이템에 대해 권한이 있는지 체크해주는 로직이 들어가야 한다.

상품 수정

@PostMapping("/items/{itemID}/edit")
public String updateItem(@ModelAttribute("bookForm") BookForm form) {
    Book book = new Book();
	book.setId(form.getId());
	book.setName(form.getName());
	book.setPrice(form.getPrice());
	book.setStockQuantity(form.getStockQuantity());
	book.setAuthor(form.getAuthor());
	book.setIsbn(form.getIsbn());

    itemService.saveItem(book);
    return "redirect:/items";
}

상품 수정 폼 화면(items/updateItemForm.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form th:object="${bookForm}" method="post">
        <!-- id -->
        <input type="hidden" th:field="*{id}" />
        <div class="form-group">
            <label th:for="name">상품명</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요" /> </div>
        <div class="form-group">
            <label th:for="price">가격</label>
            <input type="number" th:field="*{price}" class="form-control"
                   placeholder="가격을 입력하세요" /> </div>
        <div class="form-group">
            <label th:for="stockQuantity">수량</label>
            <input type="number" th:field="*{stockQuantity}" class="form-
control" placeholder="수량을 입력하세요" /> </div>
        <div class="form-group">
            <label th:for="author">저자</label>
            <input type="text" th:field="*{author}" class="form-control"
                   placeholder="저자를 입력하세요" /> </div>
        <div class="form-group">
            <label th:for="isbn">ISBN</label>
            <input type="text" th:field="*{isbn}" class="form-control"
                   placeholder="ISBN을 입력하세요" /> </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

상품 수정 폼 이동

수정 버튼을 선택하면 /items/{itemId}/edit URL을 GET 방식으로 요청
그 결과로 updateItemForm() 메서드를 실행하는데 이 메서드는 itemService.findOne(itemId) 를 호출해서 수정할 상품을 조회
조회 결과를 모델 객체에 담아서 뷰( items/updateItemForm )에 전달

상품 수정 실행

상품 수정 폼 HTML에는 상품의 id(hidden), 상품명, 가격, 수량 정보 있음

상품 수정 폼에서 정보를 수정하고 Submit 버튼을 선택
/items/{itemId}/edit URL을 POST 방식으로 요청하고 updateItem() 메서드를 실행
이때 컨트롤러에 파라미터로 넘어온 item 엔티티 인스턴스는 현재 준영속 상태다. 따라서 영속성 컨텍스트의 지원을 받을 수 없고 데이터를 수정해도 변경 감지 기능은 동작X

수정 실행하는 부분을 자세히 살펴보자.

변경 감지와 병합(merge)

준영속 엔티티?
영속성 컨텍스트가 더는 관리하지 않는 엔티티를 말한다.

@PostMapping("/items/{itemID}/edit")
public String updateItem(@ModelAttribute("bookForm") BookForm form) {
    Book book = new Book();
    book.setId(form.getId());
    book.setName(form.getName());
    book.setPrice(form.getPrice());
    book.setStockQuantity(form.getStockQuantity());
    book.setAuthor(form.getAuthor());
    book.setIsbn(form.getIsbn());

    itemService.saveItem(book);
    return "redirect:/items";
}

여기서 book 객체는 이미 DB에 한 번 저장되어서 DB에 식별자가 존재하는 객체이다. 이렇게 new를 통해서 임의로 만들어낸 엔티티도 기존 식별자를 가지고 잇으면 준영속 엔티티로 볼 수 있다.
new로 만들어서, JPA가 관리하지 안하기 때문에 단순히 save 없이 set을 해줘도 DB에 반영되지 않는다.

변경 감지 기능을 사용한 수정 메서드

// ItemService 객체
@Transactional
public void updateItem(Long itemId, Book param) {
    Item findItem = itemRepository.findOne(itemId);
    findItem.setPrice(param.getPrice());
    findItem.setName(param.getName());
    findItem.setStockQuantity(param.getStockQuantity());
    // itemRepository.save(findItem); // 엔티티 메니저를 호출할 필요가 없다.
}

리포지토리에서 id를 기반으로 영속 상태의 아이템 객체를 가져옴
영속 엔티티의 값을 바꿔준다
메서드가 종료되면 @Transactional에 의해 커밋이 날라간다
커밋이 될 때 JPA는 flush를 날리게 되는데, 영속성 컨텍스트에 있는 엔티티 중에서 변경된 얘들을 다 찾은 다음에 업데이트 쿼리를 날려준다. 변경감지 (Dirty Checking)이 동작하는 것.
따라서 updateItem에서 수정한 값들이 반영된다.

Entity Manager를 호출할 필요가 없다.

em.merge를 이용한 수정 메서드

@PostMapping("/items/{itemID}/edit")
public String updateItem(@ModelAttribute("bookForm") BookForm form) {
    Book book = new Book();
    book.setId(form.getId());
    book.setName(form.getName());
    book.setPrice(form.getPrice());
    book.setStockQuantity(form.getStockQuantity());
    book.setAuthor(form.getAuthor());
    book.setIsbn(form.getIsbn());

    itemService.saveItem(book);
    return "redirect:/items";
}

제일 처음에 구현했던 메서드가 merge 방식이다. 그러면 엔티티 매니저는 어떻게 merge를 해주길래 준영속 엔티티의 값으로 DB를 업데이트 해주는 것일까?

itemService.saveItem()을 호출하면 리포지토리로 가서 파라미터로 item을 넘겨서 merge가 호출된다
즉, 준영속 상태 엔티티가 파라미터로 넘어간다.
그러면 JPA는 준영속 엔티티의 itemId로 엔티티를 찾아서 준영속 엔티티의 모든 값으로 바꿔치기 해준다.
즉, 위에서 적은 변경 감지 코드를 JPA가 해주는 것이다.
(+ 마지막에 값이 바뀐 영속 엔티티를 리턴해줌)

영속 엔티티의 값이 바꿔치기가 되니까 트랜잭션 커밋 때 변경 감지가 되어 DB에 반영이 되는 것이다.
(파라미터로 넘어온 객체는 영속성 엔티티로 바뀌지 않음.)

변경 감지 vs 병합 사용 차이점
변경감지를 사용하면 원하는 속성만 선택해서 변경할 수 있지만, 병합을 사용하면 모든 속성이 변경된다.
병합시에 값이 없으면 null로 업데이트 해버릴 수 있다.

Ex) 가격을 수정하지 못하게 로직을 정했다. 그러면 수정 메서드에서 book.setPrice()를 하지 않기 때문에
준영속 엔티티의 price 값은 null임. 그래서 DB에 값이 null로 바뀌어버린다.

어떤 방법을 사용하던 간에 예시코드처럼 setter를 남발하면 변경지점을 찾기가 힘들어진다. 의미있는 변경메서드를 따로 만들어서 변경해줘야 함. change()라는 메서드를 만들어서 추적할 수 있게 해주자.

이 내용을 바탕으로 ItemRepository에서 작성했던 save 메서드를 다시 살펴보자

@Repository
@RequiredArgsConstructor
public class ItemRepository {
    private final EntityManager em;

    public void save(Item item) {
        if (item.getId() == null) { // item을 처음 저장할 때는 id가 없기 때문
            em.persist(item);
        } else {
            em.merge(item);
        }
    }
	//...

save() 메서드는 식별자 값이 없으면( null ) 새로운 엔티티로 판단해서 영속화(persist)하고 식별자가 있으면 병합(merge)
지금처럼 준영속 상태인 상품 엔티티를 수정할 때는 id 값이 있으므로 병합 수행

merge 사용 : 새로운 엔티티 저장과 준영속 엔티티 병합을 편리하게 한번에 처리
상품 리포지토리에선 save() 메서드를 유심히 봐야 하는데, 이 메서드 하나로 저장과 수정(병합)을 다 처리한다. 코드 를 보면 식별자 값이 없으면 새로운 엔티티로 판단해서 persist() 로 영속화하고 만약 식별자 값이 있으면 이미 한번 영속화 되었던 엔티티로 판단해서 merge() 로 수정(병합)한다. 결국 여기서의 저장(save)이라는 의미는 신규 데이터 를 저장하는 것뿐만 아니라 변경된 데이터의 저장이라는 의미도 포함한다. 이렇게 함으로써 이 메서드를 사용하는 클라이언트는 저장과 수정을 구분하지 않아도 되므로 클라이언트의 로직이 단순해진다.

여기서 사용하는 수정(병합)은 준영속 상태의 엔티티를 수정할 때 사용한다. 영속 상태의 엔티티는 변경 감지(dirty checking)기능이 동작해서 트랜잭션을 커밋할 때 자동으로 수정되므로 별도의 수정 메서드를 호출할 필요가 없고 그런 메서드도 없다.

참고: save() 메서드는 식별자를 자동 생성해야 정상 동작한다. 여기서 사용한 Item 엔티티의 식별자는 자동 으로 생성되도록 @GeneratedValue 를 선언했다. 따라서 식별자 없이 save() 메서드를 호출하면 persist() 가 호출되면서 식별자 값이 자동으로 할당된다. 반면에 식별자를 직접 할당하도록 @Id 만 선언했다고 가정하자. 이 경우 식별자를 직접 할당하지 않고, save() 메서드를 호출하면 식별자가 없는 상태로 persist() 를 호출한다. 그러면 식별자가 없다는 예외가 발생한다.

참고: 실무에서는 보통 업데이트 기능이 매우 제한적이다. 그런데 병합은 모든 필드를 변경해버리고, 데이터가 없 으면 null 로 업데이트 해버린다. 병합을 사용하면서 이 문제를 해결하려면, 변경 폼 화면에서 모든 데이터를 항상 유지해야 한다. 실무에서는 보통 변경가능한 데이터만 노출하기 때문에, 병합을 사용하는 것이 오히려 번거롭다.

결론: 가장 좋은 해결 방법

엔티티를 변경할 때는 항상 변경 감지를 사용하자

컨트롤러에서 어설프게 엔티티를 생성하지 마세요.
- 컨트롤러에서는 파라미터로 수정할 값을 넘기던지, 수정할 값을 담은 DTO를 넘겨주자
- 트랜잭션이 있는 서비스 계층에 식별자( id )와 변경할 데이터를 명확하게 전달하세요.(파라미터 or dto)
트랜잭션이 있는 서비스 계층에서 영속 상태의 엔티티를 조회하고, 엔티티의 데이터를 직접 변경하세요.
트랜잭션 커밋 시점에 변경 감지가 실행됩니다

@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemService itemService;

    @PostMapping("/items/{itemID}/edit")
    public String updateItem(@ModelAttribute("bookForm") BookForm form) {
        itemService.updateItem(form.getId(), form.getName(), form.getPrice(), form.getStockQuantity());
        return "redirect:/items";
    }
}

만약 파라미터가 많다면 DTO를 만들어서 서비스 계층에 DTO를 전달해주자.

package jpabook.jpashop.service;

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
public class ItemService {
    private final ItemRepository itemRepository;
	// ...
    @Transactional
    public void updateItem(Long itemId, String name, int price, int stockQuantity) {
        Item findItem = itemRepository.findOne(itemId);
        findItem.setPrice(price);
        findItem.setName(name);
        findItem.setStockQuantity(stockQuantity);
    }
	// ...

트랜잭션 안에서 엔티티를 조회해야 영속 엔티티 조회가 되고, 여기다가 값을 변경해야 더티 체킹이 일어난다.

상품 주문

상품 주문 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Member;
import jpabook.jpashop.domain.Order;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.repository.OrderSearch;
import jpabook.jpashop.service.ItemService;
import jpabook.jpashop.service.MemberService;
import jpabook.jpashop.service.OrderService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class OrderController {
    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;

    @GetMapping("/order")
    public String createForm(Model model) {
        List<Member> members = memberService.findMembers();
        List<Item> items = itemService.findItems();

        model.addAttribute("members", members);
        model.addAttribute("items", items);

        return "order/orderForm";
    }

    @PostMapping("/order")
    public String order(@RequestParam("memberId") Long memberId,
                        @RequestParam("itemId") Long itemId,
                        @RequestParam("count") int count) {
        orderService.order(memberId, itemId, count);
        return "redirect:/orders";
    }

핵심 비즈니스 로직과 관련된 메서드는 특히 바깥(컨트롤러, Presentation Layer)에서 엔티티를 찾아서 넘기는 것보다는, ID만 넘기고 @Transactional이 달려있는 서비스 계층에서 영속 엔티티를 찾아서 처리해주자

주문 폼 이동

메인 화면에서 상품 주문을 선택하면 /order 를 GET 방식으로 호출
OrderController 의 createForm() 메서드
주문 화면에는 주문할 고객정보와 상품 정보가 필요하므로 model 객체에 담아서 뷰에 넘겨줌

주문 실행

주문할 회원과 상품 그리고 수량을 선택해서 Submit 버튼을 누르면 /order URL을 POST 방식으로 호출
컨트롤러의 order() 메서드를 실행
이 메서드는 고객 식별자( memberId ), 주문할 상품 식별자( itemId ), 수량( count ) 정보를 받아서 주문 서비스에 주문을 요청
주문이 끝나면 상품 주문 내역이 있는 /orders URL로 리다이렉트

상품 주문 폼(order/orderForm.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/order" method="post">
        <div class="form-group">
            <label for="member">주문회원</label>
            <select name="memberId" id="member" class="form-control">
                <option value="">회원선택</option> <option th:each="member : ${members}"
                                                       th:value="${member.id}"
                                                       th:text="${member.name}" />
            </select>
        </div>
        <div class="form-group">
            <label for="item">상품명</label>
            <select name="itemId" id="item" class="form-control">
                <option value="">상품선택</option> <option th:each="item : ${items}"
                                                       th:value="${item.id}"
                                                       th:text="${item.name}" />
            </select>
        </div>
        <div class="form-group">
            <label for="count">주문수량</label>
            <input type="number" name="count" class="form-control" id="count"
                   placeholder="주문 수량을 입력하세요"> </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

<form> 내부에

name에 해당하는 것들이 @RequestParam에 매핑된다

주문 목록 검색, 취소

주문 목록 검색 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Member;
import jpabook.jpashop.domain.Order;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.repository.OrderSearch;
import jpabook.jpashop.service.ItemService;
import jpabook.jpashop.service.MemberService;
import jpabook.jpashop.service.OrderService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class OrderController {
    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;

    @GetMapping("/orders")
    public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model) {
        List<Order> orders = orderService.findOrders(orderSearch);
        model.addAttribute("orders", orders);

        return "order/orderList";
    }

model.addAttribute(“orderSearch”, orderSearch)를 호출하지 않았지만 orderSearch도 알아서 model에 추가되어 사용자에게 보여진다.

주문 목록 검색 화면(order/orderList)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <div> <div>
        <form th:object="${orderSearch}" class="form-inline">
            <div class="form-group mb-2">
                <input type="text" th:field="*{memberName}" class="form- control" placeholder="회원명"/>
            </div>
            <div class="form-group mx-sm-1 mb-2">
                <select th:field="*{orderStatus}" class="form-control"> <option value="">주문상태</option>
                    <option th:each=
                                    "status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"
                            th:value="${status}"
                            th:text="${status}">option
                    </option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary mb-2">검색</button> </form>
    </div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>회원명</th> <th>대표상품 이름</th> <th>대표상품 주문가격</th> <th>대표상품 주문수량</th> <th>상태</th> <th>일시</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${orders}">
                <td th:text="${item.id}"></td>
                <td th:text="${item.member.name}"></td>
                <td th:text="${item.orderItems[0].item.name}"></td>
                <td th:text="${item.orderItems[0].orderPrice}"></td>
                <td th:text="${item.orderItems[0].count}"></td>
                <td th:text="${item.status}"></td>
                <td th:text="${item.orderDate}"></td>
                <td>
                    <a th:if="${item.status.name() == 'ORDER'}" href="#"
                       th:href="'javascript:cancel('+${item.id}+')'"
                       class="btn btn-danger">CANCEL</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
<script>
    function cancel(id) {
        var form = document.createElement("form");
        form.setAttribute("method", "post");
        form.setAttribute("action", "/orders/" + id + "/cancel");
        document.body.appendChild(form);
        form.submit();
    } </script>
</html>

주문 취소

@PostMapping("/orders/{orderId}/cancel")
public String cancelOrder(@PathVariable("orderId") Long orderID) {
    orderService.cancelOrder(orderID);
    return "redirect:/orders";
}

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

[JPA] 영속성 관리 (0)	2024.11.06
[JPA] About JPA (0)	2024.11.06
[JPA] 도메인 개발 (0)	2024.10.04
[JPA] Cascade 적용 기준 (0)	2024.09.29
[JPA] 다대일(N:1) 단방향 VS 양방향 정리 (0)	2024.09.29

현재글[JPA] 웹 계층 개발

Brute force Study

배움을 나누는 공간 https://github.com/DawnGlow

Today :
Yesterday :

Brute force Study

[JPA] 웹 계층 개발

JPA 개발 - 웹 계층 개발

홈 컨트롤러

타임리프 템플릿 등록

view 리소스 등록

회원 등록

회원 목록 조회

상품 등록

상품 목록

중요 : 상품 수정

상품 수정 폼 이동

상품 수정 실행

변경 감지와 병합(merge)

결론: 가장 좋은 해결 방법

상품 주문

주문 목록 검색, 취소

주문 취소

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

'Spring/JPA'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

[JPA] 웹 계층 개발

JPA 개발 - 웹 계층 개발

홈 컨트롤러

타임리프 템플릿 등록

view 리소스 등록

회원 등록

회원 목록 조회

상품 등록

상품 목록

중요 : 상품 수정

상품 수정 폼 이동

상품 수정 실행

변경 감지와 병합(merge)

결론: 가장 좋은 해결 방법

상품 주문

주문 목록 검색, 취소

주문 취소

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

'Spring/JPA'의 다른글

관련글

티스토리툴바