[공주찾기] 주소 찾기 구현하기

[공주찾기] 주소 찾기 구현하기

주소 찾기를 빠르게 구현해보도록 하자. 해당 프로젝트에서는 입력 값 예외처리는 하지 않았다. 무조건 정상적인 검색어만 넣고 검색한다는 가정하에 구현하였다. 참고하고 보면 좋을 것 같다. 그리고 설명의 편의성을 위하여 최종 코드를 먼저 공개하고 설명하는 것이 좋을 것 같아서 코드 먼저 최상단에 표시를 해두었다.

구현하기

솔직히 이번 코드는 너무 쉬워서 딱히 크게 할 말은 없다. 위 코드 16번 줄에 API 키를 적어주고 실행을 해야한다. Postman에서 코드를 복붙해서 사용하면 되는데, 복붙한 후 request를 요청하고 응답 받은 값을 console로 찍어보면 아래 이미지와 같다.

여기서 응답 구조를 빠르게 파악하고 내가 관심있는 key 값을 빠르게 찾아야 한다. 데이터 구조를 자세히 보면 results 안에 있는 juso를 이용해야할 것 같다라는 생각을 할 것 이다. 그럼 juso에 접근하여 juso 배열을 console로 찍어보자.

juso 배열에서 1번 index를 열어보자. 아래와 같이 상세한 값들이 나와있다. 이 값을 이용하여 내가 필요한 데이터만 사용하면 된다. 필자는 우편번호, 지번 주소, 도로명 주소를 사용할 것이다.

이제 모든 데이터가 준비되었다. 해당 데이터를 이용하여 사용자들이 볼 수 있도록 그리기만 해주면 끝이다. 매우 간단하다.

2. Publishing

이제 데이터를 받은 것을 바탕으로 publishing을 해주어야 한다. 필자는 그냥 material-ui에 있는 컴포넌트를 사용하였다. 사람마다 방식이 너무 다르기 때문에 스스로 해보도록 하고, 어려우면 그냥 필자의 코드를 보고 따라 해보도록 하자.

결론

주소찾기 구현의 경우 공휴일 찾기를 해보았으면 훨씬 쉽다는 것을 알 수 있을 것이다. 다음 게시글에서는 리팩토링을 하고 약간의 기능을 더 추가하여 마무리를 지어보려고 한다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.