✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지
Issue ▸
카카오 로그인 REST-API 기반의 프론트 구현에 대한 이슈들. 결국엔 백엔드 API 개발의 문제였지만, 그래도 기록해본다.
Solve :
- 클라이언트에서 클릭 이벤트를 통해 카카오 로그인 API와 통신하여 인가 코드를 받는다. 리다이렉트 되는 주소의 ?code= 에 value로 반환 된다.
const kakaoLogin: any = () => {
const REST_API_KEY = "BE와 합의한 REST API ID를 작성한다.";
// 클라이언트에서 리다이렉트 받을 페이지 라우팅을 준비하고, 그 주소를 기입
const REDIRECT_URI = "http://localhost:5173/kakao";
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
// kakaoURL 변수에 담긴 동적 쿼리 주소를 통해 코드를 반환 받을 수 있다.
window.location.href = kakaoURL;
};- 리다이렉트 되는 페이지인 /kakao에서 백엔드와의 서버 통신을 진행한다 !
const Kakao = () => {
// searchParams 라는 메소드를 이용하여 주소 속 code라는 key를 가진 value를 가져와 변수에 담을 수 있다.
const code = new URL(window.location.href);
const codeValue = code.searchParams.get("code");
const navigate = useNavigate();
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get(
`${
import.meta.env.VITE_REACT_API_KEY
}/api/members/kakao/callback?code=${codeValue}`,
{
headers: {
"Content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
}
);
if (res.status === 200) {
toast.success("카카오 계정을 통해 로그인 되었습니다.");
localStorage.setItem("authorization", res.headers.authorization);
// localStorage.setItem("authorization_refresh", refreshToken);
navigate("/");
}
} catch (error) {
toast.error("카카오 로그인에 문제가 생겼습니다.");
}
};
fetchData();
}, []);
return (
<div className="flex flex-col justify-center items-center h-[100%]">
<Loading />
</div>
);
};
export default Kakao;- 하지만 문제는 백엔드에서 있었다. 카카오 로그인 API는 프론트에서 전달해주는 카카오 인가 코드를 전달 받아서, 카카오 토큰 발급 API와 통신한 뒤 카카오 토큰을 받아, 인증 확인을 거친 후, 로컬에서 개발한 JWT 토큰으로 교환하여 프론트에 돌려주는 로직이 필요했다. 그러나 백엔드 개발자 동료는 entity, controller, dto에 통일적으로 작성 되었어야 할 카카오 유저 정보 부분에서 휴먼 에러를 냈고, 그 때문에 서버에서는 계속 500 error가 발생하고 있었다. 백엔드 리더님과 함꼐 log.info를 찍어보며 해결할 수 있었다.
Frontend Engineer