선생님 카카오 로그인 구현 질문있습니다.

리액트 , nodejs,mongodb사용중입니다.

클라이언트에서 버튼을누르면 아래 컴포넌트를 발동시키는데요,
 <SocialKakao />

이 컴포넌트 코드는 이렇습니다.

const SocialKakao = () => {
  const REST_API_KEY = process.env.REACT_APP_KAKAO_ID;
  const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback';
  // oauth 요청 URL
  const KAKAOURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const onLogin = () => {
    window.location.href = KAKAOURL;
  };

  return (
    <>
      <KakaoButton onClick={onLogin}>
        <RiKakaoTalkFill size={29} /> &nbsp;카카오계정으로 회원가입
      </KakaoButton>
    </>
  );
};
 

그리고 여기서 카카오톡 인증 뭐 어쩌구 로그인 페이지는 잘떠서 확인누르고 하면 code를 발급받는 url이 뜨는데요,

http://localhost:3000/auth/kakao/callback?code=E1V9JaV1w64BdmjRFLACDW5fz9hwGgVn7KXLX-8scpgXZl8iEs2FfIwJssUEn1_tFD64DQo9dRkAAAGJzCI4XA

이런 페이지로 가게되는데 여기서 어떻게해야되나요?
일단은 /auth/kakao/callback 경로의 컴포넌트를 만들어줘서 에러는 안뜹니다.

/auth/kakao/callback 경로의 컴포넌트 코드구조는 이렇습니다.

import axios from 'axios';
import React, { useEffect } from 'react';

const KakaoCallBack = () => {
    useEffect(() => {
      const params = new URL(document.location.toString()).searchParams;
      const code = params.get('code');
      const grant_type = 'authorization_code';
      const client_id = `${process.env.REACT_APP_KAKAO_ID}`;
      const REDIRECT_URI = '/api/auth/kakao/callback';

      axios
        .post(
          `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${client_id}&redirect_uri=${REDIRECT_URI}&code=${code}`,
          {},
          {
            headers: {
              'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
            },
          }
        )
        .then((res) => {
          console.log(res);
        });
    }, []);
  return <div>KakaoCallBack</div>;
};

export default KakaoCallBack;

근데 useEffect이거 주석처리안해주면 Request failed with status code 400 AxiosError: Request failed with status code 400 at settle (http://localhost:3000/static/js/bundle.js:133539:12) at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:132230:66)
이런 에러가발생하네요

지금 너무 헤매고있어서 너무 힘드네요..
처음에는 passport 로컬방식을쓰고있어서 passport-kakao를 설치해서 서버쪽에서 하고,
클라이언트쪽에서는 a태그걸고 href='/auth/kakao/' 이렇게만해줬었는데 회원가입,로그인 처리가 안되고 빈페이지만뜨길래
지금과같은 방식으로 클라이언트는 수정해줫는데요,

서버쪽코드는 인터넷 검색검색해서 이런식으로 구현해봤습니다. 

- 경로
app.use('/api/auth', require('./routes/api/auth'));
 
- 미들웨어

passport.use(
  new KakaoStrategy(
    {
      clientID: process.env.KAKAO_ID,
      callbackURL: '/auth/kakao/callback',
    },
    async (accessToken, refreshToken, profile, done) => {
      console.log(accessToken, profile);
      try {
        // 사용자의 정보는 profile에 들어있다.
        const exUser = await User.findOne({
          where: { snsId: profile.id, provider: 'kakao' },
        });

        if (exUser) {
          // 로그인 성공
          done(null, exUser);
        } else {
          // 가입 이력없으면 회원가입시키고 로그인 성공
          const newUser = await user.create({
            email: profile._json && profile._json.kaccount_email,
            nick: profile.displayName,
            snsId: profile.id,
            provider: 'kakao',
          });
          done(null, newUser);
        }
      } catch (error) {
        done(error);
      }
    }
  )
 

- 라우터

/** kakao login */
router.get('/kakao', passport.authenticate('kakao'));

router.get(
  '/kakao/callback',
  passport.authenticate('kakao', {
    failureRedirect: '/',
  }),
  (req, res) => {
    console.log('res', res);
    res.redirect('/');
  }
);

이렇게해줬는데..
카카오톡 클라이언트에서 지금처럼 코드를 구현했으면 제가 passport-kakao로 구현한 서버쪽 코드가 필요한가요??