728x90
안녕하세요 웹 코기입니다.
오늘은 보안이 필요한 API 키를. env 파일에 넣어서 꺼내와 사용하는 방법을 알아보겠습니다!!
1.. env 파일 만들기
먼저 리액트 최상위 루트에. env 파일을 만들어줍시다.
그리고 깃에. env파일이 올라가면 안 되니
. gitIgnore에. env를 꼭 추가시켜줍니다!!
2. 변수 내용 작성
파일 안에 저장할 환경변수 내용을 적어줍니다.
이때 중요한 점은, 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 합니다!!
이걸 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는 것으로 확인됐어요
3. 등록한 변수 사용하기
리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만,
.env에 등록된 변수는 별도의 import가 필요하지 않아요
전역 어디서든 process.env.으로 가져와서 사용하면 됩니다.
process.env.REACT_APP_SLACK_BOT_TOKEN
그럼 모두 오늘도 화팅입니다!!!
728x90
'Language > React' 카테고리의 다른 글
React) 함수형 컴포넌트에서 에러 잡아내기 (3) | 2021.08.19 |
---|---|
컴포넌트가 사라지면 컴포넌트 안에 작성한 기능도 함께 사라진다 ? (1) | 2021.08.05 |
서버에서 다운받은 바이너리 데이터를 img 태그에 넣고 이미지로 표시하는 방법? (2) | 2021.06.25 |
React 장단점 분석 정리 (1) | 2021.06.09 |
react에서 SNS로그인 시 token, id 가져오기 (카카오, 네이버, 구글) (2) | 2021.05.26 |