.env 파일로 GIT Hub에 올릴 부분 제한하기

React 앱에서 .env 파일을 사용하여 환경 변수를 설정하면, process.env를 통해 해당 환경 변수에 접근할 수 있음

Create React App으로 프로젝트를 생성했을 때 주의해야 할 점

환경 변수의 이름은 반드시 REACT_APP_ 접두어로 시작해야한다.

그렇지 않으면 앱 내에서 환경 변수에 액세스할 수 없음

 

.env 파일 생성 위치

React 프로젝트에서 .env 파일은 프로젝트의 루트 디렉터리에 위치

Create React App을 사용한 프로젝트의 경우, .env 파일은 package.json 파일과 같은 디렉터리 레벨에 있어야한다.

my-react-app/
│
├── node_modules/
├── public/
├── src/
│
├── .env            <-- 여기에 .env 파일이 위치합니다.
├── package.json
└── ...

 

.env 파일을 수정

따옴표, 쌍따옴표 없어야함

REACT_APP_PUBLIC_POTAL_KEY = 키데이터입력

 

리액트 컴포넌트에서 접근하는 방법

process.env.만들어둔 이름으로 접근가능

console.log(process.env.REACT_APP_PUBLIC_POTAL_KEY);

 

프로젝트에서 사용하는 예시

function fetchDate() {
    const param = {
        solYear: 2023,
        solMonth: 8,
        _type: "json",
        ServiceKey: process.env.REACT_APP_PUBLIC_POTAL_KEY,
    };
    return axios.get(
        "http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getRestDeInfo",
        param as any
    );
}

 

 

npm에서 받아서 사용할 수 도있음

 

dotenv

https://www.npmjs.com/package/dotenv

 

설치방법

npm i dotenv

사용방법

require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working

 

REACT_APP_MONGODB_URI=mongodb+srv://id1234:password1234@cluster0.rvgiwpd.mongodb.net/?retryWrites=true&w=majority