React Api key값 관리하기 (.env)

.env 

: 프로젝트를 하다 보면 google, kakao api key값 같은 민감한 정보를 관리햐야할때가 있다.

해당 정보를 그대로 노출하면 보안에 문제점이 생기기 때문에 이번 시간에는 env에 대하여 알아보자. 

 

 

React Api key값 관리하기

 

1. 환경변수 파일 설정

: 루트 경로에 .env파일을 만들어준다. src폴더 안에 만드는건 아니다! 

 

 

.env파일 안에는 원하시는 정보를 적자.

꼭 REACT_APP_으로 시작해야한다.

 

REACT_APP_KAKAOMAP_API_KEY=key 입력

 

 

사용법 

- jsx 안에서 사용하는 경우

{process.env.REACT_APP_KAKAO_API_KEY}

 

- html같은 경우 %%사이에 넣는다.

<script
	type="text/javascript"
	src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_API_KEY%"
>
</script>

 

 

서버 재시작 

: 환경변수를 수정하고 나서는 서버를 재시작해야한다.!!

 

 

 

 

출처

https://talkwithcode.tistory.com/29?category=1019861 

React Api key값 관리하기 (.env)

https://yam-cha.tistory.com/174

[React] api key 숨기기, React 환경에서 Kakao Map API 사용 시 api key를 관리하는 방법