카카오톡 로그인 에러 해결

카카오톡 로그인 기능을 구현하고 테스트 할때는 분명 발생한 에러없이 잘 동작했는데 오늘 오전에 테스트를 진행하고 있는 와중에 에러가 발생했다.

웹 페이지 접속하면 메인 화면인데 메인 화면에서 로그인 페이지로 이동하고 카카오톡 로그인을 하게되면 다시 메인 페이지로 이동한다.

그리고 로그아웃하고 로그아웃 된 상태(메인 페이지)에서 다시 로그인을 하려고하니

두둥!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Uncaught l {name: "KakaoError", message: "Kakao.init: Already initialized."}

The above error occurred in the <Login> component

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

위 3가지 에러가 떠버렸다.

저 에러들 중에서 마지막 에러 A cross-origin error was thrown를 먼저 번역기를 돌려보고 그리고 구글링해봤다.
cors관련된?? 문제로 인한 에러 발생이고 이와 관련된 해결 방법이 구글링 결과로 나왔다.
근데 어제까지만해도 cors관련된 에러는 발생된적이 없었다.
그래서 이 문제는 아니라고 판단 다음으로 두번째 에러를 구글 번역기를 돌려보니 로그인 컴포넌트에 문제가 생겼다고…
그래?? 난 로그인 컴포넌트에서 건드린건 카카오톡 로그인 기능을 구현하기 위한 코드만 작성했을 뿐
위와 같이 생각을 했고 첫번째 에러를 보니 머리에 느낌표가 생겼다.
바로 error message를 구글링해보니 kakao.init을 계속 초기화 해서 발생한 에러니 한번만 호출해서 초기화하면 해결을 할 수 있을것이다. 라는 구글링 검색 결과를 참고했다.
그리고 코드 변경을 하니 에러가 해결됬다.

문제의 코드

componentDidMount() {
    window.Kakao.init('f8649f9322f32e7bc59c64a23e9ae213');
    window.Kakao.Auth.createLoginButton({
      container: '#kakao_login_btn',
      success(authObj) {
        alert(JSON.stringify(authObj));
        // console.log(authObj);
      },
      fail(err) {
        alert(JSON.stringify(err));
      },
    });
    this.setState({
      Kakao: window.Kakao,
    });
  }

해당 컴포넌트가 렌더되고 componentDidMount()가 호출될때마다 Kakao.init 호출…
Kakao.init()의 위치를 클래스 밖으로 변경했다.

window.Kakao.init('f8649f9322f32e7bc59c64a23e9ae213');
class Login extends React.Component

에러를 해결했을 때 이 뿌듯함이란 ^^