.env 와 craco config

운영과 개발모드에서 다른 부분을 변수로 처리하기 위해 보통 환경변수를 사용한다.
리액트를 사용한다면 REACT_APP_VARIABLE 와 같은 네이밍을 많이 접해봤을 것이다.

.env 파일을 사용해서 개발하는 시스템 내에서 사용하는 변수 중에서 빌드 환경에 따라 달라지는 변수들을 사용하곤 한다.
예를 들어, API 도메인과 같은 것을 말한다.
그 외에도 소스맵을 사용해야 개발할 때 디버깅하기 용이하기도 하고 빌드 후 산출물에 대한 hash값 같은 건 개발할 때 매번 갱신되도록 설정하고 싶을 수 있다.

하지만 이런 것들은 .env.production, .env.development 로 나눠서 작성하기보다 webpack 설정을 오버라이딩할 수 있는 craco 등을 활용하는 것이 좋다.

module.exports = {
  webpack: {
    configure: {
      devtool: process.env.NODE_ENV === "production" ? false : "eval-source-map",
    },
  },
}

추가로, .env 파일의 우선순위는 다음과 같다:
.env : 기본 환경변수 파일
.env.local : .env 의 로컬 오버라이딩 파일
.env.production, .env.development, .env.test: 환경을 특정한 파일
.env.production.local, .env.development.local, .env.test.local: 특정 환경을 로컬 오버라이딩한 파일

• npm start: 개발모드로 실행하는 스크립트. .env.development.local > .env.local > .env.development > .env
• npm run build: 프로덕션 빌드를 하는 스크립트. .env.production.local > .env.local > .env.production > .env
• npm test: 테스트코드를 실행하는 스크립트. .env.test.local > .env.test > .env

정리하면 local 오버라이딩한 파일의 우선순위가 가장 높고,
세부적으로는 환경 특정파일이 일반파일보다 우선순위가 높다.

Reference

https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used