환경 변수를 사용해보자

민겸·2023년 2월 14일
0

ENV란?

개발을 하다보면, 포트, DB 관련 정보, API KEY 등 개발자만이 알아야 하고 git과 같은 오픈 소스에 올리면 안되는 정보들이 있다. 이를 해결해주는 것이 바로 .env 파일이다.

환경 변수 파일이라고도 하는 .env파일을 만들어서 중요한 정보들을 변수에 저장해놓은 뒤, 값 자체가 아닌 변수를 불러와서 사용함으로써 보안을 유지할 수 있다.

보통, 프로젝트의 최상위 폴더에 파일(.env)을 생성한 뒤 사용한다.


React에서의 env

  1. 프로젝트 최상위 폴더에 .env 파일을 생성한다.
  2. REACT_APP_(변수명)=정보(API_KEY, API_URL 등)
    다음과 같이 보안을 위한 정보를 적절한 변수명에 할당해준다.

    리액트에서는 반드시 REACT_APP_로 시작해야 인식한다.

  3. 사용하고 싶은 곳에서 process.env.REACT_APP_(변수명)으로 불러와 사용한다.

Next.js에서의 env

  1. 리액트와 같다.
  2. NEXT_PUBLIC_(변수명)=정보(API_KEY, API_URL 등)

    Next.js에서는 반드시 NEXT_PUBLIC_로 시작해야 인식한다.

  3. 리액트와 같다.

이외에도 Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고 구동 환경에 따라 3가지의 값을 넣어준다.

  1. development: 개발 환경 (npm run dev로 구동한 경우)
  2. production: 배포 환경 (npm run build로 빌드한 경우)
  3. 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/@tai/React-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%ED%8C%8C%EC%9D%BC-.env-%EC%84%A4%EC%A0%95

https://velog.io/@hoho_0815/env-%ED%8C%8C%EC%9D%BC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

https://m.blog.naver.com/legend25/222033372402

profile
기술부채상환중...

0개의 댓글