korea sns pro 사용 고객 중 한분이 오류 제보를 해주셔서 소스코드 분석에 들어갔다.
여러 플러그인들을 비활성화 시키면서 테스트한 결과 망보드(비즈니즈 버전) 활성화 상태에서만 korea sns pro의 카카오톡 버튼이 작동되지 않음을 확인하였다.
고객이 직접 망보드에 문의 후 아래와 같은 답변을 받았다. (전달 받은 내용이므로 사실과 다를 수 있음)
“카카오 라이브러리를 두 플러그인에서 모두 로딩하고 초기화도 함께하고 있으니 korea sns 쪽의 소스코드를 수정해야한다”
참고로 망보드의 소셜로그인 부분에 카카오톡 라이브러리가 사용되고 있다.
이에 위와 같이 수정해 보았으나 해결되지 않았다.
오류의 원인
문제는 카카오 라이브러리에 있었다.
페이지 로딩 시 아래와 같이 두번의 카카오 라이브러리 로딩이 있다.
Korea SNS에서 로딩하는 라이브러리는 카카오 서버에서 직접 받는다.
< script type='text/javascript' src='https://developers.kakao.com/sdk/js/kakao.min.js?ver=4.5.1'>< /script>
망보드에서 로딩하는 라이브러리는 플러그인 폴더에 저장되어있다.
< script type='text/javascript' src='http://blog.icansoft.com/wp-content/plugins/mangboard/plugins/sociallogin/js/kakao.story.min.js?ver=4.5.1'>< /script>
카카오 서버에서 반드시 직접 로딩해야하는 것은 아니다. 장단점이 존재한다.
그런데 두 파일명을 비교해 보면 차이가 있다.
kakao.min.js kakao.story.min.js
스크립트 로딩 특성 상 라이브러리가 중복로딩되면(내부에 동일한 클래스명이 존재하면) 앞에 로딩된 스크립트는 무시된다. (재정의 되므로)
두 파일의 차이는 아래와 같다.
kakao.min.js – Full SDK (Minified) 카카오의 모든 라이브러리 (카카오톡 + 카카오스토리 +..)
kakao.story.min.js – KakaoStory Only SDK (Minified) 카카오스토리만 포함된 라이브러리
kakao.story.min.js를 뒤에 로딩하여 기존에 로딩된 카카오톡 관련 기능들이 무시되어 카카오톡 버튼이 작동되지 않게된다. (카카오스토리는 정상작동한다.)
해결책
위 파일을 다운로드받아 압축을 푼 후 아래 경로에 덮어쓰면된다.
/wp-content/plugins/mangboard/plugins/sociallogin/js/
위 파일은 카카오의 Full SDK (Minified) 파일을 이름만 변경한 파일이다.
카카오톡 기능이 무시되지 않도록 기능을 추가하는 개념이므로 안심하고 사용해도 된다.
결론
동일한 라이브러리를 로딩하는 상황은 워드프레스 환경에서 빈번하다.
카카오 측에서 API의 여러 버전을 만들 때 각기 다른 클래스명을 사용하여 충돌이 없게 대비했어야하는 것이 아닌가 생각이든다.
아무튼 문제의 원인을 찾고 해결이 되는 것은 항상 즐겁다.
0 Comments