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