React: ๋ฆด๋ฆฌ์Šค ํ”„๋กœ์„ธ์Šค ํ˜„๋Œ€ํ™”

์— ๋งŒ๋“  2016๋…„ 04์›” 29์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

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

์–ด๋ ค์›€์— ๊ธฐ์—ฌํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ฒซ ๋ฒˆ์งธ ํ‘ธ์‹œ ๋Œ€์ƒ์œผ๋กœ react-bower repo ์‚ฌ์šฉ

    • fb.me ๋งํฌ ์ƒ์„ฑ / CDNization์ด ๋‚ด๋ถ€ FB ์ธํ”„๋ผ์—์„œ ์ผ์–ด๋‚˜์•ผ ํ•˜๋Š” ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.

  • ์—ฌ๋Ÿฌ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์— ๋Œ€ํ•œ ์ˆ˜๋™ ๋‹จ๊ณ„
  • ์ˆ˜๋™ ๋ฒ„์ „ ์ˆ˜์ •
  • ์—ฌ๋Ÿฌ ์œ„์น˜์— ์žˆ์–ด์•ผ ํ•˜๋Š” ์ž์‚ฐ, ์ง€์  ๊ฐ„์— ๋ณต์‚ฌ

๋ช‡ ๊ฐ€์ง€ ์•„์ด๋””์–ด:

  • ์‚ฌ์ „ ๋ฆด๋ฆฌ์Šค์™€ ์ตœ์ข… ๋ฆด๋ฆฌ์Šค๋ฅผ ๊ตฌ๋ณ„ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์–ธ์ œ๋“ ์ง€ ์ƒˆ๋กœ์šด ์•ŒํŒŒ๋ฅผ ์ถœ์‹œํ•˜๋Š” ๋‹จ์ผ ๋ช…๋ น์ด์–ด์•ผ ํ•˜๋ฉฐ ๊ฐ€๋ฒผ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ตœ์ข… ๋ฆด๋ฆฌ์Šค๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ๋žŒ์ด ์„ค์น˜ํ•˜๊ณ  ์ถ”๊ฐ€ ์š”๊ตฌ ์‚ฌํ•ญ(์˜ˆ: ๋ณ€๊ฒฝ ๋กœ๊ทธ, ์—ฌ๋Ÿฌ ์œ„์น˜์˜ ์ž์‚ฐ)์ด ์žˆ์œผ๋ฏ€๋กœ ์กฐ๊ธˆ ๋” ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  • npm run release ๊ทธ๋Ÿฌ๋ฉด ๋ชจ๋“  ์ž‘์—…์ด ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. ๋Œ€ํ™”์‹ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • GitHub ๋ฆด๋ฆฌ์Šค API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋นŒ๋“œ ์ž์‚ฐ์„ ์ €์žฅํ•˜๊ณ  ๋‹จ๊ณ„๋ฅผ ์ƒ๋žตํ•˜์‹ญ์‹œ์˜ค.
  • cdn.reactjs.org๋ฅผ ์„ค์ •ํ•˜๊ณ  ๊ฑฐ๊ธฐ์—์„œ ๋นŒ๋“œ๋ฅผ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ  fb.me๋ฅผ ์™„์ „ํžˆ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค(์œ„ํ—˜, ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์˜์›ํžˆ ์‹คํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...)

    • ๋Œ€์•ˆ: ๊ธฐ์กด CDN์œผ๋กœ ์ž‘์—…ํ•˜๊ณ  ๋ช…๋ น์— ๋”ฐ๋ผ ๋ฒ„์ „์„ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค(ํ’€ ๊ธฐ๋ฐ˜ ์ž๋™ ์—…๋ฐ์ดํŠธ๋Š” jsfiddle๊ณผ ๊ฐ™์€ ์ง€์—ฐ์„ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠœํ† ๋ฆฌ์–ผ์€ ์ฆ‰์‹œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ž์‚ฐ์ด ํ•„์š”ํ•จ)

  • lerna๋ฅผ ์กฐ์‚ฌํ•˜๊ณ  ์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์—ฌ๋Ÿฌ ํŒจํ‚ค์ง€์— ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด์ƒ์ ์œผ๋กœ๋Š” ๋ฆด๋ฆฌ์Šค๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.
Build Infrastructure

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

์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ ์ข‹์€ ์œ„์น˜์— ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
(@bvaughn ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค)

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

๋Œ€์•ˆ: ๊ธฐ์กด CDN์œผ๋กœ ์ž‘์—…ํ•˜๊ณ  ๋ช…๋ น์— ๋”ฐ๋ผ ๋ฒ„์ „์„ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค(ํ’€ ๊ธฐ๋ฐ˜ ์ž๋™ ์—…๋ฐ์ดํŠธ๋Š” jsfiddle๊ณผ ๊ฐ™์€ ์ง€์—ฐ์„ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠœํ† ๋ฆฌ์–ผ์€ ์ฆ‰์‹œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ž์‚ฐ์ด ํ•„์š”ํ•จ)

Redux๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ๋žŒ๋“ค์„ @mjackson์˜ http://npmcdn.com์œผ๋กœ ์•ˆ๋‚ดํ–ˆ์Šต๋‹ˆ๋‹ค.

@gaearon๋‹˜, ์–ธ๊ธ‰ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฐ€ npmcdn ์—๊ฒŒ ๊ธฐํšŒ๋ฅผ ์ฃผ๊ธฐ๋ฅผ ์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž ์‹œ ๋™์•ˆ @zpao ์—๊ฒŒ ํžŒํŠธ๋ฅผ ์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ;)

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

์ง€์—ฐ๊ณผ ๊ด€๋ จํ•˜์—ฌ ํ˜„์žฌ CDN(CloudFlare)์— 5๋ถ„ ๋™์•ˆ ๋ฆฌ๋””๋ ‰์…˜์„ ์บ์‹œํ•˜๋„๋ก ์ง€์‹œํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์˜ˆ๋ฅผ ๋“ค์–ด https://npmcdn.com/react@15/dist/react.min.js ์— ๋Œ€ํ•œ ์š”์ฒญ์€ npm์œผ๋กœ ํ‘ธ์‹œ๋œ ํ›„ ์ตœ๋Œ€ 5๋ถ„ ํ›„์— ์ตœ์‹  ๋ฆด๋ฆฌ์Šค๋กœ ๋ฆฌ๋””๋ ‰์…˜๋ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ ์ข‹์€ ์œ„์น˜์— ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
(@bvaughn ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค)

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