Github에 커밋을 할 때, 중요한 데이터를 커밋하고 싶지 않은 경우 우리는 Dotenv 를 사용한다.
.gitignore 파일 안에 .env를 추가해주면 커밋 시에 .env 파일은 업로드 되지 않는다.
나 역시도 중요한 데이터를 활용하기 위해 Dotenv를 사용했다.
이 글에서 환경변수, Dotenv, .env 는 서로 같은 의미입니다.
환경변수를 어디에 쓰려고 사용했는가?
이번에 내가 구현하려했던 것은 관리자 페이지의 접속 가능 여부를 확인하고 관리자라면 접속, 관리자가 아닌 기본 유저라면 에러 페이지 표시하는 것이었다.
에러 발생까지의 과정
먼저 나는 관리자의 UserId를 .env 파일에 추가했다.
관리자의 UserId를 알고있어야 이사람이 관리자인지 아닌지를 판단할 수 있기 때문이다.
REACT_APP_FIREBASE_MANAGER_ID=관리자UserId그 후에 관리자인지 아닌지를 판단 후 Boolean 값을 반환하는 상태관리(state) 코드를 작성했다.
const [isAdmin, setIsAdmin] = useState(false);
setIsAdmin(userId === process.env.REACT_APP_FIREBASE_MANAGER_ID);+) 환경변수는 Javascript의 내장객체인 process.env 를 사용해 가져올 수 있다.
에러 발생
그러나 이 코드는 정상적으로 작동하지 않았다.
정확히는 환경변수를 제대로 받아오지 못했다.
환경변수를 콘솔에 출력해보니 undefined만 출력될 뿐이었다.
이런 경우에 자신의 코드가 형식에 맞게 잘 작성되었는지 다시한번 확인하는 과정을 거치는 것이 중요하다.
React 에서 환경변수 작성 규칙은
.env파일은 반드시 최상위 폴더에 위치환경변수는 앞에는 무조건REACT_APP_을 사용환경변수의 값은 반드시 그 값 자체만 작성
(이게 무슨 말이냐하면, 만약환경변수REACT_APP_KEY의 값으로 ABCDE 를 할당하고싶다면REACT_APP_KEY=ABCDE이렇게 작성해주어야한다는 것이다.
즉, 값을 감싸는괄호,따옴표등이 없어야하며, 맨 끝에세미콜론이나콤마도 존재해서는 안된다는 것이다.)
나는 작성 규칙을 어긴 것이 없었다.
1번 규칙도 잘 지켰고, 2번 규칙도 잘 지켰으며, 3번 규칙 역시 잘 지켰다.
그럼 왜 이럴까?
나는 하나의 실수를 했다.
바로 npm start 를 통해 서버를 구동시킨 상태에서 환경변수를 추가했기 때문이다.
서버 구동중에 환경변수를 새로 추가한 경우에는 반드시 서버를 다시 구동시켜주어야 환경변수를 정상적으로 사용할 수 있다.
따라서, 환경변수 사용 조건을 모두 만족시켰는데도 환경변수가 제대로 사용이 되지 않는 상황이 발생한다면, 내가 현재 서버를 구동시키고 있는 상태인지, 서버를 재구동 시켰는지 확인해보도록 하자.
Reference
