React.js에서 사용자 위치를 얻는 방법: 실용 가이드

웹 애플리케이션은 점점 더 개인화되고 있습니다. 또한 여러 가지 이유로 위치 기반 서비스를 사용하는 웹 애플리케이션이 증가하고 있습니다. 개인 정보 보호, 보안 또는 특정 위치 기반 기능이 될 수 있습니다.

사용자의 위치를 알면 개인화된 콘텐츠, 우수한 보안 , 일기 예보, 더 많은 현지화, 더 나은 사용자 경험과 같은 다양한 기능을 쉽게 제공할 수 있습니다. 개발자로서 웹 애플리케이션에 대한 사용자 위치를 얻는 방법을 아는 것이 중요합니다. 이 기사에서는 React.js 와 같은 최신 웹 기술을 사용하여 사용자의 위치를 얻는 방법에 대한 단계별 지침을 안내합니다. 사용자의 IP 주소를 얻는 다양한 방법과 사용자로부터 더 많은 지리적 위치 데이터를 얻는 방법을 다룰 것입니다. 자, 시작해 봅시다!

IP 또는 지리적 위치란 무엇입니까?

먼저 IP 또는 IP 주소가 무엇인지 이해해 봅시다.

모든 집에 고유한 번호나 주소가 있는 것처럼 인터넷을 사용하는 각 장치에는 고유한 주소가 있습니다. 이 장치의 고유 주소를 IP 주소 라고 합니다. 이는 장치가 인터넷을 통해 서로 통신할 수 있도록 도와줍니다.

여기서 IP는 "인터넷 프로토콜"을 의미하며, 이는 장치가 인터넷을 통해 서로 통신하는 데 사용하는 규칙 집합입니다. 이제 Geolocation을 이해해 보겠습니다.

지리적 위치는 두 단어의 조합입니다. 첫 번째는 지구를 의미하는 “Geo” 이고, 두 번째는 지구상에서 사물이 위치한 곳을 의미하는 “ location” 입니다.

따라서 "IP-Geolocation"은 IP 주소를 기반으로 장치가 물리적으로 어디에 있는지 찾는 방법입니다. IP-Geolocation 데이터의 정확성은 데이터를 가져오는 데 사용되는 방법, 데이터 품질, 장치 유형 등과 같은 다양한 요소에 따라 달라집니다. 모바일 장치에서는 네트워크가 자주 변경되므로 데이터의 정확성이 떨어질 수 있습니다. 이제 React에서 사용자의 IP 주소를 얻는 방법을 살펴보겠습니다.

사용자 위치 가져오기

사용자의 위치를 알아낼 수 있는 방법에는 여러 가지가 있습니다. 이 기사에서는 모든 브라우저에서 지원되는 Geolocation API를 사용할 것이며 이를 사용하기 위해 다른 타사 라이브러리를 설치할 필요가 없습니다. 더 많은 데이터를 얻으려면 Geocoding API 와 같은 타사 서비스의 API를 사용할 수 있습니다.

먼저 vite를 사용하여 React 앱을 만들어 보겠습니다. CMD 또는 터미널을 열고 프로젝트 폴더를 찾아 다음 명령을 사용하십시오.

• npm create vite@latest your-app-name

위 명령을 실행하면 프레임워크 목록이 표시됩니다. 이제 화살표 키를 사용하여 목록에서 React를 선택하고 Enter를 누르세요.

• 이제 변형 목록이 표시됩니다. 해당 변형에서 Javascript를 선택하세요. 그런 다음 앱 이름으로 폴더를 만들고 필요한 모든 파일을 추가합니다. 이제 다음 명령을 사용하여 필요한 모든 라이브러리를 설치하고 개발 서버를 실행하십시오.

  
  

  • cd your-app-name 이 명령은 현재 디렉터리를 앱 디렉터리로 변경합니다.
  • npm install 이 명령을 사용하여 필요한 모든 라이브러리를 설치합니다.
  • npm run dev 이 명령은 아마도 localhost:5173에서 개발 서버를 시작합니다.

  
  

이제 개발 서버가 실행 중이므로 사용자의 IP 주소를 가져오겠습니다.

Geolocation API를 사용하여 사용자의 위도 및 경도 정보 가져오기

Geolocation API를 사용하면 사용자가 원할 경우 자신의 위치를 제공할 수 있습니다. 이 방법은 사용자가 자신의 위치에 대한 액세스 권한을 부여한 경우에만 작동합니다. 그렇지 않으면 이 브라우저 기반 API가 IP 주소를 얻을 수 없습니다. 웹 애플리케이션의 기능이 실제로 사용자의 위치를 요구하는 경우 사용자에게 좋은 문자 메시지를 표시하고 위치가 필요한 이유를 알릴 수 있습니다.

이 Geolocation API는 Geolocation 개체를 반환할 수 있는 속성인 navigator.geolocation 에 대한 호출을 통해 액세스됩니다. navigator 가 무엇인지 살펴보겠습니다.

• 네비게이터(navigator): 유저 에이전트(브라우저)의 상태와 아이덴티티를 나타내는 인터페이스이다. 이 네비게이터를 기록하고 그것이 제공하는 다른 속성을 살펴보겠습니다.

  
  

  App.jsx 파일을 열고 return 문 내부의 모든 코드를 정리하고 상위 div App 클래스로 유지한 다음 다음 코드에 제공된 대로 useEffect 내에서 console.log(navigator) 사용합니다.

  
  

 import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App;

개발 서버 탭에서 F12 키를 누르거나 마우스 오른쪽 버튼을 클릭하여 콘솔을 엽니다. appCodeName , Bluetooth , 클립보드 , 위치정보 등과 같은 다양한 속성 목록이 표시됩니다. 위치정보를 기록해 보겠습니다. console.log(navigator.geolocation) 과 같이 로그에 지리적 위치를 추가하기만 하면 됩니다. 현재로서는 지리적 위치에 액세스할 수 있는 권한이 없기 때문에 콘솔에는 빈 개체가 표시됩니다. 따라서 이 권한을 얻는 방법을 살펴보겠습니다. 다음 코드와 설명을 확인해 보세요.

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

위의 useEffect 에서는 먼저 네비게이터가 있는지 확인합니다. 지리적 위치 여부와 그것이 사실이라면 권한을 확인하겠습니다.

여기,

• navigator.permissions: 권한 상태를 쿼리하고 업데이트하는 데 사용할 수 있는 권한 개체를 반환합니다.

• 쿼리: 사용자 권한 상태를 반환하는 Permission 메서드입니다. 쉼표로 구분된 이름-값 쌍 목록이 있는 객체를 사용합니다. 여기서는 지리적 위치 권한 상태를 알고 싶기 때문에 지리적 위치를 전달했습니다.

  
  

  여기서는 약속을 얻었으므로 then 키워드를 사용하고 결과를 기록할 것입니다. 브라우저의 콘솔을 확인하면 다음과 같은 객체를 볼 수 있습니다.

   { name: "geolocation", onchange: null, state: "prompt" }

상태는 3가지 다른 값을 가질 수 있습니다.

• 부여됨: 이는 위치 정보에 직접 액세스할 수 있도록 위치에 액세스할 수 있는 권한이 있음을 의미합니다.
• 프롬프트: 사용자에게 권한을 요청하는 팝업이 표시됩니다.
• 거부됨: 이는 사용자가 자신의 위치 공유를 거부했음을 의미합니다.

"허가됨" 및 "프롬프트" 상태의 경우 사용자의 현재 위치를 가져오는 함수를 만들 수 있지만 " 거부됨 " 상태의 경우 브라우저에서 위치 권한을 활성화하는 방법에 대한 지침을 표시할 수 있습니다.

참고: 사용자가 브라우저에서 수동으로 활성화하지 않는 한 사용자가 이미 위치 권한을 거부한 경우 위치 권한을 다시 묻는 메시지를 표시할 수 있는 방법이 없습니다.

3가지 권한 상태 모두에 대해 3가지 조건을 다음과 같이 사용하겠습니다.

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

prompt 상태에서 getCurrentPosition 이라는 함수를 사용해 보겠습니다. 이 함수는 다음 인수를 사용합니다.

• 성공 : 위치 검색에 성공하면 호출되는 콜백 함수입니다.
• error : 위치 검색에 오류가 있는 경우 호출되는 콜백 함수입니다. 이는 선택사항입니다.
• options : 옵션은 maximumAge, timeout, enableHighAccuracy 등과 같은 다양한 매개변수를 사용합니다. MDN 문서에서 이러한 옵션에 대한 자세한 내용을 읽을 수 있습니다. 이것도 선택 사항입니다.

세 가지 인수를 모두 구현해 보겠습니다. 먼저 성공 함수를 만들어 보겠습니다. useEffect 앞에 다음 성공 함수를 추가합니다.

 function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }

이 콜백 함수는 좌표 를 의미하는 좌표가 있는 위치 객체를 반환합니다. 좌표에서 위도 , 경도 , 정확도 등의 값을 얻을 수 있습니다. 이제 성공 함수 뒤에 다음 오류 함수를 추가합니다.

 function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }

옵션 객체도 선언해 보겠습니다.

 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, };

이제 "프롬프트" 및 "허가됨" 조건에 다음 줄을 붙여넣고 브라우저에서 출력을 확인하세요.

 navigator.geolocation.getCurrentPosition(success, errors, options)

브라우저에 위치 권한을 요청하는 메시지가 하나 표시됩니다. 권한을 부여하면 콘솔 탭에서 좌표 값을 볼 수 있습니다. 전체 코드는 다음과 같습니다.

 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App;

그게 다야. 이것이 모든 장치의 위도 및 경도 값을 쉽게 얻을 수 있는 방법입니다. 이제 이 정보로는 충분하지 않으므로 opencage의 역지오코딩 API를 사용하여 사용자 위치에 대한 더 많은 정보를 얻어보겠습니다.

역지오코딩으로 위치 기반 서비스 향상

우리는 이미 사용자 장치에 대한 위도 및 경도 정보를 얻었습니다. 이제 이를 사용하여 위치에 대한 추가 정보를 얻는 방법을 살펴보겠습니다. 위치에 대한 자세한 정보를 얻기 위해 opencage 의 API를 사용할 것입니다. 따라서 가입하고 API 키를 받으십시오. Opencage는 무료 평가판에서 하루 2,500개의 요청을 제공하므로 비용을 지불할 필요가 없습니다. 가격 에 대한 자세한 정보는 해당 웹사이트에서 확인할 수 있습니다. 저는 무료 평가판이 있고 CORS 제한도 없기 때문에 Opencage의 API를 사용했습니다. 이제 이 API를 사용하는 함수를 만들어 보겠습니다.

 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); }

이 getLocationInfo 함수는 위도와 경도를 가져온 다음 위도, 경도 및 API 키를 가져오는 opencage 문서 의 URL을 사용합니다. 이 함수에서는 가져오기를 사용하여 URL에서 데이터를 가져왔고 상태 코드가 200 이면 위치 상태에 데이터를 저장합니다. 브라우저에서 콘솔을 확인하여 어떤 유형의 데이터를 얻고 있는지 확인할 수 있습니다. 지금은 형식이 지정된 속성의 값을 사용하고 있습니다. 응답 객체 에 대한 자세한 정보를 얻으려면 설명서를 확인하세요. 이제 이미 정의한 성공 함수에서 이 함수를 호출해 보겠습니다.

 function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); }

이제 사용자가 자신의 위치 제공에 동의할 때마다 성공 함수가 실행되고 위도 및 경도 정보를 getLocationInfo 함수에 전달하여 실행합니다. 이 위치 상태를 사용하여 웹 앱에 위치를 표시할 수 있습니다.

전체 코드는 다음과 같습니다.

 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App;

API나 함수가 데이터를 제대로 가져올 수 없을 때 오류 메시지를 표시하는 오류 상태도 구현할 수 있습니다. 또한 함수에 대해 필요한 오류 처리 방법도 구현합니다. 이를 통해 장치 위치에 대한 많은 정보를 얻을 수 있습니다. 이제 장치의 IP 주소를 얻는 방법을 살펴보겠습니다.

사용자의 IP 주소 얻기

클라이언트 측에서 사용자의 IP 주소를 얻으려면 간단한 공용 IP 주소 API인 ipify를 사용합니다. 다음 코드 블록에 표시된 대로 또 다른 useEffect 생성하고 IP 주소를 가져오는 함수를 생성합니다.

 const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []);

위 코드에서는 IP 주소를 저장하기 위해 ipAddress 라는 하나의 상태를 만들었습니다. ipfy 는 공개 API이므로 API 키가 필요하지 않으며 URL을 직접 사용할 수 있습니다. useEffect 에서 우리는 ipAddress 상태에서 IP 주소를 가져오고 저장하는 fetchIp 라는 하나의 비동기 함수를 만들었습니다. useEffect 에서 fetchIp 함수를 호출하는 것을 잊지 마세요.

이것이 장치의 IP 주소를 쉽게 얻을 수 있는 방법입니다. 이러한 서비스를 제공하는 여러 API가 있습니다. 서버 측의 경우 일반적으로 웹페이지나 데이터를 가져오기 위해 사용자가 보낸 요청에서 IP 주소를 얻을 수 있습니다. 그러나 일부 ISP는 공유 IP 주소를 사용하므로 IP 주소에만 의존해서는 안 됩니다. 이는 여러 사용자가 동일한 IP 주소를 가질 수 있음을 의미합니다. 또한 일부 사용자는 VPN과 프록시도 사용합니다.

사용자 위치 데이터 수집 및 처리 모범 사례

사용자 데이터는 모든 애플리케이션에서 항상 중요한 부분입니다. 개발자로서 사용자 중심적이고 사용자 데이터를 보호하는 애플리케이션을 만드는 것이 우리의 임무입니다. 장치의 위치와 같은 데이터의 경우 개발자는 다음과 같은 많은 문제에 직면할 수 있습니다.

• IP 또는 지리적 위치 데이터는 얼마나 정확합니까?
• 사용자가 위치 사용에 동의하지 않는 경우 어떻게 해야 합니까?
• 데이터를 안전하게 처리하고 보호하는 방법은 무엇입니까?

위치 기반 기능을 구현하는 것은 어려울 수 있지만 모범 사례를 따르면 사용자에게 더욱 개인화되고 안전한 경험을 제공할 수 있습니다. 위치 기반 데이터를 처리할 때 다음 사항에 유의하세요.

• 정확성: IP 주소를 사용할 때는 둘 이상의 API를 사용하여 다시 확인하고 위치를 교차 확인해야 합니다. 위치 기반 서비스 및 기능에 대체 메커니즘을 포함해야 합니다. 위치 정보는 기기 설정, 네트워크 연결 등의 요인에 의해 영향을 받을 수 있으므로 데이터를 확인하는 것이 좋습니다.

  
  

• 개인정보 보호: 이는 여러 국가의 다양한 법률을 준수해야 하기 때문에 사용자 데이터를 수집할 때 가장 중요한 문제입니다. 개발자는 항상 사용자의 개인정보를 존중해야 합니다. 사용자로부터 데이터를 수집하는 경우 명확하고 간결한 개인 정보 보호 정책이 필요합니다. 민감한 정보를 수집할 때마다 사용자에게 알려야 합니다. 위치 기반 기능이 있는 경우 해당 데이터를 사용하는 이유와 방법을 명확하게 보여야 합니다. 또한 사용자에게 선택 해제 옵션을 제공하여 사용자가 자신의 데이터를 공유하고 싶지 않은 경우 쉽게 선택 해제할 수 있도록 해야 합니다.

  
  

• 보안: 데이터 보안을 위해 OAuth 또는 JWT와 같은 인증 메커니즘을 구현하고 무단 액세스로부터 API 엔드포인트를 보호할 수 있습니다. 항상 사용자에게 강력한 비밀번호를 사용하고 브라우저를 업데이트하도록 제안해야 합니다. 클라이언트와 서버 간의 보안 통신을 보장하려면 HTTPS 및 SSL 인증서를 사용하여 데이터를 암호화해야 합니다. 백엔드에서는 관리자 등 선택된 사용자만 데이터에 접근할 수 있도록 역할 기반 접근 제어를 구현할 수 있습니다. 종속성을 업데이트하기 전에 항상 그것이 공식 소스에서 나온 것인지 아닌지 확인해야 합니다.

  
  

  결론

  위치 데이터는 사용자의 개인화된 경험에 있어 중요한 역할을 하지만 이 데이터를 처리하는 것도 중요한 작업입니다. 위치 데이터를 가져오는 데 사용할 수 있는 다양한 방법이 있지만 필요한 데이터 양에 따라 다릅니다. IP 주소만 필요한 경우 ipify API를 사용할 수 있고 더 많은 위치 정보 데이터가 필요한 경우 다음 중 하나를 사용할 수 있습니다. opencage 또는 Google의 역지오코딩 API 도 사용할 수 있습니다. 날씨 앱과 같은 소규모 애플리케이션을 구축하는 경우 브라우저의 Geolocation API를 사용할 수 있으므로 API를 사용할 필요가 없습니다. 이러한 데이터의 보안 및 개인 정보 보호에 관해서는 잘 작성된 개인 정보 보호 정책을 제공하여 사용자의 개인 정보와 관련된 잠재적인 위험을 피해야 합니다. 이것으로 이 글을 마치겠습니다. 마음에 드셨으면 좋겠습니다.

  
  

  • DevDreamning 이라는 내 웹사이트를 확인해 보세요.
  • 내 유튜브 채널👇😉