[React] .env에 관하여

borderline0px·2021년 11월 30일
1

React

목록 보기
3/3

이전까지는 api key를 .env에서 관리하고,
.gitignore를 통해
민감한 정보를 숨기는 것 자체에 초점을 맞췄었다

문득 왜 REACT_APP_을 작성해주어야 하는가?
에 대한 의문이 들었다

이것과 관련된 내용을 정리하고자 한다


✏️ 환경변수란?

환경 변수(環境 變數, 영어: environment variable)는
프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는,
동적인 값들의 모임 - 위키백과

위키백과에 따르면 환경변수는 위와 같은 의미라고 한다


✏️ CRA .env 사용하는 이유

CRA에서
.env에 환경변수를 지정하면
프로젝트 내에서 전역적으로 변수에 접근 가능하다

이를 통해,

  • 각 환경(개발, 운영, 테스트)에 서로 다른 값을 지정해줄 수 있고,
  • 민감한 정보를 관리할 수 있다

webpack config에서,
mode에 따라
조건부 설정을 해본 경험이 있다면
쉽게 이해할 수 있을 것 같다


✏️ REACT_APP_ 을 꼭 작성해야하는 이유

환경변수의 이름은 반드시 REACT_APP_로
시작해야한다

이것은 의도적인 것으로
우연히 같은 이름을 가진 시스템의 private key가 노출될 위험이 있기 때문이라고 한다

📎 CRA docs
https://create-react-app.dev/docs/adding-custom-environment-variables/

📎
https://github.com/facebook/create-react-app/issues/865


✏️ .env 설정 방법 및 주의점

CRA는 환경변수 설정을 위해 dotenv 모듈을 사용한다

📎 dotenv github
https://github.com/motdotla/dotenv

  • project의 root directory에 .env 파일 생성
  • .gitignore에 .env 파일을 포함시켜서 민감한 정보가 노출되지 안도록 해줘야 함
  • 이름=값 (key=value) 형태로 작성하면 됨
    - 여기서 반드시 이름은 REACT_APP_로 시작해야한다
  • process.env.REACTAPP 형식으로 import 없이 변수를 사용할 수 있다
  • server가 돌아가고 있는 상황에서 .env의 내용이 변경되면
    npm start를 다시 해주어야 한다

잘못된 정보가 있다면
피드백 부탁드립니다 🐥

profile
어려운 게 아니라 낯설어서 그런거야

0개의 댓글