도메인 정보 수정 후, 카카오 맵이 동작 안하는 경우 (브라우저 DNS 캐시 문제)

도메인 정보 수정 후, 카카오 맵이 동작 안하는 경우 (브라우저 DNS 캐시 문제)

서비스되고 있던 기존 사이트를 리뉴얼하고 기존 도메인은 그대로 사용하되, 

연결된 ip주소만 변경하여 서비스하게 되었습니다.

 

도메인 정보 변경 후, 새로 리뉴얼한 사이트의 페이지에 접속하여 정상적으로 페이지를 가져온 것을 확인했지만, 

해당 페이지에 있는 카카오맵이 동작하지 않아 증상과 원인을 찾아보았습니다.

 

증상과 원인은 다음과 같았습니다.

• 페이지는 정상적으로 불러왔지만, 카카오맵 기능은 동작하지 않음.
• 카카오맵 라이브러리를 카카오에서 보내주지 않아서 발생한 문제임.
• 카카오 개발자 센터에 도메인은 정상적으로 등록되어 있음.
• 모든 컴퓨터에서 카카오맵이 다 동작을 안하는 것은 아니였음.
  • 예를 들어, A라는 컴퓨터에서 접속 시 카카오맵이 잘 동작하지만, 
    B라는 컴퓨터에서 접속 시 카카오맵이 동작하지 않음.
• 카카오맵이 동작하지 않는 같은 컴퓨터라도 웹 브라우저를 다른 것을 사용해서 접속하면 제대로 동작하는 경우도 있음.
  (예를 들어, 크롬에서 접속했을 때는 카카오맵이 동작하지 않지만, 웨일을 사용해서 접속하면 카카오맵이 동작함.)

 

결국, 당시에는 이 문제를 해결해보려 했지만 바로 해결하는데는 실패하고

카카오맵이 동작하지 않던 컴퓨터에서도 시간이 지나서 다시 접속해보면 동작하게 되어서

'적어도 코드 문제는 아니고, 도메인 정보 수정 후 시간이 지나 해결되는 문제' 로 마무리되었지만, 

 

'같은 컴퓨터에서 웹 브라우저를 다른 것을 사용해서 접속하면 제대로 동작하는 경우도 있음' 이 경우가 상당히 마음에 걸렸습니다.

클라이언트에서 해결할 방법이 있는 의외로 쉬운 문제일 수도 있겠다는 생각에 좀 더 자료 조사를 하던 중,

왠지 내가 겪고 있는 증상의 원인일 것 같은 내용을 찾았습니다.

 

문제 원인의 이름은 'DNS Cache 문제'.
'IP 또는 도메인의 설정이 바뀌었는데도 변경정보가 바로 반영이 안되는 문제' 라고 하네요.

 

DNS조회에 영향을 주는 원인에는 다양한 요인들이 있었습니다.

• 컴퓨터의 DNS 캐시 문제
• 웹 브라우저의 DNS 캐시 문제
• DNS TTL 자체설정 문제
• 그 외 기타

웹 브라우저별로 되거나 안되는 상황이었다는 것을 떠올려보면,

위 문제들 중에서 가장 원인일 것 같은 문제는 '웹 브라우저의 DNS 캐시 문제' 라고 생각하여 
해당 문제 해결 방법을 사용해보기로 했습니다.

 

웹 브라우저의 DNS 캐시 문제 및 해결방법

웹 브라우저 자체가 DNS를 캐싱하고 있을 수 있는데,

보통은 웹 브라우저를 재시작해도 적용되지만 Firefox처럼 세션을 저장했다가 다시 불러오는 경우 바로 갱신되지 않을 때도 있습니다.

이럴 땐 웹 브라우저의 설정을 직접 건드려주는 방법이 있습니다.

 

Google Chrome : 크롬 부라우저 주소창에 chrome://net-internals/#dns 를 입력하고 Host resolver cache 항목에서 Clear host cache 버튼을 클락하여 브라우저의 DNS캐시를 초기회할 수 있습니다.
Firefox : about:config에서 network.dnsCacheEntries (캐시 항목 개수), network.dnsCacheExpiration (캐시 기간, 단위: 초) 두 항목을 변경하거나 새로 추가한다. entry 개수가 0이 되면 캐시를 전혀 하지 않지만 복잡한 웹사이트 로딩시 속도가 떨어질 수 있습니다.
Internet Explorer : ▶ MSDN 문저를 참조하시기 바랍니다.

 

저의 경우는 Google Chrome에서 동작하지 않았기 때문에 Google Chrome의 DNS 캐시 삭제를 시도했습니다.

위의 'Clear host cache' 버튼을 클릭

1. 크롬 웹 브라우저의 주소창에 chrome://net-internals/#dns 를 입력하고, 
2. DNS 탭의 내용 중에 Host resolver cache의 Clear host cache 버튼을 클릭하여 캐시 삭제.
   (참고로 버튼을 클릭해도 아무 동작도 이루어지지 않는 것 처럼 보임.)

위 작업만으로 크롬 웹 브라우저의 DNS 캐시 삭제 과정은 끝입니다.

저 같은 경우는 다른 모든 창을 닫고, chrome://net-internals/#dns 창 하나만 열어서 진행 후, 

모든 크롬 브라우저를 닫고 다시 열어서 카카오맵이 잘 동작하는지 페이지에 접속 시도를 했습니다.

 

결과는 성공! 카카오맵이 잘 동작합니다. 카카오에서 라이브러리를 잘 전달해주네요.

 

마무리

다만, 저는 위 해결방법으로 해당 증상이 있는 컴퓨터에서는 사용해 볼 수 없었고,

같은 증상이 나타나는 제 스마트폰에서 시도해봤습니다.
아마 같은 증상이고, 똑같은 크롬 브라우저였기 때문에

해당 문제가 나타났던 컴퓨터에서 시도했어도 같은 결과를 얻었을 거라고 생각합니다.

 

문제가 되었던 해당 페이지는 클라이언트에서 비동기로 카카오맵api를 호출하던 로직이었던 것을 생각해보면..

클라이언트는 브라우저에서 캐싱된 옛날 DNS정보로 api 호출을 시도했고, 카카오쪽에서는 올바른 새로운 DNS 정보와 맞지 않아서 api response를 보내주지 않았던 것 같습니다.

 

참고로, 위 해결 방법을 사용해보기 전에 크롬 웹 브라우저의 '모든 인터넷 사용 기록을 삭제'하는 시도도 해봐도 카카오맵이 안됐던 것을 떠올려보면,

도메인 정보 변경 후, 크롬 브라우저에서 '인터넷 사용 기록 삭제' 로는 새로운 도메인 정보로 새로운 페이지는 가지고 올 수도 있을진 몰라도, 

여전히 새 페이지를 가져오지 못하거나 비동기 호출시에는 캐싱된 예전 도메인 정보로 호출을 시도하는 것처럼 보입니다.

 

정리하면,

DNS 정보 변경 후 브라우저에서 DNS와 관련된 문제 발생 시 '브라우저 별 DNS 캐시 삭제'를 시도해보자!

 

참고 자료

http://www.codns.com/b/B05-119