React에서 감정 이모지 이미지를 최적화하는 방법

📌 React에서 감정 이모지 이미지를 최적화하는 방법 💡

React 프로젝트에서 감정 이모지(😊, 😢, 😡, 😍, 😱)를 이미지 파일로 관리할 때, 보관 위치에 따라 성능과 최적화 방식이 달라질 수 있다. 이번 글에서는 public 폴더와 assets 폴더에 저장하는 방식을 비교하고, 최적화 측면에서 어떤 차이가 있는지 알아보려한다. 🚀

---

🎨 1. 이미지 관리 방식

📂 (1) Public 폴더에 저장하는 방법

/public
  ├── emotion1.png
  ├── emotion2.png
  ├── emotion3.png
  ├── emotion4.png
  ├── emotion5.png

// Public 폴더에서 이미지 불러오기
function EmotionImages() {
  return (
    <div>
      <img src="/emotion1.png" alt="Emotion 1" />
      <img src="/emotion2.png" alt="Emotion 2" />
      <img src="/emotion3.png" alt="Emotion 3" />
      <img src="/emotion4.png" alt="Emotion 4" />
      <img src="/emotion5.png" alt="Emotion 5" />
    </div>
  );
}

✅ 장점:

• 브라우저에서 직접 접근 가능 (/emotion1.png → 정적 파일 제공)
• 빠른 로딩 속도 (CDN을 활용하면 더 빠름)

⚠️ 단점:

• 빌드 시 번들에 포함되지 않음 → 캐시 관리가 어려움
• 환경변수(BASE_URL)를 사용할 경우, 경로 관리가 번거로울 수 있음

---

📂 (2) assets 폴더에 저장하는 방법

/src/assets
  ├── emotion1.png
  ├── emotion2.png
  ├── emotion3.png
  ├── emotion4.png
  ├── emotion5.png

// assets 폴더에서 import하여 사용
import emotion1 from "./assets/emotion1.png";
import emotion2 from "./assets/emotion2.png";
import emotion3 from "./assets/emotion3.png";
import emotion4 from "./assets/emotion4.png";
import emotion5 from "./assets/emotion5.png";

function EmotionImages() {
  return (
    <div>
      <img src={emotion1} alt="Emotion 1" />
      <img src={emotion2} alt="Emotion 2" />
      <img src={emotion3} alt="Emotion 3" />
      <img src={emotion4} alt="Emotion 4" />
      <img src={emotion5} alt="Emotion 5" />
    </div>
  );
}

✅ 장점:

• Webpack이 이미지를 번들링 → 최적화된 파일 제공 🎯
• 캐시 관리가 쉬움 (파일 이름 해싱 가능) 🔄
• 코드 내에서 경로를 쉽게 다룰 수 있음

⚠️ 단점:

• 초기 번들 크기가 커질 수 있음 (Lazy Loading 적용 가능) ⚠️
• 모든 이미지를 JavaScript가 처리하므로 추가적인 로딩 시간이 발생할 수 있음 ⏳

---

🚀 2. 최적화 방법

🎯 (1) 이미지 경량화 (WebP 변환)

JPG/PNG 대신 WebP 형식을 사용하면 파일 크기를 25~30% 줄일 수 있습니다.

<img src="/emotion1.webp" alt="Optimized Emotion" />

🖼️ (2) Lazy Loading 적용하기

React에서 loading="lazy" 속성을 사용하면 사용자가 스크롤할 때만 이미지를 로딩합니다.

<img src={emotion1} alt="Emotion 1" loading="lazy" />

📡 (3) CDN 활용

Cloudflare, AWS S3 같은 CDN을 활용하면 이미지 로딩 속도를 더욱 개선할 수 있습니다.

---

🎯 3. 결론: 어떤 방법이 더 좋을까? 🤔

저장 위치 장점 단점

Public 폴더	빠른 로딩 속도, 브라우저 접근 가능	번들 포함 X, 캐시 관리 어려움
Assets 폴더	Webpack 최적화, 코드 관리 용이	초기 번들 크기 증가 가능

✅ 추천 방식:

• 정적 파일을 브라우저에서 직접 접근하려면 → public 폴더 사용
• 번들 최적화와 캐시 관리가 필요하면 → assets 폴더 사용
• Lazy Loading 및 WebP 변환을 적극 활용하면 성능 개선 가능! 🚀

---

이번 프로젝트에서 5개의 감정 이미지를 관리하기 위해서 assets 폴더에 넣어 이미지를 사용하려한다. 

하지만, 만약 다수의 이미지를 사용할 경우 public에 넣어 이미지를 사용하는 것이 좋을 수 있다.