리액트를 이용하여 프로젝트를 만들 때, 외부 서비스 제공자의 서비스를 사용하는 경우가 존재한다. 이때 중요한 것이 API를 사용하기 위해 등록하면서 발급받은 API Key(Secret)과 Client ID를 잘 기억하고 사용하는것이 중요한데, API KEY(Secret)은 절대로 외부로 노출되어서는 안된다.

하지만, 개발과정 중 부주의 또는 실수로 인해, 하드코드되어진채로 git에 올린다던가 하여 외부로 노출되는 경우가 발생하기도 한다.

또한, 매번 바뀌어 따로 작성해줘야 하는 값의 경우 한군데에서 관리하도록 하면 편하게 관리할 수 있다.

관리의 편의성 및 보안을 위해 환경변수를 이용하는 방법에 대해 포스팅하고자 한다.

환경변수 이용

환경변수를 이용하는 방법은 크게 두가지 방법이 있는데, 하나는 JS파일을 작성하여 이를 불러서 사용하는 방법과
.env 파일을 이용하는 방법이 있다.

Javascript 파일을 이용한 방법

src 폴더 밑에 임의의 자바스크립트 파일을 생성한다. 여기서는, global_variables.js라는 파일을 생성했다.

생성후 파일 내에서는 export키워드를 이용하여 변수를 export 해준다음, 필요한 곳에서 import해 사용하면 된다

global_variables.js

// global_variables.js
export const BACK_BASE_URL='localhost:8080';
export const 

userinfo.js

// userinfo.js
import * as gvar from './global_variables'

const UserInfo = ()=>{
  const getUserInfo = (id)=>{
	axios.get(gvar.BACK_BASE_URL+'/user/'+id).then().catch();
  }
}
export default UserInfo

위에서 작성한 global_variables.js 파일을 gvar의 이름으로 가져와서 사용하는 코드이다.

.env 파일을 이용한 방법

Project root 밑에 .env파일을 생성한다

// .env
REACT_APP_BACK_BASE_URL=localhost:8080
//...

파일의 내용은 위와같이 작성하면 되는데, 중요한점은
REACTAPP을 접두사로 붙여야 한다는 점입니다.

// userinfo.js
const UserInfo = ()=>{
  const getUserInfo = (id)=>{
	axios.get(process.env.BACK_BASE_URL+'/user/'+id).then().catch();
  }
}
export default UserInfo

사용하는 방법은 js 또는 jsx에서 process.env.를 접두사로 붙여서 사용하면 된다.

주의할 점

.env와 같은 환경변수 관리 파일들은 Git/SVN과 같은 버전 관리 시스템에서는 사용하지 않는것이 좋다.