인프런 커뮤니티 질문&답변

장산님의 프로필 이미지
장산

작성한 질문수

맛집 지도앱 만들기 (React Native + NestJS)

[8-2] 카카오 로그인 구현하기 with WebView

8-2.카카오 로그인 구현하기 with WebView 강의중

해결된 질문

작성

·

260

1

  • 질문 작성시 꼭 참고해주세요

    • 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.

    • 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다.

       

    • 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

안녕하세요 강사님!
현재 15분 38초를 진행하고 있는데 카카오를 로그인하면 무한로딩되면서 홈화면에는 안넘어가고 있습니다. 일단 access_token은 잘넘어오는데 백엔드에서
[Nest] 77076 - 2024. 07. 09. 오후 2:32:09 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/uploads/index.html'

Error: ENOENT: no such file or directory, stat '/uploads/index.html' 라고 오류가 나옵니다. kakakoLoginMuattion부분 코드는 깃헙보면서 오타는 없는지 확인했습니다

답변 1

0

Kyo님의 프로필 이미지
Kyo
지식공유자

무한로딩이 된다고하셨는데 이것만보고는 저도 알수가 없습니다. 코드나 설정에 문제가없는지 확인해보셔야할것같아요.

Kyo님의 프로필 이미지
Kyo
지식공유자

카카오로그인 모두 활성화되어있고 redirect uri 설정하셨나요? 안드로이드/ios 둘다 안되나요?? 시뮬/실기기 어떤환경으로 진행중이신가요? 일반 로그인은 잘 되시는거죠?

장산님의 프로필 이미지
장산
질문자

스크린샷 2024-07-09 오후 8.46.14.png

지금은 ios 시뮬레이터인 iPhone15 ios 17.5버전으로만 진행하고 있습니다. 일반로그인은 잘되고있습니다!

Kyo님의 프로필 이미지
Kyo
지식공유자

우선 말씀하신 /uploads 에러는 무시하셔도 되고 그것과 상관없이 로그인이 되어야합니다.

const kakaoLogin = async (token: string): Promise<ResponseToken> => {
  const {data} = await axiosInstance.post('/auth/oauth/kakao', {token});
  console.log('data', data);

  return data;
};

카카오로그인 토큰은 잘 담긴다고 하셨는데, 그럼 콘솔을 찍어보면 서버에서 토큰이 오지않나요?

 

장산님의 프로필 이미지
장산
질문자

const requestToken = async (code: string) => {
    const response = await axios({
      method: 'post',
      url: 'https://kauth.kakao.com/oauth/token',
      params: {
        grant_type: 'authorization_code',
        client_id: KAKAO_REST_API_KEY,
        redirect_uri: REDIRECT_URI,
        code,
      },
    });
    console.log('response', response.data.access_token);

    kakaoLoginMutation.mutate(response.data.access_token);
  };

여기에서는 response에 토큰이 찍히는데

const kakaoLogin = async (token: string): Promise<ResponseToken> => {
  const {data} = await axiosInstance.post('/auth/oauth/kakao', {token});
  console.log('kakao', data);

  return data;
};

여기에서는 콘솔에 안찍히네여...

Kyo님의 프로필 이미지
Kyo
지식공유자

제가 코드를 다시 봤는데, 카카오로그인 요청자체를 안하고 있으셨습니다!

Kyo님의 프로필 이미지
Kyo
지식공유자

아래코드를 보시면, useLogin 훅에서 loginAPI를 받아 사용하는데, 장산님은 postLogin을 사용하고있습니다.

kakaoLogin 함수를 넘기더라도 postLogin이 동작하겠네요!

function useLogin<T>(
  loginAPI: MutationFunction<ResponseToken, T>,
  mutationOptions?: UseMutationCustomOptions,
) {
  return useMutation({
    mutationFn: postLogin, // 이부분에 오타가 있습니다.
    // ...(생략)
  
  });
}
장산님의 프로필 이미지
장산
질문자

아 보니까 깃헙 8-2 코드에서는 postLogin로 되어있고 8-3코드에서부터 loginApi로 바껴있네여 ㅠㅠ 강의에서는 loginApi로 진행하고 있네여..하하
loginApi로 바꾸니까 잘됩니다! 앞으로는 강의를 더 잘볼게여 ㅠㅠ감사합니다!

장산님의 프로필 이미지
장산

작성한 질문수

질문하기