React에서 .env 파일 사용하기

.env 파일이란?

 

유닉스 및 유닉스 계열 운영 체제용 셸 명령어
환경변수 파일을 외부에 만들어 URL,포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.
외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다.

 

 

 

 

 

 

 

환경 변수

 

프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임

 

 

 

 

dotenv

 

환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈

 

 

 

 

 

 

 

 

.env 파일 생성하기

 

• 최상위 경로(root)에서 파일 생성

실제 프로젝트에 사용하는 ,env 파일

• 환경 변수로 지정할 값 작성
• 리액트인 경우 REACT_APP_로 시작
• NextJS의 경우 NEXT_PUBLIC_으로 시작

• .gitignore에 .env 파일 추가

 

 

 

위의 캡처본들 처럼 필요한 정보들을 .env 파일에 저장하면 된다.

그리고 .gitignore 파일에 반드시 추가해야 한다. 추가해야만 git push할 때 파일이 올라가지 않는다.

 

 

 

 

jsx 파일에서 사용시, 위처럼

process.env.REACT_APP_이름 형식으로 사용하면 된다.

 

 

 

 

 

파일 작성 시 주의 사항

 

• 키=값 =양 옆에는 띄어쓰기는 쓰지 않는다.
• 주석 처리하는 법 = 앞에 #을 사용
• 값을 “”으로 감싸지 않아도 string으로 인식한다.
• 줄 끝에 , , ; 를 붙이지 않는다.