[작성일: 2023. 08. 28]
홈 화면과 레이아웃
HomeController와 html(타임리프 사용, 코드 생략)을 작성해서 기본적인 홈 화면 레이아웃을 만들어주었다.
@Slf4j
@Controller
public class HomeController {
@RequestMapping("/")
public String home() {
log.info("home controller");
return "home";
}
}
참고: hierachical-style layouts
예제에서는 뷰 템플릿을 간단하게 작성하기 위해 header, footer 같은 템플릿 파일을 반복해서 포함한다. 다음 링크의 Hierachical-style layouts을 참고하려면 이런 부분도 중복을 제거할 수 있다.
https://www.thymeleaf.org/doc/articles/layouts.html
디자인을 위해 부트스트랩을 사용해서 홈 화면을 꾸며준다.(css, js 코드 생략)
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
회원 등록
폼 객체를 사용해서 화면 계층과 서비스 계층을 명확하게 분리한다.
@Getter
@Setter
public class MemberForm {
@NotEmpty(message = "회원 이름은 필수 입니다.") // 값이 비어있으면 오류
private String name;
private String city;
private String street;
private String zipcode;
}
@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()) { // result에 에러가 있다면 폼으로 리턴
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:/";
}
}
회원 목록 조회
MemberController에 회원 목록을 조회하는 코드를 추가한다.
@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";
}
}
참고:
요구사항이 단순할 때는 폼 객체(MemberForm) 없이 엔티티(Member)를 직접 등록과 수정 화면에 사용해도 된다.
하지만 화면 요구사항이 복잡해지면 엔티티에 화면을 처리하기 위한 기능이 증가하게 되고 결과적으로는 엔티티는 점점 종속적으로 변한다. 이렇게 화면 기능 때문에 지저분해지는 엔티티는 결국 유지보수하기 어려워진다.
실무에서는 엔티티는 핵심 비즈니스 로직만 가지고, 화면을 위한 로직은 없어야 한다. 화면이나 API에 맞는 폼 객체나 DTO를 사용하자. 그래서 화면이나 API 요구사항을 이것들로 처리하고 엔티티는 최대한 순수하게 유지해야 한다.
상품 등록
- 회원 등록과 마찬가지로 폼 객체를 사용해서 화면 계층과 서비스 계층을 분리한다.
- 상품 등록 폼에서 데이터를 입력하고 submit 버튼을 클릭하면 /items/new를 POST 방식으로 요청한다.
- 상품 저장이 끝나면 상품 목록 화면(redirect:/items)으로 리다이렉트 된다.
@Getter
@Setter
public class BookForm {
private Long id;
private String name;
private int price;
private int stockQuantity;
private String author;
private String isbn;
}
@Controller
@RequiredArgsConstructor
public class ItemController {
private final ItemService itemService;
// ... 코드 생략
@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";
}
}
상품 목록
@Controller
@RequiredArgsConstructor
public class ItemController {
private final ItemService itemService;
@GetMapping("items")
public String list(Model model) {
List<Item> items = itemService.findItems();
model.addAttribute("items", items);
return "items/itemList";
}
}
상품 수정
@Controller
@RequiredArgsConstructor
public class ItemController {
private final ItemService itemService;
// ... 코드 생략
@GetMapping("items/{itemId}/edit")
public String updateItemForm(@PathVariable 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(@ModelAttribute("form") BookForm form, @PathVariable Long itemId) {
Book book = new Book();
book.setName(form.getName());
book.setPrice(form.getPrice());
book.setStockQuantity(form.getStockQuantity());
book.setIsbn(form.getIsbn());
book.setAuthor(form.getAuthor());
itemService.saveItem(book);
return "redirect:/items";
}
}
상품 수정 폼 이동
- 수정 버튼을 선택하면 /items/{itemId}/edit URL을 GET 방식으로 요청한다.
- 결과로 updateItemForm() 메서드를 실행하는데 이 메서드는 itemService.findOne(itemId)를 호출해서 수정할 상품을 조회한다.
- 조회 결과를 모델 객체에 담아서 뷰에 전달한다.
상품 수정 실행
- 상품 수정 폼 HTML에는 상품의 id, 상품명, 가격, 수량 정보가 있다.
- 상품 수정 폼에서 정보를 수정하고 Submit한다.
- /items/{itemId}/edit URL을 POST 방식으로 요청하고 updateItem() 메서드를 실행한다.
- 이때 컨트롤러에 파라미터로 넘어온 item 엔티티 인스턴스는 현재 준영속 상태이다. 따라서 영속성 컨텍스트의 지원을 받을 수 없고 데이터를 수정해도 변경 감지 기능은 동작하지 않는다.
변경 감지와 병합(merge)
준영속 엔티티는 영속성 컨텍스트가 더이상 관리하지 않는 엔티티를 말한다. 여기서는 itemService.saveItem(book)에서 수정을 시도하는 Book 객체를 의미한다. Book 객체는 이미 DB에 한 번 저장되어서 식별자가 존재한다. 이렇게 임의로 만들어낸 엔티티도 기존 식별자를 가지고 있으면 준영속 엔티티로 볼 수 있다.
준영속 엔티티를 수정하는 방법은 2가지가 있다.
- 변경 감지 기능 사용
- 병합(merge) 사용
변경 감지 기능 사용
@Transactional
void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티
Item findItem = em.find(Item.class, itemParam.getId()); //같은 엔티티를 조회한다.
findItem.setPrice(itemParam.getPrice()); //데이터를 수정한다.
}
영속성 컨텍스트에서 엔티티를 다시 조회한 후에 데이터를 수정하는 방법.
트랜잭션 안에서 엔티티들 다시 조회, 변경할 값을 선택 ➡️ 트랜잭션 커밋 시점에 변경 감지(Dirty Checking)가 동작해서 데이터베이스에 update SQL을 실행한다.
병합 사용
@Transactional
void update(Item itemParam) {
//itemParam: 파리미터로 넘어온 준영속 상태의 엔티티 Item mergeItem = em.merge(itemParam);
}
병합은 준영속 상태의 엔티티를 영속 상태로 변경할 때 사용하는 기능이다.
병합 동작 방식
- merge()를 실행한다.
- 파라미터로 넘어온 준영속 엔티티의 식별자 값으로 1차 캐시에서 엔티티를 조회한다.
- 만약 1차 캐시에 엔티티가 없으면 데이터베이스에서 엔티티를 조회하고 1차 캐시에 저장한다.
- 조회한 영속 엔티티(mergeMember)에 member 엔티티의 값을 채워 넣는다.(member 엔티티의 모든 값을 mergeMember에 밀어 넣는다. 이때 mergerMember의 회원1이라는 이름이 회원명변경으로 바뀐다.)
- 영속 상태인 mergeMember를 반환한다.
간단히 정리하면,
준영속 엔티티의 식별자 값으로 영속 엔티티를 조회하고 영속 엔티티의 값을 준영속 엔티티의 값으로 모두 교체(병합)한다. 트랜잭션 커밋 시점에 변경 감지 기능이 동작해서 데이터베이스에 update SQL이 실행하는 것이다.
주의: 변경 감지 기능을 사용하면 원하는 속성만 선택해서 변경할 수 있지만, 병합을 사용하면 모든 속성이 변경된다. 병합할 때 값이 없으면 null로 업데이트를 할 위험도 있다. (병합은 모든 필드를 교체한다.)
상품 리포지토리 분석
@Repository
@RequiredArgsConstructor
public class ItemRepository {
private final EntityManager em;
public void save(Item item) {
if (item.getId() == null) {
em.persist(item);
} else {
em.merge(item);
}
}
// ... 생략
}
- save() 메서드는 식별자 값이 없으면(null) 새로운 엔티티로 판단해서 영속화(persist)하고 식별자가 있으면 병합(merge)
- 지금처럼 준영속 상태인 상품 엔티티를 수정할 때는 id 값이 있으므로 병합을 수행
- 이렇게 함으로써 이 메서드를 사용하는 클라이언트는 저장과 수정을 구분하지 않아도 되므로 클라이언트의 로직이 단순해짐.
- 새로운 엔티티 저장과 준영속 엔티티 병합을 편리하게 한 번에 처리할 수 있음.
참고: save() 메서드는 식별자를 자동 생성해야 정상 동작한다. 여기서 사용한 Item 엔티티의 식별자는 자동으로 생성되도록 @GenerateValue를 선언했다. 따라서 식별자 없이 save() 메서드를 호출하면 persist()가 호출되면서 식별자 값이 자동으로 할당된다. 반면에 식별자를 직접 할당하도록 @Id만 선언한다면 식별자를 직접 할당하지 않고 save() 메서드를 호출하면 식별자가 없는 상태로 persist()를 호출한다. (이럴 경우 식별자가 없다는 예외가 발생한다.)
실무에서는 보통 업데이트 기능이 매우 제한적이다. 그런데 병합은 모든 필드를 변경해버리고, 데이터가 없으면 null로 업데이트를 해버린다. 병합을 사용하면서 이 문제를 해결하려면 변경 폼 화면에서 모든 데이터를 항상 유지해야 하는데, 실무에서는 보통 변경 가능한 데이터만 노출하기 때문에 병합을 사용하는 것이 더 번거롭다.
가장 좋은 해결 방법
- 컨트롤러에서 어설프게 엔티티를 생성하지 말자.
- 트랜잭션에 있는 서비스 계층에 식별자(id)와 변경할 데이터를 명확하게 전달하자.(파라미터 or dto)
- 트랜잭션이 있는 서비스 계층에서 영속 상태의 엔티티를 조회하고 엔티티의 데이터를 직접 변경하자.
- 트랜잭션 커밋 시점에 변경 감지가 실행된다.
@PostMapping("items/{itemId}/edit")
public String updateItem(@ModelAttribute("form") BookForm form, @PathVariable Long itemId) {
itemService.updateItem(itemId, form.getName(), form.getPrice(), form.getStockQuantity());
return "redirect:/items";
}
@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);
}
상품 주문
@Controller
@RequiredArgsConstructor
public class OrderController {
private final OrderService orderService;
private final MemberService memberService;
private final ItemService itemService;
@GetMapping("/order")
public String creatForm(Model model) {
List<Member> member = memberService.findMembers();
List<Item> items = itemService.findItems();
model.addAttribute("members", member);
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";
}
}
- 메인 화면에서 상품 주문을 선택하면 /order를 GET 방식으로 호출한다.
- OrderController의 createForm() 메서드를 실행한다.
- 주문 화면에서는 주문할 고객 정보와 상품 정보가 필요하므로 model 객체에 담아서 뷰에 넘겨준다.
- 주문할 회원과 상품, 수량을 선택해서 Submit 버튼을 누르면 /order URL을 POST 방식으로 호출한다.
- 컨트롤러의 order() 메서드를 실행한다.
- 이 메서드는 고객 식별자(memberId), 주문할 상품 식별자(itemId), 수량(count) 정보를 받아서 주문 서비스에 주문을 요청한다.
- 주문이 끝나면 상품 주문 내역이 있는 /orders URL로 리다이렉트 된다.
주문 목록 검색, 취소
@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";
}
@PostMapping("/orders/{orderId}/cancel")
public String cancelOrder(@PathVariable("orderId") Long orderId) {
orderService.cancelOrder(orderId);
return "redirect:/orders";
}
}
🐣 출처: 인프런 김영한님 강의
이 글은 인프런의 김영한님 JPA 강의를 보고 작성한 글입니다.
강의를 들으면서 정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.