[Javascript] document.referrer

HTTP referrer

document.referrer는 현재 페이지로 유입된 트래픽의 이전 페이지의 URL을 나타내는 JavaScript의 속성입니다.

이 속성은 HTTP Referer 헤더를 기반으로 하며, 사용자가 링크를 클릭하거나 페이지를 요청할 때 브라우저가 자동으로 설정합니다.

 

개발자 도구 네트워크 창에 들어가서 네트워크 통신한 것을 확인해 보면,

이런 식으로 요청 header에 저장되게 됩니다.

 

글로만 보면 이해하기가 조금 애매하니 그림으로 어떤 상황에 사용하면 좋을지 설명해 보겠습니다.

 

예시 및 설명

A 사이트에서 html 파일로 연결했을 때와 B 사이트에서 html을 연결했을 때 다른 결과 값이 나오게 하기 위해서 document.referrer를 사용하면 됩니다.

  if(document.referrer.includes("/hoso/")) {
	console.log("hoso")
  } else {
	console.log("love")
  }

 

이런 식으로 사용하여 다른 값을 내보내게 할 수 있습니다.

hoso에서 html을 불렀을 때는 hoso라는 값이

love에서 html을 불렀을 때는 love라는 값이 나오게 됩니다.

 

그런데 이런 용도 말고 보통 log를 기록하는데 많이 사용하는 것 같아요.

사용자가 어디서 이곳으로 흘러들어오게 되었는지를 확인하는 용도로요.

그래서 blog 유입경로도 이런 것으로 확인하는 것이 아닐까요??? (추측)

 

소감

개발의 장점은 어떻게 해서든 제품? 소프트웨어를 개발할 수 있다는 것이라고 생각합니다. 뭐 안 되는 것이 있을 수도 있겠지만 우리가 생각하는 것은 거의 다 할 수 있다고 생각합니다.(어려울 뿐이지만요 ㅎㅎ)

아무튼 하나하나 배우고 작성해 나가면서 저도 조금은 성장해 나가는 것 같습니다.

 

---

출처 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80