[React] 환경 변수(.env) 사용법

 

 

 

 

개발을 할 때, DB 관련 정보나 API key, Token 등 외부로 노출되면 안 되는 값들이 있다.

이 때 필요한 것이 .env (환경 변수 파일)이며, 이는 보안과 유지보수에 용이하다.

 

 

💙 CRA 환경

• 변수명은 반드시 'REACT_APP_'으로 시작되어야 한다.
  • create-react-app에서는 'REACT_APP_'으로 시작되지 않는 환경 변수는 무시한다.
• 'process.env.REACT_APP_변수명'으로 접근 가능하다.
• .gitignore에 .env를 추가한다.

 

💜 VITE 환경

• VITE 환경에서는 dotenv 설치가 필요 없다.
• .env 파일을 프로젝트의 최상위 루트에 생성한다.
• 변수명은 반드시 'VITE_'으로 시작되어야 한다.
• 'import.meta.env.변수명'으로 접근 가능하다.
• .gitignore에 .env를 추가한다.

 

→ 환경 변수 파일이 수정되면, 서버를 재시작해야 한다.

→ .env 파일은 프로젝트의 최상위 루트에 생성한다.