이미지 저장소 public/ VS assets/
public/
이미지를 public/ 디렉토리에 저장하고 index.html 또는 index.css 파일 내에서 직접 참조 가능
⏩ public/에 저장된 이미지 (또는 일반적으로: 파일)이
프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공
index.html과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있으며
다른 파일에 의해 요청될 수 있음
예를 들어, localhost:5173/some-image.jpg 를 불러오면 해당 이미지를 볼 수 있다.
(물론 public/ 폴더에 이미지가 있을 경우).
src/assets/
이미지를 src/assets/~ (또는 실제로는 src폴더의 어디든)에 저장 가능
public/와 비교
src 또는 src/assets/ 와 같은 하위 폴더에 저장된 모든 파일(어떤 형식이든)은
공개적으로 제공되지 않고 웹사이트 방문자가 접근할 수 없음
localhost:5173/src/assets/some-image.jpg 를 불러오려고 하면 오류가 발생
대신, src/ (및 하위 폴더)에 저장된 파일은 코드 파일에서 사용
코드 파일에 가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화
웹사이트에 제공하기 직전에 public/ 폴더에 "삽입"
가져온 이미지는 참조한 위치에서 자동으로 링크가 생성되어 사용
어떤 폴더를 사용??
빌드 프로세스에 의해 처리되지 않는 이미지는 public/ 사용, 대체적으로 사용 가능 가능
예를 들면 index.html 파일이나 favicon 과 같은 이미지가 좋은 후보
반면, 컴포넌트 내에서 사용되는 이미지는 일반적으로 src/~(예: src/assets/)에 저장
