#Spring boot-11 웹 계층 개발

SPRING-BOOT 2021. 3. 4. 22:56

[출처] 인프런 김영한 강사님 -실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

웹 계층 개발

· 홈 화면

· 회원 기능

· 회원 등록

· 회원 조회

· 상품 기능

· 상품 등록

· 상품 수정

· 상품 조회

· 주문 기능

· 상품 주문

· 주문 내역 조회

· 주문 취소

상품 등록

상품 목록

상품 수정

변경 감지와 병합

상품 주문

홈 화면과 레이아웃

홈 컨트롤러 등록

package jpabook.jpashop.web;
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";
   }
}

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

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

· 스프링 부트 타임리프 viewName 매핑

· resources:templates/ +{ViewName}+ .html

· resources:templates/home.html

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

참고: https://docs.spring.io/spring-boot/docs/2.1.7.RELEASE/reference/html/commonapplication-properties.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>

fragments/header

<!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, shrinkto-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="/css/jumbotron-narrow.css" rel="stylesheet">
    <title>Hello, world!</title>

</head>

fragments/bodyHeader

<!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

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

결과 화면

참고: Hierarchical-style layouts

예제에서는 뷰 템플릿을 최대한 간단하게 설명하려고, header , footer 같은 템플릿 파일을 반복해서 포함한다.

다음 링크의 Hierarchical-style layouts을 참고하면 이런 부분도 중복을 제거할 수 있다.

-header랑 footer를 계속 include해줘야한다.. Hierarchical-style layouts를 필요한것만하고 반복적인것은 없앨 수 있다.

https://www.thymeleaf.org/doc/articles/layouts.html

Thymeleaf Page Layouts - Thymeleaf

Summary In this article, we described many ways of achieving the same: layouts. You can build layouts using Thymeleaf Standard Layout System that is based on include-style approach. You also have powerful Layout Dialect, that uses decorator pattern for wor

www.thymeleaf.org

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

1. spring-boot-devtools 추가

2. html 파일 build-> Recompile view

리소스 등록

이쁜 디자인을 위해 부트스트랩을 사용하겠다. (v4.3.1) (https://getbootstrap.com/)

· resources/static 하위에 css , js 추가

· resources/static/css/jumbotron-narrow.css 추가

---------css와 js 버전 불일치로 못읽어오는 에러 발생----------

"Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost:8080/css/bootstrap.min.css' with computed SHA-256 integrity 'L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y='. The resource has been blocked."

PDF에서 제공되는 소스를 복붙하시고 bootstrap 버전을 강사님과 동일한 버전을 쓰지 않았을 때 부트스트랩이 적용되지 않을 수 있습니다.

== fragments/header.html 중==

해당 태그의 속성 중 "integrity"의 값이 현재 사용중인 부트스트랩 버전의 것과 일치하지 않으면 브라우저에서 block됩니다.

만약, 최신버전의 부트스트랩을 사용중이시라면

부트스트랩 다운로드 페이지 아래쪽에 "Bootstrap CDN" 항목이 있습니다. 그곳에서 제공하는 소스 중 위에서 언급한 "integrity" 속성의 값을 복사해서 프로젝트의 것과 교체해주시면 됩니다.

* css파일이랑 js파일 둘의 integrity 값이 다르니깐 잘 보시고 복사하세요.

해당 답변을 보고 header에 Bootstrap CDN를 교체함으로써 해결

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;
    }
}

해당 리소스들을 적용함으로써 이쁜 화면을 만들수 있다.

회원 등록

· 폼 객체를 사용해서 화면 계층과 서비스 계층을 명확하게 분리한다.

회원 등록 폼 객체

package jpabook.jpashop.web;
import lombok.Getter;
import lombok.Setter;
import javax.validation.constraints.NotEmpty;

@Getter @Setter
public class MemberForm {

    @NotEmpty(message = "회원 이름은 필수 입니다")
    private String name;
    private String city;
    private String street;
    private String zipcode;
    
}

이부분에서 NotEmpty anotation을 찾지 못하는 문제가 발생하였다.

원인 : 스프링 부트 2.3 부터는 build.gradle에 다른 코드를 추가해야 한다.

즉, 버전을 강의 버전보다 상위 버전을 쓰고 있어 생긴 문제이다. 강의에선 스프링 부트 버전을 2.1.x를 사용

해결 : implementation 'org.springframework.boot:spring-boot-starter-validation'을 build.gradle에 추가

validate를 추가 하여 정상 .import된것을 확인 할 수 있다.

회원 등록 컨트롤러

package jpabook.jpashop.web;
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import javax.validation.Valid;
import java.util.List;
@Controller
@RequiredArgsConstructor
public class MemberController {
    private final MemberService memberService;
    @GetMapping(value = "/members/new")
    public String createForm(Model model) {
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }
    @PostMapping(value = "/members/new")
    public String create(@Valid MemberForm form, BindingResult result) {
        if (result.hasErrors()) {
            return "members/createMemberForm";
        }
        Address address = new Address(form.getCity(), form.getStreet(),
                form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);
        memberService.join(member);
        return "redirect:/";
    }
}

Model : 컨트롤러에서 view로 넘어갈떄 attribute를 넘김

@Vaild : @Vaild 하게되면 MemberForm에있는 @NotEmpty를 참고해 name을 Spring이 validation check해준다.

빈 MemberForm을 드고가는이유 : 빈화면이라서 아무것도 없을 수도 있지만 validation을 해주기떄문에 들고간다.

BindingResult : 오류가 있으면 콘솔로 안넘어가고 팅겨나가는데 validation check 한거 다음에 BindingResult가

있으면 오류가 담겨서 이코드가 실행된다.

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

BindingResult에 에러가 있으면 화면으로 가지고 가는 코드

*회원 등록 폼 화면( 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-controlfieldError' : '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>

* : object를 참고한다는 뜻이다.

th:field : {}안에 명시된 name을 id ="name" name ="name"이런식으로 바꿔주기때문에 번거러움을 해결할 수 있다.

만약 이름을 넣지않고 Submit을 할경우

NotEmpty와 그에 대한 메세지를 볼 수 있다. (BindingResult를 안해준 경우)

BindingResult 를 해준 경우.

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

 <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>

1번째줄 : fields에 name이라는것에 에러가 있으면 filedError 아니면 기본 폼 형태

2번째줄 : 만약 fields에 name이라는것에 에러가 있으면 formObject에서 name에대한 에러를 랜더링한다.

참고 : www.thymeleaf.org/documentation.html

thymeleaf 를 더 잘사용하고 싶으면 thymeleaf +spring을 참고하자

Documentation - Thymeleaf

Articles Quick glimpses into what Thymeleaf can bring to your project. Introductions With Spring Comparisons

www.thymeleaf.org

회원 목록 조회 회원

목록 컨트롤러 추가

package jpabook.jpashop.web;

@Controller
@RequiredArgsConstructor
public class MemberController {

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

· 조회한 상품을 뷰에 전달하기 위해 스프링 MVC가 제공하는 모델( Model ) 객체에 보관

· 실행할 뷰 이름을 반환

*회원 목록 뷰( 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>

 <td th:text="${member.address?.city}"></td>

참고: 타임리프에서 ?를 사용하면 null 을 무시한다(더이상 진행안해).

참고: 폼 객체 vs 엔티티 직접 사용

참고: 요구사항이 정말 단순할 때는 폼 객체( MemberForm ) 없이 엔티티( Member )를 직접 등록과 수정 화면 에서 사용해도 된다. 하지만 화면 요구사항이 복잡해지기 시작하면, 엔티티에 화면을 처리하기 위한 기능이 점점 증가한다. 결과적으로 엔티티는 점점 화면에 종속적으로 변하고, 이렇게 화면 기능 때문에 지저분해진 엔티티는 결국 유지보수하기 어려워진다.

실무에서 엔티티는 핵심 비즈니스 로직만 가지고 있고, 화면을 위한 로직은 없어야 한다.

화면이나 API에 맞 는 폼 객체나 DTO를 사용하자.

그래서 화면이나 API 요구사항을 이것들로 처리하고, 엔티티는 최대한 순수 하게 유지하자.

API를 만들때는 절떄 ENTITY를 외부로 반환해서는안된다. API는 스팩인데 ENITITY를 반환하면 EX) userpassword를 추가하게되면 password가 그대로 노출되고 , 2번째는 API스팩이 변한다 . 그거자체가 불안전한 API 스팩이 된다.

결론: 실제 MEMBER객체를 반환하는 것보단 memberDTO을 만들어서 반환하는게 맞다

상품 등록

상품 등록 폼

package jpabook.jpashop.web;
import lombok.Getter;
import lombok.Setter;

@Getter @Setter
public class BookForm {

    private Long id;
    private String name;
    private int price;
    private int stockQuantity;
    private String author;
    private String isbn;
    
}

상품 등록 컨트롤러

package jpabook.jpashop.web;
import jpabook.jpashop.domain.item.Book;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.service.ItemService;
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 ItemController {

    private final ItemService itemService;
    
    @GetMapping(value = "/items/new")
    public String createForm(Model model) {
        model.addAttribute("form", new BookForm());
        return "items/createItemForm";
    }
    
    @PostMapping(value = "/items/new")
    public String create(BookForm form) {
        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:/items";
    }
}

*상품 등록 뷰( items/createItemForm.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:action="@{/items/new}" th:object="${form}" method="post">
        <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="formcontrol" 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> <!-- /container -->
</body>
</html>

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

이 경우 form-control 로 수정해야 한다.

상품 등록

· 상품 등록 폼에서 데이터를 입력하고 Submit 버튼을 클릭하면 /items/new 를 POST 방식으로 요청

· 상품 저장이 끝나면 상품 목록 화면( redirect:/items )으로 리다이렉트

상품 목록

상품 목록 컨트롤러

package jpabook.jpashop.web;
@Controller
@RequiredArgsConstructor
public class ItemController {

    private final ItemService itemService;
    /**
     * 상품 목록
     */
    @GetMapping(value = "/items")
    public String list(Model model) {
    
        List<Item> items = itemService.findItems();
        model.addAttribute("items", items);
        return "items/itemList";
        
    }
    
}

*상품 목록 뷰( items/itemList.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="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>

model 에 담아둔 상품 목록인 items 를 꺼내서 상품 정보를 출력

상품 수정 ( ★★★ ) 중요

상품 수정과 관련된 컨트롤러 코드

package jpabook.jpashop.web;
import jpabook.jpashop.domain.item.Book;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.service.ItemService;
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 ItemController {
    /**
     * 상품 수정 폼
     */
    @GetMapping(value = "/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.setPrice(item.getPrice());
        form.setStockQuantity(item.getStockQuantity());
        form.setAuthor(item.getAuthor());
        form.setIsbn(item.getIsbn());
        
        model.addAttribute("form", form);
        return "items/updateItemForm";
        
    }
    
    /**
     * 상품 수정
     */
    @PostMapping(value = "/items/{itemId}/edit")
    public String updateItem(@ModelAttribute("form") 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";
    }
    
}

-@ModelAttribute("form")은 폼테크 오브잭트명이랑 일치 시켜야한다.

<form th:object="${form}" method="post">

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

<!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="${form}" 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>

상품 수정 폼 이동

1. 수정 버튼을 선택하면 /items/{itemId}/edit URL을 GET 방식으로 요청

2. 그 결과로 updateItemForm() 메서드를 실행하는데 이 메서드는 itemService.findOne(itemId) 를 호출해서 수정할 상품을 조회

3. 조회 결과를 모델 객체에 담아서 뷰( items/updateItemForm )에 전달

상품 수정 실행

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

1. 상품 수정 폼에서 정보를 수정하고 Submit 버튼을 선택

2. /items/{itemId}/edit URL을 POST 방식으로 요청하고 updateItem() 메서드를 실행

3. 이때 컨트롤러에 파라미터로 넘어온 item 엔티티 인스턴스는 현재 준영속 상태다. 따라서 영속성 컨텍스트의

지원을 받을 수 없고 데이터를 수정해도 변경 감지 기능은 동작X

변경 감지와 병합(merge)

참고: 정말 중요한 내용이니 꼭! 완벽하게 이해하셔야 합니다.

변경감지와 병합의 차이를 꼭알아야한다.

준영속 엔티티?

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

(여기서는 itemService.saveItem(book) 에서 수정을 시도하는 Book 객체다. Book 객체는 이미 DB 에 한번 저장되어서 식별자가 존재한다. 이렇게 임의로 만들어낸 엔티티도 기존 식별자를 가지고 있으면 준 영속 엔티티로 볼 수 있다.)

-> DB에 정확하게 갓다온 상태로 식별자가 DB에 있는 상태

->JPA가 식별할 수 있는 ID를 가지고 있고 영속성 컨텍스트가 더이상 관리하지 않는 엔티티

->영속상태의 경우 JPA가 변경감지를 통해 계속 체킹을 하는데 준영속 엔티티의 경우 체크하지 않는다.

@PostMapping("items/{itemId}/edit")
    public String updateItem(@PathVariable("itemId") Long itemId,@ModelAttribute("form") 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은 new로 생성한 것이고 jpa가 기본적으로 관리를 하지않는다. 여기서 아무리 값을 바꾸어도 변경이 안일어난다.

그럼 준영속 엔티티를 수정할려면 어떻게 해야할까?

준영속 엔티티를 수정하는 2가지 방법

· 변경 감지 기능 사용

-> trascation commit 시점에 JPA가 변경에대해 찾아서 UPDATE쿼리를 자동으로 생성해서 DB에 UPDATE한다.

· 병합( merge ) 사용

변경 감지 기능 사용

    //이렇게 해야한다 이게 더나은 방법이다.
    @Transactional
    public void updateItem(Long itemId ,Book bookParam){//itemParam: 파리미터로 넘어온 준영속 상태의 엔티티
        //아이탬 기반으로 실제 DB에 있는 영속상태 ENTITY를 찾아옴.
        //같은 엔티티를 조회한다.
        Item findItem = itemRepository.findOne(itemId);

        //데이터를 수정한다.
        //trascntional에 의해서 커밋이되고 flush가 나간다.
        findItem.setPrice(bookParam.getPrice());
        findItem.setName(bookParam.getName());
        findItem.setStockQuantity(bookParam.getStockQuantity());
    }

영속성 컨텍스트에서 엔티티를 다시 조회한 후에 데이터를 수정하는 방법

트랜잭션 안에서 엔티티를 다시 조회, 변경할 값 선택 → 트랜잭션 커밋 시점에 변경 감지(Dirty Checking) 이 동작해서 데이터베이스에 UPDATE SQL 실행

-실무에서는 위에처럼 단발성으로 set을 날리면 안되고 findItem.chage(parameter~~) or findItem.addStock()같은 의미있는 메서드를 만들어서 역추적에도 용이하게 사용해야 한다.

병합 사용

병합은 준영속 상태의 엔티티를 영속 상태로 변경할 때 사용하는 기능이다

@Transactional
void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티

        Item mergeItem = em.merge(item);
        
 }

똑같은 식별자로 Entity를 찾고 넘어온 파라미터Entity의 값으로 찾은 Entity의 모든 필드를 바꿔치기 하는 것이다.

그리고 바꿔치기한것을 리턴한다.

병합: 기존에 있는 엔티티

병합 동작 방식

1. merge() 를 실행한다.

2. 파라미터로 넘어온 준영속 엔티티의 식별자 값으로 1차 캐시에서 엔티티를 조회한다.

2-1. 만약 1차 캐시에 엔티티가 없으면 데이터베이스에 서 엔티티를 조회하고, 1차 캐시에 저장한다.

3. 조회한 영속 엔티티( mergeMember )에 member 엔티티의 값을 채워 넣는다.

(member 엔티티의 모든 값 을 mergeMember에 밀어 넣는다.

이때 mergeMember의 “회원1”이라는 이름이 “회원명변경”으로 바 뀐다.)

4. 영속 상태인 mergeMember를 반환한다.

참고: 책 자바 ORM 표준 JPA 프로그래밍 3.6.5

병합시 동작 방식을 간단히 정리

1. 준영속 엔티티의 식별자 값으로 영속 엔티티를 조회한다.

2. 영속 엔티티의 값을 준영속 엔티티의 값으로 모두 교체한다.(병합한다.)

3. 트랜잭션 커밋 시점에 변경 감지 기능이 동작해서 데이터베이스에 UPDATE SQL이 실행

주의: 변경 감지 기능을 사용하면 원하는 속성만 선택해서 변경할 수 있지만,

병합을 사용하면 모든 속성이 변경된다. 병합시 값이 없으면 null 로 업데이트 할 위험도 있다.

(병합은 모든 필드를 교체한다.)

실무는 굉장히 복잡하기 때문에 merge를 통해 할수 잇는 경우는 굉장히 작다.

(ex 등록할땐 필드가 10개라도 보통 수정시 수정할수 있는 필드는 등록보다 작다.)

결론 실무에서는 최대한 Merge를 쓰지말고 변경감지로 해결하자

상품 리포지토리의 저장 메서드 분석 ItemRepository

package jpabook.jpashop.repository;

@Repository
public class ItemRepository {

    @PersistenceContext
    EntityManager em;
    
    public void save(Item item) {
    
        if (item.getId() == null) {
            em.persist(item);
        } else {
            em.merge(item);
        }
        
    }
    //...
}

· save() 메서드는 식별자 값이 없으면( null ) 새로운 엔티티로 판단해서 영속화(persist)하고

식별자가 있으면 병합(merge)

· 지금처럼 준영속 상태인 상품 엔티티를 수정할 때는 id 값이 있으므로 병합 수행

새로운 엔티티 저장과 준영속 엔티티 병합을 편리하게 한번에 처리

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

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

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

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

가장 좋은 해결 방법

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

· 컨트롤러에서 어설프게 엔티티를 생성하지 마세요.

· 트랜잭션이 있는 서비스 계층에 식별자( id )와 변경할 데이터를 명확하게 전달하세요.(파라미터 or dto)

· 트랜잭션이 있는 서비스 계층에서 영속 상태의 엔티티를 조회하고, 엔티티의 데이터를 직접 변경하세요.

(이래야지 더티 체킹<변경감지>가 일어난다)

· 트랜잭션 커밋 시점에 변경 감지가 실행됩니다

@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemService itemService;
    /**
     * 상품 수정, 권장 코드
     */
    @PostMapping(value = "/items/{itemId}/edit")
    public String updateItem(@ModelAttribute("form") BookForm form) {
    
        itemService.updateItem(form.getId(), form.getName(), form.getPrice());
        return "redirect:/items";
        
    }
}

package jpabook.jpashop.service;
@Service
@RequiredArgsConstructor
public class ItemService {
    private final ItemRepository itemRepository;
    /**
     * 영속성 컨텍스트가 자동 변경
     */
    @Transactional
    public void updateItem(Long id, String name, int price) {
        Item item = itemRepository.findOne(id);
        item.setName(name);
        item.setPrice(price);
    }
    
     @Transactional
     public void updateItem(Long itemId ,UpdateItemDto itemDto){
     }
}

훨씬 깔끔하고 어설프게 entity를 파라미터로 안쓴것이다 내가 필요한 데이터를 딱딱딱 받은 것이고 이게 유지보수성에도 훨씬 효율 적이다 코드가 정확하게 매칭되기 때문에

만약 UPDATE 할때 DATA가 좀 많다싶으면 Service계층에 별도 클래스를 뽑아 DTO를 만들어서 사용한다.

상품 주문

상품 주문 컨트롤러

package jpabook.jpashop.web;
import jpabook.jpashop.domain.Member;
import jpabook.jpashop.domain.Order;
import jpabook.jpashop.domain.OrderSearch;
import jpabook.jpashop.domain.item.Item;
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(value = "/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(value = "/order")
    public String order(@RequestParam("memberId") Long memberId,
                        @RequestParam("itemId") Long itemId, @RequestParam("count") int count) {
        
        orderService.order(memberId, itemId, count);
        return "redirect:/orders";
        
    }
}

해당값을 controller에도 설정해도되지만 하지 않는 이유는 컨트롤러에서 설정하게되면 controller자체가 지저분해질 뿐 만 아니라, 테스트할때도 그렇고 transcation안에서 JPA가 동작할때 제일 깔끔하게 동작하기 때문이다.

controller에서는 식별자만 넘기고 service 계층에서는 엔티티랑 이런것을 더 의존하기 떄문에 안에서 넘기면 더할 수 있는게 많다.

주로 command성 주문이런것은 Controller에서 식별자만 넘기고 실제 핵심 비지니스 서비스에서 enity를 찾는것부터는 거기서한다.

.조회는 상관없지만 조회가 아닌 핵심 비지니스로직은 밖에서 넘기는것보다 식별자만 받은뒤 핵심비지니스 로직을 transcaction안에서 할 경우 영속상태를 유지할 수 있기때문에 주문하면서 뭔가 수정되더라도 변경감지를 적용가능 밖에서 가지고오면 더티체킹 자체가 안된다. 그이유는트랜잭션없이 밖에서 들고온 것이기 때문이다.

주문 폼 이동

· 메인 화면에서 상품 주문을 선택하면 /order 를 GET 방식으로 호출

· OrderController 의 createForm() 메서드

· 주문 화면에는 주문할 고객정보와 상품 정보가 필요하므로 model 객체에 담아서 뷰에 넘겨줌

주문 실행

· 주문할 회원과 상품 그리고 수량을 선택해서 Submit 버튼을 누르면 /order URL을 POST 방식으로 호출

· 컨트롤러의 order() 메서드를 실행

· 이 메서드는 고객 식별자( memberId ), 주문할 상품 식별자( itemId ), 수량( count ) 정보를 받아서

주문 서 비스에 주문을 요청

· 주문이 끝나면 상품 주문 내역이 있는 /orders URL로 리다이렉트

*상품 주문 폼( order/orderForm )*

<!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>

주문 목록 검색, 취소

주문 목록 검색 컨트롤러

package jpabook.jpashop.web;
@Controller
@RequiredArgsConstructor
public class OrderController {
    @GetMapping(value = "/orders")
    public String orderList(@ModelAttribute("orderSearch") OrderSearch
                                    orderSearch, Model model) {
        List<Order> orders = orderService.findOrders(orderSearch);
        model.addAttribute("orders", orders);
        return "order/orderList";
    }
}

@ModelAttribute("orderSearch")

- 굳이 ordereSearch에 담지않아도 알아서 form에 있던 데이터를 바인딩한다.
- 데이터를 화면에 바인딩 시킨다.

form submit이된다. 즉 model.addAttribute("orderSearch",orderSearch);에 담기는 것이다.

*주문 목록 검색 화면( 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="formcontrol" 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>

${T(jpabook.jpashop.domain.OrderStatus).values()}

- ENUM 타입에있던 값을 다 가지고 온다.

<a th:if="${item.status.name() == 'ORDER'}" href="#" th:href="'javascript:cancel('+${item.id}+')'" class="btn btn-danger">CANCEL</a>

- 상태가 ORDER면 CANCEL 버튼이 보이게끔 만드는 것

주문 취소

package jpabook.jpashop.web;
@Controller
@RequiredArgsConstructor
public class OrderController {
    @PostMapping(value = "/orders/{orderId}/cancel")
    public String cancelOrder(@PathVariable("orderId") Long orderId) {
        orderService.cancelOrder(orderId);
        return "redirect:/orders";
    }
}

'SPRING-BOOT' 카테고리의 다른 글

#실전2 - 3 회원수정 API (0)	2021.03.08
#실전2 -1 postman 설치 및 RESTAPI (0)	2021.03.07
#Spring boot-10 주문 도메인 개발 (0)	2021.03.04
#Spring boot-9 상품 도메인 개발 (0)	2021.03.04
#Spring boot-8_1 테스트 케이스 작성 중 에러 (0)	2021.03.04

ABOUT ME

습관처럼 IT 공부하자 습관처럼 IT 공부하자

[출처] 인프런 김영한 강사님 -실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

웹 계층 개발

홈 화면과 레이아웃

홈 컨트롤러 등록

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

타임리프 템플릿 등록

리소스 등록

회원 등록

회원 목록 조회 회원

목록 컨트롤러 추가

상품 등록

상품 등록 폼

상품 목록

상품 목록 컨트롤러

상품 수정 ( ★★★ ) 중요

상품 수정 폼 이동

상품 수정 실행

변경 감지와 병합(merge)

참고: 정말 중요한 내용이니 꼭! 완벽하게 이해하셔야 합니다.

변경감지와 병합의 차이를 꼭알아야한다.

준영속 엔티티?

준영속 엔티티를 수정하는 2가지 방법

· 변경 감지 기능 사용

· 병합( merge ) 사용

변경 감지 기능 사용

병합 사용

병합 동작 방식

결론 실무에서는 최대한 Merge를 쓰지말고 변경감지로 해결하자

새로운 엔티티 저장과 준영속 엔티티 병합을 편리하게 한번에 처리

가장 좋은 해결 방법

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

상품 주문

주문 목록 검색, 취소

주문 취소

'SPRING-BOOT' 카테고리의 다른 글

티스토리툴바

ABOUT ME

[출처] 인프런 김영한 강사님 -실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

웹 계층 개발

홈 화면과 레이아웃

홈 컨트롤러 등록

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

타임리프 템플릿 등록

리소스 등록

회원 등록

회원 목록 조회 회원

목록 컨트롤러 추가

상품 등록

상품 등록 폼

상품 목록

상품 목록 컨트롤러

상품 수정 ( ★★★ ) 중요

상품 수정 폼 이동

상품 수정 실행

변경 감지와 병합(merge)

참고: 정말 중요한 내용이니 꼭! 완벽하게 이해하셔야 합니다.

변경감지와 병합의 차이를 꼭알아야한다.

준영속 엔티티?

준영속 엔티티를 수정하는 2가지 방법

· 변경 감지 기능 사용

· 병합( merge ) 사용

변경 감지 기능 사용

병합 사용

병합 동작 방식

결론 실무에서는 최대한 Merge를 쓰지말고 변경감지로 해결하자

새로운 엔티티 저장과 준영속 엔티티 병합을 편리하게 한번에 처리

가장 좋은 해결 방법

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

상품 주문

주문 목록 검색, 취소

주문 취소

'SPRING-BOOT' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바