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 를 통해 서버를 구동시킨 상태에서 환경변수를 추가했기 때문이다.
서버 구동중에 환경변수를 새로 추가한 경우에는 반드시 서버를 다시 구동시켜주어야 환경변수를 정상적으로 사용할 수 있다.
따라서, 환경변수 사용 조건을 모두 만족시켰는데도 환경변수가 제대로 사용이 되지 않는 상황이 발생한다면, 내가 현재 서버를 구동시키고 있는 상태인지, 서버를 재구동 시켰는지 확인해보도록 하자.