assets의 여러 히스토리로 인해… 다음의 public 하위에서 정적 파일을 관리하고 있었습니다.

• 히스토리 더 보기

.
├── public
└── src

그러나 우리는 npm run dev로 개발 서버를 실행했을 때 다음과 같은 에러를 마주합니다.

<aside> <img src="/icons/skull_red.svg" alt="/icons/skull_red.svg" width="40px" /> frontend:dev:test: Assets in public directory cannot be imported from JavaScript. frontend:dev:test: If you intend to import that asset, put the file in the src directory, and use /src/assets/icons/error_diamond.svg instead of /public/assets/icons/error_diamond.svg.

</aside>

public 디렉토리에 있는 에셋은 자바스크립트를 통해 import 하지 말라는 경고였습니다.

자바스크립트 파일에서 import 하기를 원한다면 src 디렉토리에서 사용하라고 하네요.

but 무시했죠……

1~2주 뒤 멘토링 시간, 멘토님께서 이에 대한 질문을 해 주셨습니다. 그리고 꼭 알아보라는 말을 덧붙이셨죠….

에러를 직면했을 당시에는 왜 그런지는 알아보지 않았습니다. 지금부터 알아보겠습니다.

Assets in public directory cannot be imported from JavaScript에 대한 Why를 알아보겠습니다!

우선 Vite 공식 문서에는 다음과 같이 설명되어 있습니다.

<aside> <img src="/icons/send_yellow.svg" alt="/icons/send_yellow.svg" width="40px" /> The public Directory

이 디렉토리에는 다음과 같은 에셋이 포함됩니다.

• 소스 코드에서 참조되지 않음(예: robots.txt)
• 해싱 없이 정확히 동일한 파일 이름을 유지해야 합니다.
• ...또는 URL을 얻기 위해 에셋을 먼저 가져오지 않아도 됩니다.

해당하는 에셋은 public 디렉토리에 배치할 수 있다. 개발 중 / (루트 경로)에서 제공되며 dist 디렉토리의 루트에 그대로 복사된다.

Note that:

• 공개 자산은 항상 루트 절대 경로를 사용하여 참조해야 합니다(예: 공개/icon.png는 소스 코드에서 /icon.png로 참조해야 합니다).
• 공개 에셋은 자바스크립트에서 가져올 수 없습니다. </aside>

여기서 공개 에셋은 자바스크립트에서 가져올 수 없습니다에 대한 이유가 궁금한데 이유는 나와 있지 않네요. 더 알아보도록 하겠습니다**.**

Why React can not access images from public - DEV Community 이런 글을 발견했습니다.