|
|
import{_ as i,c as a,ag as e,o as t}from"./chunks/framework.C1C4sYC0.js";const c=JSON.parse('{"title":"시작하기","description":"","frontmatter":{},"headers":[],"relativePath":"ko/guide/getting-started.md","filePath":"ko/guide/getting-started.md","lastUpdated":1736187882000}'),n={name:"ko/guide/getting-started.md"};function l(p,s,h,d,k,r){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="getting-started" tabindex="-1">시작하기 <a class="header-anchor" href="#getting-started" aria-label="Permalink to "시작하기 {#getting-started}""></a></h1><h2 id="try-it-online" tabindex="-1">온라인에서 사용해보기 <a class="header-anchor" href="#try-it-online" aria-label="Permalink to "온라인에서 사용해보기 {#try-it-online}""></a></h2><p><a href="https://vitepress.new" target="_blank" rel="noreferrer">StackBlitz</a>에서 브라우저로 즉시 VitePress를 사용해 볼 수 있습니다.</p><h2 id="installation" tabindex="-1">설치 <a class="header-anchor" href="#installation" aria-label="Permalink to "설치 {#installation}""></a></h2><h3 id="prerequisites" tabindex="-1">사전 준비 사항 <a class="header-anchor" href="#prerequisites" aria-label="Permalink to "사전 준비 사항 {#prerequisites}""></a></h3><ul><li><a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a> 버전 18 이상.</li><li>VitePress를 명령줄 인터페이스(CLI)를 통해 접근하기 위한 터미널.</li><li><a href="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="noreferrer">마크다운</a> 문법 지원이 있는 텍스트 에디터. <ul><li><a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer">VSCode</a>와 <a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" target="_blank" rel="noreferrer">공식 Vue 확장 프로그램</a> 사용을 권장합니다.</li></ul></li></ul><p>VitePress는 단독으로 사용하거나 기존 프로젝트에 설치할 수 있습니다. 두 경우 모두 다음과 같이 설치할 수 있습니다:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-xmmNo" id="tab-jvpB-eJ" checked><label data-title="npm" for="tab-jvpB-eJ">npm</label><input type="radio" name="group-xmmNo" id="tab-fgs011H"><label data-title="pnpm" for="tab-fgs011H">pnpm</label><input type="radio" name="group-xmmNo" id="tab-2PysxxV"><label data-title="yarn" for="tab-2PysxxV">yarn</label><input type="radio" name="group-xmmNo" id="tab-5SbHE1C"><label data-title="yarn (pnp)" for="tab-5SbHE1C">yarn (pnp)</label><input type="radio" name="group-xmmNo" id="tab-Xx1EjXj"><label data-title="bun" for="tab-Xx1EjXj">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vue</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span></span></code></pre></div></div></div><details class="details custom-block"><summary>"missing peer deps" 경고가 표시되나요?</summary><p>PNPM을 사용하는 경우 <code>@docsearch/js</code>에 대한 "missing peer deps" 경고가 표시됩니다. 이는 VitePress가 작동하는 것을 방해하지 않습니다. 이 경고를 억제하려면 <code>package.json</code>에 다음을 추가합니다:</p><div class="language-json vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"pnpm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "peerDependencyRules"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "ignoreMissing"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@algolia/client-search"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "search-insights"</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></details><div class="tip custom-block"><p class="custom-block-title">참고</p><p>VitePress는 ESM 전용 패키지입니다. <code>require()</code>를 사용하여 가져오지 마시고, <code>package.json</code>에 <code>"type": "module"</code>이 포함되어 있는지 확인하거나, 관련 파일(예: <code>.vitepress/config.js</code>)의 확장자를 <code>.mjs</code>/<code>.mts</code>로 변경하세요. 자세한 내용은 <a href="http://vitejs.dev/ko/guide/troubleshooting.html#this-package-is-esm-only" target="_blank" rel="noreferrer">Vite 문제 해결 가이드</a>를 참고하세요. 또한, 비동기 CJS 컨텍스트에서는 <code>await import('vitepress')</code>를 사용할 수 있습니다.</p></div><h3 id="setup-wizard" tabindex="-1">설정 마법사 <a class="header-anchor" href="#setup-wizard" aria-label="Permalink to "설정 마법사 {#setup-wizard}""></a></h3><p>VitePress는 기본 프로젝트를 구축하는 데 도움이 되는 명령줄 설정 마법사를 제공합니다. 설치 후, 마법사를 시작하려면 다음을 실행하세요:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-W2nSG" id="tab-2akSlPM" checked><label data-title="npm" for="tab-2akSlPM">npm</label><input type="radio" name="group-W2nSG" id="tab-YTwj9Oq"><label data-title="pnpm" for="tab-YTwj9Oq">pnpm</label><input type="radio" name="group-W2nSG" id="tab-bZHqOe9"><label data-title="yarn" for="tab-bZHqOe9">yarn</label><input type="radio" name="group-W2nSG" id="tab-LoC_TB1"><label data-title="bun" for="tab-LoC_TB1">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div></div></div><p>몇 가지 간단한 질문들이 나타날 것입니다:</p><div class="language- vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">┌</span><span style="--shiki-light:#1b7c83;--shiki-light-font-weight:bold;--shiki-dark:#39c5cf;--shiki-dark-font-weight:bold;"> Welcome to VitePress!</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#28a745;--shiki-dark:#34d058;">◇</span><span style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;"> Where should VitePress initialize the config?</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> ./docs</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#28a745;--shiki-dark:#34d058;">◇</span><span style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;"> Site title:</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> My Awesome Project</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#28a745;--shiki-dark:#34d058;">◇</span><span style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;"> Site description:</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> A VitePress Site</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#959da5;--shiki-dark:#959da5;">│</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#1b7c83;--shiki-dark:#39c5cf;">◆</span><span style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;"> Theme:</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#1b7c83;--shiki-dark:#39c5cf;">│</span><span style="--shiki-light:#28a745;--shiki-dark:#34d058;"> ●</span><span style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;"> Default Theme </span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;">(Out of the box, good-looking docs)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#1b7c83;--shiki-dark:#39c5cf;">│</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> ○</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> Default Theme + Customization</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#1b7c83;--shiki-dark:#39c5cf;">│</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> ○</span><span style="--shiki-light:#24292e80;--shiki-dark:#e1e4e880;"> Custom Theme</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#1b7c83;--shiki-dark:#39c5cf;">└</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">피어 의존성으로서의 Vue</p><p>커스텀을 위해 Vue 컴포넌트나 API를 사용하려는 경우, <code>vue</code>를 명시적으로 의존성으로 설치해야 합니다.</p></div><h2 id="file-structure" tabindex="-1">파일 구조 <a class="header-anchor" href="#file-structure" aria-label="Permalink to "파일 구조 {#file-structure}""></a></h2><p>독립형 VitePress 사이트를 구축하려는 경우, 현재 디렉터리(<code>./</code>)에 사이트를 구축할 수 있습니다. 그러나 기존 프로젝트에서 다른 소스 코드와 함께 VitePress를 설치하는 경우, 프로젝트의 나머지 부분과 분리되도록 중첩된 디렉터리(e.g. <code>./docs</code>)에 사이트를 구축하는 것이 좋습니다.</p><p>VitePress 프로젝트를 <code>./docs</code>에 구축하기로 한 경우, 생성된 파일 구조는 다음과 같아야 합니다:</p><div class="language- vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ docs</span></span>
|
|
|
<span class="line"><span>│ ├─ .vitepress</span></span>
|
|
|
<span class="line"><span>│ │ └─ config.js</span></span>
|
|
|
<span class="line"><span>│ ├─ api-examples.md</span></span>
|
|
|
<span class="line"><span>│ ├─ markdown-examples.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>└─ package.json</span></span></code></pre></div><p><code>docs</code> 디렉터리는 VitePress 사이트의 <strong>프로젝트 루트</strong>로 간주됩니다. <code>.vitepress</code> 디렉터리는 VitePress의 구성 파일, 개발 서버 캐시, 빌드 출력, 선택적 커스텀 테마 코드가 있는 위치입니다.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>기본적으로 VitePress는 개발 서버 캐시를 <code>.vitepress/cache</code>에 저장하고, 프로덕션 빌드 출력을 <code>.vitepress/dist</code>에 저장합니다. Git을 사용하는 경우, 이러한 디렉토리를 <code>.gitignore</code> 파일에 추가해야 합니다. 또는 이러한 위치를 수동으로 <a href="./../reference/site-config#outdir">구성</a>할 수도 있습니다.</p></div><h3 id="the-config-file" tabindex="-1">구성 파일 <a class="header-anchor" href="#the-config-file" aria-label="Permalink to "구성 파일 {#the-config-file}""></a></h3><p>구성 파일(<code>.vitepress/config.js</code>)을 사용하면 사이트의 제목과 설명과 같은 VitePress 사이트의 다양한 측면을 커스터마이즈할 수 있습니다:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/config.js">.vitepress/config.js</span></div><div class="language-js vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 사이트 옵션</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'VitePress'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'그냥 해보는 중.'</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;"> themeConfig: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 테마 옵션</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p>테마의 동작은 <code>themeConfig</code> 옵션을 통해 구성할 수도 있습니다. 모든 구성 옵션에 대한 자세한 내용은 <a href="./../reference/site-config">구성 레퍼런스</a>를 참고하세요.</p><h3 id="source-files" tabindex="-1">소스 파일 <a class="header-anchor" href="#source-files" aria-label="Permalink to "소스 파일 {#source-files}""></a></h3><p><code>.vitepress</code> 디렉토리 외부의 마크다운 파일은 <strong>소스 파일</strong>로 간주됩니다.</p><p>VitePress는 <strong>파일 기반 라우팅</strong>을 사용합니다: 각 <code>.md</code> 파일은 동일한 경로에 해당하는 <code>.html</code> 파일로 컴파일됩니다. 예를 들어, <code>index.md</code>는 <code>index.html</code>로 컴파일되며, 결과적으로 VitePress 사이트의 루트 경로 <code>/</code>에서 방문할 수 있습니다.</p><p>또한 VitePress는 간결한 URL 생성, 경로 재작성, 동적 페이지 생성 기능을 제공합니다. 이러한 내용은 <a href="./routing">라우팅 가이드</a>에서 다룹니다.</p><h2 id="up-and-running" tabindex="-1">실행 및 작동 <a class="header-anchor" href="#up-and-running" aria-label="Permalink to "실행 및 작동 {#up-and-running}""></a></h2><p>설치 과정에서 허용한 경우, 도구는 다음 npm 스크립트를 <code>package.json</code>에 추가했을 것입니다:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="package.json">package.json</span></div><div class="language-json vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">json</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>
|
|
|
<span class="line"><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;"> ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "scripts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "docs:dev"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"vitepress dev docs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "docs:build"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"vitepress build docs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "docs:preview"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"vitepress preview docs"</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;"> ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p><code>docs:dev</code> 스크립트는 즉각적인 핫 업데이트가 가능한 로컬 개발 서버를 시작합니다. 다음 명령어로 실행할 수 있습니다:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-lQZsf" id="tab-dG8w9mf" checked><label data-title="npm" for="tab-dG8w9mf">npm</label><input type="radio" name="group-lQZsf" id="tab-t7VGqU0"><label data-title="pnpm" for="tab-t7VGqU0">pnpm</label><input type="radio" name="group-lQZsf" id="tab-8yRCdLP"><label data-title="yarn" for="tab-8yRCdLP">yarn</label><input type="radio" name="group-lQZsf" id="tab-OgNTiIE"><label data-title="bun" for="tab-OgNTiIE">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs:dev</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs:dev</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs:dev</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs:dev</span></span></code></pre></div></div></div><p>npm 스크립트 대신 VitePress를 직접 호출할 수도 있습니다:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-bBBHp" id="tab-n1pb0Ax" checked><label data-title="npm" for="tab-n1pb0Ax">npm</label><input type="radio" name="group-bBBHp" id="tab-ScBnpzE"><label data-title="pnpm" for="tab-ScBnpzE">pnpm</label><input type="radio" name="group-bBBHp" id="tab-D-ry45z"><label data-title="yarn" for="tab-D-ry45z">yarn</label><input type="radio" name="group-bBBHp" id="tab-mTQ7zAh"><label data-title="bun" for="tab-mTQ7zAh">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div></div></div><p>더 많은 명령줄 사용법은 <a href="./../reference/cli">CLI 레퍼런스</a>에 문서화되어 있습니다.</p><p>개발 서버는 <code>http://localhost:5173</code>에서 실행되어야 합니다. 브라우저에서 URL을 방문하여 새 사이트를 확인하세요!</p><h2 id="what-s-next" tabindex="-1">다음 단계는? <a class="header-anchor" href="#what-s-next" aria-label="Permalink to "다음 단계는? {#what-s-next}""></a></h2><ul><li><p>마크다운과 이 파일로 생성된 HTML이 어떻게 매핑되는지 더 잘 이해하려면 <a href="./routing">라우팅 가이드</a>를 참고하세요.</p></li><li><p>페이지에서 할 수 있는 작업, 예를 들어 마크다운 콘텐츠 작성이나 Vue 컴포넌트 사용에 대해 더 알아보려면 가이드의 "글쓰기" 섹션을 참조하세요. 시작하기 좋은 곳은 <a href="./markdown">마크다운 확장</a>에 대해 배우는 것입니다.</p></li><li><p>기본 문서 테마에서 제공하는 기능을 탐색하려면 <a href="./../reference/default-theme-config">기본 테마 구성 레퍼런스</a>를 확인하세요.</p></li><li><p>사이트의 외관을 더 맞춤화하려면 <a href="./extending-default-theme">기본 테마 확장</a> 또는 <a href="./custom-theme">커스텀 테마 빌드</a>를 탐색하세요.</p></li><li><p>문서 사이트가 형태를 갖추면 <a href="./deploy">배포 가이드</a>를 꼭 읽어보세요.</p></li></ul>`,41)]))}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
