환경 파일, .gitignore, api_keys 및 사용 방법은 완전히 '클릭'해야 하는 것보다 더 오래 걸렸습니다. 이 블로그 게시물은 다른 사람들에게 좋은 출발점이 될 것입니다.

TL;DR:

.gitignore의 파일이 github에 업로드되지 않음

.env 파일에 api_key를 보관하십시오. .gitignore 파일

에 .env 파일을 포함시키십시오.

REACT_APP를 사용하여 api_key에 액세스

API 키

먼저 API 키는 개발자의 신원을 인증하는 데 사용되는 고유 식별자(비밀번호와 같은)이거나 그럴 수 있습니다. 때때로 api_keys가 get/post/delete 요청에 포함됩니다. 플랫폼마다 API_keys를 사용하는 방식이 다릅니다.

예로서:

fetch(`https://testing.com/api/v4/webhook/add?token=1234abc`
.then(response => response.json() 
.then(data => console.log(data))

위의 가짜 스니펫에서 가져오기 요청 내에서 "token=1234..."가 있음을 알 수 있습니다. 이는 api_keys가 URL 가져오기에 포함될 수 있는 방법의 예입니다.

우리는 이것을 어떻게 보호할 수 있습니까?

.gitignore

간단히 말해서, 이것은 Github에 업로드하지 말아야 할 파일을 추적하는 전용 파일이므로 전 세계가 그 안에 포함된 다양한 정보를 볼 수 없습니다.

설정하는 방법?

Github에 새로운 저장소를 생성할 때 .gitignore 파일을 생성할 수 있는 옵션이 있습니다.

처음에 이 작업을 수행하지 않았다면 아주 간단하게

touch .gitignore in our root directory

좋아 - 우리는 api_keys와 .gitignore에 대한 기본 개요를 가지고 있습니다... .env 파일이 이 모든 것에 어떻게 적합합니까?

.ENV

환경 변수의 줄임말입니다. api_keys 및 .gitignore 파일의 컨텍스트 내에서 본질적으로 다른 사용자/개발자가 볼 수 없는 변수입니다.

api_key가 .env 파일 내에 남아 있고 외부에 알려지지 않는 것이 중요합니다. 개발자가 .env 내에서 자신의 api_keys를 보호하지 않고 API 제공자로부터 $$를 청구한다는 인터넷상의 수많은 이야기가 있습니다.

.env 파일을 생성할 때 src 파일이 아니라 루트 디렉토리 내에서 이루어져야 한다는 점에 유의하십시오!

.gitignore 파일에 .env를 추가하는 방법은 무엇입니까?

#in our .gitignore file 
.env

#within our .env file
REACT_APP_api_key= "your_api_key_here" 

위의 코드 스니펫 내에서 REACT 문서에 따라 REACT_APP를 사용해야 합니다.
https://create-react-app.dev/docs/adding-custom-environment-variables/

api_server에 가져오기 요청을 할 때와 같이 앱 내에서 api_key에 액세스하려는 경우:

#below is how to access to api_key from our .env file. 
Notice how the below matches the variable in the .env file?
process.env.REACT_APP_API_KEY}

따라서 이 모든 것을 예제 가져오기 요청에 통합하려면

#wherever we are making our example fetch requests... 
fetch(`fetch(`https://testing.com/api/v4/webhook/add?${process.env.REACT_APP_API_KEY}`
.then(response => response.json() 
.then(data => console.log(data))

`
gitignore, .env 및 이를 React 앱에 통합하는 방법에 대한 매우 빠른 가이드가 있습니다.