[Airbnb Project] React에서 .env 파일에 민감한 정보 관리하기

Jihyun-Jeon·2022년 7월 12일
1

React

목록 보기
21/26

참고자료
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

카카오맵 라이브러리 사용시 API key를 달아야했다.
그러나 외부 API key들을 그대로 코드상에 노출하면 보안에 위협이 있다.
때문에 이런 코드상에 유출되면 안되는 정보들은 환경변수를 통해서 관리해줘야 한다.

CRA는 .env 파일을 통해서 편하게 환경변수를 설정할 수 있다.
.env 파일을 통해서 환경변수 관리하고 gitignore에 .env 파일을 등록해서 github상에 노출되지 않도록 하면된다.

< cra로 서버 실행시>

사용예제1

사용예제2

✅ 타입스크립트 쓸 땐, 이걸 설치해야 process.env로 .env파일에 접근할 수 있음

npm i --save-dev @types/node


< cra가 아니라 vite로 서버 실행시>


※ .env 파일을 git에 한번이라도 올려버렸을 시 처리법

.gitignore에 등록하기 전에 한번이라도 git으로 관리해버린 파일들은(add, commit 등) 계속해서 git에 의해서 추적이 된다.

추후에 로컬에서 gitignore에 등록했더라도, 이전에 원격에 올라가버리면 원격은 따로 처리해줘야 한다.
따라서 이를 없애기 위해서는 git의 기존 캐쉬를 삭제해줘야한다.

git rm --cached 파일이름

0개의 댓글