React - 환경변수 설정하기(유튜브 API 키 숨기기)

1. 가장 상위 root에 .env파일을 생성한다.

2. 다음과 같이 숨길 데이터를 .env 파일 안에 저장한다.

   ❗❗ 꼭 REACT_APP_이라는 접두어를 붙여서 작성하고, 마지막에 ;는 쓰지 않는다.

3. gitignore에 .env를 추가해 깃허브에 노출되지 않도록 한다.

4. dotenv 패키지 설치하기 (nodeJS에서 process.env에 접근할 경우 필요)

$npm i dotenv

내 env 파일을 읽고 각 변수들을 process.env 안에 넣어 주는 패키지이다.

❗ As early as possible in your application, require and configure dotenv.

• 방법
  1. require('dotenv').config() : process.env 사용하는 모든 파일 상단에 작성 (💩)
  2. import "dotenv/config"; : 가장 먼저 실행되는 js파일(e.g. init.js) 맨위에 작성해주자.(👍) 그래야 어디서든(server.js, db.js ...) env에 접근가능하다.
  3. 이외의 방법들은 dotenv의 docs를 참고하자.

5. 환경변수 사용하기! : 다음과 같이 process.env.변수이름으로 사용한다. ( 따로 import할 필요없이 그냥 쓰면 된다. )

const key=process.env.REACT_APP_YOUTUBE_API_KEY;