카카오 로그인 🎃🎃🎃

 

 

 카카오 로그인 도전~!

 

https://developers.kakao.com/

Kakao Developers

내 애플리케이션에 들어간다.

 

룸인어스는 뒤에 배경 없애주고 싶다... 

 

 

플랫폼 등록에서 도메인 등록 일단은 로컬3000으로 ! 

 

 

활성화 설정 ON ~~~~

 

왼쪽 햄버거를 눌러서 동의 항목 설정에 들어오면

 

설정 후 내 애플리케이션 > 앱 설정 > 앱 키에서 JavaScript 키를 복사한다.

 

 

.env 파일에 이렇게 적었는데 이렇게 적는게 맞는건가? 

process.env.NEXT_PUBLIC_KAKAO_JS_KEY = "복사한 키";

 

 

이렇게... 반투명해져버렸다. 

return; 이라고 써서 그렇구나... 

 

그 다음부터 이해가 안되기 시작한다.

일단 블로그 따라서 Login page를 만들었다. 

 

const Login = () => {

  function kakaoLogin() {
    window.Kakao.Auth?.authorize({
      redirectUri: "http://localhost:3000/",
    });
  }

  return (
    <div>
      <button onClick={kakaoLogin}>카카오 로그인</button>
    </div>
  );
};

export default Login;

아까 등록한 거구나. 

그럼 맞게 했는데 왜 아무 반응이 없지? 

 

환경변수 찍어보니까 계속 undefined 나와서 보니까

 

module.exports = {
  reactStrictMode: true,
  compiler: {
    emotion: true,
  },
  env: {
    BASE_URL: process.env.BASE_URL,
  },
};

이걸 추가하래서 추가했는데도 안돼서 보니까...

ㅎㅎ 그냥 복붙했더니... process.env.가 여기에 딸려있었네...

 

 

앞에꺼 지워주니 해결됐다.

 

 

이 다음부터는 웅이가 필요한 것 같아서 안 했다. 

 

 

https://velog.io/@ice-prince/Next.JS%EC%97%90%EC%84%9C-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

Next.JS에서 카카오 로그인 구현하기