[React] env 사용하기 / TIL # 62

1196 단어 ReactTILReact

타인에게 노출되선 안되는 내용은 어떻게 관리 해야 하는지 알아보자

env를 사용하는 이유

프로젝트를 진행하다보면 타인에겐 공개되선 안되는 정보를 변수에 담아야 할 경우가 있다. 이럴 때 보안상의 이유로 env에 저장하고 사용한다

꼭 .gitignore에 등록하자

github를 이용하여 협업하고 있는 경우 .gitignore에 해당 env 파일 이름을 적어 git으로 관리하지 않고 로컬에서만 사용하도록 해야한다.

사용하기

React 프로젝트를 CRA(create-react-app)을 통해 세팅하는 경우 root 폴더에 다음과 같은 파일을 만든다

  • .env.development
  • .env.production

이름이 다른 아유는 상황에 맞는 사용할 변수를 설정하기 때문이다.
development는 npm start 시에, production npm run build 시에 사용된다.

변수이름은 꼭 REACT_APP_로 시작해야한다!

REACT_APP_LOGIN_REST_API_KEY = 내용

이 규칙을 지키지 않으면 환경변수로서 인식하지 못한다고 한다

끝으로 사용하는 방법은 다음과 같다

const envKey = process.env.REACT_APP_LOGIN_REST_API_KEY;

좋은 웹페이지 즐겨찾기