Day 10 — 첫 공공데이터 도구: 폐의약품 수거함 지도 만들기
전국 폐의약품 수거함 6,634곳을 지도에 올렸다. 표준API 파라미터(pageNo/numOfRows/type) 규약에 한 번, 경도 필드명 lot에 한 번, 그리고 배포 후엔 내 curl이 308 리다이렉트를 안 따라가 헛다리를 짚었다. 빌드타임에 JSON으로 구워 키·CORS 노출 0으로 정적 배포한 기록.
처음으로 공공데이터로 뭔가를 만들어봤다. 주제는 폐의약품 수거함 지도(/map). 다 쓴 약, 그냥 버리면 안 되는데 어디다 버려야 하는지 막상 찾으면 잘 안 나온다. 공공데이터포털에 ‘전국 폐의약품 수거함 표준데이터’가 있어서 이걸로 지도를 만들기로 했다. 전국 6,634곳, 위경도 좌표까지 들어있다.
resultCode 10 — 표준데이터는 파라미터 규약이 다르다
오픈API는 tn_pubr_public_lung_medicine_api. 평소 쓰던 감으로 page, perPage를 파라미터로 던졌더니 resultCode 10, INVALID_REQUEST_PARAMETER가 돌아왔다. 키 문제인 줄 알고 한참 헤맸다.
원인은 단순했다. 공공데이터포털 표준데이터 API는 page/perPage가 아니라 pageNo/numOfRows/type=json 규약을 쓴다. 같은 포털인데도 API 종류마다 파라미터 이름이 다르다는 걸 이때 처음 알았다. 이름만 바꿔 끼우니 바로 데이터가 들어왔다.
또 하나 헷갈렸던 건 좌표 필드명이었다. 위도는 그렇다 쳐도 **경도 필드 이름이 lot**이었다. longitude를 줄인 모양인데, lat 옆에 lng나 lon이 있겠거니 했다가 한 번 더 멈칫했다.
키도 CORS도 노출하지 않으려고 — 빌드타임 베이크
이 데이터는 자주 바뀌지 않는다. 그래서 런타임에 API를 부르는 대신 빌드타임에 전부 JSON으로 구워서 정적 배포하기로 했다. 이렇게 하면 사용자 브라우저는 API 키를 볼 일이 없고, CORS도 신경 쓸 게 없다. 런타임 키·CORS 노출 0.
나머지는 정적 파일 위에 얹은 로직이다. 거리 계산은 Haversine으로 직접 짰고(geo.ts), ‘지금 운영중’인지 판정하는 로직은 따로 뺐다(openNow.ts). 지도는 Kakao 지도에 마커 클러스터링을 붙였다 — 6,634개를 그냥 찍으면 화면이 점으로 덮인다. 검색은 내 위치 / 주소 / 지도 범위 세 가지로 받고, 결과는 거리순 정렬.
배포 후 헛다리 — curl이 리다이렉트를 안 따라갔다
배포하고 나서 도메인 인증 파일이 안 뜨는 줄 알고 또 한참 팠다. curl로 찍으면 빈 응답이 와서, 파일이 안 올라갔나, 경로가 틀렸나 의심했다.
범인은 내 curl이었다. Cloudflare Pages가 .html 주소를 확장자 뗀 주소로 308 리다이렉트하는데, curl -L(리다이렉트 따라가기)을 안 붙여서 308만 받고 본문은 비어 보였던 것이다. 파일은 멀쩡히 있었다. -L 하나 빠뜨려서 멀쩡한 배포를 고장난 줄 알았다.
회고
같은 공공데이터포털 안에서도 API마다 파라미터 규약이 다르다는 것(pageNo/numOfRows/type), 자주 안 바뀌는 데이터는 빌드타임에 구워서 키·CORS를 아예 노출 안 하는 게 편하다는 것, 그리고 “응답이 비었다”는 디버깅 도구(curl) 자체의 옵션 문제일 수 있다는 것. 세 번 막혔는데 셋 다 내 착각이 절반이었다. 도구는 /map에 올려뒀다.