PRG(POST-REDIRECT-GET) 패턴

CSS수정 후 변경사항을 확인하기 위해 브라우저 새로고침을 생각없이 누르다가 아래와 같이 브라우저가 경고를 보내는 것을 보고 나의 실수를 깨달았다.

브라우저에서 새로고침 버튼을 누르면 브라우저는 무슨 동작을 할까?

브라우저에서 새로고침(refresh) 버튼을 누르면 이전 요청을 서버에게 보낸다.

이전 요청이 post 요청이라면 data도 같이 서버로 보내게 된다.

만약 이전에 보냈던 post 요청을 재요청하게 되면 브라우저에서 위와 같이 경고를 보내 알려주게 된다. 그리고 상황에 따라서 재요청을 하게 되면 당연히 문제가 될 수 있을 것이다.(예를 들면 새로고침으로 계좌 이체 요청이 다시 한 번 가는 상황을 상상해 볼 수 있다)

그러면 나는 어떻게 소스를 짰길래 이런 현상이 발생한걸까?

 

영화를 추천 받은 사람이 추천 받은 영화가 얼마나 마음에 들었는지에 대해 점수를 주고 난 후 우리 사이트에 회원가입을 바로 할 수 있도록 signup 화면페이지를 보여주고 싶었다. 그래서 아래처럼 signup view를 return하였다.

아래 화면은 서버에서 /movies/scoreReco URL로 온 POST요청을 처리하고 난 뒤의 화면이다.

요청 url이 /movies/scoreReco로 남아있는 것을 볼 수 있다. 새로운 view는 보여지지만 이전 요청이 그대로 남아있는 것이다.

이를 방지하기 위해서는 브라우저에서 signup 페이지로 새로운 GET요청을 보내도록 아래처럼 REDIRECT 응답을 보낸다.

return "redirect:/signup"

그럼 아래처럼 url이 바뀐 것을 확인할 수 있다.

POST 요청 -> REDIRECT -> GET 요청의 단계를 거치기 때문에 이를 PRG패턴이라고 부른다.

 

 

 

Cf) 만약 위 UI 디자인을 비난하고 싶다면 그 전에 저와 같이 프로젝트 하고 싶은 프론트엔드 개발자를 소개해주세요:)