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

Question

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

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

으아악

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

P粉014293738 · Answer

요약:

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

으아악

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

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

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

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

모든 응답(1)나는 대답할 것이다

참고자료