.env
오늘 프로젝트를 진행하면서 axios로 get 요청을 보낼때 특정 api key 가 필요했다. api key 같은 경우는 개인적인 정보이기 때문에, 그것을 그대로 코드로 노출시켜 깃허브에 올리거나하면 모든 사람이 볼수 있게 되므로, 도용당할 위험이 있다. 이와 같은 보안이 필요한 정보들은 .env 파일에 저장해 둔다.
.env
키 = 값 으로 정의할 수 있는 환경 변수 파일이다.
.env 파일에서 url 을 가져오고 싶다면
API_URL=https://vue-til.com/
만약 Creact React app 에서 사용하는 정보라면 변수명 앞에
앞에 'REACT_APP' 이걸 무조건 붙여줘야 한다. 그래야 인식을 한다. 안 써주면 그 변수를 무시한다.
REACT_APP_API_KEY=자신의 api 키나는 임의대로 하는건줄 알고 맘대로 이름 지었는데 그랬더니 콘솔에 안찍혔다.
그리고 이 키를 사용할 곳에 가서
const API_KEY = process.env.REACT_APP_API_KEY
const MOVIES_BASE_URL = `https://www.omdbapi.com/?apikey=${API_KEY}`위와 같이 작성하면 된다.
그리고 설정파일(.env) 파일을 변경했을 때는 서버를 재실행 해야한다. 재실행 하기 전에는 제대로 동작하지 않을 수 있다.
.env.develop, .env.production 등등..
그리고 .env와 .env.develop, .env.production 가 다 같이 있을 수도 있는데
.env.development: 개발자 환경에서 로딩
.env.production: 프로덕션 환경에서 로딩
.env
REACT_APP_API_URL=https://ko.reactjs.org/.env.development
REACT_APP_API_URL=http://localhost:3000/이런식으로 있다면 개발 환경에서는 .env 파일이 일반적으로 우선순위를 갖지 않는다. development 에서 실행했을 때는 http://localhost:3000/ 이 url 을 가져온다.
### env 실행 우선순위 (왼쪽이 오른 쪽보다 우선순위가 높다.)
npm start: .env.development.local > .env.development > .env.local > .env
npm run build: .env.production.local > .env.production > .env.local, .env
npm test: .env.test.local > .env.test > .env (note .env.local is missing)Reference
https://create-react-app.dev/docs/adding-custom-environment-variables/
