HTML DOM Location host 속성 – 호스트명과 포트 번호 다루는 방법

HTML DOM의 Location host 속성은 현재 페이지 URL에서 호스트명(hostname)과 포트 번호(port)를 함께 반환하거나 설정할 때 사용합니다. 만약 URL에 포트 번호가 명시적으로 지정되어 있지 않다면, 반환 값에는 포트가 표시되지 않고 호스트명만 나타납니다.

참고로 비슷한 역할을 하는 hostname 속성과의 차이점도 알아두면 좋습니다. location.hostname은 오직 호스트명만 반환하는 반면, location.host는 포트 번호가 존재할 경우 이를 함께 포함하여 반환합니다.

문법(Syntax)

Location host 속성의 기본적인 사용 문법은 다음과 같습니다.

host 속성 값 가져오기

location.host

host 속성 값 설정하기

location.host = hostname:host

예제(Example)

다음은 Location host 속성을 활용하여 현재 URL의 포트 번호 유무를 확인하고 출력하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Location host</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-host</legend>
<label for="urlSelect">Current URL:</label>
<input type="url" size="27" id="urlSelect" value="https://www.example.com:2544">
<input type="button" onclick="getHostPort()" value="Get Port">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var urlSelect = document.getElementById("urlSelect");
    function getHostPort() {
        if(location.host.includes(':') === false)
            divDisplay.textContent = 'No port present, as host: '+location.host;
        else
            divDisplay.textContent = 'Port: '+location.host.split(":")[1]+', as host: '+location.host;
    }
</script>
</body>
</html>

코드 설명

위 예제의 핵심 로직은 getHostPort() 함수에 있습니다. 먼저 includes(':') 메서드로 host 값에 콜론(:)이 포함되어 있는지 검사합니다. 콜론이 없다면 포트 번호가 지정되지 않았다는 의미이므로 호스트명만 화면에 표시하고, 콜론이 있다면 split(":")[1]을 통해 포트 번호를 분리하여 함께 출력합니다.

출력 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Get Port' 버튼을 클릭하기 전 −

HTML DOM Location host 속성 – 호스트명과 포트 번호 다루는 방법

'Get Port' 버튼을 클릭한 후 −

HTML DOM Location host 속성 – 호스트명과 포트 번호 다루는 방법

정리

Location host 속성은 웹 개발에서 현재 접속 중인 서버의 주소 정보를 동적으로 확인해야 할 때 매우 유용합니다. 특히 개발 환경과 운영 환경의 포트가 다른 경우나, 프로토콜·도메인·포트를 조건으로 분기 처리해야 하는 로직을 구현할 때 활용도가 높습니다.