<HTTP> PRG 패턴이란?

PRG 패턴이란?

 PRG(Post/Redirect/Get)은 양식 제출 후 표시되는 페이지를 다시 로드, 공유 또는 다른 양식 제출과 같은 악영향 없이 북마크 할 수 있도록 하는 웹 개발 디자인 패턴이다. 쉽게 말해서 예를 들어 POST 방식으로 제출(등록) 후 새로고침을 할 경우 중복 등록 되는 상황을 막도록 하는 패턴이다. (위키백과 참조)

 

PRG 패턴 예시

 아래 예제를 통해 PRG 패턴 전에 POST 요청 후 새로고침을 할 때의 경우와 PRG 패턴 후 POST 요청 후 새로고침을 할 때의 경우를 비교해 보았다.

 

PRG 패턴 적용 전

@Controller
public class PrgPattern {

    @GetMapping("/order")
    public String order() {
        return "order";
    }

    @PostMapping("/order")
    @ResponseBody
    public String orderInsert(@RequestParam("order") String order) {
        System.out.println("주문 메뉴: " + order);
        return order + " 주문완료";
    }
}

 위 PrgPattern 클래스는 컨트롤러이며 GET으로 /order를 호출 시 text를 제출하는 페이지이며 text를 POST 방식으로 /order를 호출시 text 정보와 주문완료를 문자열로 리턴해준다.

입력 페이지

입력 전송 후 페이지

 위 두 개의 캡처는 매운탕을 전송 후 문자열을 정상적으로 리턴 받았다. 근데 만약에 여기서 새로고침을 한다면 어떻게 될까?

새로고침 후 페이지

새로고침 후 Form 데이터 그대로

새로고침 후 콘솔

 위의 로그를 보면 새로고침 할 때마다 똑같이 주문 메뉴: 매운탕 로그가 나오고 개발자 도구를 보니 Form 데이터가 그대로 있으며 똑같이 전송되었다. 이런 불상사를 막기 위해 PRG 패턴을 적용해야 한다.

 

PRG 패턴 적용 후

@Controller
public class PrgPattern {

    @GetMapping("/order")
    public String order() {
        return "order";
    }

    @PostMapping("/order")
    public String orderInsert(@RequestParam("order") String order) {
        System.out.println("주문 메뉴: " + order);
        return "redirect:/orderComplete";
    }

    // 주문완료 별도 페이지
    @GetMapping("/orderComplete")
    @ResponseBody
    public String orderComplete() {
        return "주문 완료";
    }
}

 위 PRG 패턴 적용 후 PrgPattern 클래스에서 POST로 /order를 호출 후 redirect로 orderComplete를 호출하였다. 따라서 주문 등록 후 바로 주문완료 페이지로 이동시키며 새 로고침하여도 주문완료 페이지만 호출하게 될 것이다.

 

 위 두 번째 캡처를 보면 order의 상태 값이 302라는 걸 볼 수 있다. 첫 번째로 /order를 POST로 전송 후 정상적으로 성공하였고 redirect를 통해 /orderComplete로 리다이렉트 되었다. 여기서 order에 302번은 HTTP 상태코드이며 3xx번은 리다이렉션을 의미하며 자동 이동한다. (참고로 302번 코드는 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있다.)

 

---

본 포스팅은 “모든 개발자를 위한 HTTP 웹 기본 지식/인프런”를 학습한 내용을 정리한 것