이미지, 폰트 파일 추가

이미지, 폰트 ▸ JS 파일에서 불러오기

Webpack을 사용하면 이미지, 글꼴과 같은 정적 에셋을 사용하는 방법이 CSS 스타일 추가와 유사합니다. 이 방법은 번들에 해당 파일을 포함하도록 Webpack에 지시합니다.

Logo.js

import logoImagePath from './assets/images/logo.png'

console.log(logoImagePath) // /logo.23917j18.png


export default function Logo() {
  return <img src={logoImagePath} alt="이듬(E.UID)" />
}

데이터 URIs

CSS 가져오기와 달리 파일 가져오기는 문자열 값을 제공합니다. 이 값은 코드에서 참조 할 수 있는 경로(path) 문자열을 출력합니다. 다만, 서버 요청 횟수를 줄이기 위해 10,000 바이트(bytes) 미만 크기의 파일을 가져올 경우 경로 문자열 대신 데이터 URIs가 반환 됩니다. 데이터 URIs로 반환은 bmp, gif, jpe?g, png 확장자를 가진 파일에 적용됩니다.

SVG 파일은 알려진 문제(#1153)로 인해 데이터 URIs 대상에서 제외됩니다.

이미지, 폰트 파일 추가 방법을 사용하면 빌드 시, Webpack이 이미지를 빌드 폴더로 복사하고 올바른 경로를 제공합니다.

Data URIs 설정 변경

환경 변수로 IMAGE_INLINE_SIZE_LIMIT 값을 설정하면 다른 값을 사용할 수 있습니다.

.env

# 기본적으로 10,000 바이트 보다 작은 이미지는 base64 데이터 URIs로 인코딩 되고 
# CSS 또는 JS 빌드 출력 파일에 포함됩니다. 크기 제한(바이트)를 제어하려면 
# 이 옵션을 설정합니다. 0으로 설정하면 비활성화 됩니다.

IMAGE_INLINE_SIZE_LIMIT=12000

CSS 배경 이미지 URL

Webpack은 CSS에서 모든 상대 경로(./)를 찾아 컴파일 된 번들의 경로로 변경합니다. 실수로 오타를 내거나, 중요한 파일을 삭제하면 존재하지 않는 JavaScript 모듈을 가져오려 시도하므로 컴파일 오류가 표시됩니다.

.logo {
  background-image: url("../../assets/logo.png");
}

컴파일 된 번들의 최종 파일 이름은 콘텐츠 해시에서 Webpack에 의해 생성됩니다. 추후 파일 내용이 변경되면 Webpack은 프로덕션에서 다른 이름을 생성하므로 브라우저 캐싱에 대해 걱정할 필요는 없습니다.

잦은 수정이 없는 이미지를 사용한다면 상대 경로 대신, 정적 에셋을 사용할 수도 있습니다.

SVG → React 컴포넌트

SVG 파일을 가져와 사용하는 방법 중 하나는 SVG를 React 컴포넌트로 가져오는 것입니다.

import { ReactComponent as Logo } from '../assets/logo.svg'

function LogoLink({title, ...restProps}) {
  return (
    <a {...restProps}>
      {/* SVG 파일을 Logo React 컴포넌트로 변경했으므로 다음과 같이 사용할 수 있습니다. */}
      <Logo title={title} />
    </a>
  )
}

이 방법은 SVG를 별도의 파일로 로드하지 않고 React 컴포넌트로 활용할 때 유용합니다. 나아가 SVG React 컴포넌트에 접근성(Accessibility)을 부여하는 것도 중요합니다! 컴포넌트에 title 속성을 전달하면 "접근 가능한 이름"을 제공할 수 있습니다.

컴파일 된 SVG React 컴포넌트

<svg>
  <title>접근 가능한 이름 제공</title>
  <!-- ... -->
</svg>

SVG 접근성에 관심이 많다면 Accessible SVGs 글을 참고하세요.