---

.env(환경변수)로 API key 숨기기

환경변수 셋팅

• CRA로 생성한 React 프로젝트에서는 dotenv 라이브러리가 이미 설치 되어있어 따로 설치가 필요 없음.

1. 프로젝트의 루트 디렉토리(최상위)에 .env 파일 생성.
2. .gitignore 파일에 .env를 추가해 커밋에서 제외.

# 환경변수
.env

3. .env 파일에 API key 입력.
   • 변수 이름은 항상 REACT_APP_ 로 시작해야 함.
   • 변수 값에 따옴표를 사용하지 않음.
   • 변수 구분은 줄바꿈으로 함.

REACT_APP_KAKAO_API_KEY=123456789987654321
REACT_APP_PUBLIC_OPEN_API_ENCODING_KEY=123456789456123

4. 개발서버를 이용 중 일때는 재시작 해야함.

환경변수 이용

• 환경변수로 선언된 키는 프로젝트 내부 어디에서든 이용 가능.
• js와 jsx에서는 process.env.REACT_APP_변수명으로 사용.

const api = await axios.get(`https://apis.url?ver=1.4&serviceKey=${process.env.REACT_APP_PUBLIC_KEY}`);

• HTML에서는 %REACT_APP_변수명% 으로 사용.

<script type="text/javascript" src="https://kakao.com/sdk?appkey=%REACT_APP_KAKAO_API_KEY%"/>

---