[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가 필요하지 않음