create-react-app 에서 API key 숨기기

jason·2020년 6월 15일
3

About React.js

목록 보기
2/3
post-thumbnail

CRA(create react app) 에서 API key 와 같은 주요 정보를 클라이언트 단에서 또는 깃헙과 같은 공개 저장소에서 숨기기위해 환경변수를 주로 사용한다.

환경변수 사용법

  1. src 폴더 외부에 .env 파일을 생성한다.
  2. .env 파일에 아래와 같이 API KEY 를 저장한다.
    반드시 REACT_APP_ 으로 시작해야한다.
	REACT_APP_API_KEY=123123
  1. js 파일내에서 사용한다.
	const apiKey = process.env.REACT_APP_API_KEY; 
  1. 환경변수가 변경되면 서버를 다시 시작해야한다.
  2. .gitignore 에 .env 파일을 추가해 github 에 노출되지 않도록 한다.

CRA 가 아닌 Node.js 에서 env 를 사용하는 경우 'dotenv' 라이브러리를 npm 또는 yarn 으로부터 다운받아 사용해야한다.

require('dotenv').config();
// 파일 상단에 위 코드를 넣어준 후 3번과 같이 사용할 수 있다. 
profile
개발을 통해 많은 것을 배우고 배운 것을 나누고 싶습니다. 글은 [시리즈] 를 통해 보기 쉽게 분류해두었습니다.

1개의 댓글

comment-user-thumbnail
2022년 6월 7일

잘보고갑니다!

답글 달기