JavaScript 법정동 데이터 관리와 동적 선택기 모듈 구현: 최신 데이터 가져오기 및 데이터 가공하기

 

업무를 하다가 법정동 코드들을 JSON 데이터로 관리하게 됐다. Open API를 사용하면 편리하지만 어떠한 사정으로 당장 이용할 수 없어서 최신 데이터를 가져와서 JSON으로 저장, 동적 셀렉트 박스를 구현해보는 시간을 가졌다.

 

---

법정동 최신 데이터 가져오기

우선 데이터를 구하는 과정이 필요하다.

https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardList.do?bbsId=BBSMSTR_000000000052

행정안전부> 업무안내> 차관보> 주민등록,인감> 주민등록,인감

 

위 행안부 사이트에 보면 "행정기관(행정동) 및 관할구역(법정동) 변경내역" 이라는 제목을 가진 게시글을 볼 수 있는데 가장 날짜가 최근에 가까운 게시글을 클릭해주자. 이 글을 쓰는 지금 기준으로는 2024.8.1 시행 글이 가장 최신이다.

 

 

게시글 하단에 보면 첨부파일이 표시되어 있는데 jscode20240801 파일을 다운로드 받으면 된다.

2만 건 정도의 데이터를 보기 쉽게 법정동코드와 시도명, 시군구명, 읍면동명, 동리명으로 나눈 후 GPT를 이용해 JSON 파일로 가공해주었다.

GPT한테 가공을 시키면 굉장히 편한데, 엄청 자세하게 설명해야한다.

나름 꼼꼼하게 설명했다고 생각했는데 한참 부족했나보다. 프롬프트만 두 번 밀고나서 제대로 설명했다 ㅜㅜ

 

---

JSON 데이터 구조 설계하기

const json = [
    {
        "code": 11,
        "name": "서울특별시",
        "siGunGus": [
            {
                "code": 110,
                "name": "종로구",
                "eupMyeonDongs": [
                    {
                        "code": 101,
                        "name": "청운동",
                        "dongRis": []
                    }, ...
                ], ...
            }, ...
        ], ...
    }, ...
]

원래는 심플하게 만들고 싶은 마음에 code, name, 그리고 배열 구조로 만들었다.

시도 객체의 경우 시군구 배열, 시군구의 경우 읍면동 배열, 읍면동의 경우 동리 배열 이렇게.

 

데이터를 가공할 당시에는 선택된 데이터의 상위 법정동코드를 기준으로만 순회하면 된다고 생각해서 코드값들도 나눴었는데

나중에 재귀적으로 풀려니 같은 depth에도 중복되는 코드값이 너무 많았다.

시군구부터 그냥 중복이 많았음. 선택된 code 값으로 찾으려니 엉망진창 작동했다 :ㅇ

 

그리고 시군구, 읍면동, 동리 배열들의 네이밍이 구분되어 있으니 결국 하나하나 하드코딩으로 풀어갈 수밖에 없었다.

 

결국 코드 짜느라 끙끙대다가 데이터 가공부분부터 새로 다시.

 

---

한층 더 구조화된 JSON 데이터 설계

완성된 데이터 구조는 아래와 같다.

const json = [
    {
        "code": "26",
        "fullCode": "2600000000",
        "name": "부산광역시",
        "type": "siDo",
        "children": [
            {
                "code": "710",
                "fullCode": "2671000000",
                "name": "기장군",
                "type": "siGunGu",
                "children": [
                    {
                        "code": "250",
                        "fullCode": "2671025000",
                        "name": "기장읍",
                        "type": "eupMyeonDong",
                        "children": [
                            {
                                "code": "21",
                                "fullCode": "2671025021",
                                "name": "동부리",
                                "type": "dongRi",
                                "children": []
                            },
                        ], ...
                    }, ...
                ], ...
            }, ...
        ], ...
    }
]

code 값은 사실 없어도 될 것 같았지만 그냥 넣어뒀다. 나중에 쓰일 일이 있을까 싶기도 해서.

fullCode 기준으로 기준 데이터를 찾을거고, 하위 법정동 객체들은 모두 children으로 네이밍을 통일했다. 대신 구분이 어려울 수 있으니 type 값을 따로 추가했다. 네이밍이 제일 어려운듯... 

 

---

JSON 데이터 불러오기

JSON 데이터 불러오는 방법은 fetch를 이용했다. 

/**
 * 지역 JSON DATA 가져오는 함수
 * @returns {Promise<any|null>}
 */
loadRegionJsonData = async () => {
    try {
        const response = await fetch("../../../../resources/js/config/region.json");
        return await response.json();
    } catch (error) {
        console.error(error);
        return null;
    }
}

 

모듈 내부에서 해당 함수를 호출해주면 완성이다.

비동기 통신을 이용하기 때문에 async await을 꼭 걸어줘야한다.

initialize = async () => {
    this.regionData = await this.loadRegionJsonData();
}

 

다음 포스팅은 동적 선택기에 대한 구현을 다뤄볼 예정이다.