웹페이지 redirect의 다양한 구현법에 대해서 설명하세요.

redirect는 영어단어 뜻 그대로 새 방향으로 돌린다는 뜻으로 웹페이지에서 redirect 구현 방법은 크게 세가지로 HTTP redirect, HTML redirect, JavaScript redirect가 있습니다.

 

HTTP redirect는 3xx 상태 코드를 지닌 응답을 활용해 리다이렉트를 할 수 있습니다. 리다이렉트 응답을 수신한 브라우저는 제공된 새로운 URL을 사용해 즉시 로드합니다. HTTP redirect는 세가지 카테고리로 나누어지는데, 이는 영속적, 일시적, 특수 리다이렉션이 있습니다.

• 영속적인 리다이렉션: 영원히 지속됨을 의미합니다. 원래의 URL이 더이상 사용되지 않아야하며, 새로운 URL을 더 선호해야함을 시사합니다.
  301 - moved permanently
  308 - permanent redirect
  
• 일시적인 리다이렉션: 표준 위치에서 접근할 수 없고, 다른 위치에서 접근 가능한 경우가 있습니다. 이런 경우 일시적인 리다이렉트가 사용될 수 있습니다.
  302 - found
  303 - see other
  307 - temporary redirect
• 특수 리다이렉션
  304 - not modified
  로컬에 의해 캐시된 복사본으로 페이지를 리다이렉트 시킵니다.
  300 - (다중 선택) 수동 리다이렉션이 있습니다.

HTML redirect는 <meta> 태그와 http-equiv 속성으로 가능하지만 브라우저에서 뒤로가기 버튼을 무용지물로 만들기 때문에 지양해야 하는 방법입니다.

JavaScript redirect는 window.location 프로퍼티에 값을 설정해서 만들어지며, 새로운 페이지가 로드됩니다. HTML redirect 처럼 모든 리소스에서 동작하는 것은 아니며, 자바스크립트를 실행한 클라이언트 상에서만 동작합니다. 조건에 따라 리다이렉션 시킬 수 있다는 점이 유용합니다.

 

이 세가지 방법 중 우선 순위는 무엇인지에 대해 말씀드리자면,

1. 페이지가 읽힌 적도 없고 전송된 적도 없는 경우, HTTP 리다이렉트가 항상 먼저 실행됩니다.
2. 어떤 HTTP 리다이렉트도 없는 경우에, HTML 리다이렉트(<meta>)가 실행됩니다.
3. 자바스크립트 리다이렉트는 최후의 수단으로써 사용되며, 클라이언트 측에서 자바스크립트를 활성화 시킨 경우에만 사용할 수 있습니다.

---

Reference

https://abelog.netlify.app/development/web%EC%9D%98-%EB%8B%A4%EC%96%91%ED%95%9C-redirect-%EA%B5%AC%ED%98%84/