1 changed files with 131 additions and 0 deletions
@ -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โฆ
Reference in new issue