카카오 소셜 로그인을 우여곡절 끝에 구현을 완료하였다.
내가 겪은 오류들과 시도했던 방법에 대해 참고가 되었으면 좋겠다.
카카오 로그인 API 이해
카카오 소셜 로그인은 그냥 그대로 쓰면 될 줄 알았는데 생각보다 어려웠다. 간단하게 말하면 절차는 아래와 같다.
1. 내 어플리케이션을 등록하여 API 키를 발급받는다. (JS key를 사용)
2. 발급 받은 API를 통해 인가 코드를 요청한다.
3. 인가 코드를 받고, 그 인가코드로 토큰을 요청한다.
4. 토큰은 (Access, Refresh) 두 가지가 있다. 사용자의 정보를 받아오기 위해서는 access 토큰을 요청해야 한다.
시도해 본 방법
내가 사용한 기술 스택은 다음과 같다.
React + Redux + Webpack + Node.js
-
npm install kakao-Login
구조가 간단해 보였는데, 막상 시도해 보니까 js key가 왜인지 먹히지 않았다. 구조를 이해를 잘 못해서 쓰지 못한 것 같다. 이 부분에 대해서는 후에 학습이 필요할 것 같다. -
html에서 js키를 직접 사용
React의 구조에 적용하기에는 무리가 있었다. 예제 정도로만 참고를 하였다. -
React + Redux 구조 사용
결국 내가 찾아본 정보들 중에서 가장 잘 설명 되어있는 정보를 참고하느라 Redux를 도입하여 사용했다. 그러나... 나는 Redux를 다뤄본 적이 없었으므로 어려웠다.
참고 글은 이것이다. 이 방법을 사용할 사람들에게는 Redux의 기초적인 기본 개념이나 dispatch, store의 구조에 대해서 알고 나서 예제 코드를 적용할 것을 추천한다. 그래도 결과적으로 도움이 많이 되었다.
- 여기서 찾아온 issue : CORS 문제
유명한 문제이다. 이 문제를 해결하기 전에 나는 서버와 모듈화가 필요한 것 같아서 중간에 webpack을 도입했다. 도입하는 방법 중에서, 다양한 오류들이 많이 발생했다.
이 오류들에 대해서는 다른 글에서 다룰 예정이다. (create-react-app으로 만들지 않고, 구조화와 오류 방지를 위해서 이 글을 참고하여서 webpack + react 환경을 구축하였다.)
오류
오류는 여러가지가 있었다.
1. CORS Problem (proxy)
2. Uncaught TypeError: Cannot read property
3. Export Problem
4. Provider (Redux)
5. Store (Redux)
6. Add Middleware problem
각각의 오류들에 대해서는 하나씩 따로 포스팅을 해 볼 예정이다.
