고정 헤더 영역
상세 컨텐츠
본문
기본적으로 본인 기기 아이피는 인터넷 검색으로 `내 아이피` 검색을 하면 정확하게 알 수 있다. PC에서도 콘솔 명령어를 통해 쉽게 아이피를 찾을 수 있는데 PC 같은 경우 공유기를 사용할 경우 내부 아이피(192.168과 같이..) 로 나오기 때문에 정확한 아이피는 검색을 통해 확인 하면 좋다.
네이버의 경우 내 아이피 검색 시 자신의 아이피를 보여준다.
그렇다면 웹상에서 접속한 기기의 아이피를 보여줄려면 어떻게 해야할까?
웹상 즉, 프론트단에서 순수 기술로 접속한 기기의 아이피를 가져올 수 있는 방법은 없다. 따라서 javascript 를 이용하여 API 서비스를 통해 IP를 가져오도록 구성해야한다.
기본적으로 IPIFY 에서 제공하는 무료 API 서비스가 있는데 간단한 요청만으로 아이피를 가져올 수 있다.
ipify - A Simple Public IP Address API
API Usage Using ipify is ridiculously simple. You have three options. You can get your public IP directly (in plain text), you can get your public IP in JSON format, or you can get your public IP information in JSONP format (useful for Javascript developer
www.ipify.org
만약 본인이 운영하는 티스토리 블로그에 적용하고 싶다면 하단의 소스를 스킨 편집을 통해 <head></head> 영역 내에 삽입하면 바로 사용이 가능하다.
<script>
// 무료 API 서비스를 이용하여 IP를 가져오고, 응답을 JSON으로 받는다.
$(function(){
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => { // data.ip 응답
$('body').append('<div style="width:880px; margin:0 auto;"><span style="background:#333; color:#fff; display:inline-block; padding:4px 10px;">'+data.ip+'</span></div>');
});
});
<script>
참고로 하단의 소스부분은 집접 블로그 위치나 스타일에 맞게 수정해서 사용하면된다.
$('body').append('<div style="width:880px; margin:0 auto;"><span style="background:#333; color:#fff; display:inline-block; padding:4px 10px;">'+data.ip+'</span></div>');
적용을 하게 되면 아래와 같이 노출이 된다.
'정보실 > 웹정보' 카테고리의 다른 글
| 블로그에 무지개 눈이 날리는 효과를 적용해보자 (1) | 2025.02.10 |
|---|---|
| 티스토리 개인 도메인 접근 시 티스토리 도메인으로 자동 이동되게 하는 방법 (2) | 2025.02.02 |
| 티스토리 스팸 댓글, 방명록 전체 삭제가 필요할 때 (4) | 2025.01.31 |