Jekyll์์ Next.js๋ก
โฐ 2021-05-21 (๊ธ) 15:09:33
Bye, Jekyll!
๊ธฐ์กด์ ๐ Jekyll๋ก ์ด์ํ๋ ๋ธ๋ก๊ทธ๋ฅผ ๋ฒ๋ฆฌ๊ณ React ๊ธฐ๋ฐ์ Next.js๋ฅผ ํตํด ๋ธ๋ก๊ทธ๋ฅผ ์๋ก ๊ฐ๋ฐํ๋ค.
Github Pages๋ฅผ ์ฒ์ ์ ํ์ ๋, ํธ์คํ ์ ๋ฐ๋์ Jekyll ๊ธฐ๋ฐ์ผ๋ก ํด์ผํ๋ค๊ณ ์ฐฉ๊ฐํ๊ณ ์์๋ค. ์ฌ์ค ์กฐ๊ธ๋ง ์๊ฐํด๋ณด๋ฉด ์๊ด ์๋๊ฑด๋ฐ.
์ต๊ทผ์ React๋ฅผ ์ ํ๋๋ฐ, ์๊ฐ๋ณด๋ค ๊ฝค๋ ๋งค๋ ฅ์ ์ธ ํ๋ ์์ํฌ๋ผ ์์ํ๊ฒ๋๋ง ๋ญ๊ฐ ๋ง๋ค์ด๋ณด๊ณ ์ถ์๋ค.
๋ธ๋ก๊ทธ๊ฐ ์ ์ ํ ํ๋ก์ ํธ(?)๊ฐ ๋ ๊ฒ ๊ฐ์๋ค. ๋ช
์์ด ๊ฐ๋ฐ์์ธ๋ฐ ๋ธ๋ก๊ทธ ํ๋ ์ ๋๋ ์ง์ ๊ฐ๋ฐํด์ผ ํ ๊ฒ ๊ฐ๊ธฐ๋ ํ๊ณ ....
๊ตณ์ด ๋ฉ์ฉกํ ๋ธ๋ก๊ทธ ๋๋๊ณ ?
ํ๋์ ์ ํ๊ธด ํ์ง๋ง, ์ง๊ธ๊น์ง Jekyll ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ณ ์์๋ค. ๐ Moon Theme๋ฅผ ์ ์ฉํด์ ์ฌ์ฉํ์๋๋ฐ, ํฌ๊ณ ์์ ๋ถํธํจ์ด ์์๋ค.
-
Jekyll์ด๋ผ๋ ์์ํ ํ๊ฒฝ
Github์ ๊ฐ๋ฐ์ธ์ด๋ Ruby๋ค. ๊ทธ๋์์ผ๊น, Github Pages์ ๊ธฐ๋ณธ ๋ฐฐํฌ๋ Ruby ๊ธฐ๋ฐ ํ๋ ์์ํฌ์ธ Jekyll์ ๋ฐ๋ผ๊ฐ๋ค.
๋ฌธ์ ๋ ํ๊ตญ์ Jekyll์ ๋ฌผ๋ก , Ruby๋ผ๋ ์ธ์ด ์์ฒด์ ์์๊ฐ ๋ง์ง ์๋ค. ๋จ์ ๋ธ๋ก๊ทธ ํ๋ ์ด์ํ๊ธฐ ์ํด ์ํ ๋ชจ๋ฅด๋ ์ธ์ด๋ฅผ ์ ํด์ผ ํ๋ค๋ ์ ์ ๋ฌด์ํ ์ ์๋ ๋๋ฉ๋ฆฌํธ.๋ฌผ๋ก Ruby๋ฅผ ์ง์ ์ ์ผ๋ก ๊ฐ๋ฐํ์ง ์์ง๋ง Jekyll ์ํ๊ณ ๋ํ ๊ทธ๋ฆฌ ์น์ํ ํํ๋ ์๋์๋ค.
-
ํ์ธ์ด ๊ฐ๋ฐํ ์์ค์ ์ดํด
1๋ฒ๊ณผ ๊ฐ์ ๋ฌธ์ ๋ก, ๋ฐ๋ฐ๋ฅ๋ถํฐ Jekyll์ ๊ฐ๋ฐํ ์ ์์๋ค.
ํน์ ๊ธฐ๋ฅ์ ๋ํ ์์๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ, ํ์ฌ ํ ๋ง์ ์ด์ธ๋ฆฌ๋๋ก "์ ๋์์ธ"ํ๋ ๊ฒ์ด ์ค์ํ๋ค. ํ์ง๋ง ์ฌ์ฉ์์ ์ ์ฅ์์ ํ ๋ง ๊ฐ๋ฐ์์ ๋์์ธ ์ฒ ํ์ ์ดํดํ๋ ๊ฒ์ ๋จ์ ๋์์ธ๊ณผ๋ ๋ ๋ค๋ฅธ ๋ฌธ์ . ๊ตฌ์กฐ ํ์ ์ ๋ค
๋๊ตฐ๋ค๋ ๋ด ๊ฒฝ์ฐ ๋ชจ์๋ ์ค๋ ฅ์ ์ด์ํ ๊ฐ๋ฐ์ฆ๊น์ง ์์ด์, ๋ด ์คํ์ผ๋ก ์์ฑ๋์ง ์์ ์ฝ๋์ ๋ฆฌ๋ฉ์ ๋ชป ํ๋ค. ๋ํ, ํ๋ก์ ํธ์ ๋ธ๋๋ฐ์ค๋ฅผ ์ซ์ดํ๋ค. ์ค๋ ฅ์ ์๋ ์ฃผ์ ์ ํ๋ก์ ํธ ๋ด์ ๋ด๊ฐ ๋ชจ๋ฅด๋ ์ฝ๋ ๋ฉ์ด๋ฆฌ๊ฐ ์๋ ๊ฑธ ๊ต์ฅํ ์ซ์ดํ๋ค. ๋์์ธ ๊ฐ๊ฐ์ด ์ข์ง๋ ๋ชป ํด์ ๊ฒฐ๊ณผ๋ฌผ๋ ๊ธฐ์กด ํ ๋ง์ ์ด์ง์ ์ธ ๋ฌด์ธ๊ฐ๊ฐ ๋์จ๋ค. -
ํธ๋ฆฌํ ์ฌ์ฉ์ ํ์ฅ์ฑ, ๋ถํธํ ๊ฐ๋ฐ์ ํ์ฅ์ฑ
๋ธ๋ก๊ทธ๋, ์น ํ์ด์ง, PPT ๊ฐ์ ํ๊ฒฝ์์ ํ ๋ง๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ญ๊น? ๊ท์ฐฎ์ง๋ง ์ค์ํ ๋์์ธ์ ๋ํ ํฌ์๋ฅผ ๊ณผ๊ฐํ ํจ์คํ๋ฉด์๋ ์ค์ํ ๋์์ธ ํผํฌ๋จผ์ค๋ฅผ ๋ด๊ธฐ ์ํจ์ด๋ค. ๋ฌผ๋ก ์ทจ์ง๋ ์ข๋ค. ์ด๋๊น์ง๋ ๋จ์ํ ํด๋น ํ ๋ง๊ฐ ์๋ํ ๋ฐฉํฅ์ ๋ง์ ๋๋ง.
๋ค๋ค ๋น์ทํ ๊ฒฝํ์ด ์์์ ๊ฒ์ด๋ค. ํ ๋ง ํน์ ํ ํ๋ฆฟ์ ์ฌ์ฉํ๋ฉด์ ํ์์ ๋ฐ๋ผ ์ปค์คํฐ๋ง์ด์ง์ด ํ์ํ ๊ฒฝ์ฐ๊ฐ ๊ทธ๋ ๋ค.
๋๋ถ๋ถ์ ํ ๋ง๋ ๊ฒฐ๊ณผ๋ฌผ์ด ํ ๋ง๊ฐ ์ถ๊ตฌํ๋ ๋์์ธ ์ฒ ํ๊ณผ ์ํตํ ๋ ๊ทธ ๋น์ ๋ฐํ๋ค. ๋ค์ ๋งํด, ๊ทธ ์๋๊ฐ ์์๋ ๊ฒฝ์ฐ ๊ฒฐ๊ณผ๋ฌผ์ ํ๋ฆฌํฐ๋ ๊ธ๋ฝํ๋ค.
์ด ๋ฟ๋ง ์๋๋ผ, ํ์์ ๋ฐ๋ผ ๊ธฐ์กด์ ์์(์์ค์ฝ๋, ํ๋ฌ๊ทธ์ธ ๋ฑ)์ ์ ๊ฑฐํ ๊ฒฝ์ฐ ๊ทธ ์์กด์ฑ์ ํ์ ํ๊ธฐ ํ๋ค์ด ๋ฆฌ์คํฌ๊ฐ ํฌ๋ค.์ผ๋ก๋ก, ์์์ ์ธ๊ธํ Moon Theme์ ๊ฒฝ์ฐ, JQuery์ ์์กด์ฑ์ ๊ฐ๊ณ ์๋ค.
๊ทผ๋ ์น ๊ฐ๋ฐ์ JQuery์ ๋ํ ๋น๊ด์ ์ธ ํ์ ์๊ฐํ๋ค๋ฉด, ์ด๋ ํฐ ๋๋ฉ๋ฆฌํธ๋ก ๋ค๊ฐ์จ๋ค. ์ ๊ฑฐ ์์ ์ผ๋ก ์ธํ ๊ณต์ ๋ํ ๋ฌด์ํ ์ ์์ ๊ฒ์ด๊ณ .
๋ฌผ๋ก ๋น์์ ๊ฐ๋ฐ ํธ๋ ๋๋ฅผ ๋ฌด์ํ ์ ์์ผ๋ฉฐ, ๊ฐ๋ฐ์ ๊ทธ ์ค์์๋ ํธ๋ ๋์ ์ฃผ๊ธฐ๊ฐ ๋งค์ฐ ๋น ๋ฅธ ํธ์ด๋ค. ์ด๋ก ๋ฏธ๋ฃจ์ด ๋ณผ ๋, ๊ฒฐ๊ณผ๋ก ์ ์ธ ์๊ธฐ๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ , ์ฌ์ฉ์๊ฐ ์๋ํ์ง ์์ ๊ฒฐํจ์ด๋ผ๋ ์ฌ์ค์ ๋ถ๋ณํ๋ค. -
๊ฐ๋ฐ ์๊ตฌ
์ ์ ๋ธ๋ก๊ทธ์ ๊ฒฝ์ฐ ๋ฐฑ์๋ ์์ญ์ด ๊ฑฐ์ ์ ๋ฌดํ๋ฐ๋ค, ๋ณต์กํ ๋น์ฆ๋์ค ๋ก์ง๋ ํ์ ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ ๋์ด๋๊ฐ ์๋์ ์ผ๋ก ๋ฎ๋ค๊ณ ํ๋จํ๋ค. ์ฆ, ์ํ๋ค๋ฉด ๋ด๊ฐ ์ง์ ๊ฐ๋ฐํ ๋ธ๋ก๊ทธ๋ฅผ ์ฌ์ฉํ๋๊ฒ ๊ทธ๋ฆฌ ์ด๋ ต์ง ์๋ค.
์์์ ์ธ๊ธํ๋ฏ์ด, ์ง์ ๊ฐ๋ฐํ ๋ธ๋ก๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข ๋ ๊ฐ๋ฐ์์ค๋ฝ๋ค. ๋์ด๋ ๋ํ ๊ณต๋ถ ์ค์ธ 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 ์์ฑ๊ธฐ๋ ๋ถ์ฌ์ผ ํ๊ณ , ์ฐ๊ด ๊ฒ์๋ฌผ ๊ธฐ๋ฅ๋ ํ์ํ๋ค. ์์ง ๋ค๋ฌ์ด์ง์ง ์์ ์์ํ ์์๋ค๋ ์๊ณ . ์ญ์ ๊ท๋ชจ์ ์๊ด์์ด ๋ฌด์ธ๊ฐ๋ฅผ ํผ๋ธ๋ฆฌ์ฑํ๋๊ฑด ์ ๋ง ํ๋ ๊ฒ ๊ฐ๋ค.
์ ์ด๋ ์ด๋ฒ ๋ธ๋ก๊ทธ๋ ๋ด ๋
ธ๋ ฅ์ผ๋ก ๋ด๊ฐ ๊ฐ๋ฐํ ๊ฑฐ๋, ๊พธ์คํ ์ด์ํ ์ ์์์ ํ๋ค.
๐ท๏ธ ํ๊ทธ
์ฝ์ด์ฃผ์ ์ ๊ณ ๋ง์์!
๋์์ด ๋์ จ๋ค๋ฉด, ๊ณต๊ฐ์ด๋ ๋๊ธ์ ๋ฌ์์ฃผ์๋ ๊ฑด ์ด๋ค๊ฐ์?
๋ธ๋ก๊ทธ ์ด์์ ํฐ ํ์ด ๋ฉ๋๋ค.