[REACT] html script 에 .env 사용하기

나의 작고 소중한 API_KEY 를 남들에게 알려주기 싫다. 혼자만 간직하고 싶다.
그래서.env 파일에 적어넣고 사용하고싶다.

하지만 component 에서 사용할 게 아니라 html 파일에서 사용할 거다.
component 에서 사용한다면
const a = process.env.API_KEY 라고 하고 사용하면 되겠지만

html 파일에서 사용할 거라
<div src="google.com/API_KEY"> 이렇게 넣고싶다.

그러면

✅ CRA 로 프로젝트를 시작했다면

그러면

<div src="<%= process.env.REACT_APP_API_KEY%>">

라고 하면된다.
<%= > 😉

💡 CRA 로 시작했다면, dotenv 설치 안 해도 된다
❗ 단, CRA 로 시작했다면 .env 파일에서 API_KEY 를 설정할 때
REACT_APP_ 이라는 걸 붙여줘야한다.

EX) REACT_APP_API_KEY

혹시나해서 그러는데 .env 파일을 정의한 뒤에 서버를 다시 켜야한다.

<%= %> 잊지말자.

<% %> 아니고
%% 아니다

정확하지 않은 글을 싸질러놓은 블로거들에게는 철퇴를 내려야.

😜 CRA 가 아니라면

참고: .env 사용하기