React에서의 환경변수 설정

외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, null값이라 나서 한참 헤맸다.

찾아보니, React에서는 환경변수 설정시 변수명에 REACT_APP_ 접두어가 꼭 필요하다고 한다. 예약어이니, 함부로 사용하지 않도록 주의!
알고 있다고 착각하지 말고, 필요할 땐 검색을 바로바로 하도록!

기존의 만들어 두었던 Todo앱을 React로 리팩토링하면서 notion api를 사용하려는데, 필요한 database id와 token을 .env 파일에 담는다.

.env

// .env 
// !!중요!! 홑, 쌍따옴표 없이!! 
REACT_APP_NOTION_TOKEN = secret_*******************************************
REACT_APP_NOTION_DATABASE_ID = ********-****-****-****-************

🛑 undefined로 출력될 때 체크리스트

1. 홑 '' , 쌍 "" 따옴표로 감싸지 않는다.
   줄 끝에 , , ; 를 붙이지 않는다.

   REACT_APP_NOTION_TOKEN = secret_********
   REACT_APP_NOTION_ID = ABCD1234

2. 루트 경로에 있는지 확인한다.

3. 중요!! 프론트 서버를 재시작한다!!!

2번과 3번의 대환장 컬래버로 한참을 헤맸다. 위에 ""로 예시를 적어두어서 5개월?만에 정정했다. 😇

.gitignore

꼭 .gitignore에 포함시켜 노출되지 않도록 주의한다.
안그럼 깃허브에서 연락옴 (보안경고)

# .gitignore
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

접근

따로 설치해야할 모듈은 없고 process.env.REACT_APP_...로 전역에서 접근할 수 있다.

const notionToken = process.env.REACT_APP_NOTION_TOKEN
const notionDatabaseID = process.env.REACT_APP_NOTION_DATABASE_ID

---

우선순위

환경변수는 npm script에 따라 자동으로 값이 지정된다고 한다.

• npm start 시 (위 부터 우선 적용)
  • .env.development.local
  • .env.development
  • .env.local
  • .env
• npm run build 시
  • .env.production.local
  • .env.production
  • .env.local
  • .env
• npm test 시
  • .env.test.local
  • .env.test
  • .env

---

출처

• [Front end] React .env 설정 및 우선순위

Updated

• 2022.10.05 'env 파일 우선순위' 내용을 추가

Updated

• 2023.03.19 '🛑 undefined로 출력될 때 체크리스트'를 추가