Skip to content

juneyr.dev

jekyll to Gatsby ๋ธ”๋กœ๊ทธ๐Ÿ‘ฉโ€๐Ÿ”ง

โ€” gatsby, web โ€” 5 min read

์ด์ „์˜ tech ๋ธ”๋กœ๊ทธ๋Š” github pages ๋ฅผ ์ด์šฉํ•˜์—ฌ, jekyll ๊ธฐ๋ฐ˜์˜ ์ •์  ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋˜์–ด ์žˆ์—ˆ๋‹ค. ์ด๋Ÿฐ ๋ฐฉ์‹์€ ๊ฐ„๋‹จํ•˜๊ณ  ์‰ฝ๊ธด ํ•˜์ง€๋งŒ, jekyll ๋ฌธ๋ฒ•๊ณผ ruby ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ์ด์ƒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๋Š” ๋ฐ ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค. ์—ฌ๋Ÿฌ๋ชจ๋กœ ๊ฐˆ์ฆ์„ ๋Š๋ผ๋˜ ์ค‘, outsider๋‹˜ ํšŒ๊ณ ์—์„œ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ gatsby๋ผ๋Š” ๊ธ€์„ ๋งŒ๋‚˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ตœ๊ทผ์— ์ด๋ฏธ netlify์˜ ๋ฉ‹์ง์— ๋งค๋ฃŒ๋˜์—ˆ๊ธฐ์— ์ด ์กฐํ•ฉ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์–ด์กŒ๋‹ค.

Gatsby?

React component ๊ตฌ์„ฑ์œผ๋กœ ๋ทฐ๋ฅผ ๋งŒ๋“ค๊ณ , (๊ธฐ๋ณธ์ ์œผ๋กœ) GraphQL ์„ ํ†ตํ•ด ์ •์  ์ปจํ…์ธ ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ์‹์˜ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ์ด๋‹ค. ๋ฐ์ดํ„ฐ์†Œ์Šค๋Š” ์ผ๋ฐ˜์ ์ธ ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ์ผ ์ˆ˜๋„, ์›Œ๋“œํ”„๋ ˆ์Šค ๊ฐ™์€ CMS ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ๋งŽ์•„์„œ ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ์žฅ์ .

GraphQL ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ณ  ๊ฐ€์ ธ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” SQL๊ณผ๋Š” ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์งˆ์˜๋ฅผ ๋˜์ง„๋‹ค. ๋งˆ์น˜ ๊ทธ๋ƒฅ json ํ˜•ํƒœ์ฒ˜๋Ÿผ. ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๊ณ , ๊ทธ ์•ˆ์˜ ์–ด๋–ค ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ์ง€ ๋ช…์‹œํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ๐Ÿ™‚

gatsby๋Š” ๋นŒ๋“œ ์‹œ์— GraphQL ์„ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ , ์‚ฌ์šฉ๋œ ์ฟผ๋ฆฌ๋Š” ์ง€์›Œ์ค€๋‹ค. ์ด ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด์„œ React component๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•œ๋‹ค. SPA ์˜ ๋ฐฉ์‹์„ ์ฐจ์šฉํ•œ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋ผ๋‹ˆ!

๊ทธ๋Ÿฐ๋ฐ ๋ญ๊ฐ€ ๋” ํ•„์š”ํ•ด์š”?

๊ธฐ์กด์˜ ๋ธ”๋กœ๊ทธ๋„ ๋งŽ์ด ๋ถ€์กฑํ•˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ, ๋‹ค์Œ ์ด์Šˆ๊ฐ€ ์žˆ์—ˆ๋‹ค.

  • ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ๊ธ€์„ ๋ณด๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค.
  • ํ™ˆ์ด ๋ฐ”๋กœ ๊ธ€ ๋ชฉ๋ก์ด์–ด์„œ ์กฐ๊ธˆ ๋‹จ์กฐ๋กญ๋‹ค.

์ด ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•˜๋ฉด์„œ๋„ ๊ธฐ์กด ๋ธ”๋กœ๊ทธ์˜ ๊ฐ„๊ฒฐํ•จ์€ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ๊ฐ€๋Š” ์Šคํƒ€ํ„ฐ๋ฅผ ์ฐพ์•„๋‚˜์„ฐ๋‹ค. ์Šคํƒ€ํ„ฐ ๋ชฉ๋ก์€๊ณต์‹ ํ™ˆํŽ˜์ด์ง€ ์— ์ž˜ ์ •๋ฆฌ ๋˜์–ด์žˆ๋‹ค. =)

๊ทธ ๊ฒฐ๊ณผ, ๋ฏธ๋‹ˆ๋ฉ€ ๋ธ”๋กœ๊ทธ ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๋ฐ๋ชจ๋Š” https://minimal-blog.lekoarts.de/ ์—์„œ. gatsby ์Šคํƒ€ํ„ฐ๋Š” ๋งŽ์ด๋“ค ๋‹คํฌ๋ชจ๋“œ๋ฅผ ์ง€์›ํ•˜๋˜๋ฐ, ์ด ํ…Œ๋งˆ ์—ญ์‹œ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค. ๋”ฑ ํ•„์š”ํ•œ ๋ ˆ์ด์•„์›ƒ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š” ๊ฒƒ์ด ๋งˆ์Œ์— ๋“ค์—ˆ๋‹ค. ์—…๋ฐ์ดํŠธ๊ฐ€ ์ตœ๊ทผ๊นŒ์ง€ ๊ณ„์†๋œ๋‹ค๋Š” ์ ๋„ ํ•œ๋ชซํ–ˆ๋‹ค.

Gatsby CLI ์„ค์น˜ && ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋ฐ”๋กœ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ

OS X ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฏ€๋กœ ๋”์šฑ ์†์‰ฝ๊ฒŒ ๋ธ”๋กœ๊ทธ๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ๋‹ค.

Quick Start๋ฅผ ๋ณด๊ณ  ๋ฐ”๋กœ CLI ๋ฅผ ์„ค์น˜ํ•œ๋‹ค. https://www.gatsbyjs.org/docs/quick-start/

์Šคํƒ€ํ„ฐ๋กœ ๋ฐ”๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๊ฑด ๋” ์‰ฝ๋‹ค.

์ด๋ ‡๊ฒŒํ•˜๋ฉด minimal-blog ๋ผ๋Š” ์ด๋ฆ„์˜ ํด๋”๊ฐ€ ๋งŒ๋“ค์–ด์ง€๊ณ , ํ•ด๋‹น ๋ฃจํŠธ๋กœ ์ด๋™ํ•ด์„œ gastsby develop ์„ ์ž…๋ ฅํ•˜๋ฉด ๋ฐ”๋กœ ๋กœ์ปฌ ํ˜ธ์ŠคํŠธ์— dev ํ™˜๊ฒฝ์ด ๋งˆ๋ จ๋œ๋‹ค.

img/scrn_1.png

img/scrn_3.png

์ด๋Ÿฌ๋ฉด ๋ฐ”๋กœ ๊น”๋”ํ•œ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค!

๋์ธ ์ค„ ์•Œ์•˜๋‹ˆ? ๐Ÿ‘ฝ ํ—˜๋‚œํ•œ ์ปค์Šคํ…€์˜ ๊ธธ

์Šคํƒ€ํ„ฐ๋กœ ์‹œ์ž‘ํ•˜๋ฉด, ๋…ธ๋“œ ๋ชจ๋“ˆ๋กœ ์Šคํƒ€ํ„ฐ๊ฐ€ ๋“ค์–ด๊ฐ„ ์ƒํƒœ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง์ ‘ ํŽธ์ง‘ํ•˜๋Š” ๊ฒƒ์ด ์–ด๋ ต๋‹ค. ๊ทธ๋Ÿผ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•˜๋‚˜? gatsby์—์„œ๋Š” ์ปค์Šคํ…€ ํ˜น์€ ์˜ค๋ฒ„๋ผ์ด๋”ฉํ•˜๋Š” ํ–‰์œ„๋ฅผ shadowing ์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š”๋ฐ, ์นœ์ ˆํ•˜๊ฒŒ๋„ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•œ ์Šคํƒ€ํ„ฐ์— ์–ด๋–ป๊ฒŒ ์‰๋„์ž‰์„ ํ•˜๋Š”์ง€ ์„ค๋ช…๋˜์–ด์žˆ๋‹ค. gastby์—์„œ์˜ ์‰๋„์ž‰์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด https://www.gatsbyjs.org/docs/themes/shadowing/ ๋ฅผ ์ฐธ๊ณ ํ•˜์ž.

์—ฌ๊ธฐ์„œ๋Š” ์ด๋ ‡๊ฒŒ ๋งํ•œ๋‹ค.

Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-minimal-blog/ to shadow/override files.

src ํด๋” ํ•˜์œ„์— @lekoarts/gatsby-theme-minimal-blog ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ  ์‰๋„์ž‰ํ•˜๊ณ  ์‹ถ์€ ํŒŒ์ผ์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค. ๋ฌผ๋ก  ํด๋”๋ช…์€ ์œ„์—์„œ ๋งํ•œ ์Šคํƒ€ํ„ฐurl ์ด๋ฏ€๋กœ, ๋‹ค๋ฅธ ํ…Œ๋งˆ๋ฅผ ๋ฐ›์•˜๋‹ค๋ฉด ํ•ด๋‹นํ•˜๋Š” ์ด๋ฆ„์œผ๋กœ ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค. ์‰๋„์ž‰์„ ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ, src/@lekoarts/gatsby-theme-minimal-blog/ ๋ฅผ ๋งŒ๋“ ๋‹ค.

์ด๋ ‡๊ฒŒ ๊ตฌ์„ฑํ•œ ํ›„, ์Šคํƒ€ํ„ฐ ๋ ˆํฌ ์— ๋“ค์–ด๊ฐ€๋ณด๋ฉด ๊ตฌ์„ฑ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ•ด๋‹น ํด๋” ํ•˜์œ„์˜ ํŒŒ์ผ๋“ค์„ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•˜์ž. ์ด์ œ ์ด ํŒŒ์ผ๋“ค์„ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ๋ธ”๋กœ๊ทธ์— ์ ์šฉ๋œ๋‹ค.

์ฝ”๋“œ์—๋””ํ„ฐ๊ฐ€ ์•ˆ์˜ˆ๋ป์š”

๊ฐ€์žฅ ๋จผ์ € components ์—์„œ ์†๋Œ„ ๊ฒƒ์€ ์ฝ”๋“œ์—๋””ํ„ฐ์ธ code.tsx ์ด๋‹ค. prism ์ด๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๊ณ  ์žˆ๊ณ , ๋ช‡๊ฐ€์ง€ ํ…Œ๋งˆ๊ฐ€ ์ œ๊ณต๋˜๋ฏ€๋กœ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” ํ…Œ๋งˆ nightOwl์ด ๋งˆ์Œ์— ์•ˆ๋“ ๋‹ค๋ฉด ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.

img/scrn_6.png

์—ฌ๋Ÿฌ๊ฐ€์ง€๋ฅผ ํ•ด๋ณธ ๊ฒฐ๊ณผ, ๋‹ค์‹œ nightOwl๋กœ ๋Œ์•„์™”๋‹ค.

img/scrn.png

๊ทธ ๋‹ค์Œ์€ ์ฝ”๋“œ ์—๋””ํ„ฐ์˜ ํฐํŠธ๋ฅผ ์กฐ์ •ํ•ด์ค€๋‹ค. ์ฐ์–ด๋ณด๋‹ˆ ํ˜„์žฌ ์ฝ”๋“œ์—๋””ํ„ฐ ํฐํŠธ๋Š” monospace ์ด๊ณ , ๋„ˆ๋ฌด ์ž‘๋‹ค. ์ด ๋ถ€๋ถ„์€ src/styles ํ•˜์œ„์— code.ts ๋ฅผ ์‰๋„์ž‰ํ•ด์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

live-editor์™€ live-preview ํƒœ๊ทธ์— fontFamily๋ฅผ ์ง€์ •ํ•ด์ค€๋‹ค. menlo์™€ monaco, ๊ทธ๊ฒƒ๋„ ์—†์œผ๋ฉด monospace๊ฐ€ ์ง€์ •๋œ๋‹ค. gatsby-highlight ํƒœ๊ทธ์—๋Š” ํฐํŠธ์‚ฌ์ด์ฆˆ๋ฅผ ์กฐ๊ธˆ ๋Š˜๋ ค์ฃผ์—ˆ๋‹ค.

๋ฉ”์ธ ์ƒ‰ ๋ณ€๊ฒฝํ•˜๊ธฐ

์–ด ๊ทธ๋Ÿฐ๋ฐ... ๋ฉ”์ธ์ƒ‰์€ ์–ด๋””์„œ ๋ฐ”๊พธ์ง€..? ๐Ÿค” components ์—๋Š” ์ƒ‰์ด primary ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ๋งŒ ์จ์ ธ, ์ง์ ‘์ ์œผ๋กœ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์–ด์žˆ๋‹ค.

์•Œ๊ณ  ๋ณด๋‹ˆ, ํ•ด๋‹น ์Šคํƒ€ํ„ฐ๊ฐ€ gatsby-plugin-theme-ui ์ฆ‰ theme ui ์˜ gatsby ๋ฒ„์ „์— ์˜์กด์„ฑ์ด ์žˆ์–ด์„œ ์ด ๋ถ€๋ถ„ ์—ญ์‹œ ์‰๋„์ž‰์„ ํ•ด์ฃผ์–ด์•ผํ•œ๋‹ค. ์œ„์—์„œ ์ž˜ ๋ณต์‚ฌํ–ˆ๋‹ค๋ฉด src/gatsby-plugin-theme-ui ํด๋”๋„ ํฌํ•จ๋˜์–ด์žˆ์„ ๊ฒƒ์ด๋‹ค. ์ˆ˜์ •ํ•  ๋ถ€๋ถ„์€ index.js ๋‚ด๋ถ€๋‹ค.

๋ผ์ดํŠธ๋ชจ๋“œ์˜ ์ƒ‰ ์„ค์ •์ด ๊ธฐ๋ณธ, ๋‹คํฌ๋ชจ๋“œ๋Š” ์•„๋ž˜์— ๋”ฐ๋กœ ์ ํ˜€์žˆ๋‹ค. primary ๋ฅผ tailwind ํ…Œ๋งˆ์˜ purple์—์„œ 2020 ํŒฌํ†ค ์ปฌ๋Ÿฌ์ค‘ ํ•˜๋‚˜์ธ ์ƒˆํ”„๋ก ์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ๋‹ค. #ffaf12 ์žฅ๊ณ ๊ฑธ์Šค์™€ ๋น„์Šทํ•œ ์ปฌ๋Ÿฌ!

img/scrn_5.png

img/scrn_9.png

๊ธ€ ์˜ฎ๊ธฐ๊ธฐ && ์ด๋ฏธ์ง€ ์˜ฎ๊ธฐ๊ธฐ

mdx ํฌ๋งท

๊ธฐ์กด jekyll ๋ธ”๋กœ๊ทธ๋Š” ๋งˆํฌ๋‹ค์šด ๊ธ€์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ–ˆ์œผ๋ฏ€๋กœ, ์ˆ˜์›”ํ•˜๊ฒŒ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ์Šคํƒ€ํ„ฐ์—๋Š” .md๊ฐ€ ์•„๋‹ˆ๋ผ .mdx ํฌ๋งท์ด ์ง€์ •๋˜์–ด์žˆ๋‹ค. mdx๋Š” ๋งˆํฌ๋‹ค์šดํŒŒ์ผ์—์„œ JSX๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํฌ๋งท์ด๋‹ค. ๋งˆํฌ๋‹ค์šด์ž„์—๋„ JSX ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๊ณ  ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ์ž์„ธํ•œ ๊ฒƒ์€ ๋‹ค์Œ ๋งํฌ๋ฅผ ์ฐธ์กฐํ•˜์ž. https://mdxjs.com/

์ฆ‰ ๊ธฐ์กด์˜ ๋งˆํฌ๋‹ค์šด ๋ฌธ์„œ๋Š” ํฌ๋งท์„ ๋ฐ”๊ฟ”์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ๊ฑฐ์˜ ์™„๋ฒฝํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค. ๋‹ค๋งŒ ์ด ์Šคํƒ€ํ„ฐ์—์„œ๋Š” ํด๋” ์•„๋ž˜ index.mdx ๋ผ๋Š” ํ˜•ํƒœ๋กœ ๋“ค์–ด๊ฐ€์•ผํ•˜๊ณ , frontmatter๊ฐ€ ๊ธฐ์กด๊ฒƒ๊ณผ ๋‹ค๋ฅด๋ฏ€๋กœ ์ด๋ฅผ ์˜ฎ๊ฒจ์ฃผ๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.

์ „์ฒด๋ฅผ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์˜ฎ๊ฒจ์ฃผ์„ธ์š”

ํŒŒ์ผ์„ ํด๋”/ํŒŒ์ผ ํ˜•์‹์œผ๋กœ ๋ฐ”๊พธ๊ธฐ ์œ„ํ•ด ๊ฐ„๋‹จํ•œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์งฐ๋‹ค.

์ด๋ ‡๊ฒŒ ์˜ฎ๊ธฐ๊ณ  ๋ณด๋‹ˆ, ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ์ฒซ๋ฒˆ์งธ๋Š” frontmatter์— layout: post ๊ฐ€ ๋“ค์–ด์žˆ์œผ๋ฉด ์ •์ƒ์ธ์‹์„ ๋ชปํ•˜๋Š” ํ˜„์ƒ. ์ด ๋ถ€๋ถ„์€ ํ•ด๋‹น ๊ธ€์ž๋ฅผ ๋นˆ ์บ๋ฆญํ„ฐ๋กœ ๋Œ€์ฒดํ•ด์ฃผ๋ฉด ํ•ด๊ฒฐ๋˜๋Š” ๋ฌธ์ œ. ๋‘๋ฒˆ์งธ๋Š” slug ๊ฐ€ ์ž๋™์œผ๋กœ ๊ธ€ ํƒ€์ดํ‹€๋กœ ์ •ํ•ด์ง€๋Š” ๋ฌธ์ œ์˜€๋‹ค. ๊ธฐ์กด์˜ ๋งํฌ๋ฅผ ๊ผญ ์‚ด๋ฆฌ๊ณ  ์‹ถ์—ˆ๊ธฐ์—, ์ด ๋ถ€๋ถ„์€ ์ˆ˜์ •์„ ํ•ด์•ผํ–ˆ๋‹ค. ๊ธฐ์กด์—๋Š” ๋‚ ์งœ/๊ธ€์ œ๋ชฉ ์œผ๋กœ url ์ด ์ƒ๊ฒผ๋Š”๋ฐ, ์ƒˆ๋กœ์šด ํฌ๋งท์—์„œ๋Š” ๊ธ€์ œ๋ชฉ ์œผ๋กœ slug๊ฐ€ ์ •ํ•ด์กŒ๋‹ค.

์Šคํƒ€ํ„ฐ์—์„œ ์ปค์Šคํ…€์ด ๋ถˆ๊ฐ€๋Šฅํ•ด์„œ, ์ด์Šˆ๋ฅผ ์˜ฌ๋ ธ๋”๋‹ˆ 9์‹œ๊ฐ„๋งŒ์— ์ˆ˜์ •ํ•ด์„œ ๋ฒ„์ „์„ ์˜ฌ๋ ค์คฌ๋‹ค. ๋ฉ”์ธํ…Œ์ด๋„ˆ์—๊ฒŒ ๊ผญ ๋ง์„ ํ•ด๋ณด๋„๋กํ•˜์ž! ๐Ÿ‘€ ๊ทธ ๊ฒฐ๊ณผ frontmatter์— slug๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด url์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์œ„ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์Šคํฌ๋ฆฝํŠธ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

ํŒŒ์ด์ฌ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋จผ์ € ๋Œ๋ฆฌ๊ณ  ์œ„ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋Œ๋ฆฌ๋ฉด ๋ชจ๋“  ๊ธ€์ด ํ›Œ๋ฅญํ•˜๊ฒŒ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜๋œ๋‹ค.

๋‚ ์งœ ํ˜•์‹์ด ์™œ์ด๋ž˜์š”? && excerpt(๋ฐœ์ทŒ) ๋ฅผ ๋ณด๊ณ  ์‹ถ์–ด์š”

์ด์ œ ๊ฑฐ์˜ ๋‹ค ์ •๋ฆฌ๋˜์—ˆ๊ฒ ์ง€? ๋ผ๋Š” ๋‚ด ๋ˆˆ์— ๋ณด์ธ ๋‘ ๊ฐ€์ง€. ๋‚ ์งœ ํ˜•์‹์ด ์™œ ์œ ๋Ÿฝ์‹์ด๊ณ .. ์™œ ๊ธ€ ๋ณธ๋ฌธ์ด ์กฐ๊ธˆ์ด๋ผ๋„ ์•ˆ๋ณด์ด์ง€?

img/scrn_91.png

ํ•œ๊ตญ์–ด๋กœ ์“ฐ์—ฌ์ง„ ํ•œ๊ธ€ ๋ธ”๋กœ๊ทธ ์ธ์ง€๋ผ, ๋‹น์—ฐํžˆ YYYY.MM.DD ๊ฐ€ ํŽธํ•œ๋ฐ ์—ฌ๊ธฐ์„œ๋Š” DD.MM.YYYY ๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋…์ž(๋‚˜)์˜ ๊ธฐ์–ต์„ ์‚ด๋ ค์ค„ ๋ฐœ์ทŒ๋ฌธ์„ ํ•œ๋ฒˆ์— ๋ณผ ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” GraphQL ์ด ๊ฐ€์ ธ์˜จ๋Œ€๋กœ ๋ฟŒ๋ฆฌ๊ณ  ์žˆ์„ํ…Œ๋‹ˆ, ์ฟผ๋ฆฌ๋ฌธ์—์„œ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ–ˆ๋‹ค.

์•„๋‹ˆ๋‚˜ ๋‹ค๋ฅผ๊นŒ, templates ํด๋” ํ•˜์œ„์— ์žˆ๋Š” blog-query.tsx ํ•ญ๋ชฉ์„ ์‚ดํŽด๋ณด๋‹ˆ ์ฟผ๋ฆฌ๊ฐ€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋˜์–ด์žˆ์—ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ํ™”๋ฉด์—์„œ๋Š” slug, title, date, tags ์ •๋ณด๋งŒ fetchํ•˜๊ณ , ๊ทธ ๊ฐ’์„ ๋ฆฌ์ŠคํŒ… ์ปดํฌ๋„ŒํŠธ - ๋ธ”๋กœ๊ทธ ๋ฆฌ์ŠคํŒ… ์ปดํฌ๋„ŒํŠธ์— ๊ณ„์† ๋„˜๊ฒจ์ฃผ๋ฉด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋‚ ์งœ ํฌ๋งท๋„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์–ด, ์ด๋ฏธ ์‰๋„์ž‰ ๋˜์–ด์žˆ๋Š” ์ด ์ฟผ๋ฆฌ๋ฅผ ์ˆ˜์ •ํ•˜๋ฉด ๋  ์ค„ ์•Œ์•˜์œผ๋‚˜..!

์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค.

shadowing GraphQL ์„ ํ‚ค์›Œ๋“œ๋กœ ๋ถ€๋žด๋ถ€๋žด ์Šคํƒ€ํ„ฐ์™€ gastby ํ”„๋กœ์ ํŠธ์— ๊ฒ€์ƒ‰ํ•ด๋ณด์•˜๋‹ค. ์ž‘๋…„ 10์›”๊นŒ์ง€๋งŒ ํ•ด๋„ gastby์—์„œ ์ง€์›๋˜์ง€ ์•Š์•˜๊ณ , ์ž‘๋…„ 11์›”์— PR๋จธ์ง€๊ฐ€ ๋œ ๊ธฐ๋Šฅ์ด์—ˆ๋‹ค. https://github.com/LekoArts/gatsby-themes/issues/100 ์ง€๊ธˆ์€ ๋™์ž‘ํ•ด์•ผํ•˜๋Š”๋ฐ..

๋Œ“๊ธ€์„ ๋‹ฌ๊ณ  ์ด๊ฒƒ์ €๊ฒƒ ํ…Œ์ŠคํŠธํ•ด๋ณด์•˜์ง€๋งŒ ๊ฒฐ๊ตญ shadowing์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค. ๋Œ€์‹  static query hook์„ ์‚ฌ์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ง์ ‘ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋ฌธ์„œ๋Š” ์—ฌ๊ธฐ์—. https://www.gatsbyjs.org/docs/use-static-query/

use-post.tsx ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ , ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•ด๋‹น ๊ฐ’์„ ๊ฐ€์ ธ์˜จ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์›๋ž˜ posts๋ผ๋Š” ๊ฐ’์„ ๋„˜๊ฒจ์ฃผ๋˜ ์ž๋ฆฌ์— p.nodes๋ฅผ ๋„˜๊ฒจ์ฃผ๋„๋ก ํ–ˆ๋‹ค.

img/scrn_7.png

:tada: ! ๐Ÿ‘ฉโ€๐Ÿ”ง

๋Œ“๊ธ€ ๋ถ™์ด๊ธฐ

utterances ๋Š” github issue๋ฅผ ํ†ตํ•ด ๋Œ“๊ธ€์„ ์ง€์›ํ•ด์ฃผ๋Š” ์„œ๋น„์Šค์ด๋‹ค. ๋Œ“๊ธ€ ์กฐ์ฐจ ์˜ฎ๊ฒจ์˜ค๊ณ  ์‹ถ์—ˆ์ง€๋งŒ, ์ƒˆ๋กœ์šด ๋ ˆํฌ๋ฅผ ๋งŒ๋“  ๊ด€๊ณ„๋กœ ์ง์ ‘ ์˜ฎ๊ธฐ์ง€ ์•Š๊ณ ๋Š” ์ข€ ์–ด๋ ต๊ฒŒ ๋˜์—ˆ๋‹ค. utterances ๋Š” js ๋กœ ๋Œ“๊ธ€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜์ง€๋งŒ, ๊ตฌ๊ธ€๋ง ๊ฒฐ๊ณผ ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ž˜ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค. iamchanni ๋ธ”๋กœ๊ทธ ์—์„œ ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด์žˆ๊ธฐ์—, react ๋กœ ๋งŒ๋“  utterances component๋ฅผ ์ฐจ์šฉํ•ด ์‚ฌ์šฉํ–ˆ๋‹ค. ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค.

RSS ํ”ผ๋“œ ๋งŒ๋“ค๊ธฐ

๋ธ”๋กœ๊ทธ ์ฃผ ์œ ์ž… ๊ฒฝ๋กœ์ธ daily devlog์— ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” rss ํ”ผ๋“œ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ๊ฐ•์ž gatsby ๋‹ต๊ฒŒ ์ด๋Ÿฐ ๋ถ€๋ถ„๋„ ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ํ”ผ๋“œ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋งํฌ

์œ„ ๋ช…๋ น์–ด๋กœ feed plugin์„ ์„ค์น˜ํ•˜๊ณ , gatsby-config.js ์— ์„ค์ •ํ•ด์ค€๋‹ค. ์œ„ ๋งํฌ์—์„œ์™€ ์ฟผ๋ฆฌ๊ฐ€ ๋‹ฌ๋ผ์„œ, ์ง์ ‘ ๋ช‡๊ฐ€์ง€๋ฅผ ์ปค์Šคํ…€ํ•œ ๊ฒƒ์„ ์ œ์™ธํ•˜๊ณ  ํฐ ๋ฌธ์ œ๊ฐ€ ์—†์—ˆ๋‹ค.

gatsby develop ์œผ๋กœ๋Š” ๋งŒ๋“ค์–ด์ง€์ง€ ์•Š์œผ๋‹ˆ, ๊ผญ gatsby build && gatsby serve ๋ช…๋ น์–ด๋กœ xml ๋ฅผ ํ™•์ธํ•ด๋ณธ๋‹ค.

๊ตฌ๊ธ€ analytics id ์˜ฎ๊ธฐ๊ธฐ

ํ•ด๋‹น ์Šคํƒ€ํ„ฐ์—๋Š” ์ด๋ฏธ google analytics plugin์ด ์„ค์น˜๋˜์–ด์žˆ๊ธฐ๋•Œ๋ฌธ์—, tracking ID๋งŒ ๋„ฃ์–ด์ฃผ๋ฉด๋œ๋‹ค.

๋Œ€์‹  ์ด๊ฑธ ๋ฐฐํฌํ•˜๊ธฐ ์ง์ „์— ๊ธฐ์กด https://juneyr.dev ๋„๋ฉ”์ธ์„ ์‚ฌ์šฉํ•˜๋˜ github pages ๋ฐฐํฌ๋Š” ์ค‘๋‹จํ–ˆ๋‹ค. ๊ทธ์ชฝ์œผ๋กœ ์œ ์ž…๋˜๋ฉด ์ด์ „ ๋ธ”๋กœ๊ทธ์˜ ์ˆ˜์น˜๊ฐ€ ๊ฐ™์ด ์žกํžˆ๊ฒŒ ๋  ๊ฒƒ์ด๋ฏ€๋กœ.

๋ฐฐํฌ

๋ฐฐํฌ๋Š” gatsby์™€ ์กฐํ•ฉ์ด ์ข‹๋‹ค๋Š” netlify๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. https://netlify.com/ ์˜ ์‚ฌ์šฉ๋ฒ•์€ ์ธํ„ฐ๋„ท์— ๋งŽ์ด ์žˆ์œผ๋‹ˆ ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด ์ข‹๊ฒ ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ๋Š” https://velog.io/@godori/netlify-branch-sub-domain ๊ธ€์—์„œ ๋งŽ์€ ๋„์›€์„ ์–ป์—ˆ๋‹ค. github ๋กœ๊ทธ์ธ๊ณผ ๋ ˆํฌ ์„ค์ •, ๋นŒ๋“œ ์ปค๋งจ๋“œ๋ฅผ ๋„ฃ๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ์‰ฝ๊ฒŒ ์ •์  ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค.

๋์ธ๊ฐ€? ๐Ÿ‘ฉโ€๐Ÿ”ง

์™„์„ฑ๋œ ๋ธ”๋กœ๊ทธ๋Š” ํ•ด๋‹น ๋„๋ฉ”์ธ ๊ทธ๋Œ€๋กœ, https://juneyr.dev ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์•„์ฃผ ๋งˆ์Œ์— ๋“ค์ง„ ์•Š์ง€๋งŒ, ์กฐ๊ธˆ์”ฉ ๊ณ ์ณ๋‚˜๊ฐˆ ์˜ˆ์ •์ด๋‹ค.

img/scrn_8.png

TO-BE

  1. notion์„ CMS ๋กœ ์‚ฌ์šฉํ• ๊นŒ? https://tony.so/how-i-use-notion-as-my-cms-for-my-gatsby-site/ ๋ผ๋Š” ๊ธ€๋„ ์žˆ๊ณ  casper ์ธ๊ฐ€์—์„œ notion์„ CMS ์‚ฌ๋ก€๋กœ ์“ฐ๋Š” ๊ฒƒ์„ ๋ณด์•˜๋‹ค. ํ˜„์žฌ๋„ ๋ธ”๋กœ๊ทธ๋ฅผ notion์—์„œ ์จ์„œ ์˜ฎ๊ธฐ๊ณ  ์žˆ๋Š”๋ฐ, ๊ทธ๋Ÿด ๋ฐ”์—๋Š” notion๊ธ€์„ ํ†ต์œผ๋กœ ์˜ฎ๊ฒจ์˜ค๋Š”๊ฒŒ.

  2. toc ์ ์šฉ - ๊ธ€์˜ ํ˜ธํก์ด ๊ธธ์–ด์งˆ์ˆ˜๋ก table of contents ๊ฐ€ ์—†์ด๋Š” ์ฝ๊ธฐ ์–ด๋ ต๋‹ค.

  3. ๋งˆ์ด๋„ˆํ•œ ํŒจ์น˜ - ํ•„์š”ํ•œ query๊ฐ€ ์—†๋Š” ํ™”๋ฉด๋“ค์ด ์žˆ๋‹ค.

    • ์ด ๋ถ€๋ถ„์—์„œ ์ข€๋” ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•˜๋‹ค. ์ด ํ™”๋ฉด๋“ค์€ slug ๋“ฑ variable์„ ์š”๊ตฌํ•˜๋Š”๋ฐ, useStaticQuery ๋Š” static query ์ธ ๋งŒํผ ์ด ๊ธฐ๋Šฅ์„ ์ง€์›์•ˆํ•œ๋‹ค๊ณ ํ•˜๋„ค.

gatsby ์™€ netlify ์˜ ์กฐํ•ฉ์€ ์ •๋ง ์‰ฌ์›Œ์„œ, ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๊ฐ•์ถ”ํ•˜๊ณ ์‹ถ๋‹ค. ๋‹ค๋งŒ ์ปค์Šคํ…€ํ•˜๊ธฐ๊นŒ์ง€๊ฐ€ ์กฐ๊ธˆ ํž˜๋“ค์—ˆ๋Š”๋ฐ, ์ด๋Ÿฐ ๊ฒฝํ—˜์„ ์‚ด๋ ค์„œ ๊ฐ„๋‹จํ•œ ์›Œํฌ์ƒต ํ•ด๋ณด๊ณ ์‹ถ๋‹ค. ๐Ÿ˜Ž ๋‚˜ ์—ญ์‹œ ์žฅ๊ณ ๊ฑธ์Šค ์›Œํฌ์ƒต์—์„œ ๋ธ”๋กœ๊ทธ๋ฅผ ์ฒ˜์Œ ๋งŒ๋“ค์—ˆ์œผ๋‹ˆ!

์ฐธ๊ณ 

https://www.gatsbyjs.org/starters/?v=2

https://blog.outsider.ne.kr/1426

https://velog.io/@iamchanii/build-a-blog-with-gatsby-and-typescript-part-4

https://velog.io/@godori/netlify-branch-sub-domain

https://tony.so/how-i-use-notion-as-my-cms-for-my-gatsby-site/