React - 팀 프로젝트 회고2(뉴스피드, 주제: Mylog)

🔖 .env.local을 사용하는 이유 !

개발을 하다보면 Api키 등과 같이 민감한 개인 정보들이 포함되는 경우가 존재한다. 또한 여러 api에서 사용하는 서버 IP와 같은 반복되는 변수가 존재할 수도 있다.
이러한 경우들 때문에 환경변수들로 만들어 해결하면 된다.

프로젝트 루트 디렉토리에 생성하여 사용하면 되고
kEY = VALUE 형식으로 정의된다.

.env                # 모든 경우에 로드됨
.env.local          # 모든 경우에 로드되지만 Git에서는 무시됨
.env.[mode]         # 지정한 모드에서만 로드됨
.env.[mode].local   # 지정한 모드에서만 로드되지만 Git에서는 무시됨

환경변수 load

• 우리가 사용하고 있는 Vite에선 import.meta.env객체를 통해 환경변수에 접근이 가능하다.
• 전역적으로 사용되는 정보들을 편리하게 관리할 수 있다.

  • import.meta.env.MODE : {string} 애플리케이션이 실행중인 모드
  • import.meta.env.BASE_URL : {string} 애플리케이션이 제공되는 기본 URL
  • import.meta.env.PROD : {boolean} 애플리케이션이 프로덕션 모드로 실행 중인지 여부
  • import.meta.env,DEV : {boolean} 애플리케이션이 개발 모드로 실행 중인지 여부
  • import.meta.env.SSR : {boolean} 애플리케이션이 서버에서 실행중인지 여부

❗주의점

• 구문 - 환경 변수 파일은 key=value 형식으로 환경 변수를 정의합니다. 키와 값 사이에는 등호(=)를 사용하며, 공백을 넣지 않는다.
• 특수 문자 및 공백 - 환경 변수 값에 특수 문자나 공백이 포함된 경우 이스케이프(Escape) 시퀀스를 사용하여 처리해야 한다.
• 일반적으로 .env.local 파일의 환경 변수가 가장 높은 우선순위이다.