[React] API서버 env 환경변수 적용하기

서버 주소를 노출시키지 않기 위해 .env 파일을 이용해서 환경변수를 적용해보기로!..

자주 쓰는 경로나 값이 있다면 환경변수를 이용해서 편하게 가져다 쓸 수 있다.

먼저 .env 파일을 만들어서 변수를 만들어준다.

 

 

 

변수 선언

리액트에서 사용해주려면 앞에 REACT_APP 키워드를  꼭 붙여주어야 한다.

url 주소를 넣는다면 굳이 따옴표로 감싸주지 않아도 된다!

 

 

변수 사용

아래와 같이 process.env.[변수이름]으로 사용하면 된다.

 await axios.patch(`${process.env.REACT_APP_API_URL}/articleComment/${id}`,{...comment,});

 

 

처음에는 아래처럼 사용했었는데 계속 404 오류가 떴다.. 😇 선언한 변수명 그대로 넣어줘야 하는듯!

 await axios.patch(`${process.env.API_URL}/articleComment/${id}`,{...comment,});