[ React ] .env 사용하기

.env는 외부 노출이 되면 안되는 코드, 즉 보안이 필요한 코드를 불러올 때 사용한다.

 

[ .env 사용법 ]

1. ".env" 파일은 최상위 루트 파일에 위치함.

 

 

2. react 환경에서 환경변수의 보안때문에 아래와 같이 'REACT_APP'으로 시작해야 환경변수의 데이터를 불러올 수 있다.

// REACT_APP_변수명= "값"
REACT_APP_SERVER_URL=http://localhost:4003

 

- 만약 VITE를 사용한다면 VITE_변수명="값" 으로 사용하면 된다.

// VITE_변수명= "값"
VITE_SERVER_URL=http://localhost:4002

 

 

3. 만들어 놓은 환경변수를 불러올때는 "process.env"를 사용한다.

 

- process.env. REACT_APP_변수명

process.env.REACT_APP_SERVER_URL

 

- VITE를 사용한다면 : import.meta.env.VITE_변수명

import.meta.env.VITE_SERVER_URL

 

 

4.  gitignore에 .env를 추가해준다.

 

- gitignore는 git에 올라가지 않는(제외할 수 있는) 설정파일이다.

 

 

 

5. '.env'파일 작성 후에 만약 못불러온다면  Visual Studio Code 를 한번 껏다가 키면 잘 불러온다.