Browse Source

๐ŸŒ Update translations for ko (add-missing) (#15888)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
pull/15903/head
Sebastiรกn Ramรญrez 21 hours ago
committed by GitHub
parent
commit
2c4f3e3ece
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 133
      docs/ko/docs/tutorial/frontend.md

133
docs/ko/docs/tutorial/frontend.md

@ -0,0 +1,133 @@
# ํ”„๋ก ํŠธ์—”๋“œ { #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()`๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ์—์„œ ์ด๋ฏธ ์ƒ์„ฑ๋œ ํŒŒ์ผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์€ ์‹คํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฐ ์š”์ฒญ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋™์  ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์•„๋‹ˆ๋ผ, ์ •์  ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
Loadingโ€ฆ
Cancel
Save