배경

최근에 임베디드 시스템이라는 과목에서 라즈베리파이를 이용한 프로젝트를 진행하면서, chatgpt api를 써야 했다.

chatgpt를 이용해서 데이터를 json형태로 받아오고 해당데이터를 파싱해서 써야됬는데, axios를 이용해 openai서버에 요청할때 api_key를 적어야한다.

문제는 이 api_key는 개인적인것이고, 노출된 채로 github같은 코드 공유 사이트에 올라가게 된다면, 다른사람이 이 키를 마구 사용할 것이다!

그래서 이 api_key를 분리된 파일로 관리하고, 해당 파일이 push할때 포함되지 않도록 해볼것이다.

해결

우선 내 react native project 이다.

이 부분에서 다음과 같이 api_key를 이용해서 서버에 post요청을 보내고 데이터를 받아온다.
api_key가 노출되지 않게 하기 위해서 다음과 같이 하면 된다.

루트디렉토리에 .env라는 파일을 생성하고 다음과 같이 입력한다. 이때 'your key'는 본인이 발급받은 apikey이다.

CHATGPT_API_KEY=  your key

리액트 프로젝트 터미널에 다음과 같이 입력하여 패키지를 설치한다.

npm install react-native-dotenv

루트디렉토리의 'babel.config.js' 파일을 다음과 같이 수정해준다.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
      },
    ],
  ],
};

루트디렉토리에 'env.d.ts' 파일을 생성한 후 다음과 같이 수정해준다.

declare module '@env'{
    export const CHATGPT_API_KEY: string;
}

api key의 type을 정해주는것이다.(react native가 typescript이기 때문이다)

'.gitignore'파일에 다음과 같이 추가 해준다.

# Api
.env

.env 파일은 push하지 않는다는 뜻이다.

준비 끝!

프로젝트를 npm start로 재구동 하면 잘 실행될 것이다.

후기

공유프로젝트가 아니고 개인프로젝트이며 깃허브에 올릴 생각도 없다면, 안해도 되지만, 그런 개발자는 없다고 생각한다. (자랑은 해야지) 그래서 열심히 구글링과 gpt의 도움을 받아서 해냈다. 뿌듯하구만