✏️ 무엇을 배웠나
1. 함수 반환값이 undefined일 때 대처법
axios로 get 요청을 하는 getDusty 함수는 네트워크 및 콘솔에서 잘 들어오는 것이 확인되는데,
useQuery로 받아오는 data 값이 undefined로 찍혔다.
일단 get요청 자체에는 문제가 없으니 의심이 되는 건
1. useQuery를 똑바로 사용하고 있는지
2. getDusty <-> useQuery 사이 데이터 흐름에는 문제가 없는지
일단 useQuery에는 문제가 없었다.
data만 undefined고 isLoading이나 다른 건 멀쩡하게 나왔음.
그러면 데이터 흐름 자체에 문제가 있다는 것.
혹시 몰라서 getDusty 쪽에 return을 해주니까 바로 됐음.
왜 그랬을까? 답은 간단함.
함수는 항상 무언가를 반환합니다. return 문이 없는 경우는 undefined를 반환합니다. (출처 : ko.javascript.info)
- getDusty가 데이터를 가져온다
- useQuery에 넘겨준다
이런 흐름인데 1번에서 데이터가 undefined니까 당연히 안 넘어간 것. 또 기본적인 사항에 걸려 넘어진 거네 😇
2. geolocation API / kakaomap API 사용
사용자 위치를 받아 해당 위치의 미세먼지 농도를 알려주는 간단한 앱을 만들면서 그동안 공부한 것들을 적용해보고 있다.
위치 정보를 가져오는 geolocation API와 kakaompa API를 사용해서 경도와 위도를 한국 주소지로 바꿔주는 로직을 만들었고 성공했다.
const [addresses, setAddresses] = useState('');
useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
getAddress(lat, lng);
});
}, []);
const getAddress = (lat, lng) => {
let geocoder = new kakao.maps.services.Geocoder();
// 중략geolocation API는 mdn 문서만 봐도 사용할 수 있었지만 kakaomap API는 사용하기 어려워서 구글링으로 많은 문서를 참고해 사용했다.
🥵 오늘의 에러
문제 발생 맥락
- Geolocation API으로 받아온 경도와 위도를
- Kakao Map API Servies Library가 한국 주소로 변환하고
- 주소지 정보가 담긴 객체를 반환함
문제
- 웹 접속 시, 3의 객체에 담긴 region_2depth_name 프로퍼티가 종종 null값으로 반환됨.
웹을 접속할 때마다 랜덤에 가까울 정도로 값이 정상으로 반환되었다가 null값을 반환하기를 반복하고 있음. 문제의 원인은 kakao api 자체에 있거나 해당 api 처리를 담당하는 파트의 코드에 문제가 있을 거라고 추론하고 있음.
새로고침 계속하면 되긴 하지만, 사용성에 문제가 있음.
그래서
- 현재 에러 처리가 안 되어 있기 때문에 통신 상태에 따라 에러 처리를 해 줄 것
일단은 코드가 문제인지 서버가 문제인지 판별해야 함. 에러 메시지의 스택을 봐서는 kakao map API와 관련된 것만은 확실한 것 같다.
문제의 에러 메세지
Main.jsx:24 Uncaught TypeError: Cannot read properties of null (reading 'region_2depth_name')
at a (Main.jsx:24:48)
at services.js:7:1
at Object.oncomplete (services.js:6:194)
at a.onreadystatechange (services.js:5:328)🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 에러 처리 / 서버가 죽는지 판별하는 법
🏷️ 오늘의 코멘트
타입스크립트가 꽤 어렵네...
