1) Assets 폴더 사용 → 우리가 이미지를 수정했을 때, 이 이미지가 사용자가 봤을 때도 곧바로 수정되어 반영될 필요성이 있는 경우, src/assets 폴더 안에 저장하여 사용.
ex) 이벤트 페이지(event.html)와 같은 같은 경우, 사용자가 클릭할 때, 최신 이벤트 내용이 보여야 하고, 실시간으로 바로 바꿔주지 않으면 예전 이벤트 페이지가 보이는 문제가 발생하기 때문에 이러한 “동적인 이미지”들은 src/assets 폴더 안에 저장해 vite가 번들링 작업을 할 수 있도록 사용해야 한다.
👉 이런 식으로 수정하는 순간 즉시 반영돼야 하는 이미지들을 src/assets 폴더 안에 이미지를 저장하면, vite가 deploy할 당시, dist/src/assets 폴더를 만든 후, 그 안에 이미지들을 복사하여 저장하는 시스템을 구축하며, vite에 최적화된 동작을 실행할 수 있게 된다!
✨ 장점
1. vite가 src/assets에 있는 이미지들을 자동으로 최적화(번들링 과정: 불필요한 라이브러리 및 주석 제거, 변수명 압축)하고, html 코드 내에 있는 이미지 태그를 읽어 번들링(불필요한 라이브러리 제거, 변수명 압축 등)을 수행할 수 있다.
💥 이때, “Html 코드 내에 있는” 에 주목할 필요!!!
HTML 코드로 쓰인 이미지 파일들은 vite가 알아서 자동으로 번들링 작업을 실행하고, dist/src/assets에 복사하기 때문에 문제없이 렌더링 OK. 하지만, JS 파일에서 html 코드를 문자열로 작성하게 되면, html 태그로 인식을 못하고, 자바스크립트 소스라고 인식하기 때문에, 나이키 홈페이지의 헤더같은 경우 아이콘들이 잘 출력됐지만, 장바구니 페이지 내에 JS코드로 동적으로 InnerHTML을 이용해 추가한 이미지들이 깨졌던 것..
2. 추후에 만약 이미지가 수정되더라도, 브라우저에 실시간으로 반영될 수 있도록 이미지 파일 이름 뒤에 추가되는 해시 값은 브라우저가 이미지 변경 여부를 확인할 때 활용되며, 이를 통해 변경된 이미지를 바로 반영할 수 있다.
2) Public 폴더 사용 → 자주 바뀌지 않는 "정적인 이미지 (브랜드 로고, 자잘한 아이콘)"들은 사용자에게 즉시 업데이트하여 보여줄 필요 없어서 최적화 작업(번들링)이 필요없기 때문에, 보통 public에 저장해 사용.
ex1 ) 아이콘 스타일을 더 예쁘게 바꿔서 반영하고 싶을 때, 이 경우 직접적으로 기능에 영향을 미치는 요소가 아니므로, 실시간으로 반영될 필요성 x => public 폴더에 저장
ex2 ) 로고나 아이콘처럼 변경 빈도가 낮고 즉시 업데이트가 필요하지 않은 이미지는 public에 두고, HTML이나 CSS에서 src 속성을 통해 바로 참조할 수 있다.
이런 식으로 자주 사용되지만, 잘 바뀌지 않는 정적인 이미지들은 vite의 최적화 작업이 필요 없기 때문에 assets파일 안에 넣지 않고, public 폴더 내에 저장하여 사용한다. 즉, 빈번하게 수정되지 않기 때문에 vite가 새로운 수정사항을 반영할 때 활용되는 해쉬번호를 추가하는 번들링 및 최적화 작업의 필요성이 없어서, public 폴더 내에 저장하여 해쉬번호 없이, 그냥 이미지파일 이름 그대로 dist/public에 복사하여 사용해도 된다.
3) 상품 이미지와 동적 콘텐츠 관리 → 상품 리스트 페이지(products.html)에서 사용하는 신발 이미지는 데이터베이스에서 동적으로 관리되며, 각 상품 등록 시 API를 통해 이미지를 불러와야 하므로 하드코딩하지말고, API 사용.
✅ 최종 정리
1) 즉시 반영이 필요한 동적 이미지: 이벤트 페이지 내에 쓰이는 이미지 같은 경우, vite의 이미지 번들링(최적화) 작업과 해시 적용을 통해 실시간 업데이트가 가능하도록 해야 하므로, src/assets에 저장하고, js파일 내에서 Import하여 사용하자.
2) 자주 변경되지 않는 정적인 이미지: public 폴더에 하여 원본 이름으로 사용합니다. 번들링 및 해시가 필요 없으므로 효율적이다.
3) API로 관리하는 동적 이미지(상품 리스트): 상품리스트 페이지(products.html)에 쓰이는 신발 이미지들은 로컬에 두고 사용하는 것이 아니라, 이미지소스가 외부 서버에 있기 때문에 하드코딩없이, API 요청을 통해 가져와야 한다.