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

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

React ๊ธฐ๋ฐ˜ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ ํ”„๋ ˆ์ž„์›Œํฌ์ธ Gatsby๋ฅผ ํ†ตํ•ด ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋Š” ์ˆ˜์—…์ž…๋‹ˆ๋‹ค :)

Thumbnail

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

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

  • Gatsby ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•

  • SEO ๋ฐ ์›น ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ ์กฐ์น˜ ๋ฐฉ๋ฒ•

  • ๋ธ”๋กœ๊ทธ ๋ฐฐํฌ ๋ฐฉ๋ฒ•

 

ํ•ด๋‹น ๊ฐ•์˜๋Š” ๋Ÿฐ์นญ ์‹œ์  ๊ธฐ์ค€ ๋ฒ„์ „์ธ 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 - ์‚ฌ์ดํŠธ ๋ฐฐํฌ ๋ฐ ์›น ๋งˆ์Šคํ„ฐ ๋„๊ตฌ์— ์‚ฌ์ดํŠธ ๋“ฑ๋กํ•˜๊ธฐ
๊ฐœ๋ฐœํ•œ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ฐฐํฌํ•ด๋ณด๊ณ , ๊ฒ€์ƒ‰ ์—”์ง„์ด ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ์›น ๋งˆ์Šคํ„ฐ ๋„๊ตฌ์— ๋ธ”๋กœ๊ทธ๋ฅผ ๋“ฑ๋กํ•ด๋ด…์‹œ๋‹ค.

์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

  • ๋ณธ ๊ฐ•์˜๋Š” ํ…์ŠคํŠธ ํ˜•ํƒœ์˜ ๊ฐ•์˜๋กœ, ๋ณ„๋„ ์˜์ƒ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ๐Ÿ˜€

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

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

  • React๋ฅผ ํ†ตํ•ด ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • TypeScript๋กœ React ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

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

  • JavaScript

  • CSS

  • React

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

2,979

๋ช…

์ˆ˜๊ฐ•์ƒ

118

๊ฐœ

์ˆ˜๊ฐ•ํ‰

94

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

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

์ „์ฒด

37๊ฐœ

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

์ˆ˜๊ฐ•ํ‰

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

๋ฌด๋ฃŒ