[React] 환경변수로 API Key 관리하기

2월에 날씨 앱을 만들다 중단된 프로젝트를 진행하면서 깃허브에 당당히 노출된 내 소듕한 Api Key를 숨기려고 한다.

1. dotenv 패키지 설치

// with yarn
yarn add dotenv

// with npm
npm install dotenv

2. .env 파일 생성

💡 프로젝트의 루트 디렉토리에 생성해야한다!

 

3. 생성한 파일에 API Key 추가

접두사 REACT_APP를 꼭 써줘야 환경 변수가 제대로 인식되니 주의

REACT_APP_API_KEY=your_API_KEY

4. .env 파일을 .gitignore에 추가

.gitignore 파일은 Git 저장소에서 버전관리를 원하지 않는 파일을 명시하는 파일이다. 이 파일에 기록된 파일은 Git으로 관리되지 않으며, 커밋에 포함되지 않는다.

.env 파일을 .gitignore에 추가하면, API 키가 소스 코드와 함께 저장소에 업로드되지 않고, 공개되는 것을 방지할 수 있다.

5. React 컴포넌트에서 API 키 사용하기

export default function SearchLocationWeather() {
  ... 다른 코드
  const API_KEY = process.env.REACT_APP_API_KEY;
  ... 다른 코드
  
  const handleSubmit = async (e) => {
    ... 다른 코드
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}&lang=kr`;
  };
}

process.env.REACT_APP_API_KEY를 사용하여 .env 파일에서 API 키를 가져올 수 있다. 이렇게 하면 .env 파일의 변수가 자동으로 환경 변수로 설정되고, React 애플리케이션에서 사용할 수 있다.

6. 된다!

오 신기하다

이제 당당하게 깃허브에 올리면 되겠다 :)