reverse geocode

아래 예시처럼 장소를 좌표 뿐 아니라 한글로도 보여줘야합니다.

이 부분을 구현하기 위해서는 좌표를 입력으로 받으면 해당 좌표의 주소를 한글로 가져오기 위한 함수가 필요한데 naver cloud 에서는 이걸 api로 제공하고 있습니다.

naver reverse geocoding api docs.

하지만 이 API는 클라이언트(웹 브라우저)에서는 사용하지 못합니다. (Naver에서 막아놓음, 무조건 서버에서 보내는 요청만 답해줌..).

다음과 같이 axios를 사용하여 쿼리에 좌표를 넣어주고, 헤더에 클라이언트 아이디와 시크릿 아이디를 넣어 요청을 보내주면

응답이 오게 됩니다.

  const xml = await axios.get(
    `https://naveropenapi.apigw.ntruss.com/map-reversegeocode/v2/gc?coords=${longitude},${latitude}`,
    {
      headers: {
        'X-NCP-APIGW-API-KEY-ID': `${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}`,
        'X-NCP-APIGW-API-KEY': `${process.env.PUBLIC_NAVER_SECRET_KEY}`,
      },
    },
  );

  //xml to object
  const parseXml = async (xmlString: string) =>
    await new Promise((resolve, reject) =>
      xml2js.parseString(xmlString, (err, jsonData) => {
        if (err) {
          reject(err);
        }
        resolve(jsonData);
      }),
    );

  const name: any = await parseXml(xml.data);

응답에서 사용해야할건 data 부분인데 해당 data 부분이 xml 파일 형식으로 오게 됩니다. 그래서 이 xml을 파싱해서 우리가 원하는 한글 데이터만 뽑아내는 로직이 필요합니다. 이를 위해 먼저 xml을 javascript object로 만들어주었습니다.

import xml2js from 'xml2js'; xml2js 라는 라이브러리를 사용하여 xml string 을 object로 바꾸어주었지만 아직 끝난게 아닙니다.

{
  "geocoding": {
    "status": [{ "code": ["0"], "name": ["ok"], "message": ["done"] }],
    "results": [
      {
        "order": [
          {
            "name": ["legalcode"],
            "code": [{ "id": ["4511110700"], "type": ["L"], "mappingId": ["13111107"] }],
            "region": [
              {
                "area0": [{ "name": ["kr"], "alias": [""], "coords": [""] }],
                "area1": [
                  {
                    "name": ["전라북도"],
                    "alias": ["전북"],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.2368291"], "y": ["35.6910153"] }] }]
                  }
                ],
                "area2": [
                  {
                    "name": ["전주시 완산구"],
                    "alias": [""],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.1198125"], "y": ["35.8122"] }] }]
                  }
                ],
                "area3": [
                  {
                    "name": ["경원동3가"],
                    "alias": [""],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.149"], "y": ["35.8209"] }] }]
                  }
                ],
                "area4": [""]
              }
            ]
          },
          {
            "name": ["admcode"],
            "code": [{ "id": ["4511153000"], "type": ["A"], "mappingId": ["13111530"] }],
            "region": [
              {
                "area0": [{ "name": ["kr"], "alias": [""], "coords": [""] }],
                "area1": [
                  {
                    "name": ["전라북도"],
                    "alias": ["전북"],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.2368291"], "y": ["35.6910153"] }] }]
                  }
                ],
                "area2": [
                  {
                    "name": ["전주시 완산구"],
                    "alias": [""],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.1198125"], "y": ["35.8122"] }] }]
                  }
                ],
                "area3": [
                  {
                    "name": ["풍남동"],
                    "alias": [""],
                    "coords": [{ "center": [{ "crs": ["EPSG:4326"], "x": ["127.1481152"], "y": ["35.8170916"] }] }]
                  }
                ],
                "area4": [""]
              }
            ]
          }
        ]
      }
    ]
  }
}

이렇게 되어있는 오브젝트를 이제 또 파싱해서 원하는 데이터만 뽑아내야합니다...

요약

1. 클라이언트에서는 좌표를 한글 주소로 바꾸는 API를 사용하지 못한다.
2. 클라이언트에서 장소 정보를 업데이트 해주면 보내주는 좌표를 사용해서 한글주소로 바꾸고 업데이트 할때 같이 한글 주소도 넣어주자.
3. 한글 주소를 가져오려면 먼저 좌표를 가지고 네이버 API로 요청을 보내서 응답을 받고, xml2js로 오브젝트로 바꾼후 이걸 파싱해서 원하는 한글주소만 얻어야한다.