[React] API KEY 숨기기

API KEY는 개인 정보이다. 따라서 깃허브에 프로젝트 코드를 올릴 때는 이를 숨기고 올려야 한다. 이때 .env 파일을 생성하여 API KEY를 환경 변수로 설정해놓고 필요한 곳에서 불러다 쓰면 된다.

 

먼저 .env 파일을 만들자. 여기서 주의할 점은 .env 파일은 최상단 경로에 위치해야 한다!

그리고 아래와 같이 환경 변수를 선언한다.

// .env

REACT_APP_API_KEY = api key 입력

이때 환경 변수명은 꼭 REACT_APP_으로 시작해야한다. 또한 따옴표로 문자열을 감싸지 않아야 한다. 이와 관련된 내가 겪은 에러는 여기를 참고하면 된다.

 

이제 필요한 곳에서 환경 변수를 불러다 쓰면 되는데 아래와 같이 사용한다.

const API_KEY = process.env.REACT_APP_API_KEY;

이때 꼭 process.env.라고 작성한 후에 불러와야한다.

 

이런 식으로 코드를 작성하고 후에 깃허브에 프로젝트 코드를 올릴 때, .env 파일은 올리면 안 되므로 .gitignore에 .env 파일을 추가해준다.

// .gitignore

...

.env