React ๊ธฐ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ ํ๋ ์์ํฌ์ธ Gatsby๋ฅผ ํตํด ๋๋ง์ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค์ด๋ณด๋ ์์ ์ ๋๋ค :)
Gatsby ํ๋ ์์ํฌ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ์์ฑํ๋ ๋ฐฉ๋ฒ
SEO ๋ฐ ์น ์ ๊ทผ์ฑ ํฅ์ ์กฐ์น ๋ฐฉ๋ฒ
๋ธ๋ก๊ทธ ๋ฐฐํฌ ๋ฐฉ๋ฒ
ํด๋น ๊ฐ์๋ ๋ฐ์นญ ์์ ๊ธฐ์ค ๋ฒ์ ์ธ Gatsby v3๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
๋ฐ๋ผ์ ์๋กญ๊ฒ ๊ฐ์๋ฅผ ์๊ฐํ๋ ๋ถ๋ค์ ๋ฒ์ ์ ์ ์ํด์ฃผ์ธ์!
ํ์ฌ ์๋ก์ด ๋ฒ์ ์ ์ฌ์ฉํ ๊ฐ์๋ฅผ ์ค๋น์ค์ด๋ฉฐ,
๊ทธ์ ๋ฐ๋ผ ๋ ์ด์ ์ปค๋ฎค๋ํฐ ๊ด๋ฆฌ๋ฅผ ํ์ง ์์ผ๋ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.
์ง์ ๋ง๋๋ ๋๋ง์ ๊ธฐ์ ๋ธ๋ก๊ทธ,
React Gatsby๋ก ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๐ง
๊ฐ๋ฐ์๋ผ๋ฉด ํ ๋ฒ์ฏค ๋ค์ด๋ณด์
จ์ ๊ฒ์
๋๋ค. ๊ธฐ์ ๋ธ๋ก๊ทธ๊ฐ ๊ฐ๋ฐ ์ค๋ ฅ ํฅ์์ ๋์์ด ๋๋ค๋ ๋ง์์.
์ ์ญ์ ์ค์ ๋ก ๋์์ด ๋๋ค๊ณ ์๊ฐํฉ๋๋ค. ์์ ์ด ๋ฐฐ์ด ๋ด์ฉ์ ์ ๋ฆฌํ๋ ๊ณผ์ ์์ ๋ชจ๋ฅด๋ ๋ด์ฉ์ ๋ฐ๊ฒฌํ ์๋ ์๊ณ , ๋ค์ ์ด๋ฅผ ์ฐพ์๋ณด๋ ๊ณผ์ ์ ํตํด ๋ด ๊ธฐ์ ๋ ฅ์ ์ฑ์ฅ์ํฌ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค.
๋ฌด์์ด๋ ์ฒ์์ด ๊ฐ์ฅ ์ด๋ ค์ด ๋ฒ์ ๋๋ค. ๊ธฐ์ ๋ธ๋ก๊ทธ๋ ๋ง์ฐฌ๊ฐ์ง์ฃ . ์ด๋ฏธ ๋ง์ ๊ฐ๋ฐ์๋ค์ด ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ณ ์์ง๋ง, ์ ๊ฒฝ์จ์ผ ํ ์์๊ฐ ๋ง๋ค ๋ณด๋ ์ ์ง ์์ ๋ถ๋ค์ด ์ด๋ป๊ฒ ๋ธ๋ก๊ทธ ๊ฐ๋ฐ์ ์์ํ ์ง ๋ง๋งํจ์ ๋๋ผ๊ณค ํฉ๋๋ค.
ํ์ง๋ง ์ด ๋ชจ๋ ๊ณผ์ ์ ๋ฐ๋ผ์ฌ ์ ์๋๋ก ์๋ ค์ฃผ๋ ๋์ฐ๋ฏธ๊ฐ ์๋ค๋ฉด ์ด๋จ๊น์? ๋ ์ฝ๊ณ ํธํ๊ฒ ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ๋ฐํ ์ ์์ง ์์๊น์? ์ด ๊ฐ์๋ ๋ฐ๋ก ์ด๋ฐ ๊ณ ๋ฏผ์์ ์ถ๋ฐํฉ๋๋ค.
Gatsby.js?
๊ฐ์ธ ๋น๋ ํ์ฌ ๊ฐ์ฅ ์ธ๊ธฐ์๋
ํ๋ก ํธ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฆฌ์กํธ(React) ๊ธฐ๋ฐ์
์ ์ ์ฌ์ดํธ ์์ฑ ํ๋ ์์ํฌ์
๋๋ค.
์ด ๊ฐ์์์๋ ์ต๊ทผ ํ๋ก ํธ์๋ ์์ฅ์์ ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๊ณ ์๋ JAM Stack ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ ์ค์์ ์ ์ ์ฌ์ดํธ ์์ฑ ํ๋ ์์ํฌ์ธ Gatsby๋ก ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ๋ฐํด ๋ด ๋๋ค.
๋ฟ๋ง ์๋๋ผ, ์ ์ ๋ ๋ง์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ด ์ฌ์ฉํ๊ณ ์๋ ํ์ ์คํฌ๋ฆฝํธ(TypeScript)๋ฅผ ํตํด ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๋ ๋ฐฉ๋ฒ๋ ํจ๊ป ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์ด ๊ฐ์์์ ๋ง๋ค์ด๋ณผ ๋ธ๋ก๊ทธ๋ฅผ ๋ฏธ๋ฆฌ ํ์ธํ ์ ์์ด์. (๋ฐ๋ก๊ฐ๊ธฐ)
๋ ๋์ ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ ์ํด ๋ ธ๋ ฅํ๋ ์ฃผ๋์ด ๊ฐ๋ฐ์์ ๋๋ค.
์น์
0 - Gatsby ์์๋ณด๊ธฐ ๋ฐ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑํ๊ธฐ
Gatsby ํ๋ ์์ํฌ๊ฐ ๋ฌด์์ธ์ง ์์๋ณด๊ณ , ๋ธ๋ก๊ทธ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ฑํด๋ด
์๋ค.
์น์
1 - ๊ฐ๋จํ๊ฒ ํ์ด์ง ๋์๋ณด๊ธฐ
Gatsby๋ก ์์ฑํ ํ๋ก์ ํธ๋ฅผ ์คํํด ์น ์ฌ์ดํธ๋ฅผ ๋์๋ด
์๋ค.
์น์
2 - ๊ธ ๋ชฉ๋ก์ ๋์ ์ค ๋ฉ์ธ ํ์ด์ง ๊ตฌํํ๊ธฐ
๋ธ๋ก๊ทธ ์ฝํ
์ธ ๋ชฉ๋ก์ด ๋์์ง ๋ฉ์ธ ํ์ด์ง์ ํ์ ๊ตฌ์ฑํด๋ด
์๋ค.
์น์
3 - ๋ฉ์ธ ํ์ด์ง์ ์ค์ ๋ฐ์ดํฐ ๋์๋ณด๊ธฐ
GraphQL์ ํตํด ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ๋ฉ์ธ ํ์ด์ง์ ๋์๋ด
์๋ค.
์น์
4 - ํฌ์คํธ ์์ดํ
๋งํฌ๋ฅผ ๋ง๋ค์ด ํด๋น ๊ฒ์๊ธ ํ์ด์ง ์ฐ๊ฒฐํ๊ธฐ
๋ฉ์ธ ํ์ด์ง์ ๋ณด์ด๋ ์ฝํ
์ธ ๋ฅผ ํด๋ฆญํ๋ฉด ํ์ด์ง๊ฐ ์ด๋๋๋๋ก ๋งํฌ๋ฅผ ์ฐ๊ฒฐํด๋ด
์๋ค.
์น์
5 - ๊ฒ์๊ธ ํ์ด์ง ๊ตฌํํ๊ธฐ
์ค์ ๋ธ๋ก๊ทธ ์ฝํ
์ธ ๊ฐ ๋์์ง๋ ํ์ด์ง๋ฅผ ๊ตฌ์ฑํด๋ด
์๋ค.
์น์
6 - 404 ์๋ฌ ํ์ด์ง ๊ตฌํํ๊ธฐ
๋งค์ฐ ์ค์ํ ์์์ด์ง๋ง ์ฝ๊ฒ ์ง๋์น ์ ์๋ ๋ถ๋ถ์ธ 404 ํ์ด์ง๋ฅผ ์ถ๊ฐํด๋ด
์๋ค.
์น์
7 - ๊ฒ์ ์์ง ์ต์ ํ ๋ฐ ์น ์ ๊ทผ์ฑ ํฅ์ ์กฐ์นํ๊ธฐ
๋๊ตฌ๋ ์ฌ์ฉํ ์ ์๊ฒ ์น ์ ๊ทผ์ฑ ํ์ค์ ๋ง์ถฐ๋ณด๊ณ , ๊ฒ์ ๊ฒฐ๊ณผ ์๋จ์ ๋จ๋๋ก SEO ์์
์ ์งํํด๋ด
์๋ค.
์น์
8 - ์ฌ์ดํธ ๋ฐฐํฌ ๋ฐ ์น ๋ง์คํฐ ๋๊ตฌ์ ์ฌ์ดํธ ๋ฑ๋กํ๊ธฐ
๊ฐ๋ฐํ ๋ธ๋ก๊ทธ๋ฅผ ๋ฐฐํฌํด๋ณด๊ณ , ๊ฒ์ ์์ง์ด ๊ฒ์ํ ์ ์๋๋ก ์น ๋ง์คํฐ ๋๊ตฌ์ ๋ธ๋ก๊ทธ๋ฅผ ๋ฑ๋กํด๋ด
์๋ค.
์๊ฐ ์ ํ์ธํด์ฃผ์ธ์!
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
React๋ฅผ ํตํด ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ๋ฐํ๊ณ ์ถ์ผ์ ๋ถ
TypeScript๋ก React ์ฑ์ ๊ฐ๋ฐํ๊ณ ์ถ์ผ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
JavaScript
CSS
React
2,979
๋ช
์๊ฐ์
118
๊ฐ
์๊ฐํ
94
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
์ ์ฒด
37๊ฐ
๋ฌด๋ฃ