[Spring] MVC 패턴 웹 페이지 8 - PRG 패턴 적용하기 (새로고침 문제)

[Spring] MVC 패턴 웹 페이지 7 - 상품 수정 하기 + 리다이렉션 처리

이전 글을 참고 하자.

상품을 최초에 저장하고, 저장한 상태 그대로에서 새로고침을 하게 되면 동일한 상품이 계속해서 추가가 되게 된다.(ID가 증가하며 추가)

---

새로고침시 마지막 저장한 데이터가 중복되어 저장되는 이유

웹 브라우저에서 새로고침을 하게 되면 마지막에 서버로 전송한 데이터를 (최종 컨트롤러 매핑 메서드) 다시 전송한다.

만약 마지막에 전송했던 데이터가 POST /add + 상품 데이터를 통해 서버로 전송했다고 가정하자.

이상태에서 새로고침을 하게 되면 어떤 요청이 전송되겠는가? 바로 위에서 접근했던 POST /add + 상품 데이터 요청이 다시 한번 전송 되게 된다.

즉, 내용은 같고 ID만 다른 상품 데이터가 계속해서 쌓이게 되는 상황이 발생한다..

 

---

POST - Redirect - GET (PRG)패턴을 사용하자

 

상품을 저장하게 되면 상품 상세 메서드가 호출되도록 리다이렉션 되도록 설정하자

@GetMapping("/{itemId}") 
public String item(@PathVariable Long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
    return "basic/item";
}

 

컨트롤러 수정

package hello.itemservice.web.basic;

import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.List;

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor 
public class BasicItemController {

    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model) {
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items", items);
        return "basic/items";
    }

    @GetMapping("/{itemId}")
    public String item(@PathVariable Long itemId, Model model) {
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item", item);
        return "basic/item";
    }

    @GetMapping("/add")
    public String addForm() {
        return "basic/addForm";
    }

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


    @GetMapping("/{itemId}/edit")
    public String editForm(@PathVariable Long itemId, Model model) {
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item", item);
        return "basic/editForm";
    }


    // 테스트용 데이터
    @PostConstruct
    public void init() {

        itemRepository.save(new Item("itemA", 10000, 10));
        itemRepository.save(new Item("itemB", 20000, 20));
        itemRepository.save(new Item("itemC", 30000, 30));
    }
}

POST /add 메서드의 리턴 값을 리다이렉션으로 수정했다.

POST 메서드의 결과는 GET 메서드로 리다이렉션이기 때문에, URL 이 완전히 바뀌어진다.

이렇게 되면 최종 요청 메서드는 GET 이기 때문에 아무리 새로 고침해도 상품 조회 페이지가 출력 되므로 안전해진 웹 페이지를 구현할 수 있게 되었다.