React : IP 지리 위치를 사용하는 방법

React 웹 사이트에서 IP 지리 위치 추적을 구현하려면 이 튜토리얼의 단계를 따르십시오. 그러면 IP 주소로 지리 위치 데이터를 가져올 수 있습니다.

요즘 대부분의 웹사이트들은 IP 지리정보를 활용하여 다양한 목적을 달성하고 있습니다. 웹사이트의 내용을 현지화하거나 웹사이트 방문자의 지리정보를 바탕으로 정확한 번역문을 표시할 수 있습니다. IP 지리정보는 웹사이트 방문자의 IP 주소만으로 지리정보 데이터베이스나 웹서비스에서 검색할 수 있습니다. 일반적으로 사용되는 지리정보는 방문자의 국가, 지역, 도시를 포함합니다.

IP2Location.io 의 서비스를 사용하여 React로 구축된 웹 사이트에 IP 지리 위치 서비스를 구현하는 방법을 설명합니다. 이를 위해 React, Node.js, Express 및 IP2Location.io 모듈을 설치해야 합니다. 아래는 각 구성 요소에 대한 간단한 설명입니다.

React는 프런트 엔드 개발에 사용되거나 웹 페이지라고 할 수 있습니다. 개발자들이 재사용 가능한 UI 구성요소를 구축하고 응용프로그램의 상태를 효과적으로 관리할 수 있도록 해주는 사용자 인터페이스를 구축하는 데 널리 사용되는 JavaScript 라이브러리입니다.

Node.js는 개발자가 서버 측에서 JavaScript를 실행할 수 있는 오픈 소스 서버 환경으로, V8 JavaScript 엔진을 기반으로 구축되었으며 확장 가능하고 고성능의 웹 애플리케이션을 구축할 수 있는 강력한 라이브러리 및 도구 세트를 제공합니다.

Express는 강력한 API, 웹 애플리케이션 및 기타 유형의 서버 측 애플리케이션을 구축하는 프로세스를 간소화하는 널리 사용되는 Node.js 웹 애플리케이션 프레임워크로, React와 Node.js 간의 통신에 사용되는 프레임워크입니다.

IP2Location.io 은 위치정보에 실시간 IP주소를 제공하는 지리적 위치정보 서비스로, 지리적 위치, ISP, 도메인, 사용형태, 프록시 등 IP주소에 대한 중요한 정보를 파악할 수 있어 다양한 응용분야에서 유용하게 활용할 수 있습니다.

 

 

React : IP 지리 위치를 사용하는 방법

 

 

1단계: Node.js 설치 및 설정

"my-project"라는 새 프로젝트를 만듭니다. 프로젝트 폴더 내에서 다음 명령을 실행하여 Node.js 프로젝트를 초기화하십시오:

npm init

 

 

2단계: Express 모듈 설치

다음으로 Express 패키지를 설치합니다. 설치하려면 다음 명령을 실행하십시오.

npm install express

 

 

성공적으로 완료되면 my-project 폴더 안에 app.js라는 이름의 새 파일을 만드십시오.

그런 다음 App.js 파일을 열고 아래 코드를 입력합니다.

const express = require('express');

const app = express();

app.get('/', (req, res)=>{
res.json({description: "Hello My World"});
})

app.listen(9000, ()=>{
console.log("Server started at port 9000");
})

 

 

위의 코드는 끝점이 "/"인 REST API를 생성합니다. 이 노드 프로젝트는 포트 9000에서 REST API 요청을 수신합니다. 요청을 수신하면 단일 키-값 쌍 {description: "Hello My World"}이(가) 포함된 JSON 문자열을 반환합니다.

다음 명령을 실행하여 테스트용 코드를 실행합니다.

node app.js

 

 

그런 다음 localhost 환경에서 테스트하는 경우 브라우저를 열고 "http://localhost:9000"을 입력하면 화면에 JSON 문자열이 표시됩니다.

 

 

3단계: IP2Location.io 을 사용하여 IP 지리 위치 구현

CTRL+C 명령을 사용하여 Node.js 프로젝트를 중지한 다음 my-project 폴더에서 아래 명령을 실행하여 ip2location.io Node.js 패키지를 설치합니다.

npm install ip2location-io-nodejs

 

 

설치가 성공적으로 완료되면 app.js 코드를 수정하여 프로젝트 내부에 지리 위치 기능을 추가할 수 있습니다.

const express = require('express');
const {Configuration, IPGeolocation} = require('ip2location-io-nodejs');

const app = express();

app.get('/', (req, res)=>{
    let mykey = "YOUR_API_KEY";
    let config = new Configuration(mykey);
    let ipl = new IPGeolocation(config);
    let myip = req.query.ip;;

    ipl.lookup(myip)
    .then((data) => {
        // reply the data in json format
        res.json({"Country Name": data.country_name,
                    "Region Name": data.region_name,
                    "City Name": data.city_name})
    })
    .catch((error) => {
        // reply the error
        res.status(500).json({'Error found': data})
    });
})

app.listen(9000, ()=>{
    console.log("Server started at port 9000");
})

 

 

위의 코드는 사용자가 API 호출을 호출할 때 res.query.ip에서 얻은 방문자의 IP를 사용하여 IP 지리 위치를 지정하고, 국가명, 지역명, 도시명 등 3가지 지리 위치 정보를 호출자에게 회신합니다.

위의 코드 섹션이 작동하려면 API 키가 필요하며 무료 계정으로 가입할 수 있습니다. 또한 이 예에서는 국가, 지역 및 도시 정보만 반환합니다. ISP, 도메인, 사용 유형, 프록시 등 다른 정보를 얻고자 하는 경우 개발자 설명서를 방문할 수 있습니다.

IP 주소가 미국, 캘리포니아, 마운틴 뷰에서 온 것으로 가정했을 때 위의 구현 스크린샷은 다음과 같습니다:

 

 

4단계: React를 사용하여 프런트 엔드 설정

이제 프론트 셋업 시간입니다. my-project 폴더 안에서 아래 명령을 실행하여 my-app이라는 이름의 react 프로젝트를 생성합니다.

npx create-react-app my-app

 

 

my-app 프로젝트 내에 axios 패키지를 설치합니다. 이 패키지는 Node.js 프로젝트에서 결과를 가져오는데 필요합니다.

npm install axios

 

 

그런 다음 아래 코드를 my-app 폴더 안에 있는 App.js 파일에 붙여넣습니다.

import logo from './logo.svg';
import './App.css';
import React from "react";
import { useEffect, useState } from "react";
import axios from 'axios';

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        axios.get('http://127.0.0.1:9000/')
        .then(response => {
            setData(response.data);
        })
        .catch(error => {
            console.error(error);
        });
    }, []);

    return (
        <div>  
            <p>This is the result from IP2Location.io</p>
            <p>Country Name: {data.country_name}</p>
            <p>Region Name: {data.region_name}</p>
            <p>City Name: {data.city_name}</p>
         </div>  
    );
};

export default App;

 

 

위의 코드는 useState 및 useEffecthooks를 사용하여 axios 라이브러리를 사용하여 REST API에서 데이터를 가져옵니다. 이 데이터는 백엔드(Node.js + Express)에서 검색되어 웹 페이지에 표시됩니다.

완료되면 다음 명령을 입력하여 반응 프로젝트를 실행할 수 있습니다:

npm start

 

 

React를 실행할 때 네트워크 오류가 발생하면 Node JS 프로젝트에서 Cors 패키지를 사용하도록 설정해야 할 수 있습니다. 그렇게 하려면 프로젝트로 돌아가서 노드의 실행을 중지하십시오. 그런 다음 다음 명령을 사용하여 Cors를 설치하십시오:

npm install cors

 

 

작업이 완료되면 app.js 파일을 열고 아래와 같이 cors 패키지를 추가합니다:

const express = require('express');
const {Configuration, IPGeolocation} = require('ip2location-io-nodejs');
const cors = require('cors')

const app = express();
app.use(cors());

 

 

결론

결론적으로, 본 튜토리얼은 Reactbuild 웹사이트에서 IP2Location.io 을 사용하여 IP 지리 위치를 성공적으로 구현하는 방법에 대한 상세한 가이드를 제공합니다. 이 튜토리얼은 Node.js 및 Express의 설치 및 설정뿐만 아니라 IP2Location.io 모듈을 설치하는 방법에 대한 자세한 설명을 제공합니다. 또한 React를 사용하여 프론트 엔드를 설정하는 방법에 대한 포괄적인 설명을 포함합니다.

이 튜토리얼에서 제공하는 단계별 지침을 따르면 리액트 빌드 웹 사이트에서 IP 지리 위치를 성공적으로 구현할 수 있을 뿐만 아니라 잠재적인 응용 프로그램과 이점에 대해 더 깊이 이해할 수 있습니다.