Razzle: after.js ๋ฐ ๋กœ๋“œ๋งต๊ณผ์˜ ๊ด€๊ณ„

์— ๋งŒ๋“  2018๋…„ 02์›” 06์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jaredpalmer/razzle

์ด ํ”„๋กœ์ ํŠธ์™€ after.js ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ์„ค๋ช…ํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์‚ฌ๋žŒ์ด ๋‘˜ ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์ด ํ”„๋กœ์ ํŠธ๊ฐ€ after.js์— ๋‚จ์•„ ์žˆ๊ฑฐ๋‚˜ ์™„์ „ํžˆ ํก์ˆ˜๋˜๋Š” ๊ฒƒ์ด ๋ณด์ž…๋‹ˆ๊นŒ? (์ด ์ปค๋ฐ‹ ๋•Œ๋ฌธ์— ๋ฌป์Šต๋‹ˆ๋‹ค https://github.com/jaredpalmer/after.js/commit/9406e78c4e7b86a2797ed294a757ef319b4ee93b)

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

Razzle์€ ์•„๋ฌด๋ฐ๋„ ๊ฐ€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. cars.com, coinbase, ๊ทธ๋ฆฌ๊ณ  ์ œ๊ฐ€ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ๋ชจ๋“  ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ํ”„๋กœ์ ํŠธ ์ค‘ ํ•˜๋‚˜๋ฅผ After๋กœ ์˜ฎ๊ธฐ๊ณ  ์‹ถ์ง€๋งŒ ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ธฐ ์ „์— After์—์„œ ๋งŽ์€ ์ž‘์—…์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์•„์ง ์•Œ์•„๋‚ด์ง€ ๋ชปํ•œ ๋‘ ๊ฐ€์ง€ ํฐ ์งˆ๋ฌธ์€ 1) Razzle๋กœ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์—†๋Š” ๋…๋‹จ์ ์ธ After.js ์ตœ์ ํ™”๊ฐ€ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์™€ 2) ์–ธ์  ๊ฐ€ ์ผ๋ถ€ Node.js ๋ฏธ๋“ค์›จ์–ด๋กœ ๋ฆฌํŒฉํ† ๋ง๋  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์ž…๋‹ˆ๋‹ค.

๋กœ๋“œ๋งต:

  • ๋ž˜์ฆ ํ”Œ๋Ÿฌ๊ทธ์ธ
  • ๋” ์„ธ๋ถ„ํ™”๋œ ํŒจํ‚ค์ง€๋กœ ์„ธ๋ถ„ํ™”
  • after.js๊ฐ€ "ํ”Œ๋Ÿฌ๊ทธ์ธ"(๋‚ด ๋ชฉํ‘œ)์ด์–ด์•ผ ํ•˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด ์ž์ฒด์ ์œผ๋กœ ์‹คํ–‰ํ•ด์•ผ ํ•˜๋Š”์ง€ ๊ฒฐ์ •ํ•˜๋˜, ์„ธ๋ถ„ํ™”๋œ razzle ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

๋ชจ๋“  4 ๋Œ“๊ธ€

Razzle์€ ์•„๋ฌด๋ฐ๋„ ๊ฐ€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. cars.com, coinbase, ๊ทธ๋ฆฌ๊ณ  ์ œ๊ฐ€ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ๋ชจ๋“  ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ํ”„๋กœ์ ํŠธ ์ค‘ ํ•˜๋‚˜๋ฅผ After๋กœ ์˜ฎ๊ธฐ๊ณ  ์‹ถ์ง€๋งŒ ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ธฐ ์ „์— After์—์„œ ๋งŽ์€ ์ž‘์—…์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์•„์ง ์•Œ์•„๋‚ด์ง€ ๋ชปํ•œ ๋‘ ๊ฐ€์ง€ ํฐ ์งˆ๋ฌธ์€ 1) Razzle๋กœ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์—†๋Š” ๋…๋‹จ์ ์ธ After.js ์ตœ์ ํ™”๊ฐ€ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์™€ 2) ์–ธ์  ๊ฐ€ ์ผ๋ถ€ Node.js ๋ฏธ๋“ค์›จ์–ด๋กœ ๋ฆฌํŒฉํ† ๋ง๋  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์ž…๋‹ˆ๋‹ค.

๋กœ๋“œ๋งต:

  • ๋ž˜์ฆ ํ”Œ๋Ÿฌ๊ทธ์ธ
  • ๋” ์„ธ๋ถ„ํ™”๋œ ํŒจํ‚ค์ง€๋กœ ์„ธ๋ถ„ํ™”
  • after.js๊ฐ€ "ํ”Œ๋Ÿฌ๊ทธ์ธ"(๋‚ด ๋ชฉํ‘œ)์ด์–ด์•ผ ํ•˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด ์ž์ฒด์ ์œผ๋กœ ์‹คํ–‰ํ•ด์•ผ ํ•˜๋Š”์ง€ ๊ฒฐ์ •ํ•˜๋˜, ์„ธ๋ถ„ํ™”๋œ razzle ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

์ œ ์ƒ๊ฐ์— ์šฐ๋ฆฌ ๋Œ€๋ถ€๋ถ„์€ Razzle์„ ์›ํ•˜์ง€๋งŒ ์„œ๋ฒ„ ์ธก ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ(getInitialProps)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋„ค, ๋‘ ์„ธ๊ณ„์˜ ์žฅ์ ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ after.js๋Š” ์ง€์—ฐ ๋กœ๋“œ ๋„์šฐ๋ฏธ, ๋ Œ๋” ๋ฏธ๋“ค์›จ์–ด ๋ฐ ๊ฒฝ๋กœ ๋„์šฐ๋ฏธ๋กœ ๋ฆฌํŒฉํ„ฐ๋ง๋˜๊ณ  razzle๋กœ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ๊ธฐ๋ณธ ์˜ˆ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

alexjoyner picture alexjoyner  ยท  3์ฝ”๋ฉ˜ํŠธ

JacopKane picture JacopKane  ยท  3์ฝ”๋ฉ˜ํŠธ

sebmor picture sebmor  ยท  4์ฝ”๋ฉ˜ํŠธ

howardya picture howardya  ยท  5์ฝ”๋ฉ˜ํŠธ

gabimor picture gabimor  ยท  3์ฝ”๋ฉ˜ํŠธ