환경 변수(Environment Variable)
어떤 시스템에서 동작하는 프로그램이나 프로세스가 실행될 때 참조하는 동적인 값. 운영 체제나 앱의 설정을 저장하고 조작하는 데 사용되는 값이다. 프로그램 외부에서 값이 설정되며, key/value pair로 구성되어 있다.
환경 변수는 시스템 전체에 걸쳐 설정될 수 있고, 여러 프로그램이나 프로세스에서 공유하여 사용할 수 있다.
- 도메인 이름
- API URL/URI
- 각종 인증 키
- 마케팅, 지원, 영업 등을 위한 그룹 메일 주소
- 서비스 계정 이름
보통 이런 환경 변수들을 .env 폴더에 선언해 두고, 다른 곳에서 변수의 이름으로 참조하는 것이다. 이 파일은 .gitignore에 의해 github 공유되지 않기 때문에 보안에 민감한 정보들을 담아 관리하기에 용이하다.
⭐환경변수를
.env파일로 관리하지 않는다면?
프로그램 내부에 긴 URL이나 API키와 같은 값들을 직접 하드코딩하게 되고, 여러 파일에 분산되어 있으면 변경이 필요할 때 모든 코드를 찾아 수정해야 하는 등 유지 보수의 어려움이 생긴다. 또 소스코드가 공개되었을 때 보안상의 문제가 생길 수 있다.
.env 파일로 작성한 환경변수 사용하기
.env파일에 아래와 같이 서버 주소를 작성해 준다. 일반적으로 .env 파일을 자동으로 로드하여 환경 변수로 설정하게 되므로 따로 export 혹은 import 해 줄 필요가 없다.
REACT_APP_SEVER_URL = http://localhost:4000
- 컴포넌트에서
process.env객체를 통해 .env 파일에 정의된 환경변수에 접근할 수 있다.
/** Json server에서 가져온 데이터를 setState하는 내용 */
const fetchTodos = async () => {
const { data } = await axios.get(`process.env.REACT_APP_SEVER_URL`);
setTodos(data);
};