환경변수를 사용하는 이유

API key와 같이 공개할 수 없는 정보가 코드에 포함될 경우, 네트워크를 통해 API key가 공개될 수 있다. 이런 일을 방지하기 위해서는, API key를 코드가 아닌 PC에 저장해두고 사용해야 한다. JavaScript에서 변수에 문자열을 할당하는 것처럼, API key를 PC에서 사용하는 변수에 할당하고 사용할 수 있다.

dotenv을 이용한 환경변수 사용 방법

$yarn add dotenv

루트 경로에 .env파일을 생성해 줍니다.

.gitignnore에 .env를 추가해 줍니다. (원격 저장소에 저장할 때 파일이 올라가지 않습니다.)

.env에 사용할 key를 저장해주어야 합니다. (주의할 점은 REACT_APP_을 꼭 붙여주어야 합니다.)

ex) REACT_APP_MY_NAME=KIMYOUNGHO

키 사용법

const GITHUB_MY_NAME = process.env.REACT_APP_MY_NAME;
process.env.변수명으로 접근하여 환경변수를 사용할 수 있습니다.