환경 변수를 사용하여 React 프로젝트에서 기능을 구현하는 방법은 무엇입니까?

Question

API 키를 환경변수로 저장하려고 하는데 어떻게 접근하는지 모르겠네요... npm을 이용해 dotenv를 설치하고, 루트 디렉터리에 파일을 생성하고 거기에 키를 넣어두었습니다. process.env.API_KEY를 사용하여 js 파일에서 액세스하려고 시도했지만 변수가 정의되지 않은 것으로 표시됩니다.

키가 필요한 파일 상단에 require('dotenv').config()를 넣으려고 했는데 오류가 뜹니다...

으아악

파일을 잘못 넣었거나 뭔가 빠진 것 같아요

Answer 1

요약:

React 레이어에서 API_KEY 변수를 읽으려면 빌드하기 전에 REACT_APP_API_KEY 변수를 내보내야 합니다. 그러면 모든 React 부분에서 다음을 통해 값을 얻을 수 있습니다.

으아악

접두사 REACT_APP_가 필요한 이유를 보려면 링크를 참조하세요.

또한 토큰이 수명이 길거나 만료되지 않는 토큰인 경우 프런트엔드(React)에 노출되어서는 안 됩니다. 만료 가능한 토큰(인증 코드 oauth2 인증 )만 프런트엔드 레이어에 노출되어야 합니다.

프런트엔드 변수를 처리하는 방법을 알아보려면 리소스를 확인하세요

참고자료

• JS 유틸리티 파일(CRA)이 실행되는 환경 방법을 감지하는 방법
• 클라이언트 프런트엔드에 React 서버 환경 변수를 사용할 수 있나요?
• Env 키를 사용하여 Axios를 사용하여 얻는 방법
• 프로덕션 환경에서는 React가 다양한 EC2 인스턴스의 백엔드 API 서버와 통신하도록 하세요
• 백엔드 애플리케이션처럼 프런트엔드 JS 애플리케이션에서 변수 대체를 어떻게 사용하나요?