[React] 환경 변수 파일 .env란?

 

env란?

• 어플리케이션 및 웹 개발 중 외부에 공개되면 안되는 정보 (예: 포트 번호, 데이터베이스 관련 정보, 토큰, API 키 등)가 존재하게 될텐데, 이러한 정보가 하드 코딩으로 구성 파일에 포함되면 깃허브나 기타 오픈소스에서 관련 정보들이 노출될 위험이 있습니다.
• 또한, 서버나 토큰 정보가 수정될 경우 하드코딩을 하였기 때문에 코드를 다시 수정하여 배포해야 하는 문제점도 발생합니다.
• 이때 이러한 문제를 해결하기 위해 env 파일을 사용합니다.

env 파일을 사용하게 되면 외부에 공개되면 안되는 정보들을 구성 파일에 하드코딩하지 않고 사용할 수 있게 됩니다.

 

 

외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오는 이유는 보안성과 유지보수성을 높이기 위함입니다.

 

 

 

React에서 .env 파일 생성하는 방법

1. .env 파일 만들기
2. 먼저 React 프로젝트 최상위 루트에 .env 파일 생성
3. .gitgnore에 .env 추가
4. 깃허브 등 오픈소스 공개 시 해당 정보가 업로드되는 것을 막기 위해 .env 추가
5. 외부로 알려지면 안될 민감한 정보 작성value 값에 ‘ ’, “ ” 와 같은 따옴표로 감싸지 않아야 함
6. 줄 끝에 , 또는 ;를 붙이지 않도록 주의해야 함
7. 변수명 앞에 REACT_APP_를 꼭 붙여줘야 함
8. 등록한 변수 사용하기따라서 전역 어디서든 process.env.{변수이름}으로 가져와서 사용하면 됨.
9. .env에 등록된 변수는 별도의 import가 필요하지 않음