JS(자바스크립트)의 로케이션에 대해 알아보자

헷갈리던 로케이션 알아보려고 자세하게까지는 아니지만 간단하게라도 알아보려고 블로깅중!

 

Location

개념은 현재 페이지 정보를 변환하거나 제어하는 용도

 

예시 주소 http://localhost:1234/abc

 

• .href
  • 전체 URL주소 (http://localhost:1234/)
• origin
  •  프로토콜, 호스트네임, 포트번호를 포함한 원본 URL을 반환 http://localhost:1234
• .protocol
  • 프로토콜 (http)
• .hostname
  • 도메인 이름 (localhost)
• .port
  • 포트번호 (1234)
• .pathname
  • 도메인 이후 경로 (/abc)
• .host
  • 포트 번호를 포함한 도메인 이름 (localhost:1234)
• .hash
  • 해시 정보(페이지의 ID) ex) #idName
• .search
  • 쿼리 스트링(질의 문자열) 정보를 반환  ?query=example (http://localhost:1234/abc?query=example)
• searchParams
  • URLSearchParams 객체를 반환하여 쿼리 문자열을 보다 쉽게 다룰 수 있음

const url = new URL('http://localhost:1234/abc?query=example');
console.log(url.searchParams.get('query')); // 'example'

• .assign(주소)
  • 해당 주소로 페이지 이동(뒤로가기 이동 시 해시를 들고 있음)
• .replace(주소)
  • 해당 주소로 페이지 이동 현재 페이지 히스토리 제거(뒤로가기 이동 시 해시 없음)
• .reload(강력)
  • 페이지 새로고침, ‘true’ 인수는 ‘강력’ 새로고침(기존에 남아있던 정보가 없게 새로고침)

location.replace('http://example.com'); // 뒤로가기 불가
location.assign('http://example.com'); // 뒤로가기 가능

---

찾아보았던 개념은 이게 다인데 생각보다 어렵지 않죠 ㅎㅎ? 주소를 추출해서 처리하는 작업도 많이 하니까 알아놓으시면 도움이 되실거 같아 정리합니둥