내 외부아이피를 조회하는 웹사이트를 만들려면, 서버 측에서 클라이언트의 IP 주소를 가져와 웹 페이지에 표시하는 간단한 웹 애플리케이션을 만들어야 합니다. 이를 위해 Node.js와 Express를 사용하여 서버를 구축하고, 클라이언트의 IP 주소를 반환하는 REST API를 생성한 후, 이를 프론트엔드에서 호출하여 표시할 수 있습니다.
1. Node.js와 Express 서버 설정
먼저 Node.js와 Express를 설치하고 서버를 설정합니다.
1. Node.js 프로젝트 초기화 및 Express 설치
mkdir ip-checker
cd ip-checker
npm init -y
npm install express
2. Express 서버 생성 (server.js 파일)
const express = require('express');
const app = express();
const path = require('path');
// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'public')));
app.get('/api/ip', (req, res) => {
const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
res.json({ ip });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
2. 클라이언트 측 설정
이제 클라이언트 측 HTML 파일과 JavaScript 파일을 설정합니다.
1. HTML 파일 (public/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP Checker</title>
<script defer src="script.js"></script>
</head>
<body>
<h1>Find My IP</h1>
<p id="ip-address">Fetching your IP address...</p>
</body>
</html>
2. JavaScript 파일 (public/script.js)
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch('/api/ip');
const data = await response.json();
document.getElementById('ip-address').textContent = `Your IP Address: ${data.ip}`;
} catch (error) {
console.error('Error fetching the IP address:', error);
document.getElementById('ip-address').textContent = 'Could not fetch IP address.';
}
});
3. 서버 실행
이제 서버를 실행합니다.
node server.js
4. 내 외부 아이피 테스트 및 소스코드
브라우저에서 http://localhost:3000에 접속하여 IP 주소가 표시되는지 확인합니다.
위에서 사용한 소스코드를 파일로 첨부합니다.
마치며 설명하자면,
- 서버 설정
- Express를 사용하여 기본 서버를 설정하고, 클라이언트의 IP 주소를 반환하는 /api/ip 엔드포인트를 만듭니다.
- 클라이언트 설정
- HTML 파일과 JavaScript 파일을 설정하여 서버에서 IP 주소를 가져와 페이지에 표시합니다.
- 정적 파일 제공
- public 디렉터리를 정적 파일 제공 디렉터리로 설정하여 HTML, CSS, JavaScript 파일을 제공합니다.
이 예제를 확장하여 더 많은 기능을 추가하거나, 디자인을 개선하여 원하는 웹사이트를 만들 수 있습니다.
이 글을 통해서 외부에서 접속하는 IP주소를 확인하는 웹 사이트를 만들어보세요.
'Project' 카테고리의 다른 글
| 전역일계산기 html, css, 자바스크립트무료웹사이트도구 만들기 (0) | 2023.11.29 |
|---|---|
| 실시간 글자 수 계산기 html, css, 자바스크립트로 무료웹사이트도구 만들기 (0) | 2023.11.27 |
| 주식자동매매 프로그램 만들기 뭐부터 할까? mysql 데이터베이스 구축 - WICS 분류 (0) | 2021.02.18 |
| 주식자동매매 프로그램 만들기 키움증권 KOA STUDIO 서버와의 정보교환에 실패하였습니다. 로그인방법 (0) | 2021.02.18 |
| 주식자동매매 프로그램 만들기 뭐부터 할까? 키움증권 OPENAPI (0) | 2021.02.17 |
