Browse Source

๐ŸŒ Add Korean translation for `docs/ko/docs/tutorial/frontend.md`

pull/15857/head
Wooseong Choi 4 weeks ago
parent
commit
7e124e788f
  1. 131
      docs/ko/docs/tutorial/frontend.md

131
docs/ko/docs/tutorial/frontend.md

@ -0,0 +1,131 @@
# ํ”„๋ก ํŠธ์—”๋“œ { #frontend }
์ •์  ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ์„ `app.frontend()` (๋˜๋Š” `router.frontend()`)๋กœ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋Š” React + Vite, TanStack Router, Astro, Vue, Svelte, Angular, Solid ๋“ฑ ์ •์  ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋„๊ตฌ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋„๊ตฌ๋“ค์€ ๋ณดํ†ต ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช…๋ น์–ด๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๋‹จ๊ณ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค:
```bash
npm run build
```
์ด ๋‹จ๊ณ„๋Š” ํ”„๋ก ํŠธ์—”๋“œ ํŒŒ์ผ์ด ๋“ค์–ด ์žˆ๋Š” `./dist/` ๊ฐ™์€ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
`app.frontend()`๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋Ÿฌํ•œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์š”๊ตฌํ•˜๋Š” ๊ทœ์น™์— ๋”ฐ๋ผ ํ•ด๋‹น ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
**FastAPI**๋Š” *path operations*๋ฅผ ๋จผ์ € ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ์ผ์น˜ํ•˜๋Š” ์ผ๋ฐ˜ ๊ฒฝ๋กœ๊ฐ€ ์—†์„ ๋•Œ์—๋งŒ ํ”„๋ก ํŠธ์—”๋“œ ํŒŒ์ผ์„ ํ™•์ธํ•˜๋ฏ€๋กœ, 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** *path operation*๋„ ํ•จ๊ป˜ ์ •์˜๋˜์–ด ์žˆ๋‹ค๋ฉด, *path operation*์ด ์šฐ์„ ํ•ฉ๋‹ˆ๋‹ค.
## ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ… { #client-side-routing }
**๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ**(SPA)์„ ํฌํ•จํ•œ ๋งŽ์€ ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ์€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. `/dashboard/settings` ๊ฐ™์€ ๊ฒฝ๋กœ๋Š” ์‹ค์ œ ํŒŒ์ผ์ด ์•„๋‹ ์ˆ˜ ์žˆ์ง€๋งŒ, ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ด๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
๋”ฐ๋ผ์„œ (์•ฑ์„ ํ†ตํ•ด ์ด๋™ํ•˜๋Š” ๋Œ€์‹ ) ํ•ด๋‹น URL์— ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š” ๊ฒฝ์šฐ, ๋ฐฑ์—”๋“œ๋Š” `index.html`์„ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ์„ ์ œ๊ณตํ•ด์•ผ ํ•˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์ด๋ฅผ ์œ„ํ•ด `fallback="index.html"`์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค:
{* ../../docs_src/frontend/tutorial002_py310.py hl[5] *}
**FastAPI**๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด๋น„๊ฒŒ์ด์…˜์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ์š”์ฒญ์— ๋Œ€ํ•ด์„œ๋งŒ ์ด fallback์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. JavaScript, CSS, ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ๋ˆ„๋ฝ๋œ ํŒŒ์ผ๋“ค์€ ์—ฌ์ „ํžˆ `404`๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
/// tip
๊ธฐ๋ณธ์ ์œผ๋กœ `fallback`์€ `fallback="auto"` ๊ฐ’์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ `fallback`์„ ๋ช…์‹œํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.
///
์ด๋Š” React + TanStack Router, 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` ์•„๋ž˜์—์„œ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.
๋‹ค๋ฅธ ๋ผ์šฐํ„ฐ์— ์žˆ๋Š” ๊ฒƒ์„ ํฌํ•จํ•ด, ์•ฑ์— ์ •์˜๋œ ์ผ๋ฐ˜์ ์ธ *path operations*๋Š” ์—ฌ์ „ํžˆ ์šฐ์„ ํ•ฉ๋‹ˆ๋‹ค.
## ์ •์  ๋นŒ๋“œ ์ถœ๋ ฅ ์ „์šฉ { #static-build-output-only }
`app.frontend()`๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ๋กœ ์ด๋ฏธ ์ƒ์„ฑ๋œ ํŒŒ์ผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์€ ์‹คํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ •์  ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์œ„ํ•œ ๊ฒƒ์ด๋ฉฐ, ๊ฐ ์š”์ฒญ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋™์  ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์œ„ํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค.
Loadingโ€ฆ
Cancel
Save