728x90
토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다.
이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다.
그럼에도..
CRA 공식 문서에서는 다음과 같은 주의 사항을 전달한다.
WARNING : Do not store any secrets (such as private API keys) in your React App
비공개 API 키 같은 값을 저장하는 것을 지양하는 이유는 환경 변수가 '빌드'에 내장되어 누구든지 이를 확인할 수 있기 때문.
1. .env 파일 생성
최상단 루트에 .env 파일을 생성해주도록 하자.
.env 파일은 꼭 프로젝트 파일 최상단에 있어야 함.
2. .gitignore 설정
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
만든 env 파일을 git에 업데이트 되지 않도록
gitignore 에 추가해두도록 하자.
env 파일이 git에 올라가게 되면 git에서 경고 연락이 온다고 함. . .
그리고 git에 env 파일까지 포함해서 올리게 되면 env로 변수들을 뺀 이유가 없어지게 된다.
3. 환경 변수 선언
REACT_APP_API_URL = /url
REACT_APP_GRID_KEY = /key
위와 같은 방법으로 선언해준다.
1. 변수명은 반드시 REACT_APP_ 으로 시작
2. 따옴표, 쌍따옴표 같은 quote 사용 금지. = 로 blank 없이 선언
여기서 잠깐
env 설정 후 적용하고 싶다면 프론트 서버를 껐다가 켜주어야 함. (재구동 필요)
4. 환경 변수 사용
환경 변수의 경우 별도의 import 가 필요없다.
아래와 같이 사용하면 된다.
.js 에서 사용
process.env.REACT_APP_API_URL
const URL = process.env.REACT_APP_API_URL
이런 식으로 process.env 접두사를 붙혀 풀네임으로 불러와 사용하면 된다.
.html 에서 사용
index.html 에서 사용하고 싶을 시에는 위와 같은 형식으로 %를 감싸서 사용해주면 된다.
728x90
