> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/adding-images-fonts-and-files.md).

# 이미지, 폰트 파일 추가

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

Webpack을 사용하면 이미지, 글꼴과 같은 [정적 에셋](/learning-react-app/tip-and-references/create-react-app/using-public-directory.md)을 사용하는 방법이 [CSS 스타일 추가](/learning-react-app/tip-and-references/create-react-app/add-css-style.md)와 유사합니다. 이 방법은 번들에 해당 파일을 포함하도록 Webpack에 지시합니다.

{% tabs %}
{% tab title="Logo.js" %}

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

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


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

{% endtab %}
{% endtabs %}

## 데이터 URIs <a href="#data-uris" id="data-uris"></a>

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

{% hint style="info" %}
SVG 파일은 알려진 문제([#1153](https://github.com/facebook/create-react-app/issues/1153))로 인해 데이터 URIs 대상에서 제외됩니다.&#x20;
{% endhint %}

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

{% hint style="info" %}

#### Data URIs 설정 변경 <a href="#settig-custom-data-uris" id="settig-custom-data-uris"></a>

[환경 변수](/learning-react-app/tip-and-references/create-react-app/add-env.md)로 IMAGE\_INLINE\_SIZE\_LIMIT 값을 설정하면 다른 값을 사용할 수 있습니다.

{% code title=".env" %}

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

IMAGE_INLINE_SIZE_LIMIT=12000
```

{% endcode %}
{% endhint %}

## CSS 배경 이미지 URL <a href="#using-css-background-url" id="using-css-background-url"></a>

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

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

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

{% hint style="info" %}
잦은 수정이 없는 이미지를 사용한다면 상대 경로 대신, [정적 에셋](/learning-react-app/tip-and-references/create-react-app/using-public-directory.md)을 사용할 수도 있습니다.
{% endhint %}

## SVG → React 컴포넌트 <a href="#svg-to-react-component" id="svg-to-react-component"></a>

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

```javascript
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` 속성을 전달하면 "접근 가능한 이름"을 제공할 수 있습니다.

{% tabs %}
{% tab title="컴파일 된 SVG React 컴포넌트" %}

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

{% endtab %}
{% endtabs %}

&#x20;SVG 접근성에 관심이 많다면 [Accessible SVGs](https://css-tricks.com/accessible-svgs/) 글을 참고하세요.