--- /dev/null
+# νλ‘ νΈμλ { #frontend }
+
+`app.frontend()`(λλ `router.frontend()`)λ‘ μ μ νλ‘ νΈμλ μ ν리μΌμ΄μ
μ μ 곡ν μ μμ΅λλ€.
+
+μ΄λ Viteλ₯Ό μ¬μ©νλ React, TanStack Router, Astro, Vue, Svelte, Angular, Solid λ±κ³Ό κ°μ΄ μ μ νμΌμ μμ±νλ νλ‘ νΈμλ λꡬμ μ μ©ν©λλ€.
+
+μ΄λ¬ν λꡬμμλ λ³΄ν΅ λ€μκ³Ό κ°μ λͺ
λ Ήμ΄λ‘ νλ‘ νΈμλλ₯Ό λΉλνλ λ¨κ³κ° μμ΅λλ€:
+
+```bash
+npm run build
+```
+
+κ·Έλ¬λ©΄ νλ‘ νΈμλ νμΌμ΄ λ€μ΄ μλ `./dist/` κ°μ λλ ν°λ¦¬κ° μμ±λ©λλ€.
+
+`app.frontend()`λ₯Ό μ¬μ©νλ©΄ μ΄λ¬ν νλ‘ νΈμλ νλ μμν¬μ νμν κ·μΉμ λ°λΌ ν΄λΉ λλ ν°λ¦¬λ₯Ό μ 곡ν μ μμ΅λλ€.
+
+**FastAPI**λ λ¨Όμ *κ²½λ‘ μ²λ¦¬*λ₯Ό νμΈν©λλ€. νλ‘ νΈμλ νμΌμ μΌλ° λΌμ°νΈμ λ§€μΉλμ§ μλ κ²½μ°μλ§ νμΈλλ―λ‘, APIμλ μν₯μ μ£Όμ§ μμ΅λλ€.
+
+## νλ‘ νΈμλ μ 곡νκΈ° { #serve-a-frontend }
+
+μλ₯Ό λ€μ΄ `npm run build`λ‘ νλ‘ νΈμλλ₯Ό λΉλν ν, μμ±λ νμΌμ `dist` κ°μ λλ ν°λ¦¬μ λ£μ΅λλ€.
+
+νλ‘μ νΈ κ΅¬μ‘°λ λ€μκ³Ό κ°μ μ μμ΅λλ€:
+
+```text
+.
+βββ pyproject.toml
+βββ app
+β βββ __init__.py
+β βββ main.py
+βββ dist
+ βββ index.html
+ βββ assets
+ βββ app.js
+```
+
+κ·Έλ° λ€μ `app.frontend()`λ‘ μ 곡ν©λλ€:
+
+{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *}
+
+μ΄λ κ² νλ©΄ `/assets/app.js`μ λν μμ²μ΄ `dist/assets/app.js`λ₯Ό μ 곡ν μ μμ΅λλ€.
+
+**FastAPI** *κ²½λ‘ μ²λ¦¬*λ μλ€λ©΄, *κ²½λ‘ μ²λ¦¬*κ° μ°μ ν©λλ€.
+
+## ν΄λΌμ΄μΈνΈ μ¬μ΄λ λΌμ°ν
{ #client-side-routing }
+
+**single-page apps**(SPAs)λ₯Ό ν¬ν¨ν λ§μ νλ‘ νΈμλ μ ν리μΌμ΄μ
μ ν΄λΌμ΄μΈνΈ μ¬μ΄λ λΌμ°ν
μ μ¬μ©ν©λλ€. `/dashboard/settings` κ°μ κ²½λ‘λ μ€μ νμΌμ΄ μλ μ μμ§λ§, νλ μμν¬κ° μ΄λ₯Ό μ²λ¦¬ν©λλ€.
+
+λ°λΌμ ν΄λΉ URLμ μ§μ μ κ·Όνλ κ²½μ°(μ ν리μΌμ΄μ
μμμ νμνλ λμ ), λ°±μλλ `index.html`μμ νλ‘ νΈμλ μ ν리μΌμ΄μ
μ μ 곡ν΄μΌ ν©λλ€. κ·Έλ¬λ©΄ νλ‘ νΈμλ νλ μμν¬κ° ν΄λΌμ΄μΈνΈ μ¬μ΄λ λΌμ°ν
μ μ²λ¦¬ν μ μμ΅λλ€.
+
+μ΄λ₯Ό μν΄ `fallback="index.html"`μ μ¬μ©ν©λλ€:
+
+{* ../../docs_src/frontend/tutorial002_py310.py hl[5] *}
+
+**FastAPI**λ λΈλΌμ°μ νμμ²λΌ 보μ΄λ `GET` λ° `HEAD` μμ²μλ§ μ΄ fallbackμ μ¬μ©ν©λλ€. JavaScript, CSS, μ΄λ―Έμ§μ²λΌ λλ½λ νμΌμ μ¬μ ν `404`λ₯Ό λ°νν©λλ€.
+
+`POST`λ `PUT` κ°μ λ€λ₯Έ λ©μλμ μμ²μ΄ νλ‘ νΈμλ fallbackμλ§ λ§€μΉλλ κ²½λ‘λ‘ λ€μ΄μλ `404`λ₯Ό λ°νν©λλ€. μΌλ° **FastAPI** *κ²½λ‘ μ²λ¦¬*λ μ¬μ ν νλ‘ νΈμλ λΌμ°νΈλ³΄λ€ λμ μ°μ μμλ₯Ό κ°μ§λλ€.
+
+/// tip | ν
+
+κΈ°λ³Έμ μΌλ‘ `fallback`μ `fallback="auto"` κ°μ κ°μ§λλ€. λλΆλΆμ κ²½μ° `fallback`μ μ§μ ν νμκ° μμ΅λλ€. μμΈν λ΄μ©μ μλλ₯Ό μ½μ΄λ³΄μΈμ.
+
+///
+
+μ΄λ ν΄λΌμ΄μΈνΈ μ¬μ΄λ λΌμ°ν
μ μ¬μ©νλ λ§μ νλ‘ νΈμλ μ ν리μΌμ΄μ
μμ μνλ λμμ
λλ€. μλ₯Ό λ€μ΄ TanStack Routerλ₯Ό μ¬μ©νλ React, Vue, Angular, SvelteKit, Solid λ±μ΄ μμ΅λλ€.
+
+## μ¬μ©μ μ μ 404 νμ΄μ§ { #custom-404-page }
+
+λλ½λ νλ‘ νΈμλ κ²½λ‘μ λν΄ μ μ `404.html` νμ΄μ§λ₯Ό μ 곡ν μλ μμ΅λλ€:
+
+{* ../../docs_src/frontend/tutorial003_py310.py hl[5] *}
+
+μ΄ μλ΅μ `404` μν μ½λλ₯Ό μ μ§ν©λλ€.
+
+μ΄ κ²½μ° **FastAPI**λ λλ½λ νλ‘ νΈμλ κ²½λ‘μ λν΄ `index.html`μ μ 곡νμ§ μμ΅λλ€. λμ `404.html` νμΌμ λ°νν©λλ€.
+
+/// tip | ν
+
+κΈ°λ³Έμ μΌλ‘ `fallback`μ `fallback="auto"` κ°μ κ°μ§λλ€. μ΄λ₯Ό μ¬μ©νλ©΄ `404.html` νμΌμ΄ λ°κ²¬λ κ²½μ° μλμΌλ‘ fallbackμΌλ‘ μ¬μ©λ©λλ€.
+
+λ°λΌμ μΌλ°μ μΌλ‘ `fallback` μΈμλ₯Ό μλ΅ν μ μμ΅λλ€.
+
+///
+
+μ΄λ Astroμ²λΌ κ° νμ΄μ§μ λν μ μ HTML νμΌμ μμ±νλ νλ‘ νΈμλ λꡬμ μ μ©ν©λλ€.
+
+## Fallback μλ μ€μ { #fallback-auto }
+
+κΈ°λ³Έμ μΌλ‘ `app.frontend()`λ `fallback="auto"`λ₯Ό μ¬μ©ν©λλ€.
+
+νλ‘ νΈμλ λλ ν°λ¦¬μ `404.html` νμΌμ΄ μμΌλ©΄, λλ½λ νλ‘ νΈμλ κ²½λ‘λ μν μ½λ `404`μ ν¨κ» ν΄λΉ νμΌμ μ 곡ν©λλ€.
+
+κ·Έλ μ§ μκ³ `index.html` νμΌμ΄ μμΌλ©΄, λλ½λ λΈλΌμ°μ νμ κ²½λ‘λ `index.html`μ μ 곡ν©λλ€. μ΄λ ν΄λΌμ΄μΈνΈ μ¬μ΄λ λΌμ°ν
μ μ¬μ©νλ λ§μ νλ‘ νΈμλ μ ν리μΌμ΄μ
μ΄ κΈ°λνλ λμμ
λλ€.
+
+λ°λΌμ λλΆλΆμ κ²½μ° `fallback` μΈμλ₯Ό μ§μ νμ§ μκ³ `app.frontend("/", directory="dist")`λ₯Ό μ¬μ©ν μ μμ΅λλ€.
+
+{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *}
+
+## Fallback λΉνμ±ν { #disable-fallback }
+
+λλ½λ νλ‘ νΈμλ κ²½λ‘μ λν΄ fallback νμΌμ μ 곡νκ³ μΆμ§ μλ€λ©΄ `fallback=None`μ μ¬μ©ν©λλ€:
+
+{* ../../docs_src/frontend/tutorial005_py310.py hl[5] *}
+
+κ·Έλ¬λ©΄ λλ½λ νλ‘ νΈμλ κ²½λ‘λ μΌλ° `404`λ₯Ό λ°νν©λλ€.
+
+## λλ ν°λ¦¬ νμΈνκΈ° { #check-directory }
+
+κΈ°λ³Έμ μΌλ‘ `app.frontend()`λ μ ν리μΌμ΄μ
μ΄ μμ±λ λ λλ ν°λ¦¬κ° μ‘΄μ¬νλμ§ νμΈν©λλ€.
+
+μ΄λ μ€μ μ€λ₯λ₯Ό μΌμ° λ°κ²¬νλ λ° λμμ΄ λ©λλ€. μλ₯Ό λ€μ΄ νλ‘ νΈμλ λΉλ μΆλ ₯ λλ ν°λ¦¬κ° μλ€λ©΄ **FastAPI**λ μμ μ μ€λ₯λ₯Ό λ°μμν΅λλ€.
+
+νλ‘ νΈμλ νμΌμ΄ λμ€μ μμ±λλ€λ©΄, μλ₯Ό λ€μ΄ μ ν리μΌμ΄μ
κ°μ²΄κ° μμ±λ ν λ³λμ λΉλ λ¨κ³μμ μμ±λλ€λ©΄, `check_dir=False`λ₯Ό μ€μ ν©λλ€:
+
+{* ../../docs_src/frontend/tutorial006_py310.py hl[5] *}
+
+`check_dir=False`λ₯Ό μ¬μ©νλ©΄ **FastAPI**λ μ ν리μΌμ΄μ
μ΄ μμ±λ λ λλ ν°λ¦¬λ₯Ό νμΈνμ§ μμ΅λλ€. μμ²μ΄ μ²λ¦¬λ λ μ€μ λ λλ ν°λ¦¬κ° μ¬μ ν μλ€λ©΄, κ·Έλ **FastAPI**κ° μ€λ₯λ₯Ό λ°μμν΅λλ€.
+
+## `APIRouter`μ ν¨κ» μ¬μ©νκΈ° { #use-it-with-apirouter }
+
+νλ‘ νΈμλ νμΌμ `APIRouter`μ μΆκ°νκ³ prefixμ ν¨κ» ν¬ν¨ν μλ μμ΅λλ€:
+
+{* ../../docs_src/frontend/tutorial004_py310.py hl[6,7] *}
+
+μ΄ μμ μμλ νλ‘ νΈμλ κ²½λ‘κ° `/app` μλμμ μ 곡λ©λλ€.
+
+λ€λ₯Έ λΌμ°ν°μ μλ κ²μ ν¬ν¨νμ¬, μ ν리μΌμ΄μ
μ λͺ¨λ μΌλ° *κ²½λ‘ μ²λ¦¬*κ° μ¬μ ν μ°μ ν©λλ€.
+
+## μ μ λΉλ μΆλ ₯λ§ μ¬μ©νκΈ° { #static-build-output-only }
+
+`app.frontend()`λ νλ‘ νΈμλ λΉλμμ μ΄λ―Έ μμ±λ νμΌμ μ 곡ν©λλ€.
+
+μλ² μ¬μ΄λ λ λλ§μ μ€ννμ§ μμ΅λλ€. κ° μμ²λ§λ€ μλ²μμ λμ λ λλ§μ΄ νμν νλ μμν¬κ° μλλΌ, μ μ νμΌμ μμ±νλ νλ‘ νΈμλ νλ μμν¬λ₯Ό μν κ²μ
λλ€.