Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Spacer
- KDT 프로그래머스
- 프로그래머스 프론트엔드 데브코스
- netlify redirect
- 고양이 사진 검색기
- SCSS import
- 프로그래머스 데브코스 프론트엔드
- postcss
- 리스트 렌더링
- vue 지역 컴포넌트
- 폼 입력 바인딩
- 이벤트 수식어
- SCSS extend
- 프로그래머스 K_Digital Training
- react next
- git 같은계정 다른 컴퓨터
- 리액트
- vue mixin
- 프로그래머스 데브코스
- SCSS forward
- flex
- intersection opserver
- nextjs사용법
- vuex map
- KDT 프로그래머스 데브코스 프론트엔드
- 쌓임맥락
- Vue
- vue 이벤트 수신
- 다른컴퓨터에서 git사용
- SCSS use
Archives
- Today
- Total
혼자 적어보는 노트
[React] 사용자 지정 환경변수 추가 / secret API KEY 설정 본문
앱을 배포하다 보면 secret key들이 존재한다.
다른 누군가에게 공유되면 안되는 key들이 존재하는데
이 것을 코드에 직접적으로 노출하면 안된다.
보통 그러한 secret key들은 환경변수로 만들어서 숨겨서 관리를 하고
배포할 사이트에서 숨겨진 변수를 사용할 수 있게 설정을 하게 된다.
React에서 환경변수 설정을 하는 법을 알아보자.
예를들어 abcdefg라는 key를 가지고 있다면
나의 react프로젝트의 최상위 폴더에 .env라는 폴더를 만들어준다.
(src폴더의 바깥, package.json이 있는 곳)
// .env
REACT_APP_SECRET_KEY=abcdefg
위와 같이 적어준다.
*이름은 마음대로 지정할 순 있지만 변수명의 앞부분은 REACT_APP_이 필수적으로 들어가야한다
ex) REACT_APP_KEY / REACT_APP_SECRET_CODE
그리고 사용하고 싶은 곳에 아래의 코드를 적으면 해당 key를 변수로써 사용할 수 있다. (전역)
process.env.REACT_APP_SECRET_KEY
그리고 git commit을 할 때 해당 파일이 commit 되지 않게
.gitignore 파일 안에 .env를 적어준다. **중요
참고로 .env파일 생성/수정 후에는 서버재부팅을 해주어야 한다
https://create-react-app.dev/docs/adding-custom-environment-variables
'React' 카테고리의 다른 글
[React] Cannot read property 'map' of undefined (0) | 2021.12.27 |
---|---|
[React] react-router-dom v6 업데이트 (0) | 2021.12.27 |
[React] 텍스트 줄 바꿈 / 데이터 불러 올 때 줄 바꿈 (0) | 2021.12.22 |
[React] 부모 state변경 시 자식 컴포넌트 rerender (0) | 2021.12.21 |
[React] 오늘 하루 안보기/ 24시간 동안 안보기 팝업 구현 (0) | 2021.12.20 |
Comments