React 카카오 로그인 개발 #2 - 로그인 화면 만들기

 
클라이언트 - React, Next.js 사용
서버 - node
 

1. 로그인 화면 만들기

import KAKAO from "../../../public/images/icon_kakao.svg";

const Login = () => {
 return (
   <a href="http://localhost:8080/auth/snsLoginKakao">
      <KAKAO />
</a>
 )
}

 
a 태그  href에 서버 통신할 경로를 넣었는데 서버 도메인을 보여준다는게 마음에 안들었습니다.
 

2. next.config.js > rewrites() 설정

const API = "http://localhost:8080";  

const nextConfig = {
    async rewrites() {
        return [
          {
            source: "/@api/:path*",
            destination: `${API}/:path*`,
          },
        ];
      },
}

module.exports = nextConfig;

 
next.config.js 파일은 Next.js 프로젝트의 설정 파일로, 다양한 구성 옵션을 정의할 수 있습니다.
rewrites() 함수는 이 파일 내에서 사용되며, 주로 URL 리다이렉션 및 라우팅을 조정하는 데에 활용됩니다.
 
API 변수에 서버 도메인으로 세팅을 하였고, rewrites() 함수를 사용해서 "/@api/:path"로 들어오는 Url은 http://localhost:8080/:path로 갈 수 있게 세팅을 해주었습니다.
 
 

3. 로그인 화면 경로 수정

<a href="/@api/auth/snsLoginKakao">
  <KAKAO />
</a>

 
로그인 화면의 href 경로를 "/@api/auth/snsLoginKakao"로 변경을 해주었습니다.
 
 

 
수정결과 
 

 
통신 경로