미니 프로젝트에서 api사이트에서 패치 하고 데이터 받아오기 위해, key 값이 필요했는데 그걸 .env 파일에 넣고 .gitignore에서 관리 해줘야 한다는 사실을 망각..
보안과 관련된 것이니, 특히 주의 해서 다루어야 한다!
환경변수란?
환경변수는 운영체제나 실행 환경이 프로그램에 전달해주는 설정값이에요.
예를 들면:
- 데이터베이스 주소
- API 키
- 서버 포트 번호
- 개발 모드인지 배포 모드인지
이와 같은 내용을 담는 변수
쉽게 예를 들면…
우리가 자주 가는 카페에서,
- 네이버 로그인을 쓸 때마다 API Key가 필요하죠?
- 이걸 코드에 직접 박아두면 위험해요. (누가 복사해서 쓰거나 유출될 수 있음)
그래서 이런 값들은 .env 같은 환경변수 파일에 저장해두고,
필요할 때만 꺼내 쓰는 것
.env 파일:
VITE_API_KEY=abc123xyz
VITE_MODE=development
: 이런식으로 .env 파일에 저장해둔 뒤,
코드에서:
const key = import.meta.env.VITE_API_KEY;
const mode = import.meta.env.VITE_MODE;
불러와서 사용해주면 된다!
환경 변수 주의사항
- .env 파일은 절대 Git에 올리면 안 돼요 → .gitignore에 꼭 추가하기
- .env 파일 수정 후에는 서버를 다시 시작해야 반영돼요
'Studying > React' 카테고리의 다른 글
리액트 공부하기 - 파일구조 (0) | 2025.05.09 |
---|---|
리액트 공부하기 - 전역 상태 vs 로컬 상태 (0) | 2025.05.09 |
리액트 공부하기 - custom hooks? 그냥 함수 차이? (0) | 2025.05.07 |
리액트 공부하기 - debounce, throttle (디바운스, 스로틀) (0) | 2025.05.07 |
리덕스 툴킷(전역 상태관리) 공부하기 - 기본적인 예제 코드와 함께 (basic 단계) (0) | 2025.05.05 |