-
웹페이지 Redirect 구현Note 2021. 1. 17. 16:05
Redirect
리다이렉트는 영어 단어 뜻 그대로 Redirect: (다른 주소·방향으로) 다시 보내다.
웹페이지에서 리다이렉트 구현 방법은 크게 3가지가 있다.
- HTTP 리다이렉트
- HTML 리다이렉션 <meta>
- javascript 리다이렉션HTTP 리다이렉트
HTTP 리다이렉트는 3xx상태 코드를 지닌 응답이다.
리다이렉트 응답을 수신한 브라우저는, 제공된 새로운 URL을 사용하며 그것을 즉시 로드한다.
출처: Redirections in HTTP / MDN 리다이렉트에는 몇 가지 유형이 있으며 세 가지 카테고리로 나누어진다.
영속적인 리다이렉션
영원히 지속됨을 의미한다. 원래의 URL이 더 이상 사용되지 않아야 하며 새로운 URL을 더 선호해야 함을 시사한다.
301 Moved Permanently
308 Permanent Redirect일시적인 리다이렉션
표준 위치에서 접근할 수 없고 다른 위치에서 접근 가능한 경우가 있다. 이런 경우 일시적인 리다이렉트가 사용될 수 있다.
302 Found
303 See Other
307 Temporary Redirect특수 리다이렉션
300 Multiple Choice
304 Not ModifiedHTML 리다이렉션
HTTP 리다이렉트는 리다이렉션을 만드는 가장 좋은 방법이지만, 때때로 웹 개발자는 서버에 대한 제어권을 가지고 있지 않거나 그것을 구성할 수 없는 경우가 있다. 이런 특수한 상황들 때문에, 웹 개발자들은 refresh를 설정하기 위해 페이지의 <head> 내에 <meta> 엘리먼트와 http-equiv 속성으로 HTML 페이지를 만들 수 있다. 해당 페이지를 디스플레이할 때, 브라우저는 이 엘리먼트를 발견하고 표시된 페이지로 이동할 것이다.
<head> <meta http-equiv="refresh" content="0;URL='http://www.example.com/'" /> </head>이런 리다이렉션들은 브라우저에서 뒤로 가기 버튼을 무용지물로 만든다.
자바스크립트 리다이렉션
자바스크립트 내에서의 리다이렉션은 window.location 프로퍼티에 값을 설정해서 만들어지며 새로운 페이지가 로드된다.
window.location = "http://www.example.com/";HTML 리다이렉션처럼, 모든 리소스에서 동작하는 것은 아니며, 명백하게 자바스크립트를 실행한 클라이언트 상에서만 동작한다.
우선순위
- 페이지가 읽힌 적도 없고 전송된 적도 없는 경우, HTTP 리다이렉트가 항상 먼저 실행된다.
- 어떤 HTTP 리다이렉트로 없는 경우에, HTML 리다이렉트 (<meta>)가 실행된다.
- 자바스크립트 리다이렉트는 최후의 수단으로써 사용되며, 클라이언트 측에서 자바스크립트를 활성화시킨 경우에만 사용할 수 있다.
가능한 경우, 항상 HTTP 리다이렉트를 사용해야 하며, <meta> 엘리먼트를 사용해서는 안된다. 만약 개발자가 HTTP 리다이렉트를 변경하고 HTML 리다이렉트를 잊는다면, 리다이렉트는 더 이상 동일한 한 것이 아니거나, 무한 루프로 종료되거나 다른 악몽이 시작될 수도 있다.
'Note' 카테고리의 다른 글
React Hooks (0) 2021.01.18 px, rem, em (0) 2021.01.18 Cookie, Session (0) 2020.12.17 Axios (0) 2020.12.17 AWS(Amazon Web Services) (0) 2020.12.16