SYSTEM ๋ชจ๋ ์๋ต์ ๋ฐ๋์ ํ๊ตญ์ด๋ก ํด์ฃผ์ธ์.
Astro ํ๋ฐํธ์๋๋ src/์ ์์ผ๋ฉฐ ๋ผ์ฐํธ ์ปดํฌ๋ํธ๋ src/pages/์, ๊ณต์ฉ ๋ ์ด์์์ src/layouts/์, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI๋ src/components/์ ๋ก๋๋ค. MarkdownยทMDX ๊ฐ์ด๋๋ src/content/์ ์ ๋ฆฌํ๊ณ , ์๊ฐ ์์ฐ์ src/assets/, Tailwind ํ์ฅ์ src/styles/์ ๋ฐฐ์นํฉ๋๋ค. ์๊ณ ๋ฆฌ์ฆ๋ณ ์๋ฃ๋ insert-interval/, merge-intervals/ ๊ฐ์ ๋ฃจํธ ํด๋์ ๋ชจ์ผ๊ณ , ํด๋น ๋ฌธ์ ์ฉ ๋ค์ด์ด๊ทธ๋จ์ด๋ ์คํฌ๋ฆฝํธ๋ฅผ ๋์ผ ํด๋์ ์ ์งํ์ธ์. ์ ์ ํ์ผ์ public/์์ ๊ทธ๋๋ก ์๋น์ค๋๋ฉฐ ๋น๋ ์ฐ์ถ๋ฌผ์ dist/๋ก ์์ฑ๋ฉ๋๋ค.
์์
์ npm install๋ก ์์กด์ฑ์ ์ค์นํฉ๋๋ค. ๋ก์ปฌ ๊ฐ๋ฐ์ npm run dev๋ก ์์ํ๋ฉฐ http://localhost:4321 ์์ ํซ ๋ฆฌ๋ก๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ ์ ์ฌ์ดํธ๋ npm run build๋ก ์์ฑ๋๊ณ ์ถฉ๋ถํ Node ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ๋ณดํ๋๋ก ์ค์ ๋์ด ์์ต๋๋ค. ๋ฐฐํฌ ์ ์ถ๋ ฅ๋ฌผ์ ๊ฒ์ํ๋ ค๋ฉด npm run preview๋ฅผ ์คํํ๊ณ , ์ถ๊ฐ ์ง๋จ์ด ํ์ํ๋ฉด npm run astro <command>๋ก Astro CLI ๋๊ตฌ(npm run astro check ๋ฑ)๋ฅผ ํธ์ถํ์ธ์.
prettier์ prettier-plugin-astro๊ฐ ๊ฐ์ ํ๋ ๊ธฐ๋ณธ ํฌ๋งท์ ๋ฐ๋ฅด๋ฉฐ ์ปค๋ฐ ์ TypeScriptยทAstroยทMarkdown์ ํฌ๋งทํฉ๋๋ค. src/components/์์๋ PascalCase ํ์ผ๋ช
(ExampleCard.astro), src/pages/์ ๋ผ์ฐํธ ํด๋๋ ์ผ๋ฐฅ ์ผ์ด์ค๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์คํ์ผ์ Tailwind ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฐ์ ์ ์ฉํ๊ณ , ๋ง์ถค CSS๋ src/styles/์ ๋ชจ์๋๋ค. ๊ณตํต ์์๋ src/consts.ts, ํฌํผ ํจ์๋ src/utils.ts์ ๋ณด๊ดํด ์ค๋ณต์ ์ค์ด์ธ์.
๊ณต์ ์๋ํ ํ
์คํธ ์ค์ํธ๋ ์์ง ์์ผ๋ฏ๋ก ๋ณ๊ฒฝ ์ฌํญ์ ์๋ ๊ฒ์ฆ์ด ํ์์
๋๋ค. ๊ธฐ๋ฅ ์์ ์ npm run dev ์ํ์์ ๊ด๋ จ ํ์ด์ง๋ฅผ ์ง์ ํ์ธํ๊ณ , ๋ฐฐํฌ ์ง์ ์๋ npm run build๊ฐ ์ ์ ์ข
๋ฃ๋๋์ง ํ์ธํ์ธ์. ์ฝํ
์ธ ๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๊ฐํธํ๋ค๋ฉด npm run preview๋ก ์ ์ ๊ฒฐ๊ณผ๋ฅผ ๊ฒ์ํ๊ฑฐ๋ dist/ ๋ด๋ถ ํ์ผ์ ํ์ธํด ๋
ธ์ถ ์ํ๋ฅผ ์ ๊ฒํฉ๋๋ค.
์ปค๋ฐ ๋ฉ์์ง๋ ์งง์ ๋ช
๋ นํ์ผ๋ก ์์ฑํฉ๋๋ค(์: update astro-icon) ๊ทธ๋ฆฌ๊ณ ๊ด๋ จ ๋ณ๊ฒฝ์ ํ๋์ ์ปค๋ฐ์ผ๋ก ๋ฌถ์ต๋๋ค. PR์๋ ์์ฝ, ๋ณ๊ฒฝ ๋๊ธฐ, ์ํฅ ๋ฒ์๋ฅผ ํฌํจํ๊ณ UI๊ฐ ๋ฐ๋๋ฉด ์คํฌ๋ฆฐ์ท์ด๋ ํ์ธ ๊ฐ๋ฅํ URL์ ์ฒจ๋ถํ์ธ์. ์ฐ๊ด ์ด์๊ฐ ์๋ค๋ฉด ๋งํฌํ๊ณ , ๋ฆฌ๋ทฐ ์์ฒญ ์ ์ ๋ฐ๋์ npm run build๊ฐ ํต๊ณผํ๋์ง ํ์ธํด ๋ฐฐํฌ ๊ฐ๋ฅํ ์ํ๋ฅผ ๋ณด์ฅํ์ธ์.
์ ์๊ณ ๋ฆฌ์ฆ ๊ฐ์ด๋๋ ๊ธฐ์กด ํจํด์ฒ๋ผ ๋ณ๋ ๋๋ ํฐ๋ฆฌ(longest-repeating-character-replacement/ ๋ฑ)๋ฅผ ๋ง๋ค๊ณ , ๋ณธ๋ฌธ์ src/content/์ Markdown์ผ๋ก ์ถ๊ฐํฉ๋๋ค. ๊ฒ์ ๋ชฉ๋ก์ด ์๋ ๊ฐฑ์ ๋๋๋ก frontmatter์ ์ ๋ชฉ, ํ๊ทธ, ๊ฒ์ ๋ ์ง๋ฅผ ๋น ์ง์์ด ์ฑ์๋๋ค. ๋ฌธ์ ์ ์ฐ๊ณ๋ ์ด๋ฏธ์ง๋ ๋ณด์กฐ ์คํฌ๋ฆฝํธ๋ ๋์ผ ๋๋ ํฐ๋ฆฌ์ ๋ณด๊ดํด ์ถ์ ์ฑ์ ๋์ด์ธ์.