환경 변수를 사용해 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}`,