개발을 하다보면 코드에 API키와 같은 민감한 개인정보들이 포함되는 경우가 있다.
또한 여러 api에서 사용하는 서버 IP와 같은 반복되는 변수 가 존재할 수 있다.
이를 환경변수들로 만들어 해결할 수 있다.
리액트에서 환경변수를 사용하기 위해서는 env파일을 만들어야 한다.
.env파일 리액트 프로젝트에 적용하기
1. 리액트 폴더 경로에 .env파일 만들기
다음과 같이 리액트 폴더 최상단에 .env파일을 만들어준다.
(vscode를 사용한다면 오른쪽 클릭 후 new File을 클릭하고 .env를 입력하면 생성 가능)
2. 사용할 환경 변수들을 선언
REACT_APP_Google_Client_ID = "123"
REACT_APP_Naver_Client_ID = "456"
REACT_APP_Kakao_Client_ID = "789"
REACT_APP_Server_IP = "http://127.0.0.1:8080"
REACT_APP_API_KEY = "abc"
process.env.REACT_APP_SLACK_BOT_TOKEN
// 값들은 예시이때 중요한 것은 세가지이다.
- 사용할 변수 이름은 앞에 REACT_APP 을 붙여줘야 한다.
- 하나의 변수 선언 뒤에 세미콜론을 붙이지 않는다.
- 작성한 환경변수들 마지막에 process.env.REACT_APP_SLACK_BOT_TOKEN를 작성해준다.
3. 리액트 파일 상에서 해당 변수 사용
백엔드 서버의 info라는 엔드포인트에 axios를 통해 get요청을 보내는 코드를 예시로 들어보자.
import axios from 'axios'
const getInfoApi = async () => {
const Server_IP = process.env.REACT_APP_Server_IP;
return awiat axios.get(`${Server_IP}/info`) // get요청을 보내는 uri => 'http://127.0.0.1:8080/info'
.then((res) => {
return res.data;
})
.catch((err) => {
console.log(err)
}
}다음과 같이 process.env. 뒤에 .env파일에서 선언한 환경 변수의 이름을 입력해주면 사용 가능하다.
장점
1. 민감한 정보를 보호할 수 있다.
api key 등 깃허브에 공개되면 문제가 될 수 있는 정보들을 환경변수로 설정하여 보호할 수 있다.
.gitignore파일에 .env를 추가함으로써 적용할 수 있다.
2. 코드 전역적으로 쓰이는 정보들을 한번에 관리할 수 있다.
프로젝트를 하다보면 요청을 보내야 하는 Server IP 등을 수시로 바꿔야 하는 경우가 있다. 이때 Server IP를 env파일에 선언하여 사용한다면 모든 api의 서버 주소를 하나씩 바꾸지 않고 env파일에서 제어할 수 있게 된다.
.