간단한 속성으로 현재 페이지의 url을 가져오는 방법을 알게되었다!👏
window.loaction
window.location 에 접근하면 location 객체에 접근할 수 있다.
콘솔로 이 아이가 어떻게 생겼는지 살펴보자
location 안에 정말 많은 타입들이 들어있는데 구글링 해보니 주로 쓰는건
href, search, port, protocol 정도 인 것 같다.
window.location.href: 전체 URL 문자열 가져오기window.location.protocol: 마지막 ':'를 포함한 프로토콜 정보 가져오기window.location.port: URL의 포트 번호window.location.search: '?' 뒤 쿼리스트링 가져오기
이 중에서 이번 프로젝트를 하면서 사용했던 href와 search를 보며 복습해보려 한다.
01. window.location.href
콘솔에 href를 찍어서 지금 velog 주소를 확인할 수 있었다.
이걸 사용한 실제 코드를 보면 아래와 같다.
👩🏻💻 실제 사용예시
const deleteSearchForm = () => {
const searchForm = document.getElementById("search-form");
// console.log(searchForm);
if (window.location.href.split("/").includes("detail")) {
searchForm.style.display = "none";
} else {
searchForm.style.display = "flex";
}
};짧게 이 코드에 대해 설명하면 url에 'detail' 이라는 글자가 포함되어 있으면 검색창을 사라지게 만드는 코드이다.
window.location.href 을 사용해서 현재 주소에 includes 메소드로 포함여부를 확인 후 각각 조건에 맞는 스타일을 지정해주었다.
02. window.location.search
const movieId = new URLSearchParams(window.location.search).get("id");window.location.search 를 쓸 때 쿼리스트링으로 파라미터를 전달받아 페이지를 전환(?)하는 방법도 있는데,
이번 팀플을 할 때 카드 하나를 클릭하면 그 카드의 id값을 변수로 받아와서 해당 카드에 대한 상세페이지를 보여주는 기능을 구현했다.
URL API에서 제공하는 URLSearchParams를 사용하여 좀 더 쉽고 안전하게 쿼리 스트링을 다룰 수 있게 되었다.
URLSearchParams 전역 클래스의 생성자는 여러 형태의 값을 인자로 받을 수 있다.
02-2. URLSearchParams 객체의 생성
// 1. 문자열의 형태
new URLSearchParams("?mode=dark&page=1&draft=false&sort=email&sort=date");
// 2. 맨 앞에 ? 생략 가능
new URLSearchParams("mode=dark&page=1&draft=false&sort=email&sort=date");URLSearchParams 객체에 저장되어 있는 값을 읽을 때는 get()과 getAll() 메서드를 사용하면 되기 때문에 위에서 팀플 예시에서도 get(id)로 해당 영화 카드의 id 값을 받아와서 사용하였다.
주소값 받아오려면 api fetch 사용해야만 하는 줄 알았는데(왜때문?) 팀원분이 간단한 방법을 알려줘서 너무 새로웠고 꼭 저장해두고 다음 프로젝트에서 유용하게 쓰고 싶었다. 특히 a태그에 html 파일을 사용하지 않고도 파라미터로 넘겨주는 쿼리스트링에 대해서 살짝 이해해볼 수 있어서 좋았다.
javascript와 개발의 세계는 정말 배울게 많은 것 같다..ㅎㅎ 🫠
출처
