5_dotenv는_무엇일까

조금 더 생각해 보고 싶은 부분을 공부한 글입니다.

작성일: 2023-12-29
수정일:

주제를 선정한 이유

React를 사용해서 프로젝트를 진행한 적이 있습니다. 당시, Google Map을 구현을 담당하였습니다. 사용량에 따라 과금이 발생하는 유료 API라 API key 보안이 특히 중요했습니다. 그 때, 처음으로 알게 된 개념이 dotenv 즉, .env입니다. API key 보안에 사용된다는 개념만 알고 있던 .env에 대해 정리해 보고자 합니다.

.env 사용 목적

보안이 필요한 API_KEY나 DB 관련 정보 등을 .env 파일에 환경변수로 만들어 변수를 사용하는 방식으로 중요 정보의 유출을 방지합니다.

.env 사용 방법

.env 파일은 프로젝트의 최상위 루트에 저장해야 합니다.

루트 위치에 저장해야 하는 이유
- 만약 .env 파일이 루트 디렉터리에 위치하지 않는다면, 빌드 프로세스가 해당 파일을 찾지 못해 환경 변수를 올바르게 로드하지 못하게 됩니다.

create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시됩니다. 그러므로 .env에서 변수명은 항상 REACT_APP_으로 시작되어야 합니다.

REACT_APP_API_KEY=API_VALUE

// 키와 값을 연결해 주는 등호 연산자에 띄어쓰기하지 않음
// 값을 ""로 감싸지 않아도 String으로 인식

.env에 등록된 변수는 별도의 import가 필요하지 않고, 전역에서 process.env.REACT＿APP＿를 사용해 불러올 수 있습니다.

process.env.REACT_APP_API_KEY

process.env는 실행 시 로드되므로 .env 파일 변경 후에는 React를 다시 실행해야 합니다.

프로젝트를 git에 올릴 경우, 반드시 .gitIgnore .env를 추가하여 환경설정 파일이 외부로 유출되지 않도록 유의해야 합니다.

정리

5_dotenv는_무엇일까.

보안이 필요한 정보를 환경 변수로 설정하여 사용하도록 함으로써 정보의 유출을 방지
예약어를 사용해 간단하게 사용할 수 있으나,
- 파일의 위치는 최상위 루트 디렉터리에 위치 시켜야 하고,
- .gitIgnore에 포함해 git 저장소에 올리지 않도록 유의해야 함

📚참고 자료

[REACT] .env 를 이용한 변수선언 및 사용법
[React] 리액트에서 .env 환경변수 사용하기!
.env

저작자표시