웹 계층 개발

LeeKyoungChang·2022년 3월 2일

스프링 부트와 JPA 활용 1

spring, jpa 강의를 보고 정리한 내용입니다.

목록 보기

70/107

스프링 부트와 JPA 활용 1 - 웹 애플리케이션 개발 수업을 듣고 정리한 내용입니다.

📚 1. 홈 화면과 레이아웃

홈 화면
회원 기능
- 회원 등록
- 회원 조회
상품 기능
- 상품 등록
- 상품 수정
- 상품 조회
주문 기능
- 상품 주문
- 주문 내역 조회
- 주문 취소

상품 등록
상품 목록
상품 수정
변경 감지와 병합
상품 주문

📖 A. 홈 컨트롤러 등록

HomeController

package jpabook.jpashop.controller;

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

@Slf4j
@Controller
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 )를 찾는다.

📖 B. 타임리프 템플릿 등록

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 :: header" : fragments/header 파일에서 header를 가지고 와서 replace 한다.
"fragments/footer :: footer" : fragments/footer 파일에서 footer를 가지고 와서 replace 한다.

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

<!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을 참고하면 이런 부분도 중복을 제거할 수 있다.

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

💡 참고
뷰 템플릿 변경사항을 서버 재시작 없이 즉시 반영하기
1. spring-boot-devtools 추가
2. html 파일 build → Recompile

➡️ templates 디렉터리에서 발생한 변경사항을 즉시 반영할 수 있다.

📖 C. view 리소스 등록

부트 스트랩 CSS and JS

에서 다운로드한 후, resource/static에 추가한다.
추가했는데 화면이 이전과 같다면, Build/Build Project (f9) 를 실행한다.

jumbotron-narrow.css

화면 균형에 맞게 출력되게 하기위해 추가한다.

📚 2. 회원 등록

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

✔️ 회원 등록 폼 객체
MemberForm

package jpabook.jpashop.controller;


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를 사용하기 위해서는 build.gradle에 implementation 'org.springframework.boot:spring-boot-starter-validation'을 추가해야 한다.

✔️ 회원 등록 컨트롤러

package jpabook.jpashop.controller;

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 javax.validation.Valid;

@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 bindingResult) {

        if (bindingResult.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:/";
    }
}

✔️ 회원 등록 폼 화면
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>

header, bodyHeader 을 replace 한다.

<form role="form" action="/members/new" th:object="${memberForm}" 란?

createForm 메서드에서 memberForm key 값에 new MemberForm()을 value로 넣었다.

th:field="*{city}" 란?

html 소스를 볼시, city가 중복 입력되어 있다. (city : MemberForm의 필드이다.)

이는 소스 작업할 때 th:field 라고 입력할 시, id와 name을 맞추어 city를 입력해준다.

입력하고 입력완료를 클릭할 시

/members/new에 post로 선언되어 있는 메서드로 입력한 데이터들이 넘어간다.

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

        if (bindingResult.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:/";
    }

@Valid 검증에 관하여, 동작하는 과정

@Valid MemberForm form : Memberform을 필수로 입력하여라! (검증 기능)
BindingResult bindingResult : @Valid MemberForm form에서 발생한 오류들을 bindingResult에 저장한다.
- bindingResult.hasErrors() : 만약 어떠한 오류가 발생하면 Yes, 오류가 없으면 No
- 현재는 오류 발생시 members/createMemberForm으로 이동한다.
- 오류가 발생하여 createMemberForm으로 이동할 때 오류들을 bindingResult에 담아서 form으로 전달한다. (또한, 입력한 데이터들도 그대로 전달된다.)
- form 코드, 밑에 코드를 보면

<style>
      .fieldError {
          border-color: #bd2130;
} </style>
<body>
	
	...

 // 색깔을 입히기 위해 넣은 코드
 <input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">

th:field 에러로 name이다.
th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'"

field의 에러가 name일 경우
- fields를 선언하여 에러를 쓸 수 있다.
form-control에 fieldError을 실행한다. (즉, #bd2130 빨간색을 입힌다.)

// 오류 메세지를 화면에 출력하기 위해 넣은 코드
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>

만약, field 에러로 name이 있을 경우
th:errors에 name 필드에 있는 NotEmpty message을 화면에 뿌려준다. (에러를 화면에 출력한다.)

redirect : 첫 번째 페이지로 넘어가게 된다.

📌 Form 데이터에 관하여
@Valid MemberForm form
화면에서 입력받는 데이터, 필드들을 선언한 클래스를 만들고 Form으로 데이터를 받는게 훨씬 낫다.
현재로 보면 이름, 도시, 거리, 우편번호 필드가 선언된 클래스를(MemberForm) 만들어 Form으로부터 데이터들를 받는다.

실행 결과
(1) 회원 가입 성공

회원 가입에 성공하면 홈 화면으로 리다이렉트된다.

(2) 회원 가입 실패

이름을 입력하지 않았기에 오류가 발생한다.

코드를 열어보면

검증 실패로, createMemberForm.html이 실행된다.

NotEmpty인 경우 "회원 이름은 필수 입니다"가 출력된다.

📚 3. 회원 목록 조회

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

✔️ 회원 목록 컨트롤러 추가
MemberController

package jpabook.jpashop.controller;
import java.util.List;

@Controller
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

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

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

✔️ 회원 목록 뷰
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>

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

members는 model에 담은 key 값

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

address?.city : address가 null일 경우 화면에 출력하지 않는다. (타임리프에서 ?를 사용하면 null을 무시한다.)

JPA사용시, entity 를 최대한 순수하게 유지해야한다. (오직 핵심 비즈니스 로직에만 의존관계가 있도록)
외부에는 entity를 API로 외부에 호출하면 안된다. 하지만, 템플릿엔진에서는 사용해도 상관없다. (서버 사이드에서만 실행되는 것이기에)

비즈니스 로직이란?

실행 결과

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

요구사항이 정말 단순할 때는 폼 객체( MemberForm ) 없이 엔티티( Member )를 직접 등록과 수정 화면에서 사용해도 된다.

하지만 화면 요구사항이 복잡해지기 시작하면, 엔티티에 화면을 처리하기 위한 기능이 점점 증가한다. 결과적으로 엔티티는 점점 화면에 종속적으로 변하고, 이렇게 화면 기능 때문에 지저분해진 엔티티는 결국 유지보수하기 어려워진다.

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

화면이나 API에 맞는 폼 객체나 DTO를 사용하자. 그래서 화면이나 API 요구사항을 이것들로 처리하고, 엔티티는 최대한 순수하게 유지하자!

➡️ API를 사용할 때는 절대로 controll에서 view로 엔티티를 넘기면 안된다. (API를 사용할 때, 엔티티를 외부로 반환하면 안된다.)

📚 4. 상품 등록

✔️ 상품 등록 폼
BookForm

package jpabook.jpashop.controller;

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

✔️ 상품 등록 컨트롤러
ItemController

package jpabook.jpashop.controller;

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.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("form", new BookForm());
        return "items/createItemForm";
    }

    @PostMapping("/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";
    }
}

위와 같이 set메서드 보다는 create생성자메서드를 만들어서 호출하는 것이 좋다.

✔️ 상품 등록 뷰
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="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> <!-- /container -->
</body>
</html>

✔️ 상품 등록

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

실행 결과

📚 5. 상품 목록

✔️ 상품 목록 컨트롤러
ItemController

    @GetMapping("/items")
    public String list(Model model) {
        List<Item> items = itemService.findItem();
        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 를 꺼내서 상품 정보를 출력

📚 6. 상품 수정

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

    @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.setPrice(item.getPrice());
        form.setStockQuantity(item.getStockQuantity());
        form.setAuthor(item.getAuthor());
        form.setIsbn(item.getIsbn());

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


    @PostMapping("items/{itemId}/edit")
    public String updateItem(@PathVariable String 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";
    }

✔️ 상품 수정 폼 화면
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 엔티티 인스턴스는 현재 준영속 상태다!
➡️ 따라서 영속성 컨텍스트의 지원을 받을 수 없고 데이터를 수정해도 변경 감지 기능은 동작하지 않는다.

실행 결과
스크린샷 2022-03-01 오후 5 37 15

📚 7. 변경 감지와 병합(merge)

🔔 준영속 엔티티

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

    @PostMapping("items/{itemId}/edit")
    public String updateItem(@PathVariable String 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";
    }

여기서는 itemService.saveItem(book) 에서 수정을 시도하는 Book 객체다.
Book 객체는 이미 DB 에 한번 저장되어서 식별자가 존재한다.
이렇게 임의로 만들어낸 엔티티도 기존 식별자를 가지고 있으면 준 영속 엔티티로 볼 수 있다.
DB에 기존 필드 식별자를 가지고 있으므로 이후 엔티티에 똑같은 필드가 들어올 때 update가 일어나지 않는다. 이는 준영속성 엔티티로 영속성 컨텍스트가 더는 관리하지 않는 엔티티이다.
- itemService.saveItem(book);가 있어도 실행되지 않는 것과 같다. (변경했어도 적용되지 않는다.)

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

📖 A. 변경 감지 기능 사용 (이걸 써야 함, 많이 사용)

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

	@Transactional
    public void updateItem(Long itemId, Book param) {
        Item findItem = itemRepository.findOne(itemId); // itemRepository에서 item을 찾는다.
        findItem.setPrice(param.getPrice()); // Book 매개변수로부터 조회한 후, 넣는다.
        findItem.setName(param.getName());
        findItem.setStockQuantity((param.getStockQuantity()));
    }

Item findItem = itemRepository.findOne(itemId); // itemRepository에서 item을 찾는다.

itemRepository.findOne(itemId); : itemRepository에서 item을 찾는다.
findItem은 영속상태이다. (find로 찾아왔으니)
@Transactional로 메서드 끝에서 트랜잭션 커밋이 된다.
commit이 될 경우, auto로 flush를 날린다. (flush : 영속성 컨텍스트에서 변경된 내용을 찾고 update 쿼리로 DB에 반영한다.)

트랜잭션 안에서 준영속 엔터티인 param을 인자로 받아서 조회하고, 변경할 값을 선택한다. → 트랜잭션 커밋 시점에 변경 감지(Dirty Checking)이 동작해서 데이터베이스에서 UPDATE SQL 실행

이와 같이 변경을 감지해서 업데이트 하는 것을 변경 감지라고 한다.

📖 B. 병합 (사용하지 말자)

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

@Transactional
void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티 Item mergeItem = em.merge(item);
}

병합 : 기존에 있는 엔터티

✔️ 병합 동작 방식
1. merge()를 실행한다.
2. 파라미터로 넘어온 준영속 엔티티의 식별자 값으로 1차 캐시에서 엔티티를 조회한다.
➡️ 만약 1차 캐시에 엔티티가 없으면 데이터베이스에서 엔티티를 조회하고, 1차 캐시에 저장한다.

조회한 영속 엔티티( mergeMember )에 member 엔티티의 값을 채워 넣는다. (member 엔티티의 모든 값을 mergeMember에 밀어 넣는다. 이때 mergeMember의 회원1이라는 이름이 회원명변경으로 바뀐다.)
영속 상태인 mergeMember를 반환한다.

🔔 병합시 동작 방식을 간단히 정리
1. 준영속 엔티티의 식별자 값으로 영속 엔티티를 조회한다.
2. 영속 엔티티의 값을 준영속 엔티티의 값으로 모두 교체한다.(병합한다.)
3. 트랜잭션 커밋 시점에 변경 감지 기능이 동작해서 데이터베이스에 UPDATE SQL이 실행

⚠️ 주의

변경 감지 기능을 사용하면 원하는 속성만 선택해서 변경할 수 있지만, 병합을 사용하면 모든 속성이 변경된다.

병합시 값이 없으면 null 로 업데이트 할 위험도 있다. (병합은 모든 필드를 교체한다.)

✔️ 상품 리포지토리의 저장 메서드 분석
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() 를 호출한다. 그러면 식별자가 없다는 예외가 발생한다.

➡️ 병합을 사용하는 것은 번거롭다. 사용하지 말자!

✏️ 가장 좋은 해결 방법 - 엔터티를 변경할 때는 항상 변경 감지를 사용하자!

컨트롤러에서 어설프게 엔터티를 생성하지 말자!

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

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

트랜잭션 커밋 시점에 변경 감지가 실행된다.

    /**
     * 상품 수정, 권장 코드
     */
    @PostMapping("items/{itemId}/edit")
    public String updateItem(@ModelAttribute("form") BookForm form ) {

        itemService.updateItem(form.getId(), form.getName(),form.getPrice(), form.getStockQuantity());

        return "redirect:/items";
    }

    /**
     * 영속성 컨텍스트가 자동 변경
     */
    @Transactional
    public void updateItem(Long id, String name, int price, int stockQuantity) {
        Item item = itemRepository.findOne(id);
        item.setName(name);
        item.setPrice(price);
        item.setStockQuantity(stockQuantity);
    }

💡 참고

set메서드 보다는 엔터티 내에서 바로 추적할 수 있는 메서드를 만들어라!

위와 같이 findItem.setName(n), findItem.setPrice(p), findItem.setStockQuantity(q) 로 직접 다 변경하는 것보다는 findItem.change(n, p, q) 변경 메서드를 만들어 호출하여 데이터를 변경하도록 하는 코드가 매우 좋다. (나중에 데이터가 많아지면 추적하는 것을 쉽게 하기 위해)

📚 8. 상품 주문

상품 주문 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Item.Item;
import jpabook.jpashop.domain.Member;
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.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

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.findItem();

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

✔️ 주문 폼 이동

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

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

        return "order/orderForm";
    }

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

✔️ 주문 실행

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

@RequestParam은 orderForm.html에서 선택된 id의 value가 넘어온다. (name: itemId, value: ${item.id}, name: count, id: count)
주문할 회원과 상품 그리고 수량을 선택해서 Submit 버튼을 누르면 /order URL을 POST 방식으로 호출한다.
컨트롤러의 order() 메서드를 실행한다.
- 이 메서드는 고객 식별자( memberId ), 주문할 상품 식별자( itemId ), 수량( count ) 정보를 받아서 주문 서비스에 주문을 요청한다.
주문이 끝나면 상품 주문 내역이 있는 /orders URL로 리다이렉트한다.
현재 메서드에서는 식별자만 넘기고, 핵심 비즈니스 로직 orderService.order 메서드를 호출하여, 영속성 컨텍스트 존재하는 상태에서 데이터를 조회하거나 변경한다.

✔️ 상품 주문 폼
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>

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

select문을 사용하여, item을 조회한다.
th:each="item : ${items}" model에 담았던 item들을 이용하여 반복문을 돌린다.
<form role="form" action="/order" method="post"> : /order에 post 형식으로 보낸다.

실행 결과

📚 9. 주문 목록 검색, 취소

✔️ 주문 목록 검색 컨트롤러
OrderController

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

        return "order/orderList";
    }

OrderService

    // 검색
    public List<Order> findOrders(OrderSearch orderSearch) {
        return orderRepository.findAllByString(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="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>

            <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(csjpabook.csjpashop.domain.OrderStatus).values()}"
                                th:value="${status}"
                                th:text="${status}">option
                        </option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary mb-2">검색</button>
            </form>

<form th:object="${orderSearch}" class="form-inline">에서 orderSearch란?

검색버튼을 눌렸을 경우, 두 개 입력한 것들이 submit되어 orderList.html → orderSearch에 바인딩이 된다.

    @GetMapping("/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") OrderSearch orderSearch 을 통해 orderSearch가 model에 저장된다.
데이터들을 찾고 영속성 컨텍스트, model에 입력한 데이터들이 orders에 담긴다.
다시 orderList에 보낸다.

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

을 통해 orders에 저장된 데이터를 화면 출력한다.

✔️ 주문 취소
OrderController

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

진행하다 만난 오류 (/error)

This application has no explicit mapping for /error, so you are seeing this as a fallback.

/error발생 : 경로가 잘못 입력되어 있다.

jpabook.jpashop.domain.OrderStatus에 있는 값을 출력하기 (경로에서 문제가 있는지 확인해야 한다.)

th:each="status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"

실행 결과

cancel 누름

LeeKyoungChang

"야, (오류 만났어?) 너두 (해결) 할 수 있어"

이전 포스트

주문 도메인 개발

다음 포스트

웹 계층 개발

spring, jpa 강의를 보고 정리한 내용입니다.

📚 1. 홈 화면과 레이아웃

📖 A. 홈 컨트롤러 등록

📖 B. 타임리프 템플릿 등록

📖 C. view 리소스 등록

📚 2. 회원 등록

📚 3. 회원 목록 조회

📚 4. 상품 등록

📚 5. 상품 목록

📚 6. 상품 수정

📚 7. 변경 감지와 병합(merge)

📖 A. 변경 감지 기능 사용 (이걸 써야 함, 많이 사용)

📖 B. 병합 (사용하지 말자)

📚 8. 상품 주문

📚 9. 주문 목록 검색, 취소

주문 도메인 개발

API 개발 기본

0개의 댓글