google Elevation Api를 사용할 때 월에 5000회만 무료라는 제약이 걸려있었다.
초기에 진행한 코드는 단말 기기의 리스트를 띄울 때마다 API를 불러와 사용했다. 이 코드는 같은 주소의 고도를 로드될 때마다 불러온다는 문제점이 있었다.
그래서 DB에 elevation column을 추가하고
사용자가 주소 정보를 지정하고 저장버튼을 클릭할 때 elevation에 저장이 되도록 설정하였다.
formik를 통해 지정해 준 후 formik.handlesubmit()을 통해 저장이 되는데, API를 불러오기 전에 formik.handleusubmit이 먼저 실행이 되어서 저장이 안되는 문제점이 발생했다.
그래서, setTimeout을 통해 formik.handlesubmit을 딜레이 후 실행되도록 해주었다.
<Button
type={'submit'}
color={'info'}
//isOutline={true}
// isDisable={!formik.isValid}
onClick={async() => {
if (!formik.isValid) {
showNotification(t('사용자 추가'), t('필수값을 확인해주세요.'), 'danger');
} else {
await getElevation(formik.values); // elevation 값이 업데이트될 때까지 기다림
console.log("!!!!!!!!!!!!!!!!!!!!", formik.values.elevation);
setTimeout(() => {
console.log("최종 elevation 값:", formikRef.current.values.elevation);
formik.handleSubmit(); // 값이 업데이트된 후에 저장
}, 100); // 약간의 딜레이 후 실행
}
}}
>
{selectedUser?.id ? t('수정') : t('등록')}
</Button>아래는 getElevation 함수이다.
const getElevation = async (device) => {
const lat = device?.lat;
console.log("lat주소", lat);
const lng = device?.lng;
console.log("lng주소", lng);
const proxyUrl = "https://cors-anywhere.herokuapp.com/";
const targetUrl = `https://maps.googleapis.com/maps/api/elevation/json?locations=${lat},${lng}&key=--------`;
try {
const response = await fetch(
(proxyUrl + targetUrl));
const data = await response.json();
if (data.status === "OK") {
const elevation = data.results[0].elevation;
console.log("✅ Elevation 값 가져옴:", elevation);
await formik.setFieldValue('elevation', elevation); // ✅ 값을 강제 대기 후 설정
} else {
console.error("Elevation API Error:", data.status);
//alert("고도를 가져오지 못했습니다.");
}
} catch (error) {
console.error("Error fetching elevation:", error);
}
};저장이 된 DB를 통해 메인 페이지에서는 아래와 같이 불러왔다.
<div style={{color: '#27547b', fontSize: '1.5rem', marginTop: 0 }}><strong>{d?.install?.elevation.toFixed(2)}m</strong></div>DB에도 지정해주기 위해 install.model.js에 아래 코드를 추가해주었다.
elevation: {
type: DataTypes.DOUBLE,
},그 결과 아래와 같이 제대로 값이 나오는 것을 확인할 수 있다.
