JavaScript IP 확인하기 (샘플 코드)

아이피 API 무료 서비스를 활용하면 순수한 JavaScript 코드 몇 줄만 작성해도 사용자(클라이언트)의 IP 주소를 확인할 수 있습니다.

IP 주소는 웹 페이지별 권한 확인(접속 제어), 방문자 분석(마케팅)에 사용될 수 있습니다. 우선 접속자의 IP 주소를 확인하려면 서버가 필요하지만 서버 없이 간편하게 구현할 수 있는 코드를 소개합니다. 추가로 window 객체 정보를 확인하는 코드도 있습니다. IP 주소와 더불어 window 객체 정보 또한 웹 애플리케이션 개발에 있어 유용하게 사용되는 사용자 정보에 속합니다. 그럼 본문의 내용을 확인하세요. (참고로 이 글에서는 접속자·사용자·클라이언트 모두 같은 대상을 가리키고 있습니다.)

 

JavaScript IP 확인

IP 주소를 가져오기

[샘플 코드]
<style>
#client-ip {
color: #ff80ab;
}
</style>
<div>이 컴퓨터의 IP 주소: <span id="client-ip"></span></div>
<script>
// HTML의 <script> 요소를 생성한다
const se = document.createElement('script');
// <script> 요소의 src 속성을 설정한다
se.src = 'https://ipinfo.io?callback=callback';
// <body> 요소의 하위 끝에 붙인다
// 그리고 콜백 함수를 호출한다
document.body.appendChild(se);
// 앞서 생성한 <script> 요소를 제거한다
document.body.removeChild(se);
// 콜백 함수가 호출된다
function callback(data) {
document.getElementById('client-ip').textContent = data.ip;
}
</script>


[코드 설명]
위 코드에서 사용한 아이피 API에 대한 정보는 여기(https://ipinfo.io/missingauth)에서 확인하세요. 굳이 가입하여 계정을 만들지 않아도 사용할 수 있다는 점과 직접 사용해보니 결과값이 정확하고 개인적으로 괜찮은 서비스라고 생각했습니다. 서버 없이 빠르고 간단하게 구현할 경우에는 활용 가치가 있다고 봅니다.


[실행 결과]
이 컴퓨터의 IP 주소: 216.73.216.150



(추가) window 객체 정보를 확인

[샘플 코드]
<style>
#window-info [id^="w-i-"] {
color: #ff80ab;
}
</style>
<div id="window-info">
<div>현재 페이지의 URL: <span id="w-i-href"></span></div>
<div>바로 전 페이지의 URI: <span id="w-i-referrer"></span></div>
<div>사용자의 에이전트: <span id="w-i-userAgent"></span></div>
<div>사용자의 언어: <span id="w-i-language"></span></div>
<div>웹 브라우저 창의 폭(너비): <span id="w-i-width"></span></div>
<div>웹 브라우저 창의 높이: <span id="w-i-height"></span></div>
</div>
<script>
document.getElementById('w-i-href').textContent = window.location.href;
document.getElementById('w-i-referrer').textContent = window.document.referrer;
document.getElementById('w-i-userAgent').textContent = window.navigator.userAgent;
document.getElementById('w-i-language').textContent = window.navigator.language;
document.getElementById('w-i-width').textContent = window.screen.width;
document.getElementById('w-i-height').textContent = window.screen.height;
</script>


[코드 설명]
자주 사용되는 것만 골라내었습니다. 그 중에서 사용자 에이전트(userAgent)는 접속한 사용자의 컴퓨터 운영체제와 웹 브라우저에 대한 정보를 담고 있는데, 이 정보로 사용자의 사용 환경에 최적화된 콘텐츠를 올바르게 제공할 수 있습니다.

JavaScript에서 최상위 객체인 window 객체는 생략할 수 있습니다.
예) window.location.hreflocation.href


[실행 결과]
현재 페이지의 URL: https://joshua-dev-story.blogspot.com/2020/09/javascript-ip.html
바로 전 페이지의 URI:
사용자의 에이전트: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
사용자의 언어: en-US
웹 브라우저 창의 폭(너비): 1280
웹 브라우저 창의 높이: 720
#소프트웨어 개발

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

댓글

댓글 쓰기