window.location
웹 브라우저의 현재 URL에 대한 정보를 제공하는 JavaScript의 내장 객체이다
해당 객체는 현재 URL을 나타내는 여러 속성과 메소드를 가지고 있다
href
현재 url 주소를 가져오기
전체 url을 문자열로 반환한다
이때 프로토콜, 호스트 경로, 포트, 쿼리 스트링 등 모든 부분이 포함된다
console.log(window.location.href);해당 주소로 이동
window.location.href = "http://example.com";
protocol / host / hostname / port
아래 코드를 가지고 설명하면
http://example.com/page.html?q=123
- protocol http:, https:
- host : 호스트(도메인) + 포트 example.com:80
- hostname : 호스트(도메인) example.com
- port : 포트 번호 80
- search : 쿼리 스트링 ?q=123
query
쿼리 스트링이 여러 개 일 때, 각각의 키-값 쌍은 "&" 기호로 구분 된다
이것을 파싱하여 필요한 파라미터를 구할 수 있는데, 이때 URLSearchParams 객체를 사용한다
http://example.com/page.html?q=123&category=tech&sort=popular // 3개의 쿼리 스트링
URLSearchParams
- append(name, value)
- delete(name)
- get(name)
- has(name)
- set(name, value)
- entries() : [name, value] 형태의 반복 가능한 객체로 반환
- keys() : 이름들을 반복 가능한 객체로 반환
- values() : 값을 반복 가능한 객체로 반환
const searchParams = new URLSearchParams("q=123&category=tech&sort=popular"); // URLSearchParams 객체 생성
//param 가져오기
console.log(searchParams.get('q')); // "123"
console.log(searchParams.get('category')); // "tech"
console.log(searchParams.get('sort')); // "popular"
// 새로운 파라미터 추가
searchParams.append('page', '1');
console.log(searchParams.toString()); // "q=123&category=tech&sort=popular&page=1"
// 파라미터 제거
searchParams.delete('sort');
console.log(searchParams.toString()); // "q=123&category=tech&page=1"
