BOM(Browser Object Model)은 브라우저 객체 모델로서, 웹 브라우저와 상호작용하기 위한 다양한 객체와 메서드를 제공합니다. BOM을 사용하면 웹 페이지의 URL을 파싱하고 필요한 정보를 추출하는 것이 가능합니다. 이번 글에서는 BOM을 사용하여 브라우저의 URL을 파싱하는 방법을 알아보겠습니다.

1. window.location 객체

브라우저의 URL을 파싱하기 위해 BOM에서 제공되는 window.location 객체를 사용할 수 있습니다. 이 객체는 현재 웹 페이지의 URL 정보를 포함하고 있습니다. window.location 객체에서는 URL의 여러 요소를 가져올 수 있습니다.

URL 가져오기

var url = window.location.href;

위의 코드를 사용하면 현재 웹 페이지의 전체 URL을 가져올 수 있습니다. 이 값을 변수에 저장하여 필요한 정보를 추출할 수 있습니다.

URL 요소 추출하기

var protocol = window.location.protocol; // 프로토콜 (예: "http:")
var host = window.location.host; // 호스트 (예: "www.example.com")
var pathname = window.location.pathname; // 경로 (예: "/blog")
var search = window.location.search; // 쿼리 문자열 (예: "?page=1")
var hash = window.location.hash; // 앵커 (예: "#section1")

위의 코드를 사용하면 URL에서 프로토콜, 호스트, 경로, 쿼리 문자열, 앵커 등을 추출할 수 있습니다. 이 값을 각각 변수에 저장하면 더욱 편리하게 활용할 수 있습니다.

2. URL 파싱 라이브러리

때로는 BOM을 사용하는 것보다 더 간편하게 URL을 파싱하기 위해 URL 파싱 라이브러리를 사용할 수도 있습니다. 이러한 라이브러리는 URL을 파싱하고 필요한 정보를 쉽게 추출할 수 있는 API를 제공합니다.

가장 유명한 URL 파싱 라이브러리 중 하나는 URL.js입니다. URL.js는 자바스크립트에서 URL을 파싱하는 기능을 제공하며, 다양한 URL 관련 작업을 간편하게 처리할 수 있습니다.

URL.js를 사용하여 URL을 파싱하는 예제 코드는 다음과 같습니다.

var url = new URL('http://www.example.com/blog?page=1#section1');
var protocol = url.protocol; // "http:"
var host = url.hostname; // "www.example.com"
var pathname = url.pathname; // "/blog"
var search = url.search; // "?page=1"
var hash = url.hash; // "#section1"

위의 코드에서 URL.js의 URL 객체를 생성하여 URL을 파싱하고 각 요소를 추출하였습니다.

결론

BOM을 사용하여 브라우저의 URL을 파싱하는 방법에 대해 알아보았습니다. window.location 객체를 활용하면 URL의 다양한 요소를 가져올 수 있으며, URL 파싱 라이브러리를 사용하면 더욱 편리하게 URL을 처리할 수 있습니다. URL 파싱은 웹 애플리케이션 개발에서 매우 중요한 작업 중 하나이므로, 익숙해지는 것이 도움이 될 것입니다.

#JavaScript #BOM