์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

React ๊ธฐ๋ฐ˜ Gatsby๋กœ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœํ•˜๊ธฐ v2

Gatsby v5๋ฅผ ํ†ตํ•ด ์ง์ ‘ ๋‚˜๋งŒ์˜ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•ด๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[Gatsby, ํ…์ŠคํŠธ ๊ฐ•์˜] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Gatsby ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  • React๋ฅผ ์‚ฌ์šฉํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ

  • ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”

  • ๋ธ”๋กœ๊ทธ ๋ฐฐํฌ ์ž๋™ํ™”

  • CMS(์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ ์‹œ์Šคํ…œ)์„ ํ™œ์šฉํ•œ ๋ธ”๋กœ๊ทธ ๊ธ€ ๊ด€๋ฆฌ

๋งŽ์€ ๋ถ„๋“ค์ด ์ฐพ์•„์ฃผ์‹  ๋งŒํผ,

๋” ํ’๋ถ€ํ•œ ๋‚ด์šฉ์œผ๋กœ ๋‹ค์‹œ ๋Œ์•„์™”์Šต๋‹ˆ๋‹ค!



์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒŒ๋„ ๋งŽ์€ ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค๊ป˜์„œ ์ œ ์ด์ „ ๊ฐ•์˜์ธ "React ๊ธฐ๋ฐ˜ Gatsby๋กœ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœํ•˜๊ธฐ"์— ์ข‹์€ ํ‰๊ฐ€๋ฅผ ๋‚จ๊ฒจ์ฃผ์…จ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉฐ ๊ฐ•์˜ ๋‚ด์šฉ์ด ๊ตฌ๋ฒ„์ „์ด ๋˜๋ฉด์„œ ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค๊ป˜์„œ ์ง„ํ–‰ํ•˜๋Š” ๋ฐ ๋งŽ์€ ์–ด๋ ค์›€์„ ๊ฒช์œผ์…จ๊ณ , ๋‹จ์ˆœํžˆ ๊ธ€๋งŒ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ๋งŒ ์žˆ์—ˆ๊ธฐ์— ์ฝ˜ํ…์ธ ๊ฐ€ ๋นˆ์•ฝํ•˜๋‹ค๊ณ  ๋Š๊ปด์กŒ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ ๋“ค์„ ๋ฐ˜์˜ํ•˜์—ฌ ์ด๋ฒˆ ๊ฐ•์˜์—์„œ๋Š” ์ตœ์‹  ๋ฒ„์ „์˜ ๋”์šฑ ํ’๋ถ€ํ•œ ๋‚ด์šฉ์„ ํฌํ•จํ•ด ๋‹ค์‹œ ๋Œ์•„์™”์Šต๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„์˜ ์†Œ์ค‘ํ•œ ์˜๊ฒฌ์„ ๋ฐ˜์˜ํ•ด ๋”์šฑ ์™„์„ฑ๋„ ๋†’์€ ๊ฐ•์˜๋ฅผ ์ค€๋น„ํ–ˆ์œผ๋‹ˆ ๋งŽ์€ ๊ด€์‹ฌ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด๋ฒˆ ๊ฐ•์˜์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ


๐Ÿ“Œ ๋”์šฑ ๊ฐ„ํŽธํ•œ ๊ฒŒ์‹œ๊ธ€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์ธ Contentful์„ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ ๋ณด๋‹ค ์‰ฝ๊ฒŒ ๊ฒŒ์‹œ๊ธ€ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•œ Gatsby์˜ Collection Routes ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ Gatsby Head API / Server Side Rendering API / Browser API๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ Masonry ๋ ˆ์ด์•„์›ƒ / ๋ชฉ์ฐจ ๋“ฑ ๋‹ค์–‘ํ•œ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ถ”ํ›„ ๋ธ”๋กœ๊ทธ ์„ฑ๊ณผ ๋ถ„์„ ๋ฐ ๊ฐœ์„ ์„ ์œ„ํ•œ Google Analytics๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก ๊ฐœ๋ฐœ, ๋ฐฐํฌ, SEO๊นŒ์ง€ ๋ชจ๋“  ๊ณผ์ •์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์€ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.

  • ๋ธ”๋กœ๊ทธ ๋ฐฐํฌ ์ดํ›„์˜ ๊ด€๋ฆฌ๋ฅผ ๋”์šฑ ์šฉ์ดํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์†์‰ฝ๊ฒŒ ๋ธ”๋กœ๊ทธ์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋„๋ก ๋”์šฑ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฝ”๋“œ ๋ฒ ์ด์Šค๋ฅผ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

์ง์ ‘ ๋‚˜๋งŒ์˜ ์ฐจ๋ณ„ํ™”๋œ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•ด๋ณด์„ธ์š”!


์ด ์„ธ์ƒ์—์„œ ์œ ์ผํ•˜๊ฒŒ ์กด์žฌํ•˜๋Š” ๋‚˜๋งŒ์˜ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐ€์ง€๊ณ  ์‹ถ์ง€ ์•Š์œผ์‹ ๊ฐ€์š”?

ํ•˜์ง€๋งŒ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ, ๊ฐœ๋ฐœ ์Šคํƒ ์„ ์ •๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฐœํ•˜๊ณ  ๋ฐฐํฌํ• ์ง€, ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋งŽ์€ ๊ณ ๋ฏผ๊ณผ ์–ด๋ ค์›€์ด ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.

ํŠนํžˆ ํ”„๋ก ํŠธ์—”๋“œ์— ์ต์ˆ™ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜, ๊ฐœ๋ฐœ ๊ณผ์ •์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๊ฒฝํ—˜ํ•ด๋ณด์ง€ ์•Š์œผ์‹  ๋ถ„๋“ค์—๊ฒŒ๋Š” ๋”์šฑ ๋ง‰๋ง‰ํ•˜๊ฒŒ ๋Š๊ปด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค์„ ์œ„ํ•ด ์ด ๊ฐ•์˜์—์„œ๋Š” ์—ฌ๋Ÿฌ๋ถ„๋“ค์ด ์ง์ ‘ ๋” ์‰ฝ๊ณ  ํŽธํ•˜๊ฒŒ ๋‚˜๋งŒ์˜ ์ฐจ๋ณ„ํ™”๋œ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ชจ๋“  ๊ณผ์ •์„ ์ฒด๊ณ„์ ์œผ๋กœ ์•ˆ๋‚ดํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ €ํฌ๊ฐ€ ๋งŒ๋“ค ๋ธ”๋กœ๊ทธ๋Š” ์ด๋ ‡์Šต๋‹ˆ๋‹ค.

๋ฉ”์ธ ํŽ˜์ด์ง€ (๋ฐ์Šคํฌํƒ‘ ํ™”๋ฉด)

๊ฒŒ์‹œ๊ธ€ ํŽ˜์ด์ง€ (๋ฐ์Šคํฌํƒ‘ ํ™”๋ฉด)

โ— ํƒœ๋ธ”๋ฆฟ ํ™”๋ฉด๊ณผ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์€ ๋ฐ์Šคํฌํƒ‘ ํ™”๋ฉด๊ณผ ์œ ์‚ฌํ•˜์—ฌ ํฌํ•จํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜ ๋‚ด์šฉ์€ ์ด๋ ‡์Šต๋‹ˆ๋‹ค.

์„น์…˜ 0 - Gatsby ์•Œ์•„๋ณด๊ธฐ ๋ฐ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑํ•˜๊ธฐ
Gatsby ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„๋ณด๊ณ , ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 1 - GraphQL์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ ์ฟผ๋ฆฌํ•˜๊ธฐ
๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€ ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋–ป๊ฒŒ GraphQL์„ ์‚ฌ์šฉํ•ด ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 2 - ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑ ๋ฐ ๋ ˆ์ด์•„์›ƒ ๊ฐœ๋ฐœํ•˜๊ธฐ
ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•˜๊ณ , ๋ชจ๋“  ํŽ˜์ด์ง€์— ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค.

์„น์…˜ 3 - ๊ธ€ ๋ชฉ๋ก์„ ๋„์›Œ์ค„ ๋ฉ”์ธ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœํ•˜๊ธฐ
๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก์ด ๋„์›Œ์งˆ ๋ฉ”์ธ ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 4 - ๊ฒŒ์‹œ๊ธ€ ํŽ˜์ด์ง€ ๊ตฌํ˜„ํ•˜๊ธฐ
์‹ค์ œ ๋ธ”๋กœ๊ทธ ์ฝ˜ํ…์ธ ๊ฐ€ ๋„์›Œ์ง€๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 5 - 404 ์—๋Ÿฌ ํŽ˜์ด์ง€ ๊ตฌํ˜„ํ•˜๊ธฐ
๋งค์šฐ ์ค‘์š”ํ•œ ์š”์†Œ์ด์ง€๋งŒ ์‰ฝ๊ฒŒ ์ง€๋‚˜์น  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ธ 404 ํŽ˜์ด์ง€๋ฅผ ์ถ”๊ฐ€ํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 6 - ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”ํ•˜๊ธฐ
๋‚ด ๋ธ”๋กœ๊ทธ๊ฐ€ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์ƒ๋‹จ์— ๋œฐ ์ˆ˜ ์žˆ๋„๋ก SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”) ์ž‘์—…์„ ์ง„ํ–‰ํ•ด๋ด…์‹œ๋‹ค.

์„น์…˜ 7 - ๋ฐฐํฌ ์ž๋™ํ™”, ๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค ๊ตฌ์„ฑ ๋ฐ ๊ตฌ๊ธ€ ์„œ์น˜ ์ฝ˜์†” ๋“ฑ๋กํ•˜๊ธฐ
์†Œ์Šค์ฝ”๋“œ ๋˜๋Š” ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ • ์‹œ์— ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๋ฐ˜์˜๋˜๋„๋ก ๋ฐฐํฌ ๊ณผ์ •์„ ์ž๋™ํ™” ํ•ด๋ด…์‹œ๋‹ค.
๋ธ”๋กœ๊ทธ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด ์• ๋„๋ฆฌํ‹ฑ์Šค๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , ์›น ๋งˆ์Šคํ„ฐ ๋„๊ตฌ์— ๋ธ”๋กœ๊ทธ๋ฅผ ๋“ฑ๋กํ•ด๋ด…์‹œ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ


Q. ๋ฌด๋ฃŒ ๊ฐ•์˜๋ฅผ ๋Œ€์‹  ์ˆ˜๊ฐ•ํ•ด๋„ ์ƒ๊ด€ ์—†์„๊นŒ์š”?

React ๊ธฐ๋ฐ˜ Gatsby๋กœ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœํ•˜๊ธฐ

๋ฌด๋ฃŒ ๊ฐ•์˜์ด์ง€๋งŒ, ๊ตฌ๋ฒ„์ „์ธ Gatsby v3๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋งŒํผ ์ƒ๋Œ€์ ์œผ๋กœ API ์‚ฌ์šฉ์ด ํŽธ๋ฆฌํ•˜์ง€ ์•Š์•„ ๋‚œ์ด๋„๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๋†’์„ ์ˆ˜ ์žˆ๊ณ , ์ง„ํ–‰ํ•˜๋ฉด์„œ ์—๋Ÿฌ๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ํ•„์š”ํ•œ ์„ ์ˆ˜ ์ง€์‹์ด ์žˆ์„๊นŒ์š”?

โœ” TypeScript์™€ React

โœ” ๊ธฐ์ดˆ์ ์ธ HTML, CSS ๋‚ด์šฉ


Q. ๋ณ„๋„ ์˜์ƒ์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋‚˜์š”?

๋ณธ ๊ฐ•์˜๋Š” ์ด์ „ ๊ฐ•์˜์™€ ๋™์ผํ•˜๊ฒŒ ํ…์ŠคํŠธ ํ˜•ํƒœ์˜ ๊ฐ•์˜๋กœ, ๋ณ„๋„ ์˜์ƒ์„ ์ œ๊ณตํ•˜๊ณ  ์žˆ์ง€ ์•Š์œผ๋‹ˆ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค!

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋‚˜๋งŒ์˜ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ๊ฐœ๋ฐœ๋ถ€ํ„ฐ ๋ฐฐํฌ, SEO๊นŒ์ง€ ๋ชจ๋“  ๊ณผ์ •์„ ์ง์ ‘ ๊ฒช์–ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • TypeScript

  • React

์•ˆ๋…•ํ•˜์„ธ์š”
์ฃผํ˜„๋„์ž…๋‹ˆ๋‹ค.

2,978

๋ช…

์ˆ˜๊ฐ•์ƒ

116

๊ฐœ

์ˆ˜๊ฐ•ํ‰

94

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

33๊ฐœ

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!