상품 웹 사이트 - 리다이렉트

이전 게시글에서 만든 상품 웹 사이트는 문제점이 있다.

 

첫 번째로 상품 등록 폼에서 새로고침을 할 수 있다는 것이다.

상품 등록 폼에서 새로고침을 한다면 마지막에 전송한 POST /add 상품 데이터를 서버로 다시 전송하게 된다.

웹 브라우저의 새로 고침은 마지막에 서버에 전송한 데이터를 다시 전송하기 때문에 결론적으로 ID만 다르고 상세 내용은 같은 데이터가 계속 쌓이는 것이다.

 

 

 

PRG Post/Redirect/Get

이러한 문제점을 해결하기 위한 방법이 리다이렉트다. 새로 고침 문제를 해결하는 방법은 상품 저장 후에 뷰 템플릿으로 이동하는 것이 아니라, 상품 상세 화면으로 리다이렉트를 호출해주면 되는 것이다.

웹 브라우저는 리다이렉트의 영향으로 상품 저장 후에 실제 상품 상세 화면으로 다시 이동한다. 따라서 마지막에 호출한 내용이 상품 상세 화면이 되는 것이다. 새로 고침을 해도 문제가 안생기게 된다.

 

@PostMapping("/add")
public String addItemV4(Item item) {
    itemRepository.save(item);
    return "redirect:/basic/items/" + item.getId();
}

상품 등록을 할 때 그냥 뷰 템플릿을 return 하는 것이 아니라 리다이렉트를 이용해주면 된다.

새로고침을 아무리 누르더라도 필요없는 같은 데이터가 계속 생성되지 않는다.

 

 

 

추가적으로 상품이 등록되었을 때 사용자에게 명확하게 상품 등록이 완료되었다고 알려줄 수 있도록 수정해 볼 것이다.

@PostMapping("/add")
public String addItemV5(Item item, RedirectAttributes redirectAttributes) {
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/basic/items/{itemId}";
}

RedirectAttributes 를 통해 itemId=savedItem.getId()로, status는 true로 설정할 수 있다.

 

<!- ->
<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>

item.html에 위와 같은 코드를 추가해주면 status란 파라미터가 true일때만 저장 완료라는 글을 출력해준다.

상세 정보를 물품을 클릭할때도, 저장한 다음에도 보이지만 저장한 다음에만 저장 완료라는 글자가 추가로 출력되는 것이다.