1. 에셋 폴더

특징

• 빌드 도구가 이미지를 최적화하고 관리함
• 사용하지 않는 이미지는 최종 번들에 포함되지 않는 트리쉐이킹 적용
• 빌드 시 이미지 이름이 해시값이 포함된 새로운 파일명으로 변환
• 임포트(import)를 사용하여 이미지 추가

---

에셋 폴더 사용법

1) 이미지 임포트 및 렌더링

import tree from "./assets/images/tree.jpg";

export default function App() {
  return (
    <>
      {/* 이미지 렌더링 */}
      <img src={tree} alt="tree" />
    </>
  );
}

• 장점: 빌드 도구가 경로를 자동으로 관리하고, 이미지 최적화 및 캐싱 처리
• 결과: 개발 모드에서 'tree.jpg'였던 경로가 'assets/tree.123abc.jpg'처럼 최적화된 경로로 변경

⚠️ 주의: img src에 직접 경로 입력 시 빌드 후 npm run preview 로 확인시 이미지 깨짐
<img src="../src/assets/images/tree.jpg" alt="" />

• JSX는 JavaScript로 상대 경로 파싱 불가
• 해결: import로 이미지 불러옴

✅ 빌드와 프리뷰

npm run build 명령어로 프로젝트를 빌드하면 최적화된 배포 파일 생성

npm run preview 명령어로 빌드된 파일을 로컬에서 미리 확인 가능

개발 모드와 빌드/프리뷰 모드의 차이

• 개발 모드: index.html 직접 사용
• 프리뷰 모드: dist 폴더의 최적화된 index.html 사용
• 프리뷰는 실제 배포 환경과 유사한 조건에서 테스트 가능

---

2) 백그라운드 이미지로 사용

<div
  className="w-60 h-60"
  style={{ backgroundImage: `url(${tree})` }}
></div>;

---

4) 이미지 관리 파일 생성 💡

🤔 이미지가 100개가 되면 코드가 너무 지저분해지지 않을까?

이미지 개별 임포트가 번거롭다면 이미지 관리 파일로 한 곳에서 관리하여 코드를 깔끔하게 유지할 수 있음

예시: 이미지 관리 파일 생성

assets/images/images.ts

import tree from "./tree.jpg";
import flower from "./flower.jpg";

export const images = {
  tree,
  flower,
};

사용법

import { images } from "./assets/images/images";

export default function App() {
  return (
    <>
      <img src={images.tree} alt="tree" />
      <img src={images.flower} alt="flower" />
    </>
  );
}

---

2. 퍼블릭 폴더

특징

• 빌드 도구가 관여하지 않고 이미지를 있는 그대로 복사함
• 모든 파일이 최종 번들에 포함되며, 사용하지 않아도 번들 크기에 영향을 줌
• 파일 이름이 그대로 유지되며, 절대 경로로 접근 필요
• 정적 자산(예: 파비콘, robots.txt 등) 관리에 적합

---

퍼블릭 폴더 사용법

1) 이미지 렌더링

export default function App() {
  return (
    <>
      <img src="/tree_p.jpg" alt="tree" />
    </>
  );
}

• 절대 경로(/)를 사용해야 이미지가 올바르게 표시됨
• 빌드 후에도 경로가 변하지 않음

---

2) 백그라운드 이미지로 사용

<div
  className="w-60 h-60"
  style={{ backgroundImage: "url('/tree_p.jpg')" }}
></div>;

---

3. 에셋 폴더와 퍼블릭 폴더 비교

특징	에셋 폴더	퍼블릭 폴더
빌드 도구 관리	✅ 빌드 도구가 이미지 최적화 및 경로 관리	❌ 빌드 도구가 관여하지 않음
최적화	✅ 트리쉐이킹 적용	❌ 모든 이미지가 번들에 포함됨
파일 이름	✅ 해시값 포함 (캐싱 및 버전 관리)	❌ 원본 파일 이름 그대로 유지
사용 방법	import로 이미지 추가	절대 경로(/)로 이미지 추가
사용 사례	고정된 이미지를 프로젝트 내부에서 관리할 때	파비콘, robots.txt 등 정적 자산 관리

---

4. CSS 이미지 사용

CSS 파일에서 이미지를 사용할 때는 경로 작성

.bg {
  background-image: url("../assets/images/tree.jpg");
}

출처: 수코딩