React 프로젝트의 환경 변수

최신 웹 애플리케이션은 다양한 유형의 API를 많이 사용합니다. 작동하려면 각 API 사용을 식별하고 추적하기 위한 키 또는 기타 정보가 필요합니다. API 키를 보유하는 것은 환경 변수의 많은 응용 프로그램 중 하나입니다. 일반적으로 주요 목적은 웹 개발에 필수적인 자격 증명을 저장하는 것입니다. 또한 애플리케이션 개발자에게 필요할 때 구성 데이터를 조정할 수 있는 단일 공간을 제공합니다. 이렇게 하면 구성 데이터의 모든 인스턴스를 수동으로 찾고 편집할 필요가 없습니다.

처음에는 React 환경 변수가 특히 백엔드 경험이 없는 사람들에게 혼란스러울 수 있습니다. 그러나 대규모 응용 프로그램에서 작업하려는 개발자는 환경 변수에 익숙해져야 합니다.

React 환경 변수에 대한 규칙

환경 변수에 저장된 값은 비공개가 아닙니다. 예를 들어 비밀 API 키를 저장하는 데 실용적이지 않습니다. 앱이 배포되면 환경 변수 값이 소스 코드에 표시됩니다. 환경 변수를 추가할 때마다 저장된 값을 참조하기 전에 애플리케이션을 다시 시작해야 합니다.

create-react-app의 환경 변수

react-scripts 버전 @0.5.0 이상으로 create-react-app으로 빌드된 React 프로젝트는 환경 변수를 지원하므로 외부 패키지가 필요하지 않습니다.

최신 버전의 create-react-app 패키지가 설치되어 있는 한 홈 디렉토리에 .env.local 파일을 만들고 이를 사용하여 변수를 정의하기만 하면 됩니다. 다음은 예입니다.

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

.env.local 확장자는 프로젝트가 초기화될 때 .gitignore 파일에 파일이 자동으로 추가되도록 하는 데 필요합니다.

환경 변수에 대한 create-react-app의 기본 제공 지원을 사용하려면 변수 이름에 REACT_APP 접두사를 붙여야 합니다.

create-react-app이 없는 환경 변수

react-scripts가 없는 사용자 정의 React 환경이 있는 경우 React에서 환경 변수를 사용하려면 외부 패키지를 설치해야 합니다.

이를 위해 특별히 제작된 인기 있는 dotenv 패키지를 설치할 수 있습니다.

먼저 프로젝트 폴더에서 명령줄을 열고 다음 패키지를 설치해야 합니다.

npm install dotenv

그런 다음 사용 가능하게 만들고 설정을 구성해야 합니다. 앱에 다음 코드를 추가합니다.

require('dotenv').config()

이렇게 하면 create-react-app으로 빌드된 앱과 마찬가지로 폴더에 .env.local 파일을 만들 수 있습니다. 또한 REACT_APP 접두사로 변수 이름을 시작해야 합니다.