[Web] 리다이렉트(Redirect)에 대하여 +구현방법

리다이렉트(Redirect)란?

리다이렉트는 특정 요청을 받았을 때 현재 웹 페이지를 특정 URL로 이동시키는 프로세스를 말합니다. 리다이렉트는 웹에서 유용하게 사용됩니다. 예를 들면 사용자가 쇼핑몰에서 결제창을 띄워서 결제를 진행한다고 가정해 보겠습니다. 그러면 결제가 완료되거나 실패했을 때 기존에 쇼핑하고 있던 앱이나 웹사이트로 리다이렉트 시키면 사용자 경험이 올라가겠죠. 또한 내가 서비스하고 있는 웹 서비스의 도메인이 바뀌었을 때에도 리다이렉트를 활용하면 기존 도메인으로 들어온 고객들을 바뀐 도메인으로 인입되도록 처리하여 손실되는 트래픽을 최소화시킬 수도 있을 것입니다.
 

리다이렉트의 주체

• 클라이언트 사이드 리다이렉트 : 리다이렉트가 사용자의 브라우저에서 처리됩니다. 주로 자바스크립트 코드를 활용하여 구현합니다.
• 서버 사이드 리다이렉트 : 리다이렉트가 서버에서 처리됩니다. 서버는 클라이언트에게 적절한 3XX 상태 코드(예: 301, 302)와 함께 Location 헤더를 전송하면 브라우저는 해당 Location URL로 자동으로 이동합니다.

 

---

 

 클라이언트 사이드리다이렉트 

자바스크립트 리다이렉트 코드

// 새로운 URL로 리다이렉트
window.location.href = "https://example.com";

// 3초 후에 새로운 URL로 리다이렉트
setTimeout(function() {
    window.location.href = "https://example.com";
}, 3000);

자바스크립트에서 위와 같은 코드를 자주 보게 되죠? 리다이렉트의 정의가 현재 페이지를 다른 페이지로 이동시킨다는 개념이기 때문에 위의 방법들도 리다이렉트라고 생각하시면 됩니다. 클라이언트 사이드 리다이렉트는 일반적으로 JavaScript를 사용하여 구현되며, 사용자의 특정 액션에 따라 브라우저에서 즉시 미리 설정한 URL로 이동합니다.

 

 서버 사이드 리다이렉트 

3XX 상태코드와 리다이렉트

HTTP/1.1 302
Location: https://example.com"
Content-Type: text/html;charset=UTF-8
Content-Length: 0
Date: Tue, 16 Feb 2023 10:52:15 GMT

HTTP 리다이렉트는 HTTP 표준으로 정의되어 있습니다. 서버가 클라이언트에게 응답으로 3XX 상태코드와 Location에 클라이언트가 이동할 URL을 설정하여 보내면 브라우저가 이를 인식하여 새로운 페이지로 이동합니다. 상태코드를 302로 내려주려면 response.setStatus(302) 이렇게 내려주시면 됩니다.
 

1. 클라이언트에서 서버로 최초 요청을 보냅니다.
2. 최초 요청을 받은 웹서버는 HTTP 응답 상태코드로 3XX를 보내고 응답 메시지 헤더 중 Location 값으로 리다이렉트 되어야 할 주소를 설정해 리턴합니다.
3. 브라우저등의 웹 클라이언트는 HTTP 응답 메시지의 상태코드가 3XX라는 것을 보고 리다이렉트라는 것을 인지하여 Location에 설정되어 있는 URL로 다시 재요청합니다.

 

---

 

 3XX 상태코드별 흐름 

3XX 상태코드

1. 300 Multiple Choices: 여러 선택지 중 클라이언트가 하나를 선택해야 하는 경우에 사용합니다.
2. 301 Moved Permanently: 요청한 리소스가 영구적으로 새로운 위치로 이동했음을 나타냅니다. 브라우저는 향후 요청 시 자동으로 새 위치로 이동하며 검색엔진은 새 위치를 색인화합니다.
3. 302 Found: 요청한 리소스가 일시적으로 다른 위치에 있을 때 사용되며, 브라우저는 새로운 위치로 이동하되, 요청 메서드는 유지됩니다. 검색 엔진은 새 위치를 색인화하지 않고 기존 위치를 유지합니다.
4. 303 See Other: 리다이렉션 이후에는 반드시 GET 메서드를 사용해야 함을 나타냅니다.
5. 304 Not Modified: 리소스가 수정되지 않았으므로 클라이언트는 캐시 된 버전을 사용해야 합니다.
6. 307 Temporary Redirect: 302와 유사하게 일시적으로 리다이렉트를 수행하되, 최초 요청 메서드를 유지합니다.
7. 308 Permanent Redirect: 301과 유사하게 영구적으로 리다이렉트를 수행하며, 최초 요청 메서드를 유지합니다.

 

영구 리다이렉션 (301, 308)

특정 리소스의 URI가 영구적으로 이동됩니다. 이전 리소스는 사용하면 안 되는 상황일 때 해당하며 검색 엔진들도 이 변경을 인지해서 새로운 URI를 적용합니다. 기존에 사용하던 도메인이 변경되었을 때 사용하기 적합합니다.
 

301 Mover Permanently

1. 클라이언트가 서버로 최초 요청(POST)
2. 서버가 301 응답코드와  Location에 새로운 URL을 응답
3. 자동 리다이렉트를 진행하며 메서드가 GET으로 변함 (이때 메시지도 제거)
4. 클라이언트에서 새로운 URL로 이동
5. 200 OK를 응답코드와 새로운 페이지를 응답

가장 많이 사용합니다. 실무에서는 리다이렉트 시 오동작 발생을 막기 위해 리다이렉션을 GET으로 처리하는 경우가 많습니다. GET은 단순 조회기 때문에 데이터가 변하지 않아 오동작 가능성이 낮습니다.
 
 

308 Permanent Redirect

1. 클라이언트가 서버로 최초 요청(POST)
2. 서버가 308 응답코드와 Location에 새로운 URL을 응답
3. 자동 리다이렉트를 진행하며 메서드는 최초 요청 메서드와 동일하게 POST로 유지
4. 클라이언트에서 새로운 URL로 이동
5. 200 OK를 응답코드와 새로운 페이지를 응답

301과 똑같지만 마지막에 리다이렉트 부분에서 클라이언트에서 서버로 최초 요청 시 보낸 메서드와 일치해야 한다는 점만 다릅니다.
 
 

일시 리다이렉션(302, 303, 307)

특정 리소스의 URI가 일시적으로 이동합니다. 예를 들자면 주문 완료 후 주문 내역 화면으로 이동하는 경우를 생각해 볼 수 있겠습니다. 일시적이기 때문에 검색 엔진등에서는 URL을 변경하지 않습니다. 영구 다이렉션보다는 사용 비중이 낮습니다.
 

302 Found

• 리다이렉트시 요청 메서드가 GET으로 변하고, 메시지가 제거될 수 있습니다.

 

303 See Other

• 302와 기본 기능은 같습니다.
• 리다이렉트 시 요청 메서드가 무조건 GET으로 변경됩니다. 

 

307 Temporary Redirect

• 302와 기본 기능은 같습니다.
• 리다이렉트시 최초 요청 메서드와 본문은 유지됩니다.

 
 

특수 리다이렉션 (304)

변경된 URI가 명확하지 않을때는 304 코드도 사용할 수 있습니다. 수정되지 않은 최신 리소스니 캐시를 사용이용하라는 특수 리다이렉션 입니다. 클라이언트는 캐시에서 리소스를 재사용하여 네트워크 트래픽을 줄일 수 있는 효과도 있습니다.
 

304 Not Modified

• 캐시를 목적으로 사용됨
• 클라이언트에게 리소스가 수정되지 않았음을 알려준다.
• 따라서 클라이언트는 로컬 PC에 저장된 캐시를 재사용한다.
• 304 응답은 응답에 메시지 바디를 포함하면 안 된다.
• 조건부 GET, HEAD 요청 시 많이 사용한다.