개요
차세대 프로젝트를 진행하며 사용자의 주소를 수집할 일이 있었는데, 다음 우편번호 서비스 api 호출 시 아래와 같은 alert가 뜨면서 호출이 불가한 현상이 발생했다. 이번 포스트에서는 해당 이슈를 해결하는 과정에 대해 정리하고자 한다.
문제 파악
alert에서 안내한 카카오 우편번호 서비스 가이드 사이트(https://postcode.map.daum.net/guide)에 접속하여 관련 이슈 파악 중 아래와 같은 안내문을 볼 수 있었다.
카카오에서 제공하는 우편번호 관련 cdn을 호출할 때, 의도치 않은 param이 어떠한 요인에 의해 추가되고 있음을 예측해 볼 수 있었고, 실제 개발자 도구를 열어 확인해 본 결과 아래와 같았다.
위 사진을 통해 알 수 있는 현재 문제점은 아래와 같다.
- 다음 우편번호 api 제공 안내 가이드에서 안내하는 정식 api 주소가 아닌 권장하지 않는 예전 버전의 api를 호출한다.
- api를 호출할 때 api 주소 뒤에 불필요한 인자들이 붙게 된다.
해결 과정
과정 1: 현재 권장하고 있지 않은 구 버전의 api 사용 수정
위 그림 5에서 알 수 있듯이 현재 우리 서비스에서 사용하고 있는 우편번호 api는 권장하지 않는 구 버전이기 때문에 호출하는 api 주소를 다음 우편번호 가이드에서 제공하는 통합 로딩 방식을 제공하는 파일을 호출하도록 변경하였다.
다음에서 권장하는 최신 버전 api로 호출 주소를 변경했음에도 처음과 같이 계속해서 허용되지 않는 param 에러가 발생했는데, 개발자 도구를 통해 실제 호출하는 api 주소를 확인해 보니 아래와 같았다.
과정 2: api 호출 시 추가되는 불필요한 인자 제거
위 그림 7에서 볼 수 있듯이 api 호출 시에 주소 맨 뒤에 임의의 값이 자동으로 추가되는 것을 확인할 수 있었다. 서비스 코드에서 해당 api 호출은 제이쿼리의$. getScript 함수를 통해 이루어지는데, 해당 함수의 스펙에 대해 조사해 보니 그 이유를 알 수 있었다.
제이쿼리 공식 문서의 getScript 관련 문서를 참고해 보면 해당 함수는 매번 새로운 리소스를 받아오기 위해 기본적으로 cache: false로 설정되어 있고, 이를 위해 매 요청마다 timestamp를 query param에 추가하여 보내는 것을 알 수 있다.
이를 통해 그림 7에서 추가된 알 수 없는 숫자들은 매번 새로운 값을 받기 위해 사용되는 timestamp값임을 알 수 있었고, 이를 해결하기 위해서는 $. ajaxSetup을 통해 cache 옵션을 true로 바꿔주면 되는 것을 알 수 있었다.
하지만 이 옵션을 사용하게 되면 모든 ajax 요청에 대해 전역으로 적용이 되어 버리기 때문에 해당 방법을 사용하지는 않고 별도의 간단한 플러그인을 만들어 사용함으로써 해결할 수 있었다.
과정 3: CachedScript
아래는 제이쿼리 공식 문서에서도 제공하는 전역 설정을 바꾸지 않고 cache 설정을 true로 하여 요청을 보낼 수 있게 하는 플러그인 예제이다.
url을 받아 ajax옵션에 넣어주고 동시에 cache 옵션을 ture로 만들어 ajax 객체를 하나 반환하는 코드로써, 이를 통해 전역 설정은 수정하지 않고 한 번의 요청에만 캐시 설정이 적용되도록 할 수 있다.
결과
위와 같이 cachedScript 함수를 구현한 뒤, 비동기 처리를 위해. done구문 내에 후처리 코드를 넣었다.
위와 같이 코드를 수정하고 테스트해 본 결과, 정상적으로 카카오 우편번호 api가 호출되었고, 주소 선택 기능도 정상 작동하는 것을 확인할 수 있었다.
댓글