[RN] expo .env파일 생성 및 apk파일에서 api인식하기

expo을 통해 apk파일을 다운받았는데 expoGo를 통해 잘 작동하던 axios가 작동하지 않는 에러가 발생했다.

처음에는 백엔드 서버가 문제라고 생각을 해서 확인해 봤지만 문제가 없어서 앱에서 네트워크 인식을 못한다고 결론을 내렸다.

.env

1. npm install react-native-dotenv --save

2. package.json파일이 있는 폴더에 .env 파일 생성

3. .env파일에 api주소 지정 API_URL='URL'
   api_key가 있다면 key도 여기에 적어준다.

4. babel.config.js 수정

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    // 밑의 내용을 추가
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

5. api사용하는 .js파일에서 불러오기

// babel 설정을 한 경우
import { API_URL } from '@env'; 

// 4번의 babel 설정을 안하면 
import { API_URL } from 'react-native-dotenv';

• 만약 위와 같은 설정을 한 후에도 동일한 에러가 나오면
  https://github.com/expo/expo/issues/22887을 통해 해결가능하다.

6. npx expo install expo-build-properties을 설치
7. app.json을 수정한다.

{
  "expo":{
    //... 기타 설정
    // 추가 내용
    "plugins":[
      "expo-build-properties",
      {
        "android": {
          "usesCleartextTraffic": true
        }
      }
    ]
  }