TIL 35. 2024-02-16

axios 강의를 학습하는 중에 .env 파일에 환경변수를 설정 후 process.env ..를 선언하는 부분이 있었다. but 환경 변수 부분에서 에러인 Uncaught (in promise) ReferenceError: process is not defined 발생 ㅠㅠ

첫번 째 도전😤😤
-강의를 다시 돌려보며 놓친 부분이 있는 지 체크하였지만 놓친 부분이 없어.. 에러 해결 실패

두번 째 도전!!!
-구글링🧐😉을 통해 에러 이유를 알게 되었다. 강의에서 알려준 방식은 CRA 방식==> 기본적으로 환경변수가 내장되어 있지만 현재 내가 사용하는 방식은 Vite이었다.
Vite에서 환경변수를 사용하기 위해서는 아래의 순서대로 진행해야했었다 ㅠㅠ 이거 에러 찾는데 40분 경과

vite 환경 변수 설정
npm install dotenv --save or yarn add dotenv 설치
.env 파일 생성 후 변수 선언하기: VITE_REACT_APP_SERVER_URL=http://localhost:4000
import.meta.env.[변수명]으로 선언하기

  const SERVER_URL = import.meta.env.VITE_REACT_APP_SERVER_URL;
    const { data } = await axios.get(`${SERVER_URL}/todos`);
    setTodos(data);
  };

기존 강의에서 알려준 CRA 환경 변수 설정

.env 파일 생성 후 변수 선언하기: VITE_REACT_APP_SERVER_URL=http://localhost:4000
process.env.[변수]

환경변수 참고 자료