inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

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

해결된 질문

469

장산

작성한 질문수 46

1

안녕하세요 강사님!
현재 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부분 코드는 깃헙보면서 오타는 없는지 확인했습니다

react-native typescript nestjs react-query zustand

답변 1

0

Kyo

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

0

Kyo

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

0

장산

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

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

0

Kyo

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

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

  return data;
};

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

 

0

장산

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;
};

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

0

Kyo

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

1

Kyo

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

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

function useLogin<T>(
  loginAPI: MutationFunction<ResponseToken, T>,
  mutationOptions?: UseMutationCustomOptions,
) {
  return useMutation({
    mutationFn: postLogin, // 이부분에 오타가 있습니다.
    // ...(생략)
  
  });
}

1

장산

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

react-native-screens 버전 호환 문제

2

156

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

104

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

97

1

소스코드가 강의 순서랑 다른가요?

0

74

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

116

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

92

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

84

1

강의 수강 순서 관련

0

72

1

애뮬레이터 실행 방법

0

101

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

92

2

ios 실기기 연결

0

70

2

npm run ios에러

0

76

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

102

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

52

1

안드로이드 위치 권한 이슈 2가지 문의

0

72

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

75

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

70

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

83

2

사내에서 figma.com 업로드 안되나요?

0

97

1

AWS EC2 + RDS 설정

0

86

2

안드로이드 안켜집니다.

0

92

2