React.js: .env 파일에서 API 키에 액세스하려면 API 키를 사용할 때 REACT_APP 접두사가 필요한 이유는 무엇입니까? 즉. (process.env.REACT_APP_API_KEY)

Question

제가 이해한 바에 따르면 .env 파일은 REACT_APP 접두어와 이름이 붙은 API 키를 보유해야 하며 변수를 사용하려면 REACT_APP 접두어를 생략해야 하지만 어떤 경우에는 동작에 차이가 있다는 것을 알았습니다. 의.

다음과 같이 .env 파일에 환경 변수를 설정했습니다: REACT_APP_YOUR_KEY_NAME=9999999999999. 그리고 process.env.YOUR_KEY_NAME을 통해 액세스한다고 가정합니다. 그러나 어떤 경우에는 (고유하지 않은 경우) 접두사가 필요하다는 것을 알았습니다. 그렇지 않으면 키가 정의되지 않은인 것처럼 보입니다. 따라서 process.env.REACT_APP_YOUR_KEY_NAME을 사용하는 경우에만 작동합니다.

const FetchData= async () =>
  노력하다 {
    const 캐시 = localStorage.getItem('apiData');
    if (캐시) {
      return JSON.parse(캐시);
    } 또 다른 {
      const 응답 = 가져오기를 기다립니다(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = 응답을 기다립니다.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      jsonData를 반환합니다.
    }
  } 잡기(오류) {
    console.error('오류가 발생했습니다:', error);
    null을 반환;
  }
};

기본 FetchData 내보내기;

Answer 1

create-react-app을 통해 생성된 애플리케이션의 모든 사용자 정의 환경 변수의 경우 환경 변수 이름에 REACT_APP_ 접두사를 사용해야 합니다. 이는 필수 사항입니다. 규칙을 따르지 않으면 변수에 액세스할 수 없습니다. 그게 다입니다. VITE와 마찬가지로 VITE_.. 또는 Nextjs를 NEXT_PUBLIC...(클라이언트 측 구성 요소에만 해당)과 결합해야 합니다.

또한 모든 값은 클라이언트(브라우저)에서 접근 가능하다는 점을 기억하세요. 사용자가 브라우저에서 액세스할 수 없는 데이터/자격 증명 및 극비 API 키에는 이를 사용해서는 안 됩니다.

보안을 극대화하려면 백엔드에서 사용해야 하며 백엔드에는 접두사가 필요하지 않습니다.

자세한 내용은 CRA에서 이전 문서를 다시 확인하세요. https://create-react-app.dev/docs/adding-사용자 정의 환경 변수