create-react-app에서 local file을 사용하고 싶을 때

1. 문제

• create-react-app에서 image src가 없거나 제대로 연결되지 않은 경우 default image를 표시하기 위해 구글에서 default image를 다운받아 local file로 사용하려고 했었다.
• 구글링해서 찾은 결과 public 폴더 안에 image를 넣고 이를 참조할 때는 '/(public 폴더 안에서 file의 위치)'로 하면 된다고 하길래 그렇게 했더니 file을 계속 찾지 못하는 오류가 발생했다.
• 특히 default image를 넣기 위해서 img 태그에 onError attribute를 추가하고 거기에 image를 넣었는데 그마저도 오류가 발생해서 onError 함수가 계속해서 재실행되는 상황이 발생했다.
• 그래서 이를 해결하려면 default image를 create-react-app이 제대로 인식할 수 있도록 올바른 file 위치를 설정해야 했었다.

 

2. 해결

• 해결 방법은 의외로 간단했다. 아래 site에서 그 방법을 알 수 있었다.
• create-react-app.dev/docs/using-the-public-folder/

Using the Public Folder | Create React App

• 위 site을 참조한 결과 create-react-app에서는 public 폴더 내 file을 참조할 때 html을 사용하는 경우 '%PUBLIC%/(public 폴더 안에서 file의 위치)'를 사용하고, javascript를 사용하는 경우 process.env.PUBLIC_URL을 '/(public 폴더 안에서 file의 위치)' 앞에 붙여야 한다.
• 이를 이용해 default image를 정상적으로 불러올 수 있었다.
• 이런 site가 있는지도 모르고 구글링을 하느라 시간을 많이 낭비했었다. 앞으로는 이를 많이 참조해야겠다는 생각이 들었다.