RE:BORN Frontend - React Native 환경 변수 설정하기

안녕하세요! 

저는 종강해서 안녕합니다 >_<

 

오늘은 React Native로 프론트엔드 개발을 하면서 환경 변수 설정을 어떻게 했었는지 적어보려고 합니다 :)

방법은 생각보다 간단합니다!

 

그런데 잠깐,

 

저는 Naver Clova Sentiment AI를 활용해서 감정일기 작성 시 긍정, 부정, 중립 단어 비율을 분석하여 그 값을 반환해주는 기능을 개발했었는데요,

만약 다른 AI 서비스를 가져다 사용하신다면, 환경변수 설정하는 방법이 제가 했던 방법과 굉장히 다를 수 있습니다.

본인이 사용하는 해당 AI 서비스의 Documentary를 보시는 것이 더 정확합니다!

참고용으로만 봐주시면 감사하겠습니다!

 

1. 터미널을 열고 다음과 같이 명령어를 작성하여 라이브러리를 설치해주세요.

npm install -D react-native-dotenv

2. 루트 디렉토리에 .env 파일을 만든 후 다음과 같이 작성합니다.

API_URL=API_URL을적어주세요
CLIENT_ID=발급받은CLIENT_ID를적어주세요
CLIENT_SECRET=발급받은CLIENT_SECRET을적어주세요

 

3. 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,
        },
      ],
    ],
  };
};

4. .gitignore 파일에 .env 를 추가로 작성합니다.

 

4단계 밖에 없으니 간단하죠?

라고 할 만큼 다른 팀원들도 에러 이슈가 딱히 없었기 때문에 깔끔한 방법이었다고 생각합니다 :)

물론 알아내는데 시간이 조금 걸리긴 했지만요...^_ㅠ

 

다음에 또 다른 글(이거를 개발 일지라고 해야 할지 개발 이슈라고 해야할지 모르겠음)로 찾아오겠습니다 안녕 :)