Jekyll์—์„œ Next.js๋กœ

โฐ 2021-05-21 (๊ธˆ) 15:09:33

screener

Table of Contents

  • 1. Bye, Jekyll!



Bye, Jekyll!

๊ธฐ์กด์— ๐Ÿ”— Jekyll๋กœ ์šด์˜ํ•˜๋˜ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ฒ„๋ฆฌ๊ณ  React ๊ธฐ๋ฐ˜์˜ Next.js๋ฅผ ํ†ตํ•ด ๋ธ”๋กœ๊ทธ๋ฅผ ์ƒˆ๋กœ ๊ฐœ๋ฐœํ–ˆ๋‹ค.

Github Pages๋ฅผ ์ฒ˜์Œ ์ ‘ํ–ˆ์„ ๋•Œ, ํ˜ธ์ŠคํŒ…์„ ๋ฐ˜๋“œ์‹œ Jekyll ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ด์•ผํ•œ๋‹ค๊ณ  ์ฐฉ๊ฐํ•˜๊ณ ์žˆ์—ˆ๋‹ค. ์‚ฌ์‹ค ์กฐ๊ธˆ๋งŒ ์ƒ๊ฐํ•ด๋ณด๋ฉด ์ƒ๊ด€ ์—†๋˜๊ฑด๋ฐ.

์ตœ๊ทผ์— React๋ฅผ ์ ‘ํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ๊ฝค๋‚˜ ๋งค๋ ฅ์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ผ ์†Œ์†Œํ•˜๊ฒŒ๋‚˜๋งˆ ๋ญ”๊ฐ€ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค.
๋ธ”๋กœ๊ทธ๊ฐ€ ์ ์ ˆํ•œ ํ”„๋กœ์ ํŠธ(?)๊ฐ€ ๋  ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋ช…์ƒ‰์ด ๊ฐœ๋ฐœ์ž์ธ๋ฐ ๋ธ”๋กœ๊ทธ ํ•˜๋‚˜ ์ •๋„๋Š” ์ง์ ‘ ๊ฐœ๋ฐœํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๊ธฐ๋„ ํ•˜๊ณ ....

๊ตณ์ด ๋ฉ€์ฉกํ•œ ๋ธ”๋กœ๊ทธ ๋†”๋‘๊ณ ?

ํ•œ๋™์•ˆ ์•ˆ ํ•˜๊ธด ํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ๊นŒ์ง„ Jekyll ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. ๐Ÿ”— Moon Theme๋ฅผ ์ ์šฉํ•ด์„œ ์‚ฌ์šฉํ–ˆ์—ˆ๋Š”๋ฐ, ํฌ๊ณ ์ž‘์€ ๋ถˆํŽธํ•จ์ด ์žˆ์—ˆ๋‹ค.


  1. Jekyll์ด๋ผ๋Š” ์ƒ์†Œํ•œ ํ™˜๊ฒฝ

    Github์˜ ๊ฐœ๋ฐœ์–ธ์–ด๋Š” Ruby๋‹ค. ๊ทธ๋ž˜์„œ์ผ๊นŒ, Github Pages์˜ ๊ธฐ๋ณธ ๋ฐฐํฌ๋Š” Ruby ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ์ธ Jekyll์„ ๋”ฐ๋ผ๊ฐ„๋‹ค.
    ๋ฌธ์ œ๋Š” ํ•œ๊ตญ์—” Jekyll์€ ๋ฌผ๋ก , Ruby๋ผ๋Š” ์–ธ์–ด ์ž์ฒด์˜ ์ˆ˜์š”๊ฐ€ ๋งŽ์ง€ ์•Š๋‹ค. ๋‹จ์ˆœ ๋ธ”๋กœ๊ทธ ํ•˜๋‚˜ ์šด์˜ํ•˜๊ธฐ ์œ„ํ•ด ์ƒํŒ ๋ชจ๋ฅด๋Š” ์–ธ์–ด๋ฅผ ์ ‘ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์€ ๋ฌด์‹œํ•  ์ˆ˜ ์—†๋Š” ๋””๋ฉ”๋ฆฌํŠธ.

    ๋ฌผ๋ก  Ruby๋ฅผ ์ง์ ‘์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜์ง„ ์•Š์ง€๋งŒ Jekyll ์ƒํƒœ๊ณ„ ๋˜ํ•œ ๊ทธ๋ฆฌ ์นœ์ˆ™ํ•œ ํ˜•ํƒœ๋Š” ์•„๋‹ˆ์˜€๋‹ค.

  2. ํƒ€์ธ์ด ๊ฐœ๋ฐœํ•œ ์†Œ์Šค์˜ ์ดํ•ด

    1๋ฒˆ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๋กœ, ๋ฐ‘๋ฐ”๋‹ฅ๋ถ€ํ„ฐ Jekyll์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.
    ํŠน์ • ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์†Œ์š”๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ, ํ˜„์žฌ ํ…Œ๋งˆ์— ์–ด์šธ๋ฆฌ๋„๋ก "์ž˜ ๋””์ž์ธ"ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ ํ…Œ๋งˆ ๊ฐœ๋ฐœ์ž์˜ ๋””์ž์ธ ์ฒ ํ•™์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ๋‹จ์ˆœ ๋””์ž์ธ๊ณผ๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฌธ์ œ. ๊ตฌ์กฐ ํŒŒ์•…์€ ๋ค
    ๋”๊ตฐ๋‹ค๋‚˜ ๋‚ด ๊ฒฝ์šฐ ๋ชจ์ž๋ž€ ์‹ค๋ ฅ์— ์ด์ƒํ•œ ๊ฐ•๋ฐ•์ฆ๊นŒ์ง€ ์žˆ์–ด์„œ, ๋‚ด ์Šคํƒ€์ผ๋กœ ์ž‘์„ฑ๋˜์ง€ ์•Š์€ ์ฝ”๋“œ์˜ ๋ฆฌ๋”ฉ์„ ๋ชป ํ•œ๋‹ค. ๋˜ํ•œ, ํ”„๋กœ์ ํŠธ์˜ ๋ธ”๋ž™๋ฐ•์Šค๋ฅผ ์‹ซ์–ดํ•œ๋‹ค. ์‹ค๋ ฅ์€ ์—†๋Š” ์ฃผ์ œ์— ํ”„๋กœ์ ํŠธ ๋‚ด์— ๋‚ด๊ฐ€ ๋ชจ๋ฅด๋Š” ์ฝ”๋“œ ๋ฉ์–ด๋ฆฌ๊ฐ€ ์žˆ๋Š” ๊ฑธ ๊ต‰์žฅํžˆ ์‹ซ์–ดํ•œ๋‹ค. ๋””์ž์ธ ๊ฐ๊ฐ์ด ์ข‹์ง€๋„ ๋ชป ํ•ด์„œ ๊ฒฐ๊ณผ๋ฌผ๋„ ๊ธฐ์กด ํ…Œ๋งˆ์™€ ์ด์งˆ์ ์ธ ๋ฌด์–ธ๊ฐ€๊ฐ€ ๋‚˜์˜จ๋‹ค.

  3. ํŽธ๋ฆฌํ•œ ์‚ฌ์šฉ์ž ํ™•์žฅ์„ฑ, ๋ถˆํŽธํ•œ ๊ฐœ๋ฐœ์ž ํ™•์žฅ์„ฑ

    ๋ธ”๋กœ๊ทธ๋‚˜, ์›น ํŽ˜์ด์ง€, PPT ๊ฐ™์€ ํ™˜๊ฒฝ์—์„œ ํ…Œ๋งˆ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ญ˜๊นŒ? ๊ท€์ฐฎ์ง€๋งŒ ์ค‘์š”ํ•œ ๋””์ž์ธ์— ๋Œ€ํ•œ ํˆฌ์ž๋ฅผ ๊ณผ๊ฐํžˆ ํŒจ์Šคํ•˜๋ฉด์„œ๋„ ์ค€์ˆ˜ํ•œ ๋””์ž์ธ ํผํฌ๋จผ์Šค๋ฅผ ๋‚ด๊ธฐ ์œ„ํ•จ์ด๋‹ค. ๋ฌผ๋ก  ์ทจ์ง€๋Š” ์ข‹๋‹ค. ์–ด๋””๊นŒ์ง€๋‚˜ ๋‹จ์ˆœํžˆ ํ•ด๋‹น ํ…Œ๋งˆ๊ฐ€ ์˜๋„ํ•œ ๋ฐฉํ–ฅ์— ๋งž์„ ๋•Œ๋งŒ.

    ๋‹ค๋“ค ๋น„์Šทํ•œ ๊ฒฝํ—˜์ด ์žˆ์—ˆ์„ ๊ฒƒ์ด๋‹ค. ํ…Œ๋งˆ ํ˜น์€ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ํ•„์š”์— ๋”ฐ๋ผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ด ํ•„์š”ํ•  ๊ฒฝ์šฐ๊ฐ€ ๊ทธ๋ ‡๋‹ค.
    ๋Œ€๋ถ€๋ถ„์˜ ํ…Œ๋งˆ๋Š” ๊ฒฐ๊ณผ๋ฌผ์ด ํ…Œ๋งˆ๊ฐ€ ์ถ”๊ตฌํ•˜๋Š” ๋””์ž์ธ ์ฒ ํ•™๊ณผ ์ƒํ†ตํ•  ๋•Œ ๊ทธ ๋น›์„ ๋ฐœํ•œ๋‹ค. ๋‹ค์‹œ ๋งํ•ด, ๊ทธ ์˜๋„๊ฐ€ ์†์ƒ๋  ๊ฒฝ์šฐ ๊ฒฐ๊ณผ๋ฌผ์˜ ํ€„๋ฆฌํ‹ฐ๋Š” ๊ธ‰๋ฝํ•œ๋‹ค.
    ์ด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ํ•„์š”์— ๋”ฐ๋ผ ๊ธฐ์กด์˜ ์š”์†Œ(์†Œ์Šค์ฝ”๋“œ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ)์„ ์ œ๊ฑฐํ•  ๊ฒฝ์šฐ ๊ทธ ์˜์กด์„ฑ์„ ํŒŒ์•…ํ•˜๊ธฐ ํž˜๋“ค์–ด ๋ฆฌ์Šคํฌ๊ฐ€ ํฌ๋‹ค.

    ์ผ๋ก€๋กœ, ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ Moon Theme์˜ ๊ฒฝ์šฐ, JQuery์— ์˜์กด์„ฑ์„ ๊ฐ–๊ณ  ์žˆ๋‹ค.
    ๊ทผ๋ž˜ ์›น ๊ฐœ๋ฐœ์˜ JQuery์— ๋Œ€ํ•œ ๋น„๊ด€์ ์ธ ํ‰์„ ์ƒ๊ฐํ•œ๋‹ค๋ฉด, ์ด๋Š” ํฐ ๋””๋ฉ”๋ฆฌํŠธ๋กœ ๋‹ค๊ฐ€์˜จ๋‹ค. ์ œ๊ฑฐ ์ž‘์—…์œผ๋กœ ์ธํ•œ ๊ณต์ˆ˜ ๋˜ํ•œ ๋ฌด์‹œํ•  ์ˆ˜ ์—†์„ ๊ฒƒ์ด๊ณ .
    ๋ฌผ๋ก  ๋‹น์‹œ์˜ ๊ฐœ๋ฐœ ํŠธ๋ Œ๋“œ๋ฅผ ๋ฌด์‹œํ•  ์ˆ˜ ์—†์œผ๋ฉฐ, ๊ฐœ๋ฐœ์€ ๊ทธ ์ค‘์—์„œ๋„ ํŠธ๋ Œ๋“œ์˜ ์ฃผ๊ธฐ๊ฐ€ ๋งค์šฐ ๋น ๋ฅธ ํŽธ์ด๋‹ค. ์ด๋กœ ๋ฏธ๋ฃจ์–ด ๋ณผ ๋•Œ, ๊ฒฐ๊ณผ๋ก ์ ์ธ ์–˜๊ธฐ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ์˜๋„ํ•˜์ง€ ์•Š์€ ๊ฒฐํ•จ์ด๋ผ๋Š” ์‚ฌ์‹ค์€ ๋ถˆ๋ณ€ํ•˜๋‹ค.

  4. ๊ฐœ๋ฐœ ์š•๊ตฌ

    ์ •์  ๋ธ”๋กœ๊ทธ์˜ ๊ฒฝ์šฐ ๋ฐฑ์—”๋“œ ์˜์—ญ์ด ๊ฑฐ์˜ ์ „๋ฌดํ•œ๋ฐ๋‹ค, ๋ณต์žกํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๋„ ํ•„์š” ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ ๋‚œ์ด๋„๊ฐ€ ์ƒ๋Œ€์ ์œผ๋กœ ๋‚ฎ๋‹ค๊ณ  ํŒ๋‹จํ–ˆ๋‹ค. ์ฆ‰, ์›ํ•œ๋‹ค๋ฉด ๋‚ด๊ฐ€ ์ง์ ‘ ๊ฐœ๋ฐœํ•œ ๋ธ”๋กœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ๊ทธ๋ฆฌ ์–ด๋ ต์ง€ ์•Š๋‹ค.
    ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด, ์ง์ ‘ ๊ฐœ๋ฐœํ•œ ๋ธ”๋กœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข€ ๋” ๊ฐœ๋ฐœ์ž์Šค๋Ÿฝ๋‹ค. ๋‚œ์ด๋„ ๋˜ํ•œ ๊ณต๋ถ€ ์ค‘์ธ React๋ฅผ ์ ์šฉํ•˜๊ธฐ๋„ ์ ํ•ฉํ•˜๊ณ .

Hello, Next.js!

React๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค ๋• ์ฃผ๋กœ ๐Ÿ”— Next.js ํ˜น์€ ๐Ÿ”— Gatsby.js๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ด๋ฒˆ์— ๊ฐœ๋ฐœํ•œ ๋ธ”๋กœ๊ทธ๋Š” Next.js๋ฅผ ํ™œ์šฉํ–ˆ๋‹ค.

Next.js๋Š” Ruby์˜ Jekyll ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๊ทธ ๊ฒฐ์ด ๋น„์Šทํ•˜๋‹ค. Jekyll๋Š” ํ”„๋ ˆ์ž„์›Œํฌ ์ž์ฒด์— ๊ตฌ์กฐ ์Šคํ‚ค๋งˆ๋ฅผ ์ •ํ•จ์œผ๋กœ์จ React์˜ Component์™€ ์œ ์‚ฌํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค. ๊ทธ ๋‹น์‹œ์˜ ๋‚œ React๋ผ๋Š” ๊ฑธ ์ ‘ํ•˜์ง€๋„ ์•Š์€ ์ƒํ™ฉ์—์„œ, React์˜ Component ๋ฐฉ์‹์œผ๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ตฌ์„ฑํ–ˆ๋˜ ๊ฒƒ์ด๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ๋‚ซ ๋†“๊ณ  ๊ธฐ์—ญ์ž๋„ ๋ชจ๋ฅธ ์…ˆ.

Next.js ์—ญ์‹œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด์— ์ •์  ์›น์„ ๊ตฌ์„ฑํ•˜๊ณ  ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ด ๊ตฌ์ถ•๋˜์–ด ์žˆ์–ด, ์‰ฝ๊ฒŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์—ฌ๋Ÿฌ ์‚ฌ์šฉ์ž๋“ค์ด ๊ฐœ๋ฐœํ•œ ๋‹ค์ˆ˜์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋ค.
๋•๋ถ„์— ์ •์  ๋ธ”๋กœ๊ทธ๋ฅผ ๋ฐ‘๋ฐ”๋‹ฅ์—์„œ๋ถ€ํ„ฐ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‚˜๋ฆ„๋Œ€๋กœ ๋””์ž์ธ ํ•œ๋‹ค๊ณ  ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ, ์—ญ์‹œ ๋””์ž์ธ์€ ์–ด๋ ต๋‹ค.
Next.js์™€ Gatsby.js์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ๋‚˜์ค‘์— ๋”ฐ๋กœ ๋‹ค๋ฃฐ ์˜ˆ์ •์ด๋‹ค.

์•„์ง ํ•ด์•ผํ•  ๊ฒƒ๋“ค์ด ๋‚จ์•„์žˆ๋‹ค. sitemap ์ƒ์„ฑ๊ธฐ๋„ ๋ถ™์—ฌ์•ผ ํ•˜๊ณ , ์—ฐ๊ด€ ๊ฒŒ์‹œ๋ฌผ ๊ธฐ๋Šฅ๋„ ํ•„์š”ํ•˜๋‹ค. ์•„์ง ๋‹ค๋“ฌ์–ด์ง€์ง€ ์•Š์€ ์ž์ž˜ํ•œ ์š”์†Œ๋“ค๋„ ์žˆ๊ณ . ์—ญ์‹œ ๊ทœ๋ชจ์— ์ƒ๊ด€์—†์ด ๋ฌด์–ธ๊ฐ€๋ฅผ ํผ๋ธ”๋ฆฌ์‹ฑํ•˜๋Š”๊ฑด ์ •๋ง ํž˜๋“  ๊ฒƒ ๊ฐ™๋‹ค.
์ ์–ด๋„ ์ด๋ฒˆ ๋ธ”๋กœ๊ทธ๋Š” ๋‚ด ๋…ธ๋ ฅ์œผ๋กœ ๋‚ด๊ฐ€ ๊ฐœ๋ฐœํ•œ ๊ฑฐ๋‹ˆ, ๊พธ์ค€ํžˆ ์šด์˜ํ•  ์ˆ˜ ์žˆ์—ˆ์Œ ํ•œ๋‹ค.


๐Ÿท๏ธ ํƒœ๊ทธ
# React(๋ฆฌ์•กํŠธ)
# Next.js
# ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ
# Jekyll

์ฝ์–ด์ฃผ์…”์„œ ๊ณ ๋งˆ์›Œ์š”!

๋„์›€์ด ๋˜์…จ๋‹ค๋ฉด, ๊ณต๊ฐ์ด๋‚˜ ๋Œ“๊ธ€์„ ๋‹ฌ์•„์ฃผ์‹œ๋Š” ๊ฑด ์–ด๋–ค๊ฐ€์š”?

๋ธ”๋กœ๊ทธ ์šด์˜์— ํฐ ํž˜์ด ๋ฉ๋‹ˆ๋‹ค.

https://hits.seeyoufarm.com/api/count/incr/badge.svg?count_bg=%23484848&icon=react.svg&icon_color=dodgerblue&title=view&title_bg=%23242424&url=https%3A%2F%2Fblog.itcode.dev%2Fposts%2F2021%2F05%2F21%2Fjekyll-to-nextjs