미라클 메모리todoList 기능을 추가함과 동시에 날씨에 대한 정보를 불러오고 싶었다. 그렇기에 날씨 정보를 무료로 제공하는 OpenWeatherMapAPI를 사용하자.
useEffect(() => {
if (localStorage.getItem("location")) return;
getPosition();
}, []);
App 컴포넌트가 렌더링 되었을 때 location 정보를 불러오기 위해서 클라이언트의 위도와 경도 정보를 localStorage에 저장한다.
export const getPosition = () => {
const successCallBack = (position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude,
};
localStorage.setItem("location", JSON.stringify(coordsObj));
};
const errorCallBack = () => {
console.log("Location is not correct");
};
const getCoords = () => {
navigator.geolocation.getCurrentPosition(successCallBack, errorCallBack);
};
getCoords();
};
getCoords 함수를 동작시킨다. 함수가 동작하면 윈도우 객체의 navigator 함수를 사용한다. Web API인 navigator를 사용하면 다양한 정보를 얻을 수 있다. 그중에서도 장치의 위치 정보에 접근할 수 있는 geolocation 속성을 사용하여 위치정보를 조회 할 예정이다. Geolocation 객체를 반환한다.
Navigator.geolocation
Navigator.geolocation 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation
객체를 반환합니다. 웹 사이트나 웹 앱은 위치정보를 사용해 결과 화면을 맞춤 설정할 수 있습니다.
메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. getCurrentPosition()은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.
<aside> 📲 getCurrenPostion 함수에 성공적으로 위치값을 받아왔을 때 실행할 콜백과 에러가 발생했을 때 발생할 콜백을 전달한다.
</aside>
const successCallBack = (position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude,
};
localStorage.setItem("location", JSON.stringify(coordsObj));
};
Geolocation API를 통해 얻은 경도와 위도의 정보를 LocalStorage에 저장한다. 사실 안전한 방법은 아니다. 계속해서 마음에 걸린다. 나중에는 꼭 서버 운영하는 법을 배워서 서버에 저장해야 할 것 같다.