๋ฐฐ๊ฒฝ
#91 ์์ CI ๋น๋ ์บ์(bun install / Playwright / Vite pre-bundle)๋ฅผ ๋์
ํฉ๋๋ค. ๋ค๋ง node_modules/.vite ์บ์๋ ์์กด์ฑ ์ฌ์ ๋ฒ๋ค ๊ฒฐ๊ณผ๋ง ์ฌ์ฌ์ฉํ ๋ฟ, ์ฝํ
์ธ .md๋ฅผ @mdx-js/rollup์ผ๋ก ์ปดํ์ผํ๋ ๋น์ฉ์ ์บ์ํ์ง ๋ชปํฉ๋๋ค. (remark/rehype ์ฒด์ธ ์ค ํนํ rehypeExpressiveCode ์ฝ๋ ํ์ด๋ผ์ดํ
์ด ๋ฌด๊ฒ์ต๋๋ค.)
์ฝํ
์ธ ๊ฐ ๋์ด๋ ์๋ก ์ด ์ปดํ์ผ ๋น์ฉ์ด ์ ํ์ผ๋ก ์ฆ๊ฐํ๋ฏ๋ก, ์ ๋ฐ๋ ํ์ผ์ ์ฌ์ปดํ์ผ์ ๊ฑด๋๋ฐ๋ ์บ์๋ฅผ ๊ฒํ ํฉ๋๋ค.
mermaid๋ ํ์ฌ strategy: "pre-mermaid"(ํด๋ผ์ด์ธํธ ๋ฐํ์ ๋ ๋)๋ผ ๋น๋ ์บ์ ๋์์ด ์๋๋๋ค.
ํ์ฌ ๋ณํ ํ๋ฆ
- ์ฝํ
์ธ :
src/content/blog/*.md (ํ์ฌ 7๊ฐ)
sync-blog.mts๊ฐ prebuild์์ GitHub Discussions๋ฅผ fetchํด .md๋ฅผ ๋งค๋ฒ ์ฌ์์ฑ
loader.ts์ import.meta.glob์ผ๋ก ์ ๋ถ ๋ก๋ โ Vite๊ฐ ๋น๋ ์ค @mdx-js/rollup์ผ๋ก ์ธ๋ผ์ธ ์ปดํ์ผ (๊ฐ๋ณ ์ฐ์ถ๋ฌผ ํ์ผ ์์ด ๋ฒ๋ค์ ๋
น์๋ฆ)
๊ตฌํ ๋ฐฉ์
@mdx-js/rollup์ ๊ฐ์ธ๋ ๋ํผ Vite ํ๋ฌ๊ทธ์ธ์ผ๋ก ์ปดํ์ผ ๊ฒฐ๊ณผ๋ฅผ ๋์คํฌ์ ์บ์ฑํฉ๋๋ค.
์ฝํ
์ธ ๋ sync-blog์ผ๋ก ๋งค ๋น๋ ์ฌ์์ฑ๋๋ฏ๋ก, ์บ์ ํค๋ CI ์คํ
์ hashFiles๊ฐ ์๋๋ผ ํธ๋์คํผ ํ
์์ ์ค์ ํ์ผ ๋ด์ฉ์ผ๋ก ๊ณ์ฐํฉ๋๋ค. ๊ทธ๋์ผ sync ํ์ด๋ฐ๊ณผ ๋ฌด๊ดํ๊ฒ ์ ํํฉ๋๋ค.
GitHub Actions ์บ์ ์คํ
integration.yml, deploy.yml์ .cache/mdx ๋ณต์/์ ์ฅ ์คํ
์ ์ถ๊ฐํฉ๋๋ค.
- uses: actions/cache@v4
with:
path: .cache/mdx
key: mdx-${{ runner.os }}-${{ hashFiles('bun.lock', 'vite.config.ts', 'src/content/blog/**') }}
restore-keys: mdx-${{ runner.os }}-
๊ฒ์ฆ
์ฐ์ ์์ ๋ฉ๋ชจ
ํ์ฌ ์ฝํ
์ธ 7๊ฐ ์์ค์ด๋ผ ์ปดํ์ผ ๋น์ฉ์ด ๋ฏธ๋ฏธํฉ๋๋ค. ์ฝํ
์ธ ๊ฐ ์ ์๋ฏธํ๊ฒ ๋๊ฑฐ๋ mermaid๋ฅผ ๋น๋ ํ์ ๋ ๋๋ก ์ ํํ๋ ์์ ์ ์ฐฉ์ํ๋ ๊ฒ์ ๊ถ์ฅํ๋ฉฐ, ์ด ์ด์๋ ๊ทธ ํธ๋ฆฌ๊ฑฐ์ฉ ํธ๋ํน์
๋๋ค.
๋ฐฐ๊ฒฝ
#91 ์์ CI ๋น๋ ์บ์(bun install / Playwright / Vite pre-bundle)๋ฅผ ๋์ ํฉ๋๋ค. ๋ค๋ง
node_modules/.vite์บ์๋ ์์กด์ฑ ์ฌ์ ๋ฒ๋ค ๊ฒฐ๊ณผ๋ง ์ฌ์ฌ์ฉํ ๋ฟ, ์ฝํ ์ธ.md๋ฅผ@mdx-js/rollup์ผ๋ก ์ปดํ์ผํ๋ ๋น์ฉ์ ์บ์ํ์ง ๋ชปํฉ๋๋ค. (remark/rehype ์ฒด์ธ ์ค ํนํrehypeExpressiveCode์ฝ๋ ํ์ด๋ผ์ดํ ์ด ๋ฌด๊ฒ์ต๋๋ค.)์ฝํ ์ธ ๊ฐ ๋์ด๋ ์๋ก ์ด ์ปดํ์ผ ๋น์ฉ์ด ์ ํ์ผ๋ก ์ฆ๊ฐํ๋ฏ๋ก, ์ ๋ฐ๋ ํ์ผ์ ์ฌ์ปดํ์ผ์ ๊ฑด๋๋ฐ๋ ์บ์๋ฅผ ๊ฒํ ํฉ๋๋ค.
ํ์ฌ ๋ณํ ํ๋ฆ
src/content/blog/*.md(ํ์ฌ 7๊ฐ)sync-blog.mts๊ฐprebuild์์ GitHub Discussions๋ฅผ fetchํด.md๋ฅผ ๋งค๋ฒ ์ฌ์์ฑloader.ts์import.meta.glob์ผ๋ก ์ ๋ถ ๋ก๋ โ Vite๊ฐ ๋น๋ ์ค@mdx-js/rollup์ผ๋ก ์ธ๋ผ์ธ ์ปดํ์ผ (๊ฐ๋ณ ์ฐ์ถ๋ฌผ ํ์ผ ์์ด ๋ฒ๋ค์ ๋ น์๋ฆ)๊ตฌํ ๋ฐฉ์
@mdx-js/rollup์ ๊ฐ์ธ๋ ๋ํผ Vite ํ๋ฌ๊ทธ์ธ์ผ๋ก ์ปดํ์ผ ๊ฒฐ๊ณผ๋ฅผ ๋์คํฌ์ ์บ์ฑํฉ๋๋ค.transform(code, id)ํ ์์id๊ฐ ์ฝํ ์ธ.md์ด๋ฉดsha256(code + ํ๋ฌ๊ทธ์ธ ๋ฒ์ + ์ต์ )์ ํค๋ก ๊ณ์ฐ.cache/mdx/<hash>.js๊ฐ ์์ผ๋ฉด ์ฌ์ฌ์ฉ, ์์ผ๋ฉด ์ปดํ์ผ ํ ๊ธฐ๋ก (.cache/๋ gitignore)GitHub Actions ์บ์ ์คํ
integration.yml,deploy.yml์.cache/mdx๋ณต์/์ ์ฅ ์คํ ์ ์ถ๊ฐํฉ๋๋ค.๊ฒ์ฆ
์ฐ์ ์์ ๋ฉ๋ชจ
ํ์ฌ ์ฝํ ์ธ 7๊ฐ ์์ค์ด๋ผ ์ปดํ์ผ ๋น์ฉ์ด ๋ฏธ๋ฏธํฉ๋๋ค. ์ฝํ ์ธ ๊ฐ ์ ์๋ฏธํ๊ฒ ๋๊ฑฐ๋ mermaid๋ฅผ ๋น๋ ํ์ ๋ ๋๋ก ์ ํํ๋ ์์ ์ ์ฐฉ์ํ๋ ๊ฒ์ ๊ถ์ฅํ๋ฉฐ, ์ด ์ด์๋ ๊ทธ ํธ๋ฆฌ๊ฑฐ์ฉ ํธ๋ํน์ ๋๋ค.