.env를 이용한 환경설정

채윤·2022년 4월 8일
0

React

목록 보기
1/1

환경 변수를 사용해 KEY를 보안하는 방법

  • 디렉토리의 root에 .env 파일을 생성한다.
  • .gitignore에 추가해 원격저장소에 저장할 때 파일이 올라가지 않도록 해준다.
  • .env에 사용할 key를 저장해 주는데 앞에 REACTAPP이라고 앞에 붙여줘야 한다! 붙이지 않으면 무시한다.
REACT_APP_API_KEY=발급받은 키
  • env안의 key를 가져오기 위해 process.env를 붙여 준다.
const API_KEY = process.env.REACT_APP_API_KEY;

.env 파일의 KEY가 불러와지지 않는 오류

  • process.env.발급받은 키로 바로 넣어주려고 하였는데 불러와지지 않는 현상이 발생 했다.

`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.발급받은키}`,
  • 이때, API_KEY를 변수로 만들어서 넣어준뒤
const API_KEY = process.env.REACT_APP_API_KEY;
  • API_KEY를 넣어주니 정상적으로 잘 불러와지지는 걸 볼 수 있었다.
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`,
profile
프론트엔드 개발자

0개의 댓글