환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 있겠네요
그럼 이러한 값들을 .env 파일로 관리하지 않게되면 어떻게 될까요?
// API Key
const myApiKey = 'abcdefg12345';
우리가 작성한 코드는 깃허브의 공개된 리포지토리에 올리게 되면 별다른 조치를 하지 않는 이상 그대로 올라가게 됩니다. 위에 있는 내 API Key를 아무나 볼 수 있고 또, 무분별하게 사용될 수도 있습니다. 그렇기 때문에 공개되어서는 안되는 민감한 정보들을 .env 파일에 저장하여 필요할 때 환경 변수로 불러오는 것입니다.
아래 예제를 통해서 사용 방법을 알아보겠습니다!
.env 파일 생성 및 .gitignore에 .env 추가
루트 디렉토리에 .env 파일을 생성하고 .gitignore 파일에 .env를 작성해줍니다. .env 파일은 반드시 루트 디렉토리에 생성해야 적용됩니다. .gitignore 파일은 CRA(create-react-app)로 리액트 프로젝트를 생성했다면 자동으로 설치 되지만 만약 없다면 마찬가지로 .gitignore 파일을 새로 생성하여 추가해 주면 됩니다. 꼭 .gitignore 파일에 .env를 작성해야 깃허브에 업로드되지 않습니다.
.env 작성 방법 및 사용
이제 .env에 환경 변수를 작성해 볼 텐데요 작성 방법에는 몇 가지 규칙들이 있습니다. 대표적으로 지켜야 할 규칙들을 3가지로 추려봤습니다.
- React에서 변수명은 REACT_APP_ 으로 시작되어야 한다.
- 변수명과 값 사이에는 공백 또는 따옴표("")가 존재해서는 안된다.
- 변수명은 대문자로 작성하는 것이 관례이다.
이 3가지 방법을 지키면서 환경 변수를 작성해 보겠습니다.
이렇게 작성된 환경 변수를 코드에 사용해 볼까요?
환경 변수를 사용해야 하는 컴포넌트에서 process.env.REACT_APP_내가저장한변수명 으로 접근하면 됩니다.
사용 빈도가 높다면 변수에 저장하여 사용해도 되고 URL에 직접 사용해도 됩니다. 이렇게 하면 더 이상 환경 변수의 값을 노출하지 않으면서 Ajax 요청이 가능합니다.
만약 process.env로 불러와 지지 않는다면 VS Code를 껐다가 다시 실행해 보시길 바랍니다.
HTML script 태그에서 사용
script 태그로 외부 JavaScript 파일을 호출해야 될 때 환경 변수는 %REACT_APP_내가저장한변수명% 으로 사용하시면 됩니다.
