โš›๏ธ ๐Ÿš€ ๋ฆฌ์•กํŠธ-์Šคํƒœํ‹ฑ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. - ๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•œ ์ง„๋ณด์ ์ธ ์ •์ -์‚ฌ์ดํŠธ ํ”„๋ ˆ์ž„์›Œํฌ!

๐Ÿ‘Š0๐Ÿ‘Šยท2020๋…„ 2์›” 27์ผ
4

๋‹ค์Œ ๊ธ€์„ ๋ฒˆ์—ญํ–ˆ์Šต๋‹ˆ๋‹ค. ์›๊ธ€์ด ๊ถ๊ธˆํ•˜๋ฉด ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. Introduction and Motivations behind React Static

๋ฒˆ์—ญํ•˜๊ธฐ ์• ๋งคํ•œ ์–ด๋ ค์šด ์šฉ์–ด๋“ค ๋ฏธ๋ฆฌ ์ •๋ฆฌ
1. isoporphic,์•„์ด์†Œ๋ชจํ”ฝ, ๋™ํ˜• :๋™์ผํ•œ ์†Œ์Šค๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์—์„œ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ
2. colocation, ์ฝœ๋กœ์ผ€์ด์…˜, ๋™์ผ์žฅ์†Œ๋ฐฐ์น˜ : ๋™์ผํ•œ ์žฅ์†Œ์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ
3. route, ๊ฒฝ๋กœ, ๋ฃจํŠธ => ๊ฒฝ๋กœ๋กœ ํ†ต์ผ
4. navigate => ํƒ์ƒ‰, navigation => ํƒ์ƒ‰

์ง€๋‚œ ์—…๋ฐ์ดํŠธ๋Š” 2018๋…„ 7์›” 26์ผ์ด๋‹ค.

Nozzlie.io์—์„ , ์„ฑ๋Šฅ๊ณผ ์œ ์ €/๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ๋งค์šฐ ์ง„์ง€ํ•˜๊ฒŒ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค. ์„ธ๊ณ„์ ์ธ ๋ฌธ์ œ๋ฅผ ํ‘ผ๋‹ค๊ณ  ์ฃผ์žฅํ•˜๋Š” ๋‹ค๋ฅธ ์ •์  ์‚ฌ์ดํŠธ ํˆด๋“ค์„ ์‚ฌ์šฉํ•ด์„œ ์ˆ˜๋งŽ์€ ์‚ฌ์ดํŠธ๋“ค์„ ์ถœ์‹œํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์•„์ง๋„ ์šฐ๋ฆฌ์˜ ๋„“์€ ๊ฟˆ์„ ๋งŒ์กฑ์‹œํ‚ค๋Š” ํˆด์„ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋‹ค์Œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค(next.js, gatsby)์ด ์ค€ ํ†ต์ฐฐ๋ ฅ์— ๊ฐ์‚ฌํ•˜์ง€๋งŒ, ๊ณ ๋ ค๋์— ์šฐ๋ฆฌ๋Š” ๋” ๋งŽ์€ ๊ฒƒ์„ ์›ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด ๊ธ€์—์„œ ์šฐ๋ฆฌ์˜ ํ›„๊ธฐ๋ฅผ ๋‚จ๊ฒจ๋ณด๊ณ ์ž ํ•œ๋‹ค.

Next.js

next๋Š” "์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ฆฌ์•กํŠธ ์•ฑ์„ ์œ„ํ•œ ๋ฏธ๋‹ˆ๋ฉ€ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ"๋กœ ์‹œ์ž‘ํ–ˆ๋‹ค. ๊ทธ ์ดํ›„์—๋Š” ์ •์  ์‚ฌ์ดํŠธ๋ฅผ ๋‚ด๋ณด๋‚ด๋Š” ์ง€์›์„ ๋ฐœํ‘œํ–ˆ๋‹ค. ๊นƒํ—™์—์„œ ๋งŽ์€ ์–‘์˜ ์Šคํƒ€๋“ค์„ ๋ฐ›์•˜๊ณ  ๊ฝค ๋น ๋ฅด๊ณ  ์„ค์ •์€ ์‰ฌ์›Œ์„œ ๋งค์šฐ ์œ ๋งํ•œ๊ฒƒ ๊ฐ™์•˜๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์ •์  ๋‚ด๋ณด๋‚ด๊ธฐ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ• ๋•Œ, ๋™ํ˜•์—์„œ ์ •์ ์œผ๋กœ ์ „ํ™˜ํ•  ๋•Œ ๋งค์šฐ ํ›Œ๋ฃกํ•˜์ง€ ๋ชปํ•œ ๋ฌธ์ œ์— ๋งž๋”ฑ๋“œ๋ ธ๋‹ค. ๋ฐ”๋กœ ํ•ซ ๋ฆฌ๋กœ๋”ฉ์˜ ๊ฒฐํ•จ, ์ด์ƒํ•œ ๋ผ์šฐํŒ… ์ „๋žต๊ณผ ๋งค์šฐ ๋น„๋Œ€ํ•œ ๋ฒˆ๋“ค๊ณผ ๊ฐ™์€ ๋‹จ์ ๋“ค์ด์˜€๋‹ค.

์ข‹์•„๋˜ ๊ฒƒ๋“ค

  • ๋งค์šฐ ์‰ฌ์šด ์‹œ์ž‘

  • ์ข‹์€ ๋ฌธ์„œ

  • ๊ฑฐ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ

๋ณ„๋กœ์˜€๋˜ ๊ฒƒ๋“ค

  • ๋™ํ˜• ์•ฑ์„ ์œ„ํ•œ ํ›Œ๋ฃกํ•œ ๊ฒฝํ—˜, ํ•˜์ง€๋งŒ ์ •์  ๊ธฐ๋Šฅ์„ฑ์— ๋Œ€ํ•œ ๊ฒฝํ—˜๊ณผ ์ •์  ํ•ซ ๋ฆฌ๋กœ๋”ฉ์€ ๋ถ€์ฐจ์ ์ด์˜€๋‹ค.(๋Œ€๋ถ€๋ถ„์˜ ์‹œ๊ฐ„์ด, ์ •์  ๊ฒฝ๋กœ์—์„  ํ•ซ ๋ฆฌ๋กœ๋”ฉ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค)

  • ํ…œํ”Œ๋ฆฟ๊ณผ ๋ฐ์ดํ„ฐ ์š”๊ตฌ์‚ฌํ•ญ์˜ ์ฝœ๋กœ์ผ€์ด์…˜(์ข€ ์žˆ๋‹ค ์ž์„ธํžˆ ์–ธ๊ธ‰ํ•˜๊ฒ ์ง€๋งŒ ๋ฏธ๋ฆฌ ๋งํ•˜์ž๋ฉด ๊ฒฐ๊ตญ์€ ๋งค์šฐ DX์™€ ์„ฑ๋Šฅ์— ํ˜•ํŽธ์—†๋‹ค.)

    dx๊ฐ€ ๋ญ์ง€?

  • ๊ฑฐ๋Œ€ํ•œ JS ๋ฒˆ๋“ค๊ณผ ๋ถˆํ•„์š”ํ•œ ๊ฒƒ๋“ค์ด ๋„ˆ๋ฌด ๋งŽ๋‹ค! ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์ค‘๋ณต๋œ ์ฝ”๋“œ๋“ค์ด ์ƒ์„ฑ๋˜๊ณ  ๋‹ค์šด๋กœ๋“œ๋˜๋Š” ์ˆ˜๋งŽ์€ JS ๋ฒˆ๋“ค์„ ๋ชจ๋“  ๊ฒฝ๋กœ๋“ค์ด ๊ฐ–๊ณ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜๋‹ค. ๋ณดํ†ต ์ฝ”๋“œ๋ถ„ํ• ์€ ํ…œํ”Œ๋ฆฟ ์ˆ˜์ค€์—์„œ ์ž‘๋™ํ•˜๋ฉฐ, ํƒ์ƒ‰ํ•  ๋•Œ ์ ์ง„์ ์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ๋งค์šฐ ์ž‘์€ ๋ฐ”์ดํŠธ-ํฌ๊ธฐ์˜ ์ฝ”๋“œ์ฒญํฌ๋ฅผ ์ƒ์„ฑํ•˜์ง€๋งŒ, ์–ด๋–ค ์ด์ƒํ•œ ์ด์œ ๋“ค ๋•Œ๋ฌธ์—, Next๋Š” ๊ฑฐ๋Œ€ํ•œ ๋ฒˆ๋“ค์„ ํ…œํ”Œ๋ฆฟ ์ˆ˜์ค€์ด ์•„๋‹ˆ๋ผ, ๊ฒฝ๋กœ๋งˆ๋‹ค ๊ฐ–๊ฒŒํ•œ๋‹ค. ์—„์ฒญ๋‚œ ์–‘์˜ ์›นํŒจํ‚น๊ณผ ๊ทธ ์ด์ƒ์˜ ํ•„์š”ํ•œ ๋ฌด์—‡์ด ์šฐ๋ฆฌ ์ž…๋ง›์—๋Š” ๊ณผํ•˜๋‹ค.

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

  • ๋‚ด๋ณด๋‚ด๊ธฐ(exporting)๊ฐ€ ๋Š๋ฆฌ๋‹ค. tree-walking ssr ์ „๋žต๊ณผ ๊ฒฐํ•ฉ๋œ ํ…œํ”Œ๋ฆฟ์˜ ๋ฐ์ดํ„ฐ ์ฝœ๋ ‰์…˜ ๋•Œ๋ฌธ์ด๋‹ค. ๋˜ํ•œ, ํŽ˜์ด์ง€ ํ…œํ”Œ๋ฆฟ ๋Œ€์‹ ์— ๊ฒฝ๋กœ๋งˆ๋‹ค ๋ฌด๊ฑฐ์šด JS ๋ฒˆ๋“ค์„ ๋งŒ๋“œ๋Š” Next์˜ ์š”๊ตฌ์‚ฌํ•ญ์€ ์„ฑ๋Šฅ์„ ๋–จ์–ดํŠธ๋ฆฐ๋‹ค.

  • ์–ด๋ ต๊ณ  ๋ณต์žกํ•œ ์ฝ”๋“œ๋ฒ ์ด์Šค. ์šฐ๋ฆฌ๋Š” ์˜คํ”ˆ์†Œ์Šค ๊ฐœ๋ฐœ์ž๋“ค์ด๋‹ค. ๋‹น์—ฐํžˆ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•˜๊ธธ ์›ํ•˜๊ณ  ์‹ฌ์ง€์–ด ๊ทธ๋Ÿด๋ ค๊ณ  ํ•œ๋‹ค! Next์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋Š” ๋ถˆํ–‰ํ•˜๊ฒŒ๋„ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋ฅผ ์œ„ํ•ด ๋„ˆ๋ฌด ๋ณต์žกํ•˜๋‹ค. ์ฃผ๋กœ ๋™ํ˜•์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ง€์›ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ •์ ๋‚ด๋ณด๋‚ด๊ธฐ ๊ฐœ๋ฐœ์„ ๋” ๋ฐœ์ „์‹œํ‚ค๋ ค๊ณ  ํ• ๋•Œ ๋งค์šฐ ๋ถˆํ•„์š”ํ•˜๋‹ค.

Gatsby

Gatsby๋Š” ๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•œ ๋งค์šฐ ์œ ๋ช…ํ•œ ์ •์ -์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋‹ค. reactjs.org๋‚˜ segment.io/blog๊ฐ™์€ ๋งค์šฐ ์ฃผ๋ชฉํ• ๋งŒํ•œ ์‚ฌ์ดํŠธ๋“ค์ด Gatsby๋กœ ๋นŒ๋“œ๋˜์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ถ„๋ช…ํžˆ ์ง„์ง€ํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์—ฌ์งˆ ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ์šฐ๋ฆฌ๋Š” ์ •์ ์‚ฌ์ดํŠธ์— ๋Œ€ํ•ด ์ง‘์ค‘๋˜๊ณ , ๋” ๋น ๋ฅธ ๋นŒ๋“œ์™€ ๋„ค๋น„๊ฒŒ์ด์…˜ ์„ฑ๋Šฅ์— ๋Œ๋ ธ๋‹ค. ์•„๋ฌด๋ฆฌ ๋งํ•ด๋„ Next๋ณด๋‹ค 10๋ฐฐ๋Š” ๋‚˜์•—๋‹ค. ํ•˜์ง€๋งŒ ๋ช‡ ์ฃผ ์‚ฌ์šฉํ›„์— ์šฐ๋ฆฌ์˜ ์š”๊ตฌ์— ๋น„์Šทํ–ˆ์ง€๋งŒ, ๊ฑธ๋ฆฌ์  ๊ฑฐ๋ฆฌ๋Š” ๊ฒƒ๋“ค์ด ์žˆ์—ˆ๋‹ค.

์ข‹์•˜๋˜ ๊ฒƒ๋“ค

  • ๋งค์šฐ ๋น ๋ฅธ ๋ธŒ๋ผ์šฐ์ง•๊ณผ ๋‚ด๋ณด๋‚ด๊ธฐ. ์ด ๋ถ€๋ถ„์€ React-Static์˜ ์œ ์‚ฌํ•œ ๊ตฌ์กฐ์— ๋Œ€ํ•ด ์˜๊ฐ์„ ์คฌ๋‹ค.

  • ์–ด๊ทธ๋ ˆ์‹œ๋ธŒ ํ”„๋ฆฌ๋กœ๋”ฉ.(๊ณต๊ฒฉ์ ์ธ ํ”„๋ฆฌ๋กœ๋”ฉ)

  • ์ ์ ˆํ•œ ์ฝ”๋“œ-๋ถ„ํ• 

  • ์„ฑ์ˆ™ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ƒํƒœ๊ณ„์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ

  • ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ

๋ณ„๋กœ์˜€๋˜ ๊ฒƒ๋“ค

  • ์šฐ๋ฆฌ ์‚ฌ์ดํŠธ๋“ค์˜ ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋„์ž…ํ–ˆ์„ ๋•Œ, ๊ธฐ์กด ๊ฐœ์ธ ๋น„ ์†Œ์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ• ์ง€ ์šฐ๋ฆฌ ๊ฒƒ์„ ๋นŒ๋“œํ• ์ง€ ๊ฒฐ์ •ํ•ด์•ผ ํ–ˆ๋‹ค. ์šฐ๋ฆฌ๊ฒƒ์„ ๋นŒ๋“œํ•˜์ž๊ณ  ๊ฒฐ์ •ํ–ˆ์„๋•Œ, ๊ทธ ํ”„๋กœ์„ธ์Šค์™€ API๋Š” ๋งค์šฐ ํ˜ผ๋ž€์Šค๋Ÿฝ๊ฒŒ ํ–ˆ๊ณ , ๊ฐ€๋ณ๊ฒŒ ๋ฌธ์„œํ™”๋˜์—ˆ์œผ๋ฉฐ, ์šฐ๋ฆฌ๊ฐ€ ๋ฐ”๋ผ๋Š” ๊ฒƒ๋งŒํผ ์œ ๋™์ ์ด์ง€ ์•Š์•˜๋‹ค.

  • ๊ฐœ์ธ ๋น„๋Š” ๋งค์šฐ ํ›Œ๋ฃกํ•œ ํ”Œ๋กœ๊ทธ์ธ ์„ ํƒ์ง€์™€ ์ด๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ์Šคํ…œ์„ ๊ฐ€์ง€๊ณ ์žˆ๋‹ค. ์ด๊ฑด ์›นํŒฉ/๋ฐ”๋ฒจ/๋นŒ๋“œ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๊ธฐ์ˆ ์  ๊ตฌํ˜„์— ์œ ์šฉํ•˜๋ฉฐ ์šฐ๋ฆฌ๋Š” ๋งˆ์Œ์— ๋“ค์—ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ, ์†Œ์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ์— ๊ด€ํ•ด์„  ์„ค์ • ์˜ต์…˜์œผ๋กœ ๋“œ๋Ÿฌ๋‚˜๋Š” ํ•ญ๋ชฉ๋“ค์„ ๋„˜์–ด์„œ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๊ธฐ ์–ด๋ ค์› ๋‹ค. ์ด๋กœ ์ธํ•ด creat-react-app๊ณผ ๊ฐ™์€ ๋„๊ตฌ์—์„œ ejectํ•˜๋Š”๋ฐ ์ง€์นœ ์œ ์ €๋“ค์—๊ฒ ์นœ๊ทผํ•œ ํ”Œ๋žซํผ์ด ๋˜์—ˆ์ง€๋งŒ, ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋„๋ก ๊ฐ•์š”๋‹นํ•˜๋Š” ๋Œ€์‹ , ๋ฐ์ดํ„ฐ๋กœ ๋” ๋งŽ์€ ์ž์œ ๋ฅผ ์›ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ์ œ์•ฝ์„ ๋ฐ›์•˜๋‹ค.

  • ํ…œํ”Œ๋ฆฟ๊ณผ ๋ฐ์ดํ„ฐ ์ฟผ๋ฆฌ๋“ค์ด ๋™์ผ๋ฐฐ์น˜(colocation)๋˜์•ผํ•œ๋‹ค. Next์™€ ๋น„์Šทํ•˜๊ฒŒ ๋งŽ์€ ์ธ์ง€์  ๋‹จ๊ณ„๊ฐ€ ํ•„์š”ํ•˜๊ณ  ๋นŒ๋“œ์™€ ํ”„๋กœ์ ํŠธ์—์„œ ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ์œ ๋ฐœํ•œ๋‹ค. ๊ฐœ๋ฐœ๊ณผ ๋นŒ๋“œ์‹œ์— ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์—์„œ ์ฐพ์€ ๋ชจ๋“  ์ฟผ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ฒ€์ƒ‰ํ•˜๊ณ  ๋‹ค์‹œ ์ฟผ๋ฆฌ๋ฅผ ์ค˜์•ผํ•œ๋‹ค. ์ด๊ฑด ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋””์—์„œ ์™”๋Š”์ง€ ๋˜๋Š” ์ปดํผ๋„ŒํŠธ์— ์–ด๋–ป๊ฒŒ ์ฃผ์ž…๋˜๊ณ  ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ํ˜ผ๋ผ์Šค๋Ÿฝ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.(์ฟผ๋ฆฌ๊ฐ€ ๋ฆฌ์กธ๋ธŒ๋œ ํ›„์—๋Š”, ํ…œํ”Œ๋ฆฟ์˜ props๊ฐ€ ๋งˆ๋ฒ•์ ์œผ๋กœ ๋ฐฐ์น˜๋œ๋‹ค)์ž‘์€ ๊ทœ๋ชจ์—์„  ์ด ์ฝœ๋กœ์ผ€์ด์…˜์€ ์ปดํฌ๋„ŒํŠธ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์ถ”๋ก ์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ, ๋” ํฐ ์ˆ˜์ค€์—์„œ๋Š” ์ค‘์•™ ์œ„์น˜์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ์œ„ํ•œ ์ถ”์ƒํ™”๋ฅผ ํ•  ์ˆ˜ ์—†๊ฒŒ๋ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ค‘์•™ ์œ„์น˜์™€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‹ค ๋ช…ํ™•ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์šฐ๋ฆฌ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ์ดํ„ฐ ์ƒ์‚ฐ์ž๊ฐ€ ์•„๋‹Œ ์†Œ๋น„์ž์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  • Graphql ์•„๋‹ˆ๋ฉด ์ฃฝ๊ธฐ. ๊ฒŒ์ธ ๋น„์—์„œ ์™ธ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฑด(์ ์–ด๋„ ๊ทธ๋“ค์ด ์˜๋„ํ•œ ๋Œ€๋กœ๋ผ๋ฉด) Graphql์„ ์•Œ์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด ์†Œ์Šค-ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๊ณ ํ•ด๋„, GraphQl์„ ์‚ฌ์šฉํ•ด์„œ ์ฟผ๋ฆฌ๋ฅผ ๋‚ ๋ฆฌ๊ณ  ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ๋‹น์‹ ์˜ ๋ฐ์ดํ„ฐ์— ์†Œ์Šค-ํ”Œ๋Ÿฌ๊ธฐ์ธ์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋ฉด, ๋‹น์‹ ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ Gatsby์˜ GraphQL ์Šคํ‚ค๋งˆ๋กœ ์ˆ˜์ง‘๋˜๋„๋ก ์ง์ ‘ ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค. ์‹ฌ์ง€์–ด ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋งค์šฐ ๋‹จ์ˆœํ•˜๋”๋ผ๋„ ๋ง์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—์„ , ์šฐ๋ฆฌ์˜ ๋ฐ์ดํ„ฐ๋Š” ๊ฑฐ์˜ ํ•ญ์ƒ ํ—ค๋“œ๋ฆฌ์Šค CMD(GraphQl๊ธฐ๋ฐ˜๋„ ์žˆ์Œ), JSON ํŒŒ์ผ, ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ ๋ฐ/ ๊ณต๊ฐœ API์—์„œ ๊ฐ€์ ธ์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํฌ์ŠคํŠธ ๋ชจ๋˜ ์‹คํ˜„

์šฐ๋ฆฌ๋Š” ๋งˆ์นจ๋‚ด React๋กœ ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์•ฑ์„ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋Š”์ง€ ์•Œ์•˜์œผ๋ฉฐ SPA์™€ ๋” ์œ ์‚ฌํ•˜๊ณ  ๋™ํ˜• ๋ Œ๋”๋ง ํ”„๋ ˆ์ž„์›Œํฌ์™€๋Š” ๋œ ์œ ์‚ฌํ•œ ๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์ด ๋ถ„๋ช…ํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ง€๋…ํ•œ ์˜๊ฒฌ๋“ค๊ณผ (GraphQl์„ ํฌํ•จํ•˜๋Š”)๋…์ ์ ์ธ ์Šคํ‚ค๋งˆ๋ฅผ ๋ฒ„๋ ธ๊ณ  ๋งˆ์นจ๋‚ด ์ปดํฌ๋„ŒํŠธ-๋™์ผ๋ฐฐ์น˜๋œ ๋ฐ์ดํ„ฐ ์ฟผ๋ฆฌ๋ฅผ ํ•ด์น˜์›Œ๋ฒ„๋ ธ์Šต๋‹ˆ๋‹ค.

์‚ฌ์ดํŠธ์˜ ์†Œ์Šค๋กœ๋ถ€ํ„ฐ ํ”„๋กœ๋•ํŠธ๋กœ ๋๋‚˜๋Š” ๋ฐ์ดํ„ฐ์˜ ํ๋ฆ„์€ ๋งค์šฐ ๋‹จ์ˆœํ•ด์•ผ๋˜๊ณ  ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ๋งŽ์€ ์œ ์—ฐ์„ฑ์„ ์ฃผ์› ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๊ฒฝํ—˜์„ ๋ฐ”ํƒ•์œผ๋กœ ์„ค๊ณ„๋ฅผ ์‹œ์ž‘ํ•œ ๋„๊ตฌ๋Š” ์‚ฌ์šฉ์ž์™€ ๊ฐœ๋ฐœ์ž ๋ชจ๋‘์—๊ฒŒ ๋” ๋‚˜์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ณ  React SPA๋ฅผ ์ •์ -์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ์—๊ฒŒ ์ž์œ ๋ฅผ ๊ฐ€์ ธ๋‹ค์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์Šคํƒœํ‹ฑ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค

๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•œ ์ง„๋ณด์ ์ธ ์ •์ -์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋Š” React๋ฅผ ์†์ƒ์‹œํ‚ค์ง€ ์•Š์€๋ฉด์„œ ๋‹น์‹ ์˜ ์œ ์ €์™€ ๊ฐœ๋ฐœ๋“ค ๋ชจ๋‘์—๊ฒŒ ๋†€๋ผ์šด ๊ฒฝํ—˜์„ ์ฃผ๋ ค๊ณ  ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฏธ์น ๋“ฏํ•œ ์†๋„์™€ SEO-์ค€๋น„๊ฐ€ ๋œ ์ง€๊ตฌ์ƒ์—์„œ ๊ฐ€์žฅ ๋ฆฌ์•กํŠธ์—๊ฒŒ ์นœ์ ˆํ•œ ์ •์ -์‚ฌ์ดํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์–ด๋–ค๊ฒŒ ๋‹ค๋ฅผ๊นŒ?

๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๋‹ค๋ฅธ ์ •์ -์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ์™€ ๋‹ฌ๋ฆฌ React-Static์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์†Œ์Šค์—์„œ ๊ฒฝ๋กœ๋กœ ํ๋ฅด๋Š” ๋ฐฉ์‹์— ๋งค์šฐ ์ง์ ‘์ ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋ชจ๋“  ์ •์  ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ์œ„ํ•œ ํŽธ๋ฆฌํ•œ ์ถ”์ƒํ™” ์ง€์ ์„ ์ œ๊ณตํ•  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฐ์ดํ„ฐ ํŒŒ์ดํ”„ ๋ผ์ด๋‹๊ณผ ๋ฆฌ์•กํŠธ ํ…œํ”Œ๋ฆฟ์„ ๊ฐ€๋Šฅํ•œ ๋ถ„๋ฆฌํ•˜์—ฌ SSR์˜ ๋‹จ์ผ ํŒจ์Šค๋งŒ์œผ๋กœ "์ƒํƒœ๊ฐ€ ์žˆ๋Š”"์œผ๋กœ ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๊ฐœ๋ฐœ ์Šคํ…Œ์ด์ง€


1. ์‚ฌ์ดํŠธ์—์„œ ๋ Œ๋”๋งํ•ด์•ผํ•˜๋Š” ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋Š” ์›ํ•˜๋Š” ์ˆ˜๋‹จ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์ •(configure)ํŒŒ์ผ์— ๋ฏธ๋ฆฌ ์ˆ˜์ง‘๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฐ์ดํ„ฐ๋Š” ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ, ํ—ค๋“œ๋ฆฌ์Šค CMS, Grapqhl ์—”๋“œ ํฌ์ธํŠธ, ๊ณต๊ฐœ API ๋“ฑ ์–ด๋””์„œ๋‚˜ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
2. ๋‹ค์Œ์œผ๋กœ ์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ๋ผ์šฐํŠธ ๋ชฉ๋ก์„ ์ƒ์„ฑํ•˜๊ณ  ๋ Œ๋”๋งํ•  ํ…œํ”Œ๋ฆฟ์„ ์ •์˜ํ•œ ํ›„ ๊ฐ ๋ผ์šฐํŠธ์— ์ ์ ˆํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. props๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ๋งŒํผ ์‰ฝ์Šต๋‹ˆ๋‹ค!
3.RouteProps์™€ StieProps์™€ ๊ฐ™์€ React-Stiatc์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ ๋ผ์šฐํŠธ๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ  ๋‹น์‹ ์ด ์ผ๋ฐ˜์ ์œผ๋กœ ํ•˜๋“ฏ ์•ฑ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
4. ๋ฆฌ์•กํŠธ-์Šคํƒœํ‹ฑ์€ ์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ ๊ฐ•๋ ฅํ•œ ์†๋„์™€ ์ •ํ™•์„ฑ์œผ๋กœ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
5. ์ข…ํ•˜ํ•˜๋Š” ์ •์  ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŠธ๋˜๋Š” CDN์— ์‚ฌ์ดํŠธ๋ฅผ ์—…๋กœ๋“œํ•˜์„ธ์š”!!

๊ณ ๊ฐ ์Šคํ…Œ์ด์ง€

  1. ์œ ์ €์˜ ์ฒซ ํŽ˜์ด์ง€์—์„  ์ •์ ์œผ๋กœ ๋‚ด๋ณด๋‚ธ HTMl ๋ฐ CSS๊ฐ€ ๋‹ค์šด๋กœ๋“ธ๋˜์–ด ์ปจํ…์ธ ๋ฅผ ๊ฐ€๋Šฅํ•œ ๋นจ๋ฆฌ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
  2. ๋™์‹œ์— ๋ Œ๋”๋ง๋œ HTML์œ„์— React๋ฅผ ๋ถ€ํŠธ์ŠคํŠธ๋žฉํ•˜๊ธฐ ์œ„ํ•ด JS์˜ ์ตœ์†Œ๊ฐ’์ด ๋‹ค์šด๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.
  3. ๊ฐ€๋Šฅํ•œ ๋นจ๋ฆฌ ์›น ์‚ฌ์ดํŠธ์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์€ ์ฝ”๋“œ ๋ถ„ํ•  ๋ฐ ๋ฐ์ดํ„ฐ ๋ถ„ํ• ์„ ํ†ตํ•ด ๋‚™๊ด€์ ์œผ๋กœ ํ”„๋ฆฌ-ํŽ˜์น˜๋˜๊ณ  ์บ์‹œ๋ฉ๋‹ˆ๋‹ค.
  4. ๋ชจ๋“  ์ถ”๊ฐ€ ํƒ์ƒ‰์€ ์ฆ‰๊ฐ์ ์ž…๋‹ˆ๋‹ค!

์ด๊ฒƒ์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์˜๋ฏธํ•˜๋Š” ๋ฐ”:

  • ์ฆ‰๊ฐ์ ์ธ ํƒ์ƒ‰ ๋ฐ ์ฆ‰๊ฐ์ €๊ธด ๋งŒ์กฑ. ๋‹น์‹ ์˜ ์‚ฌ์ดํŠธ๋Š” React์˜ ์†๋„๋กœ ์ž‘๋™ํ•˜๋ฉฐ ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ๋ฐ˜์‘์  ์ƒํ˜ธ์ž‘์šฉ ์ „๋ ฅ์งˆ์ฃผ. SEO ๋ฐ ์ •์  ์‚ฌ์ดํŠธ์˜ ์ ์ง„์ /๋ถ„์‚ฐ๋œ(distributed) ๊ฐ•๋ ฅํ•œ ํž˜๋“ค์˜ ์ด์ ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ž๋“ค์  ์œ„ํ•œ ์™„๋ฒฝํ•œ SPA๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์˜๋ฏธํ•˜๋Š” ๋ฐ”:

  • ๊ดด๋กญ์ง€ ์•Š์€ ๊ฐœ๋ฐœ ๋ฐ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜. create-react-app๋กœ ๋งŒ๋“  ์•ฑ์ด๋‚˜ ์–ด๋–ค ๋‹ค๋ฅธ SPA์Šคํƒ€์ผ์˜ ๋ฐ˜์‘ํ˜• ๋นŒ๋“œ ์‹œ์Šคํ…œ๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ ๊ฑฐ์˜ ์ฐจ์ด์ ์ด ์—†์Šต๋‹ˆ๋‹ค. ์Šคํ‚ค๋งˆ๋ฅผ ๊ณต๋ถ€ํ•  ํ•„์š”๋„, ์‚ฌ์šฉ๋  ๋ฌธ๋ฒ•๋„ ์—†์Šต๋‹ˆ๋‹ค. ๋‹จ์ง€ React์™€ Javascript๊ฐ€ ์ „๋ถ€์ž…๋‹ˆ๋‹ค.
  • ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ณด์•ˆ, ๋ผ์šฐํŠธ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๋“ฑ๋“ฑ ๋” ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค! react-static์˜ react-router V4๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ ˆ๋Œ€ ์ปค์Šคํ…€ ๋ผ์ดํ”„์‚ฌ์ดํด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๊ฑด ๋ถ„๋ช…ํ•˜๊ฒŒ dangeroushlySetInnerHTML์ด๋‚˜ ๋„ค๋น„์ด๊ฒŒ์ด์…”๋Š˜ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์–ด๋–ค ๋‹ค๋ฅธ ํŒŒ๊ดด์ ์ธ ๋ฉ”์„œ๋“œ๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฑด ๋‹จ์ง€ ์˜ค๋ž˜๋œ React์ผ ๋ฟ์ž…๋‹ˆ๋‹ค. ์ฆ‰ ๋‹น์‹ ์ด ์ผ๋ฐ˜์ ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜๋Š” ๋ฐฉ์‹๋Œ€๋กœ๋ชจ๋‘ ์ž‘๋™๋œ๋‹ค๊ณ  ์™„๋ฒฝํ•˜๊ฒŒ ๋ฏฟ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ ๋ผ์ดํ”„์‚ฌ์ดํด๊ณผ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํฌํ•จํ•ด์„œ์š”!
  • ๋ฐ์ดํ„ฐ์™€ ์ฟผ๋ฆฌ์— ๊ด€๊ณ„์—†๋‹ค. ์›น ์‚ฌ์ดํŠธ์— ๋Œ€ํ•œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์—ด์‹ฌํžˆ ๋…ธ๋ ฅํ–ˆ์œผ๋ฏ€๋กœ ๋งˆ์ง€๋ง‰์œผ๋กœ ํ•„์š”ํ•œ ๊ฒƒ์€ ๋ฐ์ดํ„ฐ์™€ ํŽ˜์ด์ง€ ์‚ฌ์ด์— ๋ถˆํ•„์š”ํ•œ GrapQL ๋ ˆ์ด์–ด๋‚˜ ์ปค์Šคํ…€ ์ปดํฌ๋„ŒํŠธ ๋ผ์ดํ”„์‚ฌ์ดํด์ž…๋‹ˆ๋‹ค. react-staitc์„ ์‚ฌ์šฉํ•˜๋ฉด, ๊ฒฝ๋กœ์— ๋ฐ์ดํ„ฐ๋ฅผ ์‰ฝ๊ฒŒ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๊ฒƒ์„ ๊ฐ€์ ธ์™€ ํ•œ ๋ฒˆ์— ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฒฝ๋กœ๋กœ ์ „๋‹ฌํ•˜์„ธ์š”. ๋‹ค์–‘ํ•œ react-static ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ
    ์‚ฌ์ดํŠธ์˜ ์–ด๋Š ๊ณณ์—์„œ ์†Œ๋น„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(redenr props, HOC's, ์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์ง„ ๋ชจ๋“  ๊ฒƒ์—์„œ). ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ, ์ฟผ๋ฆฌ ๋ฐ props ๋งคํ•‘์„ ๋ชจ๋‘ ๋‹จ์ผํ•œ ์œ„์น˜๋กœ ์ด๋™ํ•จ์œผ๋กœ์จ ๋ฐ์ดํ„ฐ ํŒŒ์ดํ”„ ๋ผ์ธ์— ๋Œ€ํ•ด ์ฝ”๋“œ๋ฅผ 3๋ฐฐ ์ ๊ฒŒ ์ž‘์„œ์•„๊ณ  ๋ฐ์ดํ„ฐ์˜ ํ˜•ํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ค‘์•™ ์ €์žฅ์†Œ๋ฅผ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • 2๋…„ ๋™์•ˆ ๋ฆฐ ๋นŒ๋“œ. ๋ฐ์ดํ„ฐ ๋ถ„ํ• ์— ๋Œ€ํ•œ react-static์˜ ์ ‘๊ทผ๋ฐฉ์‹์€ ๋งค์šฐ ๋™์ฐฉ์ ์ด๋ฉฐ ๋ชจ๋“  ๊ฒฝ๋กœ์˜ ํ…œํ”Œ๋ฆฟ๊ณผ ๋ฐ์ดํ„ฐ๊ฐ€ ์ตœ์ ํ™”๋˜๊ณ  ๊ตฌ์ฒดํ™”๋œ ๋ถ„์‚ฐ API๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์‚ฌ์ดํŠธ๋Š” ์ˆ˜๋งŒ ํŽ˜์ด์ง€๋กœ ํ™•์žฅ๋˜์–ด ์ฆ‰์‹œ๋กœ๋“œ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๋ชจ๋“  ๋ฐ์ดํ„ฐ ํŽ˜์นญ์€ ๋™์ผํ•œ ๋‹จ์ผ ๋‹จ๊ณ„์—์„œ ์ˆ˜ํ–‰๋˜๋ฏ€๋กœ react-static ๋นŒ๋“œ ์‹œ๊ฐ„์€ ์—„์ฒญ๋‚˜๊ฒŒ ๋น ๋ฆ…๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ ๋ณผ ์ค€๋น„๊ฐ€ ๋˜์…จ์Šต๋‹ˆ๊นŒ?

์šฐ๋ฆฌ์˜ React-Static์œผ๋กœ ๊ตฌ์ถ•๋œ ์‚ฌ์ดํŠธ ๋ชฉ๋ก์ด ์ ์  ๋Š˜์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

60์ดˆ ์•ˆ์— ์‹œ์ž‘
react-static์„ ์ „์—ญ์œผ๋กœ ์„ค์น˜ํ•˜์„ธ์š”

$ yarn global add react-static 
# ๋˜๋Š” 
$ npm install -g react-static

์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค.

$ react-static create

์ด์ œ ์ž์œ ๋กญ๊ฒŒ ์ฝ”๋”ฉํ•˜์„ธ์š”!

profile
ใ…Žใ…Ž

0๊ฐœ์˜ ๋Œ“๊ธ€