/login 페이지에서 ‘카카오톡 로그인’ 버튼을 제공하고있고 javascript SDK로 구현을 했습니다.
위 버튼은 pc 웹, 모바일 웹 환경에서 정상동작을 하였고 문제는 웹뷰에서 로그인을 시도했을 때
로그인 버튼을 클릭한다
카카오 앱으로 권한 요청 창이 오픈된다
권한 확인을 누른다
요 과정에서 2번까진 진행되는데 웹뷰가 3번까지 기존 /login 페이지에서 정지해있는 것이 아니라 새로고침 처럼 페이지가 리로딩되었고(이부분은 웹서버 페이지 요청 로그, 웹뷰 url 호출 로그에서 확인) 앱에선 3번 과정이 끝나더라도 아무런 동작을 하지 않는 것이 문제였습니다.
원인과 해결 조치는 아래와 같습니다.
프론트 페이지에선 stimulusjs 라는 자바스크립트 프레임워크를 사용중임
해당 프레임워크는 data-action=‘click->{함수}’ 로 클릭 액션을 다루는 기능을 제공함
해당 기능을 사용해서 버튼 엘리먼트인 a 태그에 해당 클릭 액션을 붙임
→ 여기서 stimulusjs의 data-action에 정의한 함수는 함수데로, a태그의 기본 클릭 href 동작은 동작데로 동작함.
그래서 두 가지 이벤트가 모두 동시에 동작함
href="" 의 동작데로 페이지가 리로드되는 것 처럼 보였음
그래서 stimulusjs에 href="’ 동작을 하지 않도록 event.preventDefault() 를 해주었음