|
|
import{_ as i,c as a,ag as e,o as t}from"./chunks/framework.C1C4sYC0.js";const o=JSON.parse('{"title":"에셋 핸들링","description":"","frontmatter":{},"headers":[],"relativePath":"ko/guide/asset-handling.md","filePath":"ko/guide/asset-handling.md","lastUpdated":1723033845000}'),n={name:"ko/guide/asset-handling.md"};function h(l,s,p,d,k,r){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="asset-handling" tabindex="-1">에셋 핸들링 <a class="header-anchor" href="#asset-handling" aria-label="Permalink to "에셋 핸들링 {#asset-handling}""></a></h1><h2 id="referencing-static-assets" tabindex="-1">정적 에셋 참조하기 <a class="header-anchor" href="#referencing-static-assets" aria-label="Permalink to "정적 에셋 참조하기 {#referencing-static-assets}""></a></h2><p>모든 마크다운 파일은 Vue 컴포넌트로 컴파일되어 <a href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">Vite</a>에 의해 처리됩니다. 모든 에셋은 상대 URL을 사용하여 참조할 수 있으며, <strong>참조해야 합니다</strong>:</p><div class="language-md vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">이미지</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./image.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>마크다운 파일에서 정적 에셋을 참조할 수 있으며, 테마 내의 <code>*.vue</code> 컴포넌트, 스타일 및 일반 <code>.css</code> 파일을 절대 경로(프로젝트 루트를 기준으로) 또는 상대 경로(파일 시스템을 기준으로)를 사용하여 참조할 수 있습니다. 후자는 Vite, Vue CLI 또는 webpack의 <code>file-loader</code> 동작과 유사합니다.</p><p>일반적인 이미지, 미디어 및 글꼴 파일 형식은 자동으로 에셋으로 감지되어 포함됩니다.</p><div class="tip custom-block"><p class="custom-block-title">링크를 통해 참조된 파일은 에셋으로 처리되지 않습니다</p><p>마크다운 파일 내에서 링크로 참조된 PDF 또는 기타 문서는 자동으로 에셋으로 처리되지 않습니다. 링크된 파일을 접근 가능하게 하려면 프로젝트의 <a href="#the-public-directory"><code>public</code></a> 디렉토리에 수동으로 배치해야 합니다.</p></div><p>절대 경로를 사용하는 에셋을 포함하여 모든 참조된 에셋은 프로덕션 빌드에서 해시된 파일 이름으로 출력 디렉토리에 복사됩니다. 참조되지 않은 에셋은 복사되지 않습니다. 4kb보다 작은 이미지 에셋은 base64로 인라인됩니다. 이는 <a href="./../reference/site-config#vite"><code>vite</code></a> 구성 옵션을 통해 구성할 수 있습니다.</p><p>모든 <strong>정적</strong> 경로 참조는 절대 경로를 포함하여 작업 디렉토리 구조를 기반으로 해야 합니다.</p><h2 id="the-public-directory" tabindex="-1">Public 디렉터리 <a class="header-anchor" href="#the-public-directory" aria-label="Permalink to "Public 디렉터리 {#the-public-directory}""></a></h2><p>때때로 마크다운이나 테마 컴포넌트에서 직접 참조되지 않는 정적 에셋을 제공해야 하거나 특정 파일을 원래 파일 이름으로 제공하고 싶을 때가 있습니다. 이러한 파일의 예로는 <code>robots.txt</code>, 파비콘, PWA 아이콘 등이 있습니다.</p><p>이 파일들은 <a href="./routing#source-directory">소스 디렉토리</a> 아래의 <code>public</code> 디렉토리에 놓을 수 있습니다. 예를 들어 프로젝트 루트가 <code>./docs</code>이고 기본 소스 디렉토리 위치를 사용 중인 경우, <code>public</code> 디렉토리는 <code>./docs/public</code>이 됩니다.</p><p><code>public</code>에 배치된 에셋은 출력 디렉토리의 루트로 그대로 복사됩니다.</p><p><code>public</code>에 배치된 파일은 루트 절대 경로를 사용하여 참조해야 한다는 점에 유의하세요. 예를 들어, <code>public/icon.png</code>는 소스 코드에서 항상 <code>/icon.png</code>로 참조되어야 합니다.</p><h2 id="base-url" tabindex="-1">Base URL <a class="header-anchor" href="#base-url" aria-label="Permalink to "Base URL {#base-url}""></a></h2><p>사이트가 루트 URL이 아닌 곳에 배포된 경우, <code>.vitepress/config.js</code>에서 <code>base</code> 옵션을 설정해야 합니다. 예를 들어, 사이트를 <code>https://foo.github.io/bar/</code>에 배포하려는 경우 <code>base</code>는 <code>'/bar/'</code>로 설정해야 합니다(항상 슬래시로 시작하고 끝나야 합니다).</p><p>모든 정적 에셋 경로는 다른 <code>base</code> 구성 값에 맞게 자동으로 처리됩니다. 예를 들어, 마크다운에서 <code>public</code> 하위의 에셋에 대한 절대 참조가 있는 경우:</p><div class="language-md vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">이미지</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/image-inside-public.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>이 경우 <code>base</code> 구성 값을 변경할 때 <strong>업데이트할 필요가 없습니다</strong>.</p><p>그러나 테마 구성 값을 기반으로 <code>src</code>가 설정된 이미지와 같이 동적으로 에셋에 링크하는 테마 컴포넌트를 작성하는 경우:</p><div class="language-vue vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme.logoPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><p>이 경우 VitePress에서 제공하는 <a href="./../reference/runtime-api#withbase"><code>withBase</code> 헬퍼</a>로 경로를 감싸는 것이 좋습니다:</p><div class="language-vue vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { withBase, useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"withBase(theme.logoPath)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,23)]))}const E=i(n,[["render",h]]);export{o as __pageData,E as default};
|
