JavaScript IP 확인하기 (샘플 코드)
아이피 API 무료 서비스를 활용하면 순수한 JavaScript 코드 몇 줄만 작성해도 사용자(클라이언트)의 IP 주소를 확인할 수 있습니다.
IP 주소는 웹 페이지별 권한 확인(접속 제어), 방문자 분석(마케팅)에 사용될 수 있습니다. 우선 접속자의 IP 주소를 확인하려면 서버가 필요하지만 서버 없이 간편하게 구현할 수 있는 코드를 소개합니다. 추가로 window 객체 정보를 확인하는 코드도 있습니다. IP 주소와 더불어 window 객체 정보 또한 웹 애플리케이션 개발에 있어 유용하게 사용되는 사용자 정보에 속합니다. 그럼 본문의 내용을 확인하세요. (참고로 이 글에서는 접속자·사용자·클라이언트 모두 같은 대상을 가리키고 있습니다.)
IP 주소를 가져오기
[샘플 코드]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.200
(추가) window 객체 정보를 확인
[샘플 코드]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.href → location.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
대박 천재
답글삭제