리액트와 환경변수

리액트로 만든 웹에선 

보안상의 이유로

host의 로컬 파일에 접근이 불가능하다.

 

로컬파일의 내용을 읽어 api로 전달해주는 백엔드 서버를 node.js로 만들거나

input으로 사용자의 파일을 직접 읽는 등의 우회적인 방법밖에 없다.

 

REACT_APP_NOTION_TOKEN = secret_*******************************************
REACT_APP_NOTION_DATABASE_ID = ********-****-****-****-************

 

대신 환경변수로 간단한 문자열 값 정도는 전달이 가능하다.

파일 이름은 '.env'이고

(ㅁㅁ.env가 아닌 그냥 .env 이다)

 

변수명은 REACT_APP으로 시작해야하며

따옴표나 쉼표, 세미콜론은 쓰지 않는다.

 

git ignore에 추가하여 깃허브에 올라가지 않게하기.

개발/테스트/배포 환경에 각각 사용되도록 지정이 가능하다.

npm start시에는 .env.development

npm run build떈 .env.production

npm test때에는 .env.test가 사용된다

 

const notionToken = process.env.REACT_APP_NOTION_TOKEN
const notionDatabaseID = process.env.REACT_APP_NOTION_DATABASE_ID

마지막으로 해당 환경변수값은

별도의 import 없이

process.env로 사용 가능하다.

 

마지막으로 이러한 환경변수는 빌드시에 소스코드 내부에 컴파일되어 들어간다.

빌드된 코드여도 .env 파일을 외부에서 인식하여

유동적으로 값을 변경하며 사용하는게 목표였는데... 결과적으로 헛수고였다 ㅎ

 

아 그리고 서버 재시작해야 적용된다

 

 

https://velog.io/@rmaomina/react-env

React에서 .env 환경변수 사용하기