• window.location.hash 변경을 체크하는 hashchange 이벤트는 있지만
  window.location.search 를 체크하는 제대로된 javascript 방법이 없음
  https://codingbeautydev.com/blog/javascript-detect-url-change/

용어

• https://m.blog.naver.com/beusable/220864664334
  

URI vs URL

• https://velog.io/@h220101/URI-URL-%EA%B5%AC%EC%A1%B0-%EC%B0%A8%EC%9D%B4%EC%A0%90
  
• URI (Uniform Resource Identifier)
  • 인터넷에 있는 자원을 나타내는 유일한 주소
  • 인터넷에 존재하는 각종 정보들의 유일한 이름이나 위치를 표시하는 식별자
  • scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]
스킴://사용자정보@host:port/path(경로)?query#fragmen
• URL (Uniform Resource Locator)
  • 웹주소
  • URI 중 프로토콜부터 경로에 해당하는 위치까지를 URL이라고 함
  • 컴퓨터 네트워크 상에서 리소스가 어디있는지 알려주기 위한 규약

프로토콜 (Protocol)

• 스킴, 프로토콜
• 컴퓨터 간 정보를 주고 받을 때 통신 방법에 대한 규칙을 표기
• 사용할 프로토콜, 리소스에 어떻게 요청 및 접근할 것인지 명시
• 웹에서는 주로 HTTP프로토콜 사용(Http, Https)

도메인 (domain)

• 접속하고 싶은 서버 컴퓨터
• 호스트명 (도메인의 하위 개념) + 도메인명 (컴퓨터 주소인 IP를 알기 쉬운 문자로 표현한 것) + 상위 도메인명 (https://goo.gl/py6N6A)

파일 경로 & 파일명

• 도메인에 해당하는 웹서버를 기준으로 제공하고자 하는 페이지가 속한 폴더명과 파일명의 경로 (자원의 경로)

파라미터 (Parameter, Query String)

• 가변적인 콘텐츠를 처리하기 위한 정보
• 동일한 페이지의 일부 정보를 구분하기 위한 용도, 파일 디렉토리 및 파일 이름과 유사한 역할로도 쓰이는 경우 있음
• 이름과 값으로 구성된 세트가 1개 이상 존재, 앤드(&) 기호로 세트 구분

플래그먼트(Fragment, Hashtag, Anchor)

• 페이지의 특정 요소 지시
• 해시 라우터로써 파일 디렉토리 및 파일이름과 유사한 역할로 쓰이는 경우가 있을 수 있음

JS

Location

• https://developer.mozilla.org/ko/docs/Web/API/Location
• Location 인터페이스는 객체가 연결된 장소(URL) 표현
• Document.location 과 Window.location으로 접근

decodeURI() vs decodeURIComponent()

• decodeURI()
  • encodeURI()로 인코딩한 URL을 디코딩
  • 전체 URI를 디코딩하는 데 사용
  • 일부 예약 문자 및 특수 문자 유지 (# 문자 등, URI의 구조를 유지하기 위함)
  • 외부 링크 처리 및 브라우저 환경에서 사용
  • encodeURIComponent() 함수로 인코딩되어 있는 것을 디코딩할 때 몇몇을 디코딩하지 않음
• decodeURIComponents()
  • encodeURIComponent()로 인코딩한 URL Component를 디코딩
  • 쿼리 문자열 내 각 값들을 디코딩하는데 사용
  • 모든 예약 문자 및 특수 문자 디코딩하여 정확한 문자열을 얻기 위해 사용
  • 쿼리 문자열 디코딩, 사용자 입력 처리 등