React + Vite .env 환경변수로 개발 환경(profile)나누기

우선 Vite는 아래의 설명처럼 빌드도구입니다.
Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)는
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구!

참고 : https://ko.vite.dev/guide/env-and-mode
React에서 Vite를 사용하고 있다면 환경변수에 접근하기 위해서는
import.meta.env객체를 이용해서 접근합니다.
예를 들어 소스에서의 사용은 아래와 같이 사용합니다.

변수명은 VITE_로 시작:)

이제 dev, prod환경별 변수를 사용하기 위해서. env파일을 생성하고 환경별로 가져다가 사용해 보겠습니다.

.env

.env는 공통적으로 사용할 내용
.env.development는 dev환경에서 사용할 내용
.env.production은 prod 환경에서 사용할 내용
.env.local은 로컬 개발 시에 사용할 내용
을 작성해 주시면 됩니다.

그리고 package.json 쪽에 스크립트 부분에 --mode를 추가해 줍니다.

{
  "private": true,
  "type": "module",
  "scripts": {
    "local": "vite --mode .env.local",
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "prod": "vite --mode production",
    "serve": "vite preview",
    "type-check": "tsc --noEmit",
    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
    "format": "prettier --write ./src"
  },
  "dependencies": {

추가를 해주면!
아래에서 dev환경으로 할지 local환경으로 할지 prod환경으로 할지 골라서 실행하면 됩니다.

아래처럼 작성한 .env 파일과 함께 실행을 하게 됩니다.
아래는 .env.local이니 localhost로 된 주소를 불러오겠죠~
팁: VITE_로 시작하는 변수명으로 작성해 주면 됩니다.