하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
어드민 구현은 여전히 진도가 더지지만 오늘은 뭔가 살짝 재미있는 요소(?)가 있는 하루였다.
어제부터 끙끙 앓으면서 새로운 장소 추가하는 form을 구현했는데 뭔가 한가지 걸리는 점이 있었다.
어찌 저찌 장소가 추가는 되는데... 결국 이 장소를 지도에 띄우기 위해서는 주소에 대한 위도, 경도를 어디선가 받아와서 함께 저장을 해 줘야한다.
구글링을 해보니 위도, 경도를 검색하는 방법들이 몇 개 있었는데, 그 중에서도 원래 사용하고 있던 카카오 지도 API 중에서 관련 기능을 제공하는 부분이 있어 이를 활용해야겠다 생각했다.
사실 위도/경도 받아오는 것보다 정확한 주소를 받는 것이 먼저였다.
등록을 원하는 장소의 주소가 명확하지 않을 경우 위도/경도를 그 주소에 맞추어 받아오는 것이 의미가 없다.
그래서 다른 동료가 먼저 사용하고 있던 다음 우편번호 검색 library를 사용해보았다.
링크는 아래 참고.
https://www.npmjs.com/package/react-daum-postcode
내 상황에 맞게 약간 변형하여 사용했다. 나는 배송지와 관련된 정보가 필요한게 아니라서 우편번호 필드는 뺐고, 다만 정-말 간혹가다가 도로명 주소 또는 지번 주소 중에서 하나만 존재하는 경우가 있어 부득이 두 개 필드를 모두 살려두었다.
처음엔 정상적으로 돌아가는 줄 알았는데, 이상하게 지번으로 검색해서 지번 주소를 누르는 순간 주소가 입력되지 않는 현상이 나타났다.
알고보니 예시로 나온 코드에서 J 타입, 즉 지번 타입의 주소는 처리하지 않고 R 타입(도로명주소) 주소만 처리하도록 되어 있었다.
왜 그런건지 아직도 이해는 안가지만 ;; 그래도 실험삼아 한두개 예시를 쳐보기도 하고 마치 코딩테스트 마냥 엣지케이스를 찾아보고자 극단적인 주소(예. 사서함)를 검색하다가 발견한 사실인데 매번 느끼지만 modal도 그렇고.. 믿을만한 라이브러리라고 너무 생각없이 써서는 안되겠다는 생각이 새삼 들었다.
어쨌든, 주소 입력은 정상적으로 돌아가고...
이 주소를 가지고 어떻게 좌표값을 받아올지 솔직히 고민스러웠는데 구글링을 하면서 헤매다 보니 카카오 맵에서 Geocoder라는 기능을 제공하는데 사용자가 주소를 입력하면 그에 맞는(유사한) 좌표값(위도, 경도)을 반환해주는 것이었다.
그래도 정-말 다행스럽게 카카오 지도를 한 번 써봐서 그런지 오랜 시간을 투입하지 않고 위도와 경도를 받아올 수 있었다.
const { kakao } = window;
// 코드 중간 생략
const geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(fullAddress, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
const { x, y } = result[0];
changeLongitude(x);
changeLatitude(y);
}
});이 위도, 경도값을 도대체 어떻게 검색을 하고 받아와야 할지 막막하기만 했었다 정말. 근데 의외로 너무 심플하게 해결되어 다행이란 생각이..ㅎㅎ
기분이 살짝 좋아져서(ㅋㅋ;) 동료들을 한명씩 붙잡고 지도에 장소를 등록해줄터이니 집주소를 내놓으라고 협박 아닌 협박을 하고 ㅋㅋㅋ 아래와 같이 장소를 등록시켜보았다.
ㅋㅋ.. 각자 사는 집 주소를 입력하고 카테고리도 나름 부여해서(ㅋㅋ) 지도에 마커를 띄워주니 동료들이 신기해하면서도 웃겨했다..ㅋㅋㅋ
그리고 뜻밖의 소득이었던 건, 시군구 정보를 받아오는 데 예상치 못한 결과값을 받아오는 경우를 발견했다. 동료들의 집주소로 등록해보는 과정이 없었다면 발견하지 못했을 내용.
이 역시도... 외부 라이브러리를 갖다 쓰는데에서 발생한 일.
정말 내가 컨트롤하지 못하는 영역에서 예상치 못한 결과가 벌어지고 그걸 모른채로 받아와서 쓰는게..;; 매번 당황스럽 ㅎㅎ.
어쨌든 더 문제가 생기지 않도록 예외 처리를 몇가지 해 주어서 주소를 받아 넣는 것 까진 다행히 잘 돌아간다.
이제 사용자가 직접 사진을 업로드하는 기능을 덧붙이고 싶은데 시간이 좀 많이 걸릴 것 같아 우선 뒤로 미뤄두려고 한다.
사실 덧붙이면 좋은 기능이지만, 한편으론 굳이 이미지를 업로드 하지 않아도 이미지 url을 입력받아도 되고, 그게 안된다면 기본이미지 3장을 디폴트값으로 주어도 될 일이다.
언제나 촉박한 상황에서 타협과 타협을 거듭하지만(;;) 오늘은 뭔가 동료들과 함께 의도치 않게 디버깅을 한 경험도 즐거웠고 포트폴리오 마지막 주간에 서로의 프로젝트를 번갈아가며 살펴보며 또 얼만큼 더 고도화될지 약간 기대가 되기도 한다.
그 전에 얼른 어드민 핵심기능들을 구현하고 싶은데..ㅎㅎ
매끄럽게 하지 못하는 내 스스로가 좀 답답할 뿐이다.
장소 삭제와 함께 user 정보 삭제 기능을 얼른 구현하고..
에이미님이 작업해주시는 디자인 결과물을 통해 예쁜 옷까지 얼른 덧입혀주고 싶다.
소듕한 첫 포트폴리오... 마지막까지 디테일 잘 잡아가자!
