개발을 하다보면, 포트, DB 관련 정보, API KEY 등 개발자만이 알아야 하고 git과 같은 오픈 소스에 올리면 안되는 정보들이 있다. 이를 해결해주는 것이 바로 .env 파일이다.
환경 변수 파일이라고도 하는 .env파일을 만들어서 중요한 정보들을 변수에 저장해놓은 뒤, 값 자체가 아닌 변수를 불러와서 사용함으로써 보안을 유지할 수 있다.
보통, 프로젝트의 최상위 폴더에 파일(.env)을 생성한 뒤 사용한다.
REACT_APP_(변수명)=정보(API_KEY, API_URL 등)
리액트에서는 반드시
REACT_APP_
로 시작해야 인식한다.
process.env.REACT_APP_(변수명)
으로 불러와 사용한다.NEXT_PUBLIC_(변수명)=정보(API_KEY, API_URL 등)
Next.js에서는 반드시
NEXT_PUBLIC_
로 시작해야 인식한다.
이외에도 Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고 구동 환경에 따라 3가지의 값을 넣어준다.
- development: 개발 환경 (npm run dev로 구동한 경우)
- production: 배포 환경 (npm run build로 빌드한 경우)
- test: 테스트 환경
게다가, 구동 환경 마다 다른 환경 변수 파일을 설정할 수 있다.
적용되는 우선 순위는 다음과 같다.
.env.local
>>> .env.development
, .env.production
, .env.test
>>> .env
.env.local
.env.development
process.env.NODE_ENV === "development"
)에서 사용할 환경 변수를 정의한다. .env에 같은 환경 변수가 있다면 덮어쓴다..env.production
process.env.NODE_ENV === "production"
)에서 사용할 환경 변수를 정의한다. .env에 같은 환경 변수가 있다면 덮어쓴다..env.test
process.env.NODE_ENV === "test"
)에서 사용할 환경 변수를 정의한다..env
https://velog.io/@hoho_0815/env-%ED%8C%8C%EC%9D%BC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC