이 글은 카카오 로그인, 깃허브 페이지 배포가 되었다는 기준하에 쓰여졌습니다!
+ fallback처리를 하지 않습니다.

공모전 프로젝트에서 카카오 로그인을 사용해 로그인을 구현했다.

이 프로젝트에서는 BrowserRouter를 이용해 라우팅을 구현했는데, gh-pages에 이 프로젝트를 배포하니 카카오 로그인의 리다이렉트 url에서 404가 나타났다.

• BrowserRouter는 브라우저를 새로고침하면 해당 url을 인식못하기 때문에 일어나는 문제였다. ㅜㅜ

문제점 1 in BrowserRouter

카카오 로그인 화면으로 갈 때 새로고침이 이루어지기 때문에 일어나는 이슈

보통 카카오 로그인을 하기 위해 이렇게 구현을 한다.
이렇게 카카오 로그인 화면으로 넘어가면 router가 이후 리다이렉트 되는 링크를 인식하지 못한다.

• 즉, https://{어쩌구}.github.io/{저쩌구}/{리다이렉트 되는 경로}로 리다이렉트 되지 못한다.

나의 경우 https://{어쩌구}.github.io/{저쩌구}/oauth/kakao/callback으로 리다이렉트를 하여서 404가 발생하였다...

문제점 2 in HashRouter

그래서 이를 해결하기 위해 HashRouter를 사용해보았다.

hash router를 사용하면 링크가 #/ 형식으로 이루어지기 때문에 카카오 리다이렉트 url을 설정할 수 없는 이슈가 생겼다.

• 카카오 리다이렉트 url에서는 fragment를 url에 허용하지 않아서 HashRouter를 쓸 경우에도 위와 같은 리다이렉트 url을 쓴다면 카카오 로그인이 불가능하다.

해결.. 그렇다면 리다이렉트 url을 기본 경로로??

그래서 BroswerRotuer를 사용하고, 카카오 로그인 리다이렉트 url을 깃허브 배포 경로인 https://{어쩌구}.github.io/{저쩌구}로 설정한 후, 해당 기본 화면(즉, 시작 화면)에서 카카오 로그인 시도를 감지한다면 로그인 처리를 하는 경로로 navigate한다면 어떨까?? 라는 생각을 하였다.

생각을 정리한다면,
1. 카카오 로그인 시도
2. 깃허브 페이지 첫 화면으로 리다이렉트
3. 첫 화면에서 카카오 로그인 시도를 감지
4. 로그인 과정 경로로 navigate

이다.

그래서 코드로 작성해 보았다.

처리 과정

원래 난 시작화면이 로그인 화면으로 구성되어있었고, 리다이렉트를 Auth 페이지로 넘겨 로그인이 진행되게 하였다.

그래서 카카오 로그인 리다이렉트 url을 https://{어쩌구}.github.io/{저쩌구}로 바꾸고 첫 화면에서 아래와 같은 처리를 하였다.

• 카카오 로그인 후 얻어오는 토큰의 길이를 판별해 카카오 로그인이 시도 되었는지 판단했다.
  - 이건 원하는 방식으로 처리하면 될 것 같다. 카카오 로그인이 시도되지 않았다면 조건문의 값이 T가 아니니 저 방식을 썼다
• 조건이 충족한다면 원래 로그인 처리 경로로 navigate 되게 하였다.

결과

이렇게 하니 카카오 로그인이 성공하였다.
내가 무지해서 이상하게 되돌아 가는 코드를 작성했을 수도 있다..
이번 프로젝트 배포를 통해 그냥 막 사용하던 router들의 차이도 알게 되었다.
다음 프로젝트는 fallback을 통해 에러 처리를 해봐야겠다.