[React] API Key 숨기기

이번 포스팅은 API를 사용하는 프로젝트를 Github에 올릴 때 api key를 숨기는 방법이다.

나는 CRA로 프로젝트를 만들었기 때문에 이 경우에는 따로 dotenv를 설치할 필요는 없다.

 

최상위 경로(root)에 .env 파일 생성

가장 먼저 최상위 경로에 .env 파일을 생성해서 환경변수를 지정해주어야 한다.

무조건 최상위 폴더에 생성해야 한다.

그 뒤에 .env 파일 안에 아래와 같이 작성한다.

//.env
REACT_APP_API_KEY=내API키

React에선 무조건 REACT_APP_~으로 시작하는 이름으로 작성해야 한다.

Node.js 에서는 굳이 이럴 필요는 없지만 React에선 필수이다.

 

API Key 불러오기

그 뒤에 불러올 컴포넌트에서 아래와 같이 선언한 뒤 사용하면 된다.

const API_KEY = process.env.REACT_APP_API_KEY;

 

gitignore에 추가하기

마지막으로 .gitignore에 아래와 같이 추가하고 마무리한다.

//.gitignore
.env

이제 github에 올리면 된다!