[React] 리액트에서 public에 이미지 불러오기

리액트에서 public에 존재하는 이미지를 가져오는 과정에서 자잘한 오류들을 겪어서 주의할 점들을 기록해보려고 한다.

 

리액트에서는 proceses.env.PUBLIC_URL을 통해 public 디렉토리의 경로를 가져올 수 있다.

 

public 디렉토릴에 접근할 때는 process.env.PUBLIC_URL을 사용하는 것이 좋다고 한다.

 

특히 배포할 때는 루트 경로가 달라질 수도 있는데 process.env.PUBLIC_URL을 사용하면 이러한 경로를 쉽게 관리할 수 있다.

 

process.env.PUBLIC_URL은 .env 파일에다가 우리가 직접 넣어줄 필요가 없다.

 

그냥 바로 process.env.PUBLIC_URL을 사용하면 된다.

 

만약 CRA(create-react-app)을 통해 프로젝트를 만들었다면 dotenv는 내장되어 있다.

 

process.env.PUBLIC_URL을 사용해야 한다는 것을 보고 express 서버를 세팅할 때처럼 .env 파일을 만들어서 PUBLIC_URL key값을 세팅해야 하는 줄 알고 dotenv를 설치했더니 오류가 발생했다.

 

 

알고보니 CRA를 사용하면 dotenv가 함께 설치되는 것이었다.

 

일반적으로 node.js에서 dotenv를 사용할 때는 dotenv를 import 한 후 dotenv.config()를 호출하지만 CRA로 만든 리액트 프로젝트에서는 dotenv를 import 할 필요도 없고 dotenv.config()를 호출할 필요도 없다.

 

그냥 .env 파일만 만들고 내용을 작성한 후 process.env를 통해 불러오면 된다.