인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

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

[5-7] 환경변수 설정하기

카카오 로그인시 redirect 에러

작성

·

46

·

수정됨

0

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

  • 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.

  • 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.

  • 개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.

  • 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.

(일부만 자르거나 일부만 복사하지말아주세요.)

 

image.png

현재 3가지 문제가 있는데
1. PC 로 url 클릭시 현재 로그인 까진 잘뜨는데 확인하고 계속하기를 누르면 사이트에 연결할수 없다고 뜹니다. 어떤걸 확인해야되는걸까요?

image.png

 

2. 안드로이드랑 ios 시뮬레이터에서 맨위에 로그인 화면 부터 하얀화면으로 뜨고 있는 상황입니다. 피씨로 url 클릭하면 저렇게 잘보이긴해요. rest 키 제대로 들어갔고 redirect url 에 추가 잘했는데 왜그런지 감이 안잡힙니다..


3. 아이폰이나 안드로이드 폰에서 직접 테스트해보고 싶은데 어떻게 하면 되는지 알수 있을까요?

답변 1

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 팀 리미티드개발 공식 계정님. 카카오 로그인 시 발생하는 두 가지 문제에 대해 해결 방안을 제안드리겠습니다.

  1. PC에서 URL 클릭 시 사이트 연결 오류

이 문제는 주로 redirect_uri 설정 차이에 의해 발생할 수 있습니다. 로컬 환경에서 테스트 중이라면, localhost 대신 실제 가능한 도메인이나 아이피 주소를 사용해야 합니다. ERR_CONNECTION_REFUSED 에러는 일반적으로 클라이언트가 서버에 접근할 수 없을 때 발생합니다.

  • 로컬 서버 설정: 로컬 서버가 실제 접근 가능한 위치(아이피 또는 도메인)를 갖고 있는지 확인해 주세요. localhost:포트번호 대신 가능한 도메인을 사용하거나, 카카오 개발자 콘솔에서 redirect_uri를 정확히 지정해 보세요.

  • 프록시 설정 확인: 네트워크의 프록시 설정을 검토하여 본인의 환경에서 localhost로의 접근이 제한되어 있는지 점검해 보세요.

  1. 안드로이드 및 iOS 시뮬레이터 로그인 시 하얀 화면

하얀 화면 문제는 WebView 설정 및 네트워크 관련 문제일 수 있습니다. 모바일 환경에서는 다양한 요인이 영향을 끼칠 수 있습니다.

  • WebView 구현 확인: WebView 컴포넌트에서 올바르게 로드되지 않을 수 있습니다. injectedJavaScript, onLoad, onNavigating 등의 이벤트 핸들러를 재검토하여, JavaScript와 리액트 네이티브 간의 원활한 상호작용을 점검해 보세요.

  • redirect_uri 등록 확인: 카카오 개발자 사이트에서 iOS 및 안드로이드의 redirect_uri가 정확히 등록되어 있는지 확인하세요. 종종 등록 과정에서 빠뜨리는 경우가 많습니다.

유사한 문제를 다룬 다른 질문에 대한 답변 링크를 제공합니다:

위의 조언에 따라 개별 설정을 검토하고 특정 오류 로그를 통해 구체적인 문제를 식별하면 문제 해결에 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.