팀 프로젝트 - 로그인 방식 수정 2

import axios from 'axios';
import qs from "qs";
import { useEffect } from 'react';
import { useNavigate } from "react-router-dom";

export function Kakao() {
  const REST_API_KEY = "526de075efd0393b1b3dd0cbc43354ed";
  const REDIRECT_URI = "http://localhost:3000/test";
  const CLIENT_SECRET = "5kIEwgPacM7aV9m1Yk6BXRqdaTLe2jh1";
  const navigate = useNavigate()

  const code = new URL(window.location.href).searchParams.get("code");
  console.log(`code: ${code}`)

  const getToken = async () => {
    const payload = qs.stringify({
      grant_type: "authorization_code",
      client_id: REST_API_KEY,
      redirect_uri: REDIRECT_URI,
      code: code,
      client_secret: CLIENT_SECRET,
      });

    // access token 가져오기
    const res = await axios.post(
     "https://kauth.kakao.com/oauth/token",
      payload
    );
      
    const token = res.data.access_token

    console.log(token)

    axios.get('/api/login/oauth2/kakao',{
      params: {
        Authorization: token
      }
    }) //토큰 전송
    .then(res => {
      if(res.data.success){
        console.log(res.data)
        navigate('/extrainfo2')
      }
    })
    .catch(err => console.log(err))
  };

  return getToken()
}


export default Kakao

이게 원래 코드였는데 어떻게 바꾸고 도대체 왜 2번씩 불리는지 도저히 알지 못했다

그래서 그냥 다른사람들 카카오 로그인 API 보면서 따라해서 어떻게 해결되었다

import axios from 'axios';
import qs from "qs";
import { useEffect } from 'react';
import { useNavigate } from "react-router-dom";

export function Kakao() {
  const REST_API_KEY = "526de075efd0393b1b3dd0cbc43354ed";
  const REDIRECT_URI = "http://localhost:3000/test";
  const CLIENT_SECRET = "5kIEwgPacM7aV9m1Yk6BXRqdaTLe2jh1";
  const navigate = useNavigate()

  const code = new URL(window.location.href).searchParams.get("code");
  console.log(`code: ${code}`)

  useEffect(async() => {
    const payload = qs.stringify({
      grant_type: "authorization_code",
      client_id: REST_API_KEY,
      redirect_uri: REDIRECT_URI,
      code: code,
      client_secret: CLIENT_SECRET,
      });

    const res = await axios.post(
     "https://kauth.kakao.com/oauth/token",
      payload
    );

    const token = res.data.access_token
    console.log(token)

    axios.get('/api/login/oauth2/kakao',{
      params: {
        Authorization: token
      }
    }) //토큰 전송
    .then(res => {
      if(res.data.success){
        console.log(res.data)
        navigate('/extrainfo2')
      }
    })
    .catch(err => console.log(err))
  })

  return <div></div>
}


export default Kakao

변한 부분은 토큰 받아오고 전달하는것을 useEffect로 감쌌더니 완벽하게 해결되었다

인가코드, 토큰, 백에서 돌아온 결과값 에러하나 없이 제대로 나왔다!!

도대체 왜 그런 오류가 발생했는지 너무 알고싶지만 내 지식에선 알수가 없어서

답답해하고만 있다 ㅠㅠ