💡
이번에 과제를 진행하면서 API 주소, API KEY와 중요 정보들도 다뤘는데
이때 이러한 값들이 노출되지 않게 하기 위해서는 어떻게 해야 되는지 정리해 봤다.
💻 프로젝트를 진행할 때 해당 프로젝트에서 사용되는 중요한 정보, KEY등과 같이 공개적으로 노출되면 안되는 값들이 있다. 이럴 때 따로 .env 파일을 만들어 그곳에 저장해서 사용할 수 있는 환경 변수를 설정해 줄 수 있다.
1. 환경 변수란?
프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법.
2. 환경 변수 설정하기
1) 루트 폴더에 .env 파일을 생성한다.
2) .env 파일에 변수와 값을 입력해준다.
REACT_APP_변수 이름 = 값
3) 중요한 정보를 담고 있는 파일에 가서 설정해 준 변수를 사용해 준다.
const environment = {
API_KEY : process.env.REACT_APP_변수이름
};
4) 깃허브에 배포할 때 올라가지 않게 .gitignore 파일에 추가해준다.
💡 이때, 나는 이렇게 설정을 하고 확인을 하려고 하니 환경 변수 설정을 해준 값들이 전달이 되지 않는 에러가 발생했다.
🚨 ReferenceError: process is not defined
다시 찾아보니 내가 했던 설정은 Create React App 을 사용 했을 경우의 설정이었다. 나는 Vite로 프로젝트를 진행 했기 때문에 그에 맞게 다시 설정을 해주었다.
.env 파일
VITE_변수 이름 = 값
변수 사용하기
const environment = {
API_KEY : import.meta.env.VITE_변수이름
};
더 자세한 내용은 아래에서 확인할 수 있다.
Vite
Next Generation Frontend Tooling
vitejs.dev
💡 Create React App / Vite 처럼 환경 변수를 설정하는 방법이 조금 씩 다르니 각자 사용하는 도구를 확인해서 설정해주는 것이 좋겠다.
'Front-end > etc' 카테고리의 다른 글
유튜브(Youtube) API - Key 발급받기, 사용하기 (0) | 2024.03.14 |
---|---|
프리텐다드(Pretendard) 폰트 적용하기 (0) | 2024.03.05 |
JWT를 이용해서 인증하기 (0) | 2024.01.12 |
프로젝트 vercel로 배포하기 (환경변수 에러 해결하기) (1) | 2024.01.10 |
리액트 프로젝트 firebase로 배포하기 (프로젝트 생성, 호스팅 설정, 배포) (0) | 2023.03.17 |