.env 사용방법 && 사용 이유

.env는 무엇인가?

.env(환경 변수 파일)이란 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미하는데 웹 애플리케이션 관점에서는 .env 파일에 정의된 변수를 의미하며 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용한다.

.env는 어떻게 사용하는지

1. .gitignore에 등록하기

.gitignore 파일에 .env 를 등록하여 github에 .env가 올라가지 않도록한다.

<-- .gitignore -->
.env

2. .env 파일에 변수 작성

.env 파일에 실질적으로 감출 값을 작성하는데 아래와 같이 작성한다.

<-- ※주의※ 반드시 REACT_APP_ 로 시작한다.-->
REACT_APP_(변수명)= "(값)"
└ REACT_APP_apikey = "1234567"

3. .env 파일에 선언한 값을 사용

위의 2단계를 걸쳐 실질적으로 사용하는 방법은 아래와 같다.

<-- .env -->

REACT_APP_apikey = "1234567"

<-- JS -->
const App = () =>{
	<-- process.env로 별도의 import 없이 접근 가능하다 -->
    <-- 하지만 만약 REACT_APP_의 형식으로 작성하지 않았다면 인식하지 않는다.-->
	const apiKey = process.env.REACT_APP_apiKey;
	const API = `https://api.giphy.com/v1/gifs/random?api_key=${apiKey}`;

}