API 연결이 안됩니다.

배달앱 클론코딩 [with React Native]

react-native-config 문제 해결하기

작성

186

.env 설정을 아래 3가지로 해 보고, 이것도 안되서 실제 아이피로 해 봤는데도 애뮬레이터 아래 undefined라는 오류 메시지만 뜨네요

; API_URL = http://192.168.0.255:3105
API_URL = http://10.0.2.2:3105
; API_URL = http://localhost:3105

SignUp.tsx 는 아래와 같이 되어 있습니다.

try {
      setLoading(true);
      const response = await axios.post(`${Config.API_URL}/user`, {
        email,
        name,
        password,
      });
      console.log(response);
      Alert.alert('알림', '회원가입이 완료되었습니다.');
    } catch (error) {
      const errorResponse = (error as AxiosError).response;
      console.error(errorResponse);
      if (errorResponse) {
        Alert.alert('알림', errorResponse.data.message);
      }
    } finally {
      setLoading(false);
    }

해당 패키지도 모두 설치하고, 서버도 재시작하고 했는데도 안되네요.

포트스맨으로 http://localhost:3105로 post 요청을 해 보면 아래와 같은 오류가 뜹니다.

TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at /Users/xxx/React-Project/React-Native/back/app.js:104:27
    at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5)
    at /Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:341:12)
    at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:275:10)
    at urlencodedParser (/Users/xxx/React-Project/React-Native/back/node_modules/body-parser/lib/types/urlencoded.js:100:7)
    at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5)
POST /user 500 7.179 ms - 2

react-native

답변 1

제로초(조현영)

지식공유자

일단 백엔드은 실행되어있는 걸로 보입니다.

console.log(Config.API_URL) 해서 로깅되나 확인해보세요

인프러너

질문자

try 문 바로 밑에
console.log('Config:::', Config.API_URL);
이렇게 넣었는데
안드로이드 기기에서는

 LOG  Ghh@ch.bd Fhhh fggg@#_322
 LOG  Config::: undefined
 ERROR  undefined

이렇게 나오고 IOS 기기에서는

 LOG  Dfsdf@sdfsd.ffd Dsd tewt!@#123qwe
 LOG  Config::: http//localhost:3105
 ERROR  undefined

이렇게 나옵니다.

API_URL 주소를 아래 3가지로 모두 해 봤는데 로그 내용은 동일합니다.

; API_URL = http://192.168.0.255:3105
; API_URL = http://10.0.2.2:3105
API_URL = http://localhost:3105

제로초(조현영)

지식공유자

안드로이드에서는 메트로 서버를 껐다가 빌드를 다시 하시거나 react-native-config를 다시 설치하셔야할 것 같습니다.

ios에서는 되어야 정상입니다. ios 시뮬레이터 사파리에서 localhost:3105를 쳤을 때 들어가진다면요

인프러너

질문자

매트로 서버를 그고 npm i react-native-config를 한 후에 다시 실행을 해 보니 3가지 API로 실행을 하면 모두 아래와 같이 나오네요..

안드로이드, 아이폰 모두 동일합니다.

 LOG  Fewer@wer.wer Werwer werwerwer!@#123
 LOG  Config::: undefined
 ERROR  undefined

제로초(조현영)

지식공유자

Advanced Android Setup

In android/app/build.gradle, if you use applicationIdSuffix or applicationId that is different from the package name indicated in AndroidManifest.xml in <manifest package="..."> tag, for example, to support different build variants: Add this in android/app/build.gradle

defaultConfig {

...

resValue "string", "build_config_package", "ANDROIDMANIFEST_XML의_패키지_이름"

}

추가해보세요

build.gradle에도 다음 줄 있는지 봐보세요.

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

인프러너

질문자

가이드 해 주신대로 해봐도 안되서 이리저리 삽질하다가 결론은 프로젝트 모두 지우고 다시 처음부터 차근차근 다시 시도했습니다.

지금은 axios.post("http://localhost:3105/user'...로 요청을 하면 정상적으로 요청이 됩니다.

감사합니다.

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

API 연결이 안됩니다.