TIL 221125 Redirect URI가 뭔데(feat. 카카오 로그인) + GitHub 잔디 색상 기준은 뭘까

카카오 로그인 (Javascript SDK) 구현

나는 오늘 카카오를 죽였다.

나는 오늘 카카오를 죽였다. 이유는 터무니없다. 어떻게 하는지 모르겠기 때문이다..

 

 

이번 프로젝트는 카카오 로그인을 구현했다. 저번에 카카오 지도 API랑 2번 싸웠는데 이번에도 또 로그인 API랑 싸웠다.....🤯 쉽지 않아... 하지만 끝끝내 내가 이겼다... ㅎㅎㅎ

사실 이번에 나는 카카오 인가 코드까지만 하고 나의 팀플 메이트인 지은이 다 해줬다. 지은 최고! 최고의 백엔드! 야호! 😀😀😀

 

카카오 Javascript 로그인은 이런 순서로 진행되는데

카카오 로그인 프로세스

 

 

우리는 이런식으로 처리하기로 했다. 유저 동의 화면 때문에 프론트에서 Redirect URI로 카카오 인가 코드를 받아서 백으로 넘기면 백에서 카카오 토큰을 받아서 회원정보를 가져오고 그 정보로 자체 회원가입을 하기로 했다.

카카오 로그인에서 프론트, 백 역할을 이렇게 정했다.

 

 

처음엔 어느 단계까지가 내 일인가 싶어서 우왕좌왕 하긴 했지만 내가 할 일인 Redirect URI로 인가 코드 받아오기는 금방 했다. 그 뒤로 화면을 어떻게 처리하느냐가 문제였다. 0.회원가입 페이지에서 1.카카오 인가 코드 요청을 보내면 2.유저의 동의를 구하는 화면이 뜨고 3.동의를 하고 나면 URI가 회원가입 페이지기 때문에 4.회원가입 페이지에 인가 코드가 쿼리 스트링으로 붙어서 왔다.

 

1.카카오 서버에게 요청을 보내고 유저 동의 후 인가 코드를 받으면 2.내부 서버에 보내서 내부 서버가 일을 마치기까지 로딩 화면을 보여주고 내부 서버에서 응답이 오면 로그인 상태로 메인 페이지를 보여주려고 했다.

예상 동작

 

 

 

그런데 실제 동작하는 건 예상과 달랐다. 동의 화면에서 동의하기를 누르면 회원가입 페이지로 다시 돌아왔다.

loading state에 따라서 회원가입 화면(false)과 로딩 화면(true)을 보여주려고 loading state를 false로 초기값을 주고 카카오 서버로 요청을 보내면 loading state를 true로 바뀌게 했다. async/await을 붙여봐도, 요청 페이지로 가게 하는 KaKao.Auth.authorize() 보다 setState함수를 먼저 실행해도 잠깐 동안만 로딩 페이지가 보일 뿐 동의 화면 후에는 무조건 회원가입 페이지로 돌아간 뒤 바뀌지 않았다. 왜!!!!!! 어째서!!!!!!!! 🤯🤯🤯🤯🤯

실제 동작

 

 

 

결국 원인을 알아냈다. 범인은 Redirect URI !!!!!

 

내 서비스 페이지에서 동의 화면으로 잠깐 갔다 온다고 생각했는데(정말 어이없는 생각...) 동의 화면으로 넘어갔다가 다시 내 서비스로 돌아오면 서비스 전체가 리로드 돼 loading state가 초기값으로 돌아가서 그런 것이었다. 인가 코드가 Redirect URI로 오기 때문에 여기서 다음 동작을 처리했었어야 했는데 Redirect URI를 요청을 보내는 페이지의 url로 내가 잘못 이해하고 있었다.  Redirect URI는 인가 코드를 받아서 처리할 url로 정할 것! 그래서 loading페이지를 새로 만들어서 Redirect URI로 넣어줬다.

새로 추가한 로딩 화면

통신까지 성공적으로 완료해서 카카오 로그인이 끝나면 로그인 상태로 메인이 보이도록 구현했다. 카카오 로그인 끝! 👏👏👏

---

GitHub 잔디 색상 기준은 뭘까

 

요즘 1일 1잔디 챌린지를 행하고 있는데 매일 제일 옅은 잔디를 심기는 싫어서 힘닿는 데까지 진한 잔디를 심으려고 노력하고 있다. 색이 바뀌는 지점까지 커밋하고 싶은데 잔디 색깔의 기준을 몰라 오늘 찾아봤다. 명확한 답은 없었는데 깃헙 잔디에 영향을 미치는 요소가 많아서 인 것 같다. 나는 주로 커밋밖에 안 하지만 다른 사람들은 더 여러 가지를 할 테니까..! 내 레포를 살펴본 바로는 커밋 22개를 하고 PR 하나 날린 날 제일 진한 잔디가 심어졌다. 한번 날을 잡고 얼마나 기여해야 색이 진해지는지 확인해봐야 될 것 같다. 1일 1잔디 챌린지 화이팅 🔥🔥🔥

 

8 Ways To Increase Your GitHub Contributions

https://www.juniordevelopercentral.com/8-ways-increase-github-contributions/

8 Ways To Increase Your GitHub Contributions