카카오 API로 소셜 로그인 구현하기 (2)

✏️Study Goal
: 카카오에서 제공하는 API를 연동해서 소셜 로그인을 구현하자!
: react에서 hook을 적용하여 코드를 짜보자!ㅁ

🖥 My Code

import React from 'react';
import styled from 'styled-components';
import axios, { GET, POST, DELETE, PUT } from 'axios';
import { API } from '../../../config';

function Login(props) {
  const KakaoLogin = () => {
    window.Kakao.Auth.login({
      success: authObj => {
        axios
          .GET(API.LOGIN, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: authObj.access_token,
            },
          })
          .then(res => {
            localStorage.setItem('TOKEN', res.data.token);
            props.history.push('/');
          });
      },
      fail: error => {
        alert(JSON.stringify(error));
      },
    });
  };

  const KakaoLogout = () => {
    if (window.Kakao.Auth.getAccessToken()) {
      window.Kakao.API.request({
        url: '/v1/user/unlink',
        success: function (response) {
          console.log(response);
        },
        fail: function (error) {
          console.log(error);
        },
      });
      alert('로그아웃이 완료되었습니다.');
      window.Kakao.Auth.setAccessToken(undefined);
    }
  };

export default Login;

🕵🏻‍♂️ 코드가 실행되지 않는다면 살펴볼 것!

✔ Check Point 1
백엔드와 소통을 하자! TOKEN인지, token인지 Token인지 Convention을 꼭 확인해야한다.
✔ Check Point 2
백엔드와 또 또 소통을 하자! 혹시 백에서 redirect URI end point를 바꾼 것은 아닌지 물어보고, 확인하고, 서로 꼭 이야기를 할 것!
✔ Check Point 3
백엔드와 또 또 또 소통을 하자! 혹시 위 코드에 scope를 적용하여 프론트에서 정보를 받아오려 했다면, email, nickname 등의 변수명을 확인해야한다. 카카오에서는 name이 아닌 nickname이라는 변수명을 사용하고 있다는 것을 확인해보기!

🔎 알게된 것을 정리해보자!

✔ Check Point 1
.env에 javascript key를 꼭 꼭 숨겨서 코드를 관리해야한다.
✔ Check Point 2
fetch는 지난 번 프로젝트에서 사용해봤기 때문에 axio 사용을 새로 시도해보았다. axio는 팀원들이 다 같이 사용하기 때문에 팀끼리 통신 코드를 맞추는 것이 좋다.