귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

Studying/React

리액트 공부하기 - 환경변수, .env 파일

creamymood 2025. 5. 8. 21:24

미니 프로젝트에서 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 파일 수정 후에는 서버를 다시 시작해야 반영돼요