리액트에서 이미지나 폰트 같은 정적 자원을 관리할때 보통 public폴더 내부에서 관리하거나 src/assets폴더 안에서 관리하는 방법 2가지로 나뉜다.

각각의 차이점은 어떤 것이 있을까?

- src/assets 폴더에서 정적 자원 관리

src폴더 내부에 assets 폴더를 만들어서 정적 자원을 관리하는 방법을 살펴보자.

import Image from './assets/image.png';

function App() {
  return (
    <div>
      <img src={logo} alt="image" />
    </div>
  );
}

export default App;

이런식으로 src폴더 내부에서 정적 자원들을 관리해줄시에 장점이 크게 3가지가 있다.

1. 모듈화

자원을 모듈처럼 사용할수 있다.

각 컴포넌트에서 필요한 자원들을 명확하게 관리할 수 있다.

2. 캐싱 문제 해결

웹팩 등 번들러가 자원을 번들에 포함하여 최적화 할수 있다.

빌드시에 파일명을 해시화하여 캐시 문제를 줄일 수 있다.

여기서 말하는 캐시 문제란 무엇일까?

브라우저는 성능 최적화를 위해서 자주 사용하는 정적 자원들을 캐시에 저장한다.

그렇기 때문에 우리가 빌드하여 파일을 업데이트 하는 과정에서, 브라우저가 여전히 이전 버전을 캐시에서 불러오는 문제가 발생할 수 있다.

이를 해결하기 위해서 파일이 변경 될때마다 새로운 이름을 생성하는 것이다.

- 빌드 전
main.js
style.css

- 빌드 후
main.8d7f5d5f.js
style.3f4a6b1c.css

3. 타입 지원

정적 자원에서 타입 시스템이 필요한 경우, 정적 자원에 대한 타입 지원을 받을 수 있다.

- public 폴더에서 정적 자원 관리

public에 저장하는 리소스들은 반대로 번들링 및 최적화 과정에 포함되지 않는다.

번들링 과정에 포함 되지 않기 때문에 컨텐츠 해시값도 추가 되지 않는다.

그렇기 때문에 파일이 수정 될때마다 직접 파일명을 수정하거나 쿼리값을 일일히 추가해주어야한다.

번들링 과정에 포함이 되지 않으니까 사용하면 안좋지 않을까? 라는 생각이 들수도 있다.

하지만 이렇게 public 안에서 정적 자원을 관리할 경우 장점 또한 존재한다.

1. 경로 안정성

public 폴더의 자원은 절대 경로로 접근할 수 있기 때문에 경로 변경에 신경 쓰지 않아도 된다.

2. 빠른 접근

빌드 과정 없이 리소스를 즉시 사용할 수 있기 떄문에 초기 개발 속도가 빠를 수 있다.

function App() {
  return (
    <div>
      <img src={'/image.png'} alt="image" />
    </div>
  );
}

export default App;

만약 자주 변경되거나 컴포넌트와 밀접하게 연관 된 자원들이라면 src내부에서 관리하는 것이 좋다.

아이콘이나 이미지, 폰트파일 같은 것들을 예로 들 수 있다.

또 상대적으로 자주 변경되지 않는 정적 자원이라면 public에서 관리하는 것이 좋다.

Favicon이나 SEO 관련 파일, 정적 HTML 파일 등을 예로 들 수 있다.