[React] API Key값 관리 (feat. 환경변수, gitignore)

사이드 프로젝트 진행 중 API Key를 발급받아 사용할 일이 생겼습니다. 이렇게 발급받은 Key는 Public Repository에 Push할 경우, 보안 이슈가 발생할 수 있어 반드시 환경변수로 등록하여 사용하고, Key값이 작성된 파일은 .gitignore에 등록하여 숨김 처리 후 Push해야 합니다.

(리액트 기준) 환경변수로 API Key값 관리하는 방법

1) 프로젝트 루트단에 .env 파일 생성

• src 디렉토리 안에 넣지 않도록 주의
  

2) .env 파일에 REACT_APP_변수명=Key값 입력

• 반드시 REACT_APP_ 를 붙여줘야 함
• 입력 시 quote는 필요 없음

REACT_APP_API_KEY=123456

3) .gitignore에 .env 등록

4) npm 서버 재실행

5) API Key가 필요한 파일에서 process.env.REACT_APP_변수명 으로 불러와서 사용

// e.g.
Axios.get('http://~~.go.kr/serviceKey=' + process.env.REACT_APP_API_KEY)
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    })