• .env파일에 정의한 환경 변수를 .env에서 읽어와 Node.js 또는 다른 언어의 앱에서 사용할 수 있도록 햊는 라이브러리
• 개발 환경에서 민감한 정보나 환경 설정을 코드에서 분리하고 싶을 때 사용

dotenv 사용방법

• dotenv설치

   npm i dotenv
  

  • VITE를 쓰면 프로젝트를 시작할 때 자동으로 루트 디렉토리의 .env 파일의 변수들을 prosess.env에 로드함
    • VITE 접두사: 보안상 이유로, VITE는 변수 이름이 VITE_로 시작하는 것만 클라이언트 사이드 코드(React 컴포넌트 등)에 노출시킴
    • VITE를 사용하는 React 프로젝트에서는 별도로 dotenv를 설치하거나 설정할 필요 없이, 정해진 규칙에 따라, .env 파일을 만들기만 하면 바로 환경 변수를 사용할 수 있음

• .env

  • 실제 비밀 값(API 키, 데이터베이스 암호 등)을 저장하는 파일
  • ❗Github 연동 금지❗
  • 프로젝트 시에는 각자의 .env 파일을 생성해서 작업

• .env.exemple

  • .env 파일의 ‘견본’ 또는 ‘템플릿’ 역할을 하는 파일
  • Github 연동 가능

# .env

VITE_SERVICE_KEY=[본인서비스키]
VITE_MOBILE_OS=WEB
VITE_MOBILE_APP=GreenTravel
VITE_TYPE=json
VITE_ARRANGE=O

# .env.exemple

VITE_SERVICE_KEY=
VITE_MOBILE_OS=
VITE_MOBILE_APP=
VITE_TYPE=
VITE_ARRANGE=

// src/configs/axiosConfig.js

const axiosConfig = {
  SERVICE_KEY: import.meta.env.VITE_SERVICE_KEY,
  MOBILE_OS: import.meta.env.VITE_MOBILE_OS,
  MOBILE_APP: import.meta.env.VITE_MOBILE_APP,
  TYPE: import.meta.env.VITE_TYPE,
  ARRANGE: import.meta.env.VITE_ARRANGE,
  BASE_URL: '<https://apis.data.go.kr/B551011/KorService2>', // 딱히 보안이 필요없는 사항
  NUMBER_OF_ROWS: 12, // 딱히 보안이 필요없는 사항
}

export default axiosConfig;