ReactJS의 환경 변수.

ReactJS를 사용 중이고 일부 엔드포인트 API에 액세스하는 경우 환경 변수를 접했을 수 있습니다. 이 자습서에서는 환경 변수를 사용하는 방법을 안내합니다.

가정: Create React App에 대해 잘 알고 있으며 이를 사용하여 React 애플리케이션을 만들고 있습니다.

환경 변수가 필요한 이유

프로덕션, 개발 또는 스테이징 여부 등과 같이 환경에 따라 변수를 사용자 정의하려면

API 키 및 비밀번호와 같은 매우 민감한 정보를 저장하기 위해 버전 관리로 푸시하면 안 됩니다.

Create React App은 다른 패키지를 설치하지 않고도 사용자 정의 환경 변수를 지원합니다.

환경 변수를 추가하는 두 가지 방법

.env 파일 사용(이것이 우리가 사용할 접근 방식입니다).

셸을 통해(임시, 셸 세션이 지속되는 동안 지속되며 OS 유형에 따라 다름).

.env를 사용하여 환경 변수 정의

1단계: 애플리케이션의 루트 폴더에서 .env 라는 텍스트 파일을 만듭니다. 작업 디렉토리는 다음과 같습니다.

my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md

2단계: 맞춤 변수를 만듭니다. Create React App(CRA)은 모든 사용자 정의 변수에 접두사REACT_APP를 적용합니다.
접두사REACT_APP가 없는 변수는 번들링 중에 무시됩니다. CRA가 이 작업을 수행하는 방법에 대해 자세히 알고 싶다면 문서here를 확인하십시오.
변수는 다음과 같아야 합니다.

REACT_APP_CLIENT_ID=12345
REACT_APP_KEY=aaddddawrfffvvvvssaa

3단계: 반응 앱에서 액세스합니다. 이를 인쇄하고 다른 변수에 할당할 수도 있지만 응용 프로그램에서만 준비됩니다(값을 변경할 수 없음을 의미함).

import React from 'react';

function App() {
  console.log(process.env.REACT_APP_CLIENT_ID);//printing it to console
  console.log(process.env.REACT_APP_KEY);//printing it to console

  return (
    <div className="app">
      <p>{process.env.REACT_APP_KEY}</p>//printing it to screen
    </div>
  );
}

export default App;

4단계: NODE_ENV 라는 기본 제공 환경 변수가 있습니다. process.env.NODE_ENV 에서 액세스할 수 있습니다. 이 변수는 현재 어떤 모드에 있는지에 따라 변경됩니다.npm start를 실행하면 "개발"과 같습니다.
실행하면npm test "테스트"와 동일하며npm run build를 실행하면 "생산"과 같습니다.
사용 사례에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

5단계: .gitignore 파일을 엽니다. 아래와 같이 #misc 아래에 .env 및 기타 환경 변수를 넣는 것을 좋아합니다.

# dependencies 
/node_modules 
# testing 
/coverage 
# production 
/build 
# misc 
.DS_Store 
.env    #<--------Put the custom env files here 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log*

이 과정을 거쳐도 작동하지 않는 이유🤔?

모든 변수에 REACT_APP 접두사를 사용했는지 확인하십시오

.

.env 파일의 변수 이름이 js 파일의 변수 이름과 일치하는지 확인하십시오. 예를 들어 .env의 REACT_APP_KEY 대 process.env.REACT_APP_KEY

개발 서버가 실행 중이면 중지한 다음 npm start it을 사용하여 다시 실행하십시오. 나는 이것으로 정말 고생했습니다 (변수는 정의되지 않은 오류입니다).

환경 변수는 빌드 중에만 업데이트되므로 .env 파일을 업데이트할 때마다 서버를 중지하고 다시 실행해야 합니다(변수가 정의되지 않은 오류임).

변수 값에서 따옴표를 제거하십시오.

Create React App의 환경 변수 사용에 대한 공식 문서는 here 에서 찾을 수 있습니다.