Gutenberg: Gutenberg๋ฅผ์œ„ํ•œ JavaScript ํ”„๋ ˆ์ž„ ์›Œํฌ ์„ ํƒ (~ WordPress)

์— ๋งŒ๋“  2017๋…„ 09์›” 15์ผ  ยท  271์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: WordPress/gutenberg

์ตœ๊ทผ Matt์˜ ReactJS ์ง€์› ์ค‘๋‹จ ๋ฐœํ‘œ์—


์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์—ฌ๊ธฐ์„œ ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉํ–ฅ์œผ๋กœ ์›€์ง์ด๊ณ  ์žˆ๋‹ค๊ณ  ๋ฏฟ๊ธฐ ๋•Œ๋ฌธ์—์ด ๋ฌธ์ œ๋Š” ๊ตฌํ…๋ฒ ๋ฅดํฌ๋ฅผ์œ„ํ•œ ๋‹ค์–‘ํ•œ JavaScript ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๋Œ€ํ•œ ์ƒ๊ฐ์„ ๊ณต์œ  ํ•  ์ˆ˜์žˆ๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค (WordPress Core๋กœ ์ด๋™).

๐Ÿ›ณ JavaScript ํ”„๋ ˆ์ž„ ์›Œํฌ!

IMHO ์—ฌ๊ธฐ์—๋Š” ๋‘ ๋ช…์˜ ์ €๋ช…ํ•œ ๊ฒฝ์Ÿ์ž๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. VueJS
  2. Preact
  3. ๊ธฐํƒ€ ์˜ต์…˜ ( AngularJS , EmberJS , Polymer , MarkoJS , InfernoJS , Aurelia ๋“ฑ)

ํ† ๋ก ์„ ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๊ธฐ์— ๋ช‡ ๊ฐ€์ง€ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

### โšก๏ธ VueJS :

  • PRO : ์ดˆ๋ณด์ž ์นœํ™”์ 
  • PRO : Laravel์˜ ์ž…์ฆ ๋œ ์„ฑ๊ณต ์‹ค์ 
  • PRO : ๋งŽ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›์œผ๋กœ Preact์— ๋น„ํ•ด ํ›จ์”ฌ ๋” ์ธ๊ธฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
  • PRO : Preact๋ณด๋‹ค ๋” ๋งŽ์€ ๊ธฐ์—ฌ์ž
  • ๋‹จ์  : ์ฃผ์š” ์‚ฌ๋žŒ ์˜์กด์„ฑ

๐ŸŽฏ ์ €๋Š” WordPress๊ฐ€ VueJS๋กœ ํ›จ์”ฌ ๋” ์ž˜ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. VueJS๋Š” ๋งŽ์€ ํŒ”๋กœ์›Œ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์ดˆ๋ณด์ž๊ฐ€ ์ฑ„ํƒํ•˜๊ธฐ๊ฐ€ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋˜ํ•œ WordPress์— ํฐ ์Šน๋ฆฌ๋กœ ๋ฐ”๋€” ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์—์„œ VueJS๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•ด ์™”์œผ๋ฉฐ ๊ทธ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ WP ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ (์˜ˆ : Vue ๋ฐ Laravel๊ณผ์˜ ํ†ตํ•ฉ)๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” WP ํ”„๋กœ์ ํŠธ ๋ฐ ๋น„ WP ํ”„๋กœ์ ํŠธ์—์„œ ์ž์‹ ์˜ ๊ฒฝํ—˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฏธ Laravel / WP ๊ฐœ๋ฐœ์ž์˜ ๋Œ€๊ทœ๋ชจ ํฌ๋กœ์Šค ์˜ค๋ฒ„๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ ํ•ด๋‹น ๊ฐœ๋ฐœ์ž๊ฐ€ Laravel, Vue ๋ฐ WP๋ฅผ ๋™์‹œ์— ์ถ”์ง„ํ•˜๋Š” ๋ฐ ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋™์ผํ•œ js ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

โšก๏ธ ์ •ํ™•ํ•œ :

  • ์žฅ์  : ๋” ์‰ฌ์šด ์ „ํ™˜
  • PRO : VueJS์™€ ๊ฑฐ์˜ ๊ฐ™์€ ์–‘์˜ ๊ธˆ์ „์  ์ง€์›์œผ๋กœ ์ง„ํ™”ํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ
  • PRO : React ๊ธฐ๋ฐ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํ•˜์œ„ ์ง‘ํ•ฉ์€ Preact ๋ฐ compat์—์„œ ์—ฌ์ „ํžˆ ์ž˜ ์ง€์›๋ฉ๋‹ˆ๋‹ค.
  • ๋‹จ์  : ์ „ํ™˜์œผ๋กœ ์ธํ•ด ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•˜๊ณ  ํ˜ผ๋ž€ ์Šค๋Ÿฌ์šธ ์ˆ˜ ์žˆ์Œ (์ดˆ๋ณด์ž ์šฉ)
  • ๋‹จ์  : ์ฃผ์š” ์‚ฌ๋žŒ ์˜์กด์„ฑ

๐Ÿค” ๋ฆฌ์†Œ์Šค :

๐Ÿ™Œ ์ข‹์•„ํ•˜๋Š” JS ํ”„๋ ˆ์ž„ ์›Œํฌ์™€ ๊ทธ ์ด์œ ๋ฅผ ๊ณต์œ ํ•˜์„ธ์š”?

๋‹น์‹ ์ด ์ข‹์•„ํ•˜๋Š” JS ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋‹น์‹ ์ด ์ข‹์•„ํ•˜๋Š” JS ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ ์–ด๋–ป๊ฒŒ Gutenberg๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ถ”์ƒํ™” PR์„ ๊ตฌ์ถ• ํ•  ์ˆ˜์žˆ๋Š” ์ด์œ ์™€ ์‹œ๊ฐ„์„ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด?

๊ฑด๋ฐฐ!


์—…๋ฐ์ดํŠธ 2017-09-23

๋ฐ˜์ „

ํ™€๋ฆฌ ๋ชฐ๋ฆฌ! React๊ฐ€ ๋‹ค์‹œ ๋Œ์•„ ์™”์Šต๋‹ˆ๋‹ค. WordPress๊ฐ€ ๊ทธ๋žฌ์Šต๋‹ˆ๊นŒ? ํ™•์‹คํ•˜์ง€ ์•Š๋‹ค! ์˜ค์ „ 3์‹œ์ด๊ณ  ๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋งค์šฐ ํฅ๋ถ„๋ฉ๋‹ˆ๋‹ค! ๋‹น์‹ ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ!

React, Jest, Flow ๋ฐ Immutable.js ๋‹ค์‹œ ๋ผ์ด์„ ์Šค

๋‹ค์Œ ์ฃผ์—๋Š” ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ ์ธ React, Jest, Flow ๋ฐ Immutable.js๋ฅผ MIT ๋ผ์ด์„ ์Šค์— ๋”ฐ๋ผ ๋‹ค์‹œ ๋ผ์ด์„ ์Šค ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. React๋Š” ์›น์šฉ ์˜คํ”ˆ ์†Œ์Šค ์†Œํ”„ํŠธ์›จ์–ด์˜ ๊ด‘๋ฒ”์œ„ํ•œ ์ƒํƒœ๊ณ„์˜ ํ† ๋Œ€์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์žฌ ๋ผ์ด์„ ์Šคํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋น„ ๊ธฐ์ˆ ์  ์ธ ์ด์œ ๋กœ ์ง„ํ–‰ ์ƒํ™ฉ์„ ๋ณด๋ฅ˜ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๊ฒฐ์ •์€ ์šฐ๋ฆฌ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋Œ€ํ•œ ์‹ค๋ง๊ณผ ๋ถˆํ™•์‹ค์„ฑ์˜ ๋ช‡ ์ฃผ ํ›„์— ๋‚˜์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ BSD + ํŠนํ—ˆ ๋ผ์ด์„ผ์Šค๊ฐ€ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ช‡ ๊ฐ€์ง€ ์ด์ ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ๋ฏฟ์ง€๋งŒ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฒฐ์ •์ ์œผ๋กœ ์„ค๋“ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค.

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

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

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

์ œ ์ƒ๊ฐ์—๋Š” MIT ๋ผ์ด์„ ์Šค์™€ ๊ฐ€์žฅ ํ™œ๋ฐœํ•˜๊ณ  ๊ฐ€์žฅ ํฐ ์˜คํ”ˆ ์†Œ์Šค JS ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด React๊ฐ€ ๊ณ ์ˆ˜ ํ•  ์ˆ˜์žˆ๋Š” ํ™•์‹คํ•œ ์„ ํƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ํˆฌํ‘œ๋Š” ์ด์ œ React๋กœ ๋Œ์•„ ์™”์Šต๋‹ˆ๋‹ค . โ€” ์ธ๋ฅ˜์— ๋Œ€ํ•œ ๋ฏฟ์Œ์ด ํšŒ๋ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋น„์Šทํ•œ ๋Œ“๊ธ€ ๋Œ€์‹  ๐Ÿ‘๋กœ ํˆฌํ‘œํ•˜์„ธ์š”.

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

๋‚ด ํˆฌํ‘œ๋Š” VueJS์ž…๋‹ˆ๋‹ค.

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

๋‚ด ํˆฌํ‘œ๋Š” VueJS์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” VueJS๋ฅผ ์„ ํƒํ•œ๋‹ค

Vue๋Š” ํ›Œ๋ฅญํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ์•ž์œผ๋กœ์˜ ์„ ํƒ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

Angular JS

VueJS์— ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์œ„์—์„œ ์„ค๋ช…ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ์ดˆ๋ณด์ž์—๊ฒŒ ์นœ์ˆ™ํ•˜๋ฉฐ Laravel์—์„œ ์„ฑ๊ณต์ ์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ์™„๋ฒฝํ•œ ์„ ํƒ์ž…๋‹ˆ๋‹ค.

Vue JS์—๋„ ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

"I prefer Vue"๋˜๋Š” "I want XY"๋ผ๊ณ  ์™ธ์น˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋Š” ์—ฌ๊ธฐ์„œ ๊ฒฐ์ •์„ ๋‚ด๋ฆฌ๋Š” ๋ฐ ๋„์›€์ด๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํˆฌํ‘œ๋ฅผํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ํ‰๊ฐ€ํ•  ๋•Œ ๊ฒฐ๊ณผ๋ฅผ ๋ฌธ์„œํ™”ํ•˜๋Š” ์žฅ์†Œ ์—ญํ• ์„ ํ•  ์ˆ˜์žˆ๋Š” ์Šค๋ ˆ๋“œ๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋Œ€์‹  ์ด๋ชจํ‹ฐ์ฝ˜ ๋ฐ˜์‘ ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

Vue์™€ ํ•จ๊ป˜ ๊ฐˆ ๊ฒŒ์š”. ๋ฐฐ์šฐ๊ณ  ์ ์‘ํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Preact๋ณด๋‹ค ๋…ผ๋ž€์ด ์ ์Šต๋‹ˆ๋‹ค.

๋•Œ๋•Œ๋กœ ๋ฐœ์ƒํ•˜๋Š” "ํ•ต์‹ฌ ์‚ฌ์šฉ์ž ์˜์กด์„ฑ"๋ฌธ์ œ์— ๋Œ€ํ•ด ๋ชจ๋“  WordPress ๊ธฐ๋Šฅ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋˜๋Š” ์•Œ๋ ค์ง€์ง€ ์•Š์€ ๊ธฐ์ˆ ์ด ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? Koop์€ ์˜ค๋ž˜๋œ ๋ฏธ๋””์–ด ์ฒ˜๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ–ˆ๊ณ  Weston์€ ์ˆ˜๋งŽ์€ Customizer ์ž‘์—…์„ ์ˆ˜ํ–‰ํ–ˆ์œผ๋ฉฐ Matรญas์™€ ๋ช‡๋ช‡ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ Gutenberg์—์„œ ์ž‘์—…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜๋Š” ๊ทธ๊ฒƒ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์„ ์ž˜๋ชป๋œ ๋ฐฉ์‹์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์–ด๋–ค ์„ ํƒ์— ๋Œ€ํ•œ "ํ•ต์‹ฌ ์‚ฌ๋žŒ ์˜์กด์„ฑ"์€ ๋ถ‰์€ ์ฒญ์–ด์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ์ฑ„ํƒ์„ ํ†ตํ•ด ํ•ต์‹ฌ ์ธ๋ ฅ ์˜์กด์„ฑ์ด ์™„์ „ํžˆ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. WordPress๋Š” ํ•œ๋•Œ ํ•ต์‹ฌ ์ธ๋ฌผ (Mike ๋ฐ Matt) ์˜์กด์„ฑ ํ”„๋กœ์ ํŠธ์˜€์Šต๋‹ˆ๋‹ค. ์ž…์–‘์„ ํ”ผํ•˜๊ธฐ์œ„ํ•œ ์•ฝํ•œ ์ฃผ์žฅ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ์™„์ „ํžˆ ์ž˜๋ชป ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋•Œ๋•Œ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ์ƒ๊ฐ์˜ ๊ณตํ†ต๋œ ์‹ค์ด๋ฉฐ ๊ฒ‰๋ณด๊ธฐ์— ๋†’์€ ์ค‘์š”์„ฑ์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

@swissspidy ์˜ ๋Œ“๊ธ€์—

VueJS์— ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ ์‘ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์‰ฝ์Šต๋‹ˆ๋‹ค.

์›น ๊ตฌ์„ฑ ์š”์†Œ (Polymer๊ฐ€ ์—†์ง€๋งŒ ๊ฐ€์ƒ DOM์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ lit-html ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ)๋Š” ์‹ฌ๊ฐํ•˜๊ฒŒ ๊ณ ๋ คํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ”Œ๋žซํผ๊ณผ ํ‘œ์ค€์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚˜ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ณด๋‹ค ํ›จ์”ฌ ๋‚ซ์Šต๋‹ˆ๋‹ค! ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ์™€ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ƒํ˜ธ ์šด์šฉ ํ•  ์ˆ˜์žˆ๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ๋ฏธ๋ž˜์˜ ์•ˆ์ „ํ•œ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. (Vue, Angular, React-ํ˜„์žฌ ๋‹ค๋ฅธ ์ •๋„ : https://custom-elements-everywhere.com/)

ํ•„์š”ํ•œ ๊ฒฝ์šฐ Vue ๋˜๋Š” ์›น ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๋Š”์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋•๊ฒŒ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ Gutenberg์— ๋Œ€ํ•œ PR # 2463 _ "Framework-agnostic block interoperability (Vanilla, Vue)"_

๋ช‡ ๊ฐ€์ง€ ์ด์œ ๋กœ Vue.js์— ๊ธฐ๋Œ€์–ด ๋ณด๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

  1. PHP ํ”„๋ ˆ์ž„ ์›Œํฌ Laravel ๋‚ด์—์„œ ์ž…์ฆ ๋œ ์‹ค์ .
  2. ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ”ฝ์—… ๋ฐ ์ฑ„ํƒ์ด ์‰ฌ์šด ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  3. ์šฐ๋ฆฌ๊ฐ€ React์—์„œ ๋ฉ€์–ด์ง€๋ฉด ๊นจ๋—ํ•˜๊ณ  ํ™•์‹คํ•˜๊ฒŒ ๋ฉ€์–ด์ง€๊ฒŒ ๋งŒ๋“œ์‹ญ์‹œ์˜ค (Preact๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ค ์˜๋ฏธ์—์„œ (React)์— ์ง‘์ฐฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค).

๋‚ด ์˜๊ฒฌ์ด์ง€๋งŒ ๋” ๋‚˜์€ ์„ ํƒ ์ธ ๊ฒƒ ๊ฐ™๊ณ  ๋‹ค๋ฅธ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด Vue๋ฅผ ์„ ํ˜ธํ•˜๋Š” ๊ฒƒ ๊ฐ™์œผ๋ฉฐ ์ ์–ด๋„ ์–ด์จŒ๋“  ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

Vue๋Š” Preact๋ณด๋‹ค ๋” ํฐ ์ถ”์ง„๋ ฅ๊ณผ ๋” ๋‚˜์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. (์ƒํƒœ ๊ด€๋ฆฌ์™€ ํ•จ๊ป˜ ์ œ๊ณต๋˜๊ธฐ ๋•Œ๋ฌธ์—) ๋” ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ๋” ๋ถ€๋“œ๋Ÿฌ์šด ํ•™์Šต ๊ณก์„ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์„œ๋Š” _excellent_์ž…๋‹ˆ๋‹ค.

Preact์— ๋Œ€ํ•œ ๋‚˜์˜ ๊ด€์‹ฌ์€ ๋ฒ•์ ์œผ๋กœ ์•ˆ์ „ํ•˜๋‹ค๊ณ  ๋Š๋ผ๊ธฐ์—๋Š” React์™€ ๋„ˆ๋ฌด ํก์‚ฌํ•˜๊ณ  (React์˜ ํŠนํ—ˆ๋Š” Preact๋ฅผ ํฌํ•จ ํ•  ์ˆ˜ ์žˆ์Œ) React์™€๋Š” ๋‹ฌ๋ฆฌ ๋‹จ์ˆœํ•œ ํฌํŠธ (๋„์šฐ๋ฏธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ์„ ๊นฐ ์ˆ˜์žˆ๋Š” _ ์ถฉ๋ถ„ํ•œ ์ฐจ์ด๊ฐ€ ์žˆ์Œ)๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Vue ๋๊นŒ์ง€ ๋ฒ ์ด๋น„ !!

  • [x] [Gitlab] (https://about.gitlab.com/2016/10/20/why-we-chose-vue/)
  • [x] [HN] (https://news.ycombinator.com/item?id=14410190)
  • [x] [PixelJets] (http://pixeljets.com/blog/why-we-chose-vuejs-over-react/)

Github ๋ณ„-> ์—ฌ๊ธฐ
Vue.js ๐Ÿ––์ด๋ผ๋ฉด WordPress ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ ˆ๋Œ€์ ์œผ๋กœ ๊ธฐ๋ปํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Vue๋Š” ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ํ›Œ๋ฅญํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๋Œ€ํ•œ ์ •๊ธฐ์  ์ธ ์—…๋ฐ์ดํŠธ / ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

์ถ”์‹ . ๋ฉ‹์ง„ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฒฝํ—˜์„ ์œ„ํ•ด https://chat.vuejs.org์— ๊ฐ€์ž…ํ•˜์„ธ์š”.

@jbreckmckye ๋Œ€ํ™”๋ฅผ ํƒˆ์„ ์‹œํ‚ค๋ ค๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ํŠนํ—ˆ ์กฐํ•ญ์ด ๋ฌด์—‡์ธ์ง€ ์ดํ•ดํ•ฉ๋‹ˆ๊นŒ? ๋‹ค๋ฅธ ํšŒ์‚ฌ์˜ ํŠนํ—ˆ ์†Œ์†ก์œผ๋กœ๋ถ€ํ„ฐ ํŽ˜์ด์Šค ๋ถ์„ ๋ณดํ˜ธํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์šฐ๋ฆฌ ํšŒ์‚ฌ๊ฐ€ ์Šค๋งˆํŠธ ๋ƒ‰์žฅ๊ณ ๋ฅผ ๋งŒ๋“ค๊ณ  UI์—์„œ ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๊ฐ€์ • ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ด๊ฒƒ์— ๋Œ€ํ•œ ํŠนํ—ˆ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ  FB๊ฐ€ ๊ทธ ํŠนํ—ˆ๋ฅผ ์นจํ•ดํ•˜๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค๊ณ  ๊ฐ€์ • ํ•ด ๋ด…์‹œ๋‹ค. ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ์†Œ์†ก์„ ์ œ๊ธฐํ•˜๋ฉด ์šฐ๋ฆฌ๋Š” ๋” ์ด์ƒ ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ•˜๋Š” ํŠนํ—ˆ์™€๋Š” ์•„๋ฌด ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค (ํŽ˜์ด์Šค ๋ถ์ด ...

Vue.js ํ•ต์‹ฌ ๋ฉค๋ฒ„๋กœ์„œ ๋ฒ„์Šค ํŒฉํ„ฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์ด ํ˜„์žฌ ๋งค์šฐ ์ œ๊ธฐ ๋œ ์š”์ ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์œผ๋ฉฐ, ์ด์ œ ์ผ๋ถ€ ์šฐ๋ ค ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๊ธฐ์œ„ํ•œ ์กฐ์น˜๋ฅผ ์ทจํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

1) npm ์šฉ Vue.js ์กฐ์ง ๊ณ„์ •์œผ๋กœ ํŒ€์œผ๋กœ ๋” ์‰ฝ๊ฒŒ ๊ฒŒ์‹œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
2) ์šด์˜์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋‚ด๋ถ€์ ์œผ๋กœ ์„ธ๋ถ€ ์ •๋ณด๋ฅผ ๊ด€๋ฆฌ (์›น ์‚ฌ์ดํŠธ ๋“ฑ)
3) ๊ธฐ์—ฌ์ž๋ฅผ ์œ ์ธํ•˜๊ณ  ์„ฑ์žฅํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐฉํ˜• ์ง‘๋‹จ์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. https://medium.com/the-vue-point/vue-is-now-on-opencollective-1ef89ca1334b
4) Vue ์ƒํƒœ๊ณ„๊ฐ€ ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ–ˆ์œผ๋ฉฐ ์ ์  ๋” ๋งŽ์€ ํ•ต์‹ฌ ์ €์žฅ์†Œ ๊ธฐ์—ฌ๊ฐ€ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ž์ฒด์—์„œ ๋‚˜์˜ต๋‹ˆ๋‹ค. https://www.youtube.com/watch?v=993X1kiisFE
5) ๊ณต์‹ Vue ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์‚ดํŽด๋ณด๋ฉด ์‹ค์ œ๋กœ ๋งŽ์€ ์ˆ˜์˜ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๊ฐ€ Evan๋ณด๋‹ค ๋” ๋งŽ์€ ๋‹ค๋ฅธ ํ•ต์‹ฌ ํŒ€ ๊ตฌ์„ฑ์›์— ์˜ํ•ด ๊ด€๋ฆฌ๋˜๊ณ  ์žˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ „์ฒด์ ์œผ๋กœ Vue.js๋Š” ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ '๋ฒ„์Šค ํŒฉํ„ฐ'๊ฐ€ ํฌ๊ฒŒ ๊ฐ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค. @philiparthurmoore๊ฐ€ ์ง€์ ํ–ˆ๋“ฏ์ด Evan์€ ํ•ญ์ƒ ํฐ ์ฐธ์—ฌ๋ฅผ ํ•  ๊ฒƒ์ด๋ฉฐ ๊ทธ๊ฒƒ์€ ์ข‹์€ ์ผ์ž…๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— VueJS ํŒฌ์ด ๋งŽ์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ React์—์„œ Vue๋กœ ๋Œ€๊ทœ๋ชจ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•œ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฒฝ๋กœ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด Preact๋Š” React์™€ API ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์„ ๊ฐ์•ˆํ•  ๋•Œ ํ›จ์”ฌ ๋” ์‹ค์šฉ์ ์ธ ์„ ํƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. Vue๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋ ค๋ฉด ํ›จ์”ฌ ๋” ๊ด‘๋ฒ”์œ„ํ•œ ์žฌ ์ž‘์„ฑ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

@patrickgalbraith ์‚ฌ์‹ค Preact๋ฅผ ๊ณ ๋ คํ•˜๋Š” ์ž˜๋ชป๋œ ์ด์œ ์ž…๋‹ˆ๋‹ค. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ๋” ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์—๊ฐ€ ์•„๋‹ˆ๋ผ ์žฅ์ ์œผ๋กœ ํŒ๋‹จํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. Preact์—์„œ ๋‹ค์Œ ๋ฌธ์ œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • VueJS์— ๋น„ํ•ด ๋” ์ž‘์€ ์ปค๋ฎค๋‹ˆํ‹ฐ
  • Code Smells โ€” ๋งค์šฐ ์œ ์‚ฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ์˜ ์ „ํ™˜์œผ๋กœ ์ธํ•ด ์ž˜๋ชป๋œ ์‚ฌ๋ก€๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (๋” ๋น ๋ฅธ ๊ฒฝ๋กœ๋ผ๋Š” ๋ถ„๋ช…ํ•œ ์ด์œ  ๋•Œ๋ฌธ).
  • Preact๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ์€ ์–ด์จŒ๋“  React๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค (์Šค๋ ˆ๋“œ์—์„œ ์ฝ์œผ์‹ญ์‹œ์˜ค)

ํ•œ์ •๋œ ๋ฐฉ์‹์œผ๋กœ ๋งŒ ํ”„๋ฆฌ ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์ด ๋ฐ”๋กœ ์ œ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค.

@ blake-newman ๋“ค๋ ค ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ’ฏ

๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ๋” ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์—๊ฐ€ ์•„๋‹ˆ๋ผ ์žฅ์ ์œผ๋กœ ํŒ๋‹จํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ. ์ด๊ฒƒ์€ ์žฅ๊ธฐ์ ์ธ ๊ฒฐ์ •์ž…๋‹ˆ๋‹ค.

@patrickgalbraith ์ „์ฒด ํ”„๋กœ์ ํŠธ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ๊ณต์ •ํ•œ ์ฃผ์žฅ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด์„ผ์Šค ๋ฌธ์ œ๋ฅผ ํ”ผํ•˜๊ธฐ์œ„ํ•œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ถ€๋ถ„์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„์ง ์ดˆ๊ธฐ ๋‹จ๊ณ„์ด๋ฏ€๋กœ @ahmadawais ๋Š” ๋ฌธ์ œ๊ฐ€ ์ ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ Vue, React ๋ฐ Preact๋Š” ๋งค์šฐ ์œ ์‚ฌํ•œ ํŒจ๋Ÿฌ๋‹ค์ž„์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘˜ ์‚ฌ์ด๋ฅผ ์‰ฝ๊ฒŒ ์ „ํ™˜ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ฐจ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฒฝ์šฐ์—๋Š” ์™„์ „ํžˆ ์‹ค์šฉ์ ์ด์ง€๋Š” ์•Š์ง€๋งŒ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ‰ํ™”๋ฅผ ๋„์šธ ์ˆ˜์žˆ๋Š” ๋„๊ตฌ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/SmallComfort/react-vue

๋™์ผํ•œ ๋„๊ตฌ๋ฅผ ๋น„๊ตํ•˜์ง€๋Š” ์•Š์ง€๋งŒ์ด ๊ธฐ์‚ฌ์—์„œ๋Š” ๊ณ ๋ คํ•ด์•ผ ํ•  ์ค‘์š”ํ•œ ์‚ฌํ•ญ์„ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค. https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

@ blake-newman ๊ฐœ๋ฐœ์— 6 ๊ฐœ์›” ์ด์ƒ ๊ฑธ๋ฆฐ๋‹ค๋Š” ์ ์„ ๊ณ ๋ คํ•  ๋•Œ ์‹ค์ œ๋กœ ์ดˆ๊ธฐ ๋‹จ๊ณ„์ž…๋‹ˆ๊นŒ? ๋˜ํ•œ Calypso๋Š” 2 ๋…„์ด ๋„˜์—ˆ์Šต๋‹ˆ๋‹ค.

์–ด์จŒ๋“  ๋‚˜๋Š” ๋‹น์‹ ์ด React์™€ Vue ์‚ฌ์ด๋ฅผ ์ „ํ™˜ํ•˜๋Š” ๊ฒƒ์ด ์‰ฝ๋‹ค๊ณ  ๋งํ•œ ๊ฒƒ์„ ๊ฐ์•ˆํ•  ๋•Œ ๋ฌธ์ œ๊ฐ€๋˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

์Šคํ…์‹ค๋„ ์œ ๋ง ํ•ด ๋ณด์ž…๋‹ˆ๋‹ค.

https://github.com/ionic-team/stencil-starter

๋‚ด ์˜๊ฒฌ์€ ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ์‚ฌํ•ญ์ด Vue์— ๋Œ€ํ•œ ๊ฐ•๋ ฅํ•œ ์‚ฌ๋ก€๋ฅผ ๋งŒ๋“ ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • ์ดˆ๋ณด์ž ์นœํ™”์ ์ด๊ณ  ..
  • ์—„์ฒญ๋‚œ ์–‘์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›

์ œ ์ƒ๊ฐ์—๋Š” ๋‘˜ ๋‹ค WordPress ํ”„๋กœ์ ํŠธ์˜ ํ•ต์‹ฌ ๊ธฐ๋‘ฅ ์ค‘ ๋‘ ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ํ˜ผ์ž ์ผ์ง€ ๋ชจ๋ฅด์ง€๋งŒ ์ง€๋‚œ 6 ๊ฐœ์›” ๋™์•ˆ Evan์˜ Patreon์„ ๊ฝค ๋ฉด๋ฐ€ํžˆ ์ง€์ผœ ๋ดค๊ณ , ๊ทธ๊ฐ€ ๊ทธ๊ฒƒ์„ ํ†ตํ•ด ์ž๊ธˆ์„ ์–ป์ง€ ๋ชปํ•˜๋ฉด ๋” ๋งŽ์€ ์ผ์„ํ•ด์•ผ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ์˜ ์ž๊ธˆ์ด ์ ๊ณ  ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•œ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•˜๋ฉด (6 ๊ฐœ์›” ๋ฏธ๋งŒ ์ „) ์‹ค์ œ ์œ„ํ—˜์ด๋ฉ๋‹ˆ๋‹ค. ๊ทธ์˜ Patreon ๋ฒˆํ˜ธ๋Š” ์‹ค์ œ๋กœ ์ตœ๊ทผ์— ๊ฐ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฃผ์ธ๊ณต์ด ์žฌ์ •์ด ๋งž์ง€ ์•Š์œผ๋ฉด ์ผ์„ ํ•  ์ˆ˜ ์—†์„ ์ˆ˜๋„ ์žˆ๋‹ค๊ณ  ๋งํ•˜๋ฉด ์žฌ์ •์ด ๋งค์šฐ ์œ„ํ—˜ํ•ฉ๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ (๋ฉ‹์ง„) ๊ฐœ๋ฐœ์ž๊ฐ€ SF ์ž„๋Œ€๋ฃŒ๋ฅผ ์ง€๋ถˆ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์— ์˜์กดํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ์žฅ๊ธฐ ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ ˆ์ž„ ์›Œํฌ ์„ ํƒ์€ ํฐ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

๋ฌผ๋ก  Vue๋Š” ๋‹ค๋ฅธ ํšŒ์‚ฌ์—์„œ ์•„๋‚Œ์—†์ด ์ง€์›ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ทธ๊ฒƒ์„ ์•Œ๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

์ปค๋ฎค๋‹ˆํ‹ฐ ์ฑ„ํƒ์€ ํ”„๋ ˆ์ž„ ์›Œํฌ ์ˆ˜๋ช…์„ ๋ณด์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ˆˆ์น˜ ์ฑ„์ง€ ๋ชปํ–ˆ๋‹ค๋ฉด ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ํ•ญ์ƒ '์ฃฝ์Šต๋‹ˆ๋‹ค'.

์ฆ‰, ํ•ต์‹ฌ Vue ํŒ€์˜ ๊ตฌ์„ฑ์›์ด ์‹ค์ œ๋กœ ๋‹จ๋… ๊ธฐ์—ฌ์ž ๋ฌธ์ œ / ๋ฒ„์Šค ์š”์ธ์„ ์ด๋ฆ„์œผ๋กœ๋„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜ํƒ€๋‚˜์„œ ๋‹จ์ผ ๊ฐœ๋ฐœ ๋ฌธ์ œ๊ฐ€ ๋ฌธ์ œ๊ฐ€๋˜์ง€ ์•Š์„ ์ˆ˜์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๋ฅผ ์ œ์‹œ ํ•œ ๊ฒƒ์— ๊นŠ์€ ์ธ์ƒ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์€ ์•„์ฃผ ์ตœ๊ทผ์— ์ง„์งœ ๋ฌธ์ œ์˜€์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” Vue์— ํˆฌํ‘œํ•œ๋‹ค

  • ๊ฐ„๋‹จํ•œ API / ์ผ์ฃผ์ผ ์ด๋‚ด์— ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • vuex๋ฅผ ํ†ตํ•œ ๊ฐ„๋‹จํ•œ ํ”Œ๋Ÿญ์Šค ๊ตฌํ˜„
  • ๋น ๋ฅธ ๊ฒฐ๊ณผ : P
  • ์„ฑ์žฅํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ
  • MIT

์œ„์— ์–ธ๊ธ‰ ๋œ ๋ชจ๋“  ์ด์œ ๋กœ Vue์— ๋Œ€ํ•œ ๋˜ ๋‹ค๋ฅธ ํˆฌํ‘œ. ๋ฉ”์ผ ์•Œ๋ฆผ์ด ํ™œ์„ฑํ™” ๋œ ์‚ฌ๋žŒ์—๊ฒŒ ์‚ฌ๊ณผ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

@ michaelbdavidson7 , Vue๋Š” ๊ถ๊ทน์ ์œผ๋กœ Evan์˜ ์˜๊ฒฌ์„ ๊ฐ–๊ฒŒ ๋  ๊ฒƒ์ด๋ฉฐ Patreon ์บ ํŽ˜์ธ์€ ๊ทธ๊ฐ€ ๋” ํ›Œ๋ฅญํ•œ Vue ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์ง€์›ํ•˜๋Š” ๊ฒƒ์ด ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Š” Patreon์„ ํ†ตํ•ด ์ถฉ๋ถ„ํ•˜์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์ด Vue๋ฅผ ์œ„ํƒœ๋กญ๊ฒŒํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. @ blake-newman (ํ•ต์‹ฌ Vue ๊ธฐ์—ฌ์ž)์ด ์ œ์•ˆํ–ˆ๋“ฏ์ด (๊ทธ๋ฆฌ๊ณ  ๋ช‡ ๋‹ฌ ์ „ Evan ์ž์‹ ๋„) Vue๋Š” ๋” ์ด์ƒ ํ•œ ์‚ฌ๋žŒ์—๊ฒŒ๋งŒ ์˜์กดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. WordPress๋Š” ํ•œ ์‚ฌ๋žŒ์—๊ฒŒ ์˜์กดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” Matt๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ WordPress๋Š” Matt ์—†์ด๋„ ์ผ๋ถ€ ํ™”์‹ ์„ ๊ณ„์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Vue๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค (Evan;)).
@ahmadawais ๋„ "ํ•ต์‹ฌ ์ธ ์˜์กด์„ฑ"์— ๊ด€ํ•ด์„œ๋Š” ์ •ํ™•ํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ชฉํ‘œ๊ฐ€ ์ถฉ์กฑ๋˜๋ฉด ๊ฐœ์ธ ์ˆ˜์ต ์ฐฝ์ถœ ์ฑ„๋„ (์˜ˆ : ์ง€์› / ์ปจ์„คํŒ… ๊ณ„์•ฝ)์— ๋Œ€ํ•ด ์ƒ๊ฐํ•˜๋Š” ์‹œ๊ฐ„์„ ์ค„์ด๊ณ  ๋Œ€์‹  ์ „์ฒด Vue ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋„์›€์ด๋˜๋Š” ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•ด ๋” ๋งŽ์ด ์ž‘์—… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

^ ๊ทธ ๋ชฉํ‘œ๋Š” ๋‹ฌ์„ฑ๋˜์ง€ ์•Š์•˜๊ณ  ๊ฐ€๊น์ง€๋„ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฐ€ ์—ฌ์ „ํžˆ ๊ณ„์•ฝ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ๋งํ•œ ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ๊ทธ๊ฒƒ์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๊ทธ๊ฒƒ์€ ๋งค์šฐ ์ตœ๊ทผ์˜ ๋ฐœ์ „์œผ๋กœ ๊ฐ„์ฃผ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ์•„์ง ๊ฑฐ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ต์‹ฌ ๋‹ด๋‹น์ž๊ฐ€ ์ž„๋Œ€๋ฃŒ๋ฅผ ์ง€๋ถˆํ•˜๊ธฐ๋กœ ๊ณ„์•ฝํ•˜๋Š” ๊ฒฝ์šฐ ํ”„๋ ˆ์ž„ ์›Œํฌ์—์„œ ์ž‘์—…์„ ๊ณ„์†ํ•˜์ง€ ์•Š์„ ์œ„ํ—˜์ด ์žˆ์œผ๋ฉฐ ๋ณ€๊ฒฝ๋œ ๊ฒฝ์šฐ ์ตœ๊ทผ์— ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฆ„์œผ๋กœ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์™ธ์น˜๋Š” ์—ฌ๋Ÿฌ๋ถ„ ๋ชจ๋‘ ์ง€๋‚œ ๋ช‡ ๋…„ ๋™์•ˆ ์•„๋ฌด๊ฒƒ๋„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

@ michaelbdavidson7 ์—๋ฐ˜์ด ํ’€ ํƒ€์ž„์œผ๋กœ ์ž‘์—… ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ๋ชฉํ‘œ๋Š” ๊ทธ๋ฅผ ๋” ๋ฉ€๋ฆฌ ๊ทธ๋ฆฌ๊ณ  ๋ถ€๋ถ„์ ์œผ๋กœ ์ง€์—ญ ์‚ฌํšŒ๋ฅผ ์ง€์›ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์ง€์›ํ•˜๋Š” ์œ ์ผํ•œ ๋ชฉ์ ์„์œ„ํ•œ ๊ฐœ๋ฐฉํ˜• ๊ณต๋™ ์บ ํŽ˜์ธ์˜ ํƒ„์ƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋˜ํ•œ Patreon ์บ ํŽ˜์ธ์ด ๊ธฐ๋ถ€๋ฅผ ํ†ตํ•œ ์œ ์ผํ•œ ์ˆ˜์ž…์›์ด ์•„๋‹ˆ๋ผ๋Š” ์ ์„ ์ง€์  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•ˆํƒ€๊น๊ฒŒ๋„ Patreon์€ ๋ชจ๋“  ํšŒ์‚ฌ๊ฐ€ ํ›„์›ํ•˜๊ธฐ์— ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ผ๋ถ€ ๊ธฐ๋ถ€๊ธˆ์€ ๋ณ„๋„๋กœ ์ง€๊ธ‰๋˜๊ณ  ์ฒญ๊ตฌ๋ฉ๋‹ˆ๋‹ค.

์ˆซ์ž๊ฐ€ ๊ฐ์†Œํ•œ ์ด์œ ๋Š” ์Šคํฐ์„œ ์ค‘ ํ•œ ๋ช…์ด ์ค‘๊ตญ ์ถœ์‹ ์ด๊ณ , ์ค‘๊ตญ์—์„œ ์—ฐ๊ฐ„ ์ง€์ถœ ํ•  ์ˆ˜์žˆ๋Š” ๊ธˆ์•ก์— ์ œํ•œ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ผ์‹œ์ ์ธ ๊ฒƒ์ด๋ฉฐ ๋‹ค์‹œ ์ง€์›ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์—๋ฐ˜์ด ์›Œํฌ์ˆ์„ ํ†ตํ•ด ์–ป๋Š” ๋‹ค๋ฅธ ์ˆ˜์ž… ์ฑ„๋„์€ ๊ณต๋™์ฒด์— ๋„์›€์ด ๋ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ทธ์—๊ฒŒ๋„ ๋„์›€์ด๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์‹์œผ๋กœ ๊ทธ๋Š” ๋„์„œ๊ด€์ด ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ๋˜๊ณ  ์‚ฌ์šฉ๋˜๋Š”์ง€ ๋ฐฐ์šฐ๋Š” ๋ฐ ์ง์ ‘ ๋…ธ์ถœ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์‹ค์ œ๋กœ ๋ณด์ด๋Š” ๊ฒƒ๋งŒ ํผ ๋‚˜์˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

Vue๋Š” ์ง€์† ๊ฐ€๋Šฅํ•˜๋ฉฐ Evan์„ ๋Œ€์‹ ํ•˜์—ฌ ๋งํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ๊ทธ๊ฐ€ ํ˜„์žฌ ์žฌ์ • ์ƒํ™ฉ์— ๋งค์šฐ ๋งŒ์กฑํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

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

Vue.js์—๋Š” ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•œ

๊ถ๊ทน์ ์œผ๋กœ a11y์— ๋Œ€ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹ ํ…Œ์ŠคํŠธ๋ฅผ ๊ฐ„๋‹จํ•˜๊ณ  ์ž๋™์œผ๋กœ ๋งŒ๋“œ๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ์žˆ์œผ๋ฉด ๋Œ€๋ถ€๋ถ„์˜ a11y ์˜ค๋ฅ˜์™€ ๊ฒฝ๊ณ ๋ฅผ ์ œ๊ฑฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ผ์ด์„ ์Šค ๋•Œ๋ฌธ์— ์‰ฝ๊ฒŒ ์ „ํ™˜ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด InfernoJS๋ฅผ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/infernojs/inferno ๋” ์ž‘์€ ํ’‹ ํ”„๋ฆฐํŠธ์™€ ๋” ๋น ๋ฅธ ๋Ÿฐํƒ€์ž„์œผ๋กœ ๋™์ผํ•œ API์— ๊ฐ€๊น์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์˜ MIT ๋ผ์ด์„ผ์Šค. ์ €๋Š” Inferno์˜ ์œ ์ง€ ๊ด€๋ฆฌ์ž ์ค‘ ํ•œ ๋ช…์ด๋ฉฐ ์ „ํ™˜์„ ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@Havunen์— ๋“ค๋Ÿฌ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์š” ์ „์— Inferno๋ฅผ ์กฐ์‚ฌํ•˜๊ณ  ์žˆ์—ˆ์ง€๋งŒ ์•„์ง ์‹œ๋„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์–ด์จŒ๋“  ์œ ๋ง ํ•ด ๋ณด์ธ๋‹ค!

๋งฅ๋ฝ์„ ์œ„ํ•ด Inferno์˜ ์ €์ž๋Š” Facebook์— ๊ณ ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” markoJS http://markojs.com/์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค

Gutenberg๋Š” Inferno์™€ Preact ๋ชจ๋‘ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ช‡ ๊ฐ€์ง€ ์ƒˆ๋กœ์šด React 16 ๊ธฐ๋Šฅ (์˜ˆ : Portal ๋ฐ Fragments )์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์˜ ์‚ฌ์šฉ์ด ๊ตฌํ…๋ฒ ๋ฅดํฌ์— ์ค‘์š”ํ•œ ๊ฒฝ์šฐ React์™€ ์œ ์‚ฌํ•œ libs์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐ ํ•  ๋•Œ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

API ์ธก๋ฉด์—์„œ์ด ์‹œ์ ์—์„œ React 16๊ณผ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด DIO 8์„ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค.

์ฆ‰, ์–ธ๊ธ‰ ๋œ React-like libs์— ๋ณ„์นญ์„ ์ง€์ •ํ•˜์—ฌ Gutenberg๋ฅผ ์„ค์ •ํ•˜๊ณ  ๊ธฐ๊บผ์ด ๋ณ€๊ฒฝ / ๋ฌธ์ œ์—†์ด ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๊ฒƒ์€ ์ข‹์€ ํ˜ธ๊ธฐ์‹ฌ ์‹คํ—˜์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ •ํ™•ํžˆ ๋™์ผํ•œ ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ํฌํ„ธ์˜ ๊ฒฝ์šฐ vue ํ•ต์‹ฌ ํŒ€ ๊ตฌ์„ฑ์› ์ค‘ ํ•œ ๋ช…์ธ @LinusBorg๊ฐ€ ๊ฐœ๋ฐœ ํ•œ vue-portal์ด ์žˆ์Šต๋‹ˆ๋‹ค. :)

@youknowriad ์ €๋Š” ํŽ˜์ด์Šค ๋ถ์— ๊ณ ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. @Havunen ๊ณผ Inferno ํŒ€์€ ์ € ์—†์ด๋„ ํ›Œ๋ฅญํ•œ ์ผ์„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์ด Inferno์—์„œํ•˜๊ณ ์žˆ๋Š” ์ž‘์—…์€ ๊ต‰์žฅํ•˜๋ฉฐ ๊ธฐํšŒ๊ฐ€ ์žˆ๋‹ค๋ฉด Inferno๋ฅผ ํ™•์ธํ•ด ๋ณผ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. :)

์ €๋Š” Marko.js ์˜ ์ €์ž ์ค‘ ํ•œ ๋ช…์ด๋ฉฐ Marko.js๋ฅผ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ง์— ๋˜์ง€๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ํšŒ์›์ด ์šฐ๋ฆฌ์—๊ฒŒ ์—ฐ๋ฝํ•˜์—ฌ์ด GitHub ๋ฌธ์ œ๋ฅผ ์ง€์ ํ–ˆ์Šต๋‹ˆ๋‹ค. Marko.js๋Š” ์˜คํ”ˆ ์†Œ์Šค ์นœํ™”์  ์ธ MIT ๋ผ์ด์„ ์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ eBay.com์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ๊ฐ•๋ ฅํ•˜๊ณ  ์„ฑ์žฅํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. React์™€ Vue์—์„œ ์ข‹์€ ์•„์ด๋””์–ด๋ฅผ ๋งŽ์ด ๊ฐ€์ ธ ์™”์ง€๋งŒ ์ปดํŒŒ์ผ ํƒ€์ž„ ์ตœ์ ํ™”๋ฅผ ํ†ตํ•ด ๋” ๊ฐ„๋‹จํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋งŽ์€ ๋…ธ๋ ฅ์„ ๊ธฐ์šธ์˜€์œผ๋ฉฐ ๊ฐ€๋Šฅํ•œ ํ•œ ์ƒ์šฉ๊ตฌ๋ฅผ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

UI ๊ตฌ์„ฑ ์š”์†Œ

Marko์˜ ์ปดํฌ๋„ŒํŠธ ๋ชจ๋ธ์€ ๊ฐœ๋…์ ์œผ๋กœ React์™€ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค (์ž…๋ ฅ, ์ƒํƒœ, ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ, ๋ผ์ดํ”„ ์‚ฌ์ดํด ์ด๋ฒคํŠธ, ๊ฐ€์ƒ DOM ๋ Œ๋”๋ง, DOM ๋น„๊ต / ํŒจ์น˜ ๋“ฑ). Calypso์˜ ์ „ํ™˜์—๋Š” ๋งŽ์€์ธ์ง€ ์˜ค๋ฒ„ ํ—ค๋“œ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Marko๋Š” ๋‹จ์ผ ํŒŒ์ผ UI ๊ตฌ์„ฑ ์š”์†Œ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. Marko UI ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

class {
  onInput(input) {
    this.state = { 
      count: input.count || 0 
    };
  }
  increment() {
    this.state.count++;
  }
}

style {
  .count {
    color:#09c;
  }
}

<div.count>${state.count}</div>
<button on-click('increment')>
  Click me!
</button>

ํ†ต์‚ฌ๋ก 

Marko๋Š” JSX๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์ง€๋งŒ JS ํ‘œํ˜„์‹์„ ์ง€์›ํ•˜๋Š” HTML์˜ ์ƒ์œ„ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค. HTML๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜์ง€๋งŒ Vue์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ HTML์— ์™„์ „ํžˆ ์ œํ•œ๋˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ฃจํ”„ ๋ฐ ์กฐ๊ฑด๊ณผ ๊ฐ™์€ ๊ฒƒ์— ๋Œ€ํ•ด ๋” ์ข‹์€ ๊ตฌ๋ฌธ์„ ์ œ๊ณตํ•˜๊ณ  ํ‘œ์ค€ HTML ๋ฌธ์ž์—ด์— ๋น„ํ•ด ํ‘œํ˜„์‹์ด ์‚ฌ์šฉ๋˜๋Š” ์œ„์น˜๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒํ•ฉ๋‹ˆ๋‹ค. Marko.js ํ…œํ”Œ๋ฆฟ์€ ๋งค์šฐ ์ฝ๊ธฐ ์‰ฝ๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ดํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค (Marko๋Š” ๊ฐ„๊ฒฐํ•œ ๋“ค์—ฌ ์“ฐ๊ธฐ ๊ธฐ๋ฐ˜ ๊ตฌ๋ฌธ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค).

์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง

WordPress์— ์–ผ๋งˆ๋‚˜ ์ค‘์š”ํ•œ์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ Marko๋Š” ๋น„๋™๊ธฐ ๋ฐ ์ŠคํŠธ๋ฆฌ๋ฐ ๋ Œ๋”๋ง์„ ์ง€์›ํ•˜๋Š” Node.js์—์„œ ๊ณ ์„ฑ๋Šฅ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ์ฝ๊ธฐ :

๋‚˜๋Š” Marko์—๊ฒŒ ํˆฌํ‘œํ•œ๋‹ค !! ๐Ÿ™‚

WordPress ํŒ€ (@ahmadawais? @m? @swissspidy?)์˜ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ Marko์— ๋Œ€ํ•œ ์งˆ๋ฌธ์— ๋‹ต๋ณ€ํ•˜๊ธฐ ์œ„ํ•ด ๋น ๋ฅธ ์ฑ„ํŒ…์„ ์›ํ•˜๋ฉด Marko ํŒ€์ด ๊ธฐ๊บผ์ด ๊ทธ๋ ‡๊ฒŒ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. : call_me_hand : ๐Ÿ˜ธ

@I๋Š” @m์˜ ๋ธ”๋กœ๊ทธ์— ๋Œ“๊ธ€์„ ๋‹ฌ์•˜์Šต๋‹ˆ๋‹ค,ํ•˜์ง€๋งŒ ๋” ๊ณต๊ฐœ ํ˜•ํƒœ๋กœ ์—ฌ๊ธฐ์— ๊ฒŒ์‹œํ•˜๊ณ  ์‹ถ์—ˆ :

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

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

Ember๋Š” ๋‹ค๋ฅธ ์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ์ด๋Ÿฌํ•œ ๋…ธ๋ ฅ์„ ๋ฐ”ํƒ•์œผ๋กœ ํ•™์Šตํ•˜๊ณ  ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
@m ๋ธ”๋กœ๊ทธ์˜ ์ด์ „ ๋Œ“๊ธ€์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด Ghost ๋Š” ๊ด€๋ฆฌ์ž ๋ฐ ํŽธ์ง‘์ž๋กœ Ember๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ Ember๋Š” Drupal ํ—ค๋“œ๋ฆฌ์Šค, Cardstack ๋ฐ Conde Nast , Bustle ๋“ฑ๊ณผ ๊ฐ™์€ ์ฝ˜ํ…์ธ  ํšŒ์‚ฌ์—์„œ๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
์ฆ‰, ํƒœ๊ทธ ๋ชฉ๋ก, ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ ํŽธ์ง‘๊ธฐ (ํŠนํžˆ Mobiledoc ํŽธ์ง‘๊ธฐ ) ๋“ฑ๊ณผ ๊ฐ™์€ ์ผ๋ฐ˜์ ์ธ ๊ธฐ๋Šฅ์ด Ember Addon ์—์ฝ” ์‹œ์Šคํ…œ์˜ ์ผ๋ถ€๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

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

Calypso์™€ Guttenberg๋Š” ์„ฑ์ˆ™ํ•œ ์š”๊ตฌ๋ฅผ ๊ฐ€์ง„ ํฌ๊ณ  ์•ผ์‹ฌ ์ฐฌ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค. Ember ์ปค๋ฎค๋‹ˆํ‹ฐ์—๋Š” ์ ‘๊ทผ์„ฑ, ๊ตญ์ œํ™” ๋ฐ ์ตœ์‹  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ธฐํƒ€ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋Œ€ํ•œ ์„ฑ์ˆ™ํ•œ ์†”๋ฃจ์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” Ember.js ํ•™์Šต ํŒ€์˜ ์ผ์›์ด๋ฉฐ ํ•ต์‹ฌ ๊ธฐ์—ฌ์ž๋“ค๊ณผ ๊ธด๋ฐ€ํžˆ ํ˜‘๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Ember ๋ฐ Glimmer๊ฐ€ ๊ท€ํ•˜์˜ ํ•„์š”์— ์–ด๋–ป๊ฒŒ ๋ถ€ํ•ฉ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ๋‹ค๋ฅธ Ember ํŒ€์›๋“ค๊ณผ ์ด์•ผ๊ธฐํ•˜๊ฑฐ๋‚˜ ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆ„๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

React ํฌํ„ธ์— ๋Œ€ํ•œ ์–ธ๊ธ‰์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜๊ณ  Ember์—๋Š”์ด ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด Ember Wormhole ์ด๋ผ๋Š” ์ž˜ ์œ ์ง€ ๊ด€๋ฆฌ๋˜๋Š” ์• ๋“œ์˜จ์ด ์žˆ์œผ๋ฉฐ ๋Œ€ํ™” ์ƒ์ž, ๋ฌธ์„œ ํ—ค๋“œ ๋ณ€๊ฒฝ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์ด ์œ„์— ๋งŽ์€ ์• ๋“œ์˜จ์ด ๋นŒ๋“œ๋œ๋‹ค๋Š” ๋˜ ๋‹ค๋ฅธ 2 ยข๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. , ๊ทธ๋ฆฌ๊ณ  ๋”.

Marko๊ฐ€ ๋„ค์ดํ‹ฐ๋ธŒ ๋น„๋™๊ธฐ ๋ Œ๋”๋ง ์ง€์›๊ณผ ๋น ๋ฅธ ์„œ๋ฒ„ ์ธก ์„ฑ๋Šฅ์— ํˆฌํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. !!!

@ patrick-steele-idem & @mlrawlings โ€”

๋” ์ž์„ธํžˆ ์‚ดํŽด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

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

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

๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ํ•ต์‹ฌ ๊ด€์‹ฌ์‚ฌ์ด๋ฉฐ ์ง€์› ์ค‘๋‹จ ๊ฐ€์ด๋“œ๊ฐ€ ๋ชจ๋“  ๋‹จ๊ณ„์— ๋„์›€์ด๋ฉ๋‹ˆ๋‹ค (๊ฐ€์žฅ ์ตœ๊ทผ์—๋Š” JavaScript AST / CST ๋ณ€ํ™˜์„ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ž๋™์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•จ).

@rtablada๊ฐ€ ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์€ Ember๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋‹ค๋ฅธ ์ธ๊ธฐ์žˆ๋Š” ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—๋Š” Twitch.tv , Heroku ๋Œ€์‹œ ๋ณด๋“œ , Travis CI ๋ฐ Discourse๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@SaladFork ์—…๋ฐ์ดํŠธ์— ๊ฐ์‚ฌ ๋“œ๋ฆฌ๋ฉฐ, ์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ ๋ถ„์•ผ์˜ ๋Œ€๋ถ€๋ถ„ ํšŒ์‚ฌ ์ด๋ฆ„์œผ๋กœ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋Œ€๊ทœ๋ชจ ์˜คํ”ˆ ์†Œ์Šค Ember ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ํŠธ๋ž˜๋น„์Šค CI
  • Hospital Run- ํŠนํžˆ ์•„ํ”„๋ฆฌ์นด์˜ ๋‚ฎ์€ ์—ฐ๊ฒฐ์„ฑ์—์„œ ์˜คํ”„๋ผ์ธ ์‚ฌ์šฉ์„ ์œ„ํ•ด ๊ตฌ์ถ• ๋œ EMR (์ „์ž ์˜๋ฃŒ ๊ธฐ๋ก) ์‹œ์Šคํ…œ
  • ์œ ๋ น

๊ทธ๊ฐ€ ์–ผ๋งˆ๋‚˜ ์ž์„ธํžˆ ์„ค๋ช… ํ•  ์ˆ˜ ์žˆ์„์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ , ๊ทธ๊ฐ€ ์ตœ๊ทผ React์—์„œ Ember๋กœ ์•ฑ์„ ์ „ํ™˜ ํ•œ ํŒ€์˜ ์ผ๋ถ€๋ฅผ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๋ณด๋ƒ…๋‹ˆ๋‹ค .

์„ฑ๋Šฅ, ์œ ์—ฐ์„ฑ ๋ฐ ๋งค์šฐ ๋ช…ํ™•ํ•˜๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ๊ตฌ๋ฌธ์œผ๋กœ Marko์— ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

Marko๋„ +1ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋จธ๋ฆฌ์นด๋ฝ์„ ์žƒ๊ณ  ํšŒ์ƒ‰์œผ๋กœ ๋ณ€ํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ํ”„๋ก ํŠธ ์—”๋“œ ์ž‘์—…์„ ์ž˜ ํ•ด์™” ๊ธฐ ๋•Œ๋ฌธ์— (์˜ค๋ž˜ ์ „์ฒ˜๋Ÿผ) ๋‚ด๊ฐ€ ์ˆ˜๋…„ ๋™์•ˆ ์ฐพ์•„ ์™”๋˜ ํ”„๋ก ํŠธ ์—”๋“œ ํ”„๋ ˆ์ž„ ์›Œํฌ / ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€๋‹ค. ์ด๊ฒƒ์ด ๋‚ด๊ฐ€ eBay์—์„œ @ patrick-steele-idem & @mlrawlings ์™€ ํ•จ๊ป˜ ์ผํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๋Š” ํฐ ์ด์œ ์ž…๋‹ˆ๋‹ค.

Marko JS๊ฐ€ ํˆฌํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์šฉ์ด์„ฑ๊ณผ ์„ฑ๋Šฅ์„ ๊ณ ๋ คํ•  ๋•Œ ๋งค์šฐ ๊ณผ์†Œ ํ‰๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํšจ์œจ์ ์ธ marko์™€ ํ•จ๊ป˜ marko-widget์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋›ฐ์–ด๋‚˜๊ณ  ๊ฐ„๊ฒฐํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ. ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ณด๋‹ค ๋” ๋น ๋ฆ…๋‹ˆ๋‹ค. ๋ฒค์น˜ ๋งˆํฌ๋Š” ์—ฌ๊ธฐ

๋‚˜๋Š” MarkoJS์— ํˆฌํ‘œํ–ˆ๊ณ , ์šฐ๋ฆฌ๋Š” ์ˆ˜๋…„ ๋™์•ˆ ํ•ธ๋“ค ๋ฐ” ๊ฐ€๊ฒŒ์˜€์Šต๋‹ˆ๋‹ค.

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

์‹ ์ค‘ํ•œ ๊ณ ๋ ค ๋์— MarkoJS๊ฐ€ ์ง€์›ํ•˜๋Š” ์‚ฌ์‹ค์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. ์šฐ์ˆ˜ํ•œ ์„œ๋ฒ„ ์„ฑ๋Šฅ์œผ๋กœ ๋น ๋ฅธ ์„œ๋ฒ„ ๋ Œ๋”๋ง
  2. ๊ฐ€๋Šฅํ•œ ํ•œ ๋นจ๋ฆฌ ์ฒซ ๋ฒˆ์งธ ๋ฐ”์ดํŠธ๋ฅผ ํ‘ธ์‹œํ•ฉ๋‹ˆ๋‹ค.
  3. ๋ฐ์ดํ„ฐ๊ฐ€ ์ค€๋น„ ๋  ๋•Œ ์‚ฌ์†Œํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋นŒ๋“œํ•˜๊ณ  ๋น„๋™๊ธฐ ์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ๋Šฅ
  4. ํ”Œ๋Ÿฌ๊ทธ ์•ค ํ”Œ๋ ˆ์ด ๊ตฌ์„ฑ ์š”์†Œ ์•„ํ‚คํ…์ฒ˜ ๊ตฌ์ถ• ๋Šฅ๋ ฅ
  5. React / Vue์˜ ๋™์ผํ•˜๊ฑฐ๋‚˜ ๋” ๋‚˜์€ ์•„ํ‚คํ…์ฒ˜๋กœ ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง์„ ์ตœ๋Œ€ํ™”ํ•ฉ๋‹ˆ๋‹ค.
  6. ๋ Œ๋”๋ง ํ…Œ์ŠคํŠธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ตฌ์„ฑ ์š”์†Œ ์ƒํƒœ์— ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ ํ…Œ์ŠคํŠธ

(eBay Classifieds์˜ ์„ฑ๊ณต ์‚ฌ๋ก€)

Angular์˜ ๊ฒฝ์šฐ +1 (AngularJS๊ฐ€ ์•„๋‹˜).

Angular CLI๋Š” ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ ์ค‘์—์„œ ๊ฐ€์žฅ ๋›ฐ์–ด๋‚˜๋ฉฐ, ๋ฒ„์ „ ๊ฐ„ ์›ํ™œํ•œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์„์œ„ํ•œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ณ„ํš์ด ์žˆ์œผ๋ฉด ๋งค์šฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

Plus Angular๋Š” ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์˜์—ญ์—์„œ ์ž˜ ์ฑ„ํƒ๋˜์–ด WordPress๊ฐ€ ์ปจ์„คํ„ดํŠธ์™€ ํ”„๋ฆฌ๋žœ์„œ์˜ ํ”Œ๋žซํผ์œผ๋กœ ๊ณ„์† ์„ฑ์žฅํ•˜๊ณ  ๋ฐ”๋‹ฅ์„ ํ–ฅํ•œ ๊ฒฝ์Ÿ์„ ์ค‘๋‹จํ•œ๋‹ค๋ฉด WordPress๊ฐ€ ์•ฝ๊ฐ„์˜ ์‚ฌ๋ž‘์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ์ˆ˜์ค€์˜ ๊ฐ•๋ ฅํ•œ ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ต์‹ฌ ํŒ€์€ ํ•ญ์ƒ Google์—์„œ ์ผํ•˜๋Š”์ง€ ์—ฌ๋ถ€์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. WordPress๋Š” ๋Œ€๋ถ€๋ถ„ (๋Œ€๋ถ€๋ถ„์˜ ๊ณ ๊ธ‰ ๊ฐœ๋ฐœ์ž์—๊ฒŒ) ์ฐธ์—ฌํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์ด๋ฏ€๋กœ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ˜„๋ช…ํ•œ Angular๋Š” ๋งค์šฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์ตœ๊ทผ์— Vue in Server-Rendered Environments์— ๋Œ€ํ•œ ๊ฐ•์—ฐ์„ํ–ˆ๊ณ  ( ์—ฌ๊ธฐ ์Šฌ๋ผ์ด๋“œ ), ์ง€๋‚œ ๋ช‡ ๋‹ฌ ๋™์•ˆ .NET ํ™˜๊ฒฝ์—์„œ Vue์™€ ํ•จ๊ป˜ ์ž‘์—… ํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ™˜๊ฒฝ์—์„œ ์ž‘์—… ํ•  ์ˆ˜์žˆ๋Š” ๋‹ค๋ฅธ ์˜ต์…˜์ด ์—†๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ. ๋ฐฑ์—”๋“œ๊ฐ€ ๋Œ€๋ถ€๋ถ„ ์‚ฌ์ดํŠธ๋ฅผ ๊ณ„์† ์ œ์–ด ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•˜๋ฉด์„œ ๋ฌด๊ฑฐ์šด ์ƒํ˜ธ ์ž‘์šฉ์„ ์œ„ํ•ด JS๋กœ ๊ฐ€์ ธ์™€์•ผํ•˜๋Š” ๊ฒƒ์„ ๊ตฌ์„ฑ ํ•  ์ˆ˜์žˆ๋Š” ์ •๋ง ํ›Œ๋ฅญํ•œ ์กฐํ•ฉ์„ ์–ป๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

์ฆ‰, WordPress๊ฐ€ ํ˜„์žฌ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ๊ฒƒ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•ํ•˜๊ธฐ์— ๋งค์šฐ ์™„๋ฒฝํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์„œ๋ฒ„ ๋ Œ๋”๋ง JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” ๋Œ€๋ถ€๋ถ„ ๋…ธ๋“œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. Vue๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. <gutenberg-editor> ์™€ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋“ฑ๋กํ•˜๊ณ  WordPress์—์„œ ๋ฌธ์ž ๊ทธ๋Œ€๋กœ HTML๋กœ <gutenberg-editor> ๋ฅผ ๋ณด๋‚ด๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Vue๋Š” WordPress์—์„œ ๋ณด๋‚ธ HTML์„ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ ์—์„œ ์›น ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋น„์Šทํ•˜๋ฉฐ ์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ์–ป๊ธฐ ์œ„ํ•ด ๋‹ค๋ฅธ BE ๊ธฐ์ˆ ์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Laravel๊ณผ ๊ฐ™์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€์ด๋ฅผ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ ํƒํ•œ ์ด์œ  ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๋น„ ๋…ธ๋“œ ๋ฐฑ์—”๋“œ์— ํ†ตํ•ฉํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. WordPress๋„ ๊ฐ™์€ ์ด์œ ๋กœ ์ฑ„ํƒํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” Vuejs์— ํˆฌํ‘œํ–ˆ๋‹ค.
๊ทธ์˜ ์˜๊ฒฌ์— @borantula ์™€ ๊ฐ™์€ ๊ฒฝ์šฐ

์ €์˜ CTO๋Š” Vuejs๋ฅผ ํŒ€์— ์†Œ๊ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. Front-end๋ฅผ ์ฒ˜์Œ ์ ‘ํ•œ ์‚ฌ๋žŒ๋“ค์ด ๋ฐ”๋กœ Vuejs์— ํ•ฉ๋ฅ˜ํ•˜์—ฌ Vuejs์— ๋งŒ์กฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ํŒ€์€ ๋งŽ์€ ํ”„๋กœ์ ํŠธ์—์„œ WordPress๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
ํ˜„์žฌ ์šฐ๋ฆฌ๋Š” Vuejs์™€ Custom Element๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฑ์—”๋“œ์—์„œ WordPress๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ŸฐํŠธ ์—”๋“œ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋งค์šฐ ์›ํ™œํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

@ blake-newman๊ณผ Evan์ด ๋งํ–ˆ๋“ฏ์ด Vuejs๋Š” ๋” ์ด์ƒ ๋‹จ์ผ ํ•ต์‹ฌ ์‚ฌ๋žŒ์—๊ฒŒ ์˜์กดํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ @ahmadawais๊ฐ€ ์–ธ๊ธ‰ ํ•œ CONS๊ฐ€ ๋” ์ด์ƒ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

MARKO๋Š” ์›น ์•ฑ์—์„œ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ๋ Œ๋”๋ง์€ ๋งค๋ ฅ์ฒ˜๋Ÿผ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

Preact ๋˜๋Š” MarkoJS (์ฃผ์„์—์„œ ๋งŽ์ด ์–ธ๊ธ‰ ๋จ)์— ๋Œ€ํ•ด์„œ๋Š” ์•„๋ฌด ๋ง๋„ ํ•  ์ˆ˜ ์—†์ง€๋งŒ 1 ๋…„ ์ „์— Vue ํŒ€์— ์†Œ๊ฐœ (์ฃผ๋กœ ๋‹น์‹œ php + jQuery ์ž‘์—…)ํ•˜๋ฉด์„œ Vue์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ ์ฐจ์ ์œผ๋กœ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋ฐ”๋€๋‹ˆ๋‹ค. jQuery ์ƒํƒœ์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ.

๊ตฌํ…๋ฒ ๋ฅดํฌ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›Œ๋“œ ํ”„๋ ˆ์Šค์˜ ์žฅ๊ธฐ์ ์ธ ๋ชฉํ‘œ ์ธ ์ธํ„ฐํŽ˜์ด์Šค์— ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋” ๋งŽ์€ API ์ง€ํ–ฅ ํ”Œ๋žซํผ์œผ๋กœ ์ „ํ™˜ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์„ ํƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋” ์‰ฌ์šด ํ•™์Šต ๊ณก์„ ๊ณผ ์นœ์ˆ™ ํ•จ์€ ๋‹ค๋ฅธ WP ๊ฐœ๋ฐœ์ž๋„ ์ฐธ์—ฌํ•˜๋„๋ก ์žฅ๋ คํ•ฉ๋‹ˆ๋‹ค.

์ €๋Š” VueJS๊ฐ€ Laravel ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์–ด๋–ป๊ฒŒ ๋ฒˆ์ฐฝํ•˜๋Š”์ง€ ๋ณด์•˜๊ณ  ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์‚ฌ์‹ค์ƒ์˜ ์„ ํƒ์ด๋˜์—ˆ์Šต๋‹ˆ๋‹ค. WordPress ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ๋„ ๊ทธ๋ ‡๊ฒŒ ๋  ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.

Backbone.js

/์—์Šค

์ €๋Š” MarkoJS ๋’ค์— ์ €์˜ ์ง€์›์„ ๋˜์ง€๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

2 ๋…„ ์ „์— ํšŒ์‚ฌ ์ธํ”„๋ผ๋ฅผ ExpressJS ๋ฐ Jade (ํ˜„์žฌ PUG)์—์„œ Marko JS๋กœ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ํšŒ์‚ฌ๋Š” ์ „์ฒด ์ƒํƒœ๊ณ„์—์„œ ๋ณต์žกํ•˜๊ณ  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์€ ์†๋„์™€ ์žฌ์‚ฌ์šฉ ์„ฑ์„ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ์„ค๊ณ„์ž๋“ค์€ ๊ฐ์†Œ ๋œ ์„ค๊ณ„ ๋ถ€ํ•˜๋ฅผ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๊ทธ ์ดํ›„๋กœ ๋Œ์•„ ๋ณด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ด์ œ Marko๋กœ ์ž‘์„ฑ๋œ ์—ฌ๋Ÿฌ ํด๋ผ์ด์–ธํŠธ ๋Œ€๋ฉด ์›น ์‚ฌ์ดํŠธ์™€ ์ „์ฒด CMS ์‹œ์Šคํ…œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ถ๊ทน์ ์œผ๋กœ ๋‹ค์Œ์„ ์œ„ํ•ด MarkoJS๋ฅผ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.

  • Koa ๋ฐ ๋˜๋Š” ExpressJS์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„ ์›Œํฌ์—์„œ๋„ ๋น ๋ฅธ ์„œ๋ฒ„ ๋ Œ๋”๋ง
  • ํŽ˜์ด์ง€ ๋ฐ์ดํ„ฐ์˜ ๋น„๋™๊ธฐ ๋ Œ๋”๋ง ์ฒ˜๋ฆฌ
  • ๋” ํฐ ์—์ฝ” ์‹œ์Šคํ…œ์„์œ„ํ•œ ํ”Œ๋Ÿฌ๊ทธ ์•ค ํ”Œ๋ ˆ์ด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ธฐ๋Šฅ
  • React / Vue๋ณด๋‹ค ๋” ๋‚˜์€ ์„ฑ๋Šฅ
  • ๋งค์šฐ ์‰ฌ์šด ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ

๋˜ํ•œ MarkoJS ํŒ€์ด ๋ง ๊ทธ๋Œ€๋กœ ์šฐ์ˆ˜ํ•˜๋‹ค๋Š” ์ ์„ ์ง€์ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. @ patrick-steele-idem ๋ฐ @mlrawlings ๋Š” ํ•ญ์ƒ ์ƒˆ๋กœ์šด ์•„์ด๋””์–ด๋ฅผ ๋„์ž…ํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ฉฐ ๊ฐœ์ธ์„ ๋•๊ธฐ ์œ„ํ•ด

๐Ÿ‘ MarkoJS ์šฉ

Preact๋Š” React-API ํ˜ธํ™˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, Preact๋Š” React์˜ ์—์ฝ” ์‹œ์Šคํ…œ๊ณผ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋งŽ์€ OSS ํŒจํ‚ค์ง€ / ๊ตฌ์„ฑ ์š”์†Œ๋กœ๋ถ€ํ„ฐ ์ง์ ‘ ํ˜œํƒ์„๋ฐ›์Šต๋‹ˆ๋‹ค. Vue์˜ ์—์ฝ” ์‹œ์Šคํ…œ์€ ๋น„๊ตํ•ด ๋ณผ ๋•Œ ํ›จ์”ฌ ์ž‘์Šต๋‹ˆ๋‹ค. ํƒ€์‚ฌ Vue ํŒจํ‚ค์ง€ / ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์„ค๋ช…์„œ๋Š” ์ค‘๊ตญ์–ด๋กœ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋” ์ด์ƒ "๋‚˜๋Š” XYZ์— ํˆฌํ‘œ"ํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ๊ทธ๋“ค์€์ด ๋ฌธ์ œ๋ฅผ ๊ตฌ๋…ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋ถˆํ•„์š”ํ•œ ๋‹ต์žฅ์„ ๋ณด๋‚ด๋Š” ๊ฒƒ ์™ธ์—๋Š” ๋Œ€ํ™”์— ์ถ”๊ฐ€ ํ•  ์ผ์ด ์—†์Šต๋‹ˆ๋‹ค.

๐Ÿ”ฅ ๊ฐ๋„

  • PRO : React์˜ ๊ฐ€์žฅ ํฐ ๊ฒฝ์Ÿ์ž
    ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ. ์งˆ๋ฌธ์€ ์ข…์ข… "Angular ๋˜๋Š” React?"์ž…๋‹ˆ๋‹ค. / "๋ฐ˜์‘ ๋˜๋Š” ๊ฐ๋„?". Angular ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” React ๋Œ€์•ˆ ์ค‘์—์„œ ๊ฐ€์žฅ ํฌ๊ณ  ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์žฅ์  : ๋งŽ์€ ํ•™์Šต ๋ฆฌ์†Œ์Šค
    ๊ณต์‹ API ๋ฌธ์„œ ๋ฐ ๊ฐ€์ด๋“œ ์™ธ์—๋„ Angular๋Š” ๋ชจ๋“  ์ฃผ์š” ํ•™์Šต ํ”Œ๋žซํผ์—์„œ ๋ฌด๋ฃŒ ๋ฐ ์ƒ์—…์ ์ธ ๊ต์œก ์ž๋ฃŒ, ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ, ์„œ์  ๋ฐ ๋งŽ์€ ๋งŽ์€ ๋น„๋””์˜ค ์ฝ”์Šค๋กœ ๊ตฌ์„ฑ๋œ ๊ฐ€์žฅ ํฐ ์—์ฝ” ์‹œ์Šคํ…œ๊ณผ ์›Œํฌ์ˆ ๋ฐ ์ปจํผ๋Ÿฐ์Šค์—์„œ์ด๋ฅผ ๊ฐ€๋ฅด์น˜๋Š” Google GDE๋ฅผ ๋ณด์œ ํ•˜๊ณ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • PRO : Redux์™€ ์ž˜ ํ†ตํ•ฉ
    ์ง์ ‘ ๋˜๋Š” RxJS ๊ถŒํ•œ ๋ถ€์—ฌ Ngrx๋ฅผ ํ†ตํ•ด (Angular ํŒ€ ๊ตฌ์„ฑ์› ์ง€์›)

  • PRO : ๋™๊ธ‰ ์ตœ๊ณ ์˜ ๋„๊ตฌ ์ง€์›

    • CLI์—๋Š” ๋‹ค๋ฅธ ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๋งŽ์€ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

    • ํŠนํžˆ ์–ธ์–ด ์„œ๋น„์Šค์™€ ํ•จ๊ป˜ VS Code์—์„œ ๋งค์šฐ ์šฐ์ˆ˜ํ•œ ํŽธ์ง‘๊ธฐ ์ง€์›

    • TypeScript ์šฉ์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ ์ตœ์ƒ์˜ TypeScript ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • PRO : ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•˜๊ณ , ์˜๊ฒฌ์ด ๋งŽ์œผ๋ฉฐ, ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ตฌ์„ฑ๋จ
    Angular ๋ชจ๋“ˆ (NgModule)์„ ํ†ตํ•œ ๋…ผ๋ฆฌ์  ๋ถ„๋ฆฌ์™€ ์–‘์‹, HTTP ํ˜ธ์ถœ, ๋ผ์šฐํŒ… ๋“ฑ์— ๋Œ€ํ•œ ํ‘œ์ค€ ๊ธฐ๋Šฅ์€ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ฝ๊ณ  ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋„๋กํ•ฉ๋‹ˆ๋‹ค.

  • PRO : RxJS์™€ ์ตœ๊ณ ์˜ ํ†ตํ•ฉ
    ์ผ๋ฐ˜์ ์œผ๋กœ ๋งŽ์€ API ์ŠคํŠธ๋ฆผ ๋ฐ ํ•œ ํŽ˜์ด์ง€์˜ ๋งŽ์€ ์ด๋ฒคํŠธ ์ŠคํŠธ๋ฆผ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

  • PRO : ๋‚ด์žฅ DI (์ข…์†์„ฑ ์ฃผ์ž…) ์‹œ์Šคํ…œ
    ํŠนํžˆ RxJS์™€ ๊ฒฐํ•ฉ ๋œ ๊ฒฝ์šฐ ํ™•์žฅ ์„ฑ ์ง€์  ๋ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“œ๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

  • ์žฅ์  : ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋‹ค๋ฃจ๋Š” ๋‹ค๋ฅธ ๋งŽ์€ ์ƒ์ž๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

    • ํ—ˆ์šฉ ๋ผ์ด์„ผ์Šค๊ฐ€์žˆ๋Š” UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
      PrimeNg, Angular Material 2, ngx-bootstrap ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

    • ์ง€์—ฐ ๋กœ๋”ฉ
      ์ง€์—ฐ๋กœ๋“œ ๊ฒฝ๋กœ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์› ๋ฐ ์ˆ˜๋™์œผ๋กœ ์ง€์—ฐ๋กœ๋“œ ๋ชจ๋“ˆ๋„ ์ง€์›

    • ๊ตฌ์„ฑ ์š”์†Œ ๋ณ„ CSS
      CSS ๋ฒ”์œ„๊ฐ€ ๊ตฌ์„ฑ ์š”์†Œ๋กœ๋งŒ ์ง€์ •๋˜๊ณ  ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€๋กœ๋“œ ๋  ๋•Œ๋งŒ๋กœ๋“œ๋˜๋ฉฐ ์ „์—ญ CSS์— ๋Œ€ํ•œ ํ›„ํฌ๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

    • ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง
      ์ด๋ฏธ Node ๋ฐ ASP .NET Core๋กœ ์ž‘์—…ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์š”์ฆ˜ ๋” ์ง‘์ค‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

    • ํ…Œ์ŠคํŒ…
      Angular๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ๋งค์šฐ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” ํ…Œ์ŠคํŠธ ๋„์šฐ๋ฏธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. Jest๋กœ ์‰ฝ๊ฒŒ ์ „ํ™˜ ํ•  ์ˆ˜์žˆ๋Š” Jasmine์„ ์‚ฌ์šฉํ•˜์—ฌ CLI์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ๋˜ํ•œ E2E ํ…Œ์ŠคํŠธ๋ฅผ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์„ ํƒ์ ์ธ Selenium wrapper Protractor๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค (์‹ค์ œ๋กœ ํ•„์š”ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ Angular ์•ฑ์— Selenium .NET์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. Angular์™€ ๊ด€๋ จ์ด ์—†์ง€๋งŒ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๋ ค๊ณ  ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค).

    • ๋ชจ๋ฐ”์ผ / PWA ์ง€์›
      Google์€ PWA์˜ ๊ฐ€์žฅ ํฐ ์ง€์›์ž์ด๋ฉฐ ์„œ๋น„์Šค ์›Œ์ปค์™€ ์œ ๋‹ˆ๋ฒ„์„ค (์„œ๋ฒ„ ์ธก ์ง€์›), Ionic (Cordova ์ง€์›) ๋ฐ NativeScript (๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ)๋ฅผ ํ†ตํ•ด ์ด๋ฏธ Angular CLI์— ์ง€์›์ด ํ‘œ์‹œ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • PRO : ๋ธŒ๋ผ์šฐ์ € ์ง€์›์— ์ง‘์ค‘
    ๋ฌธ์„œ์— ์ „์šฉ ํด๋ฆฌ ํ•„ ํŽ˜์ด์ง€๊ฐ€ ์žˆ๊ณ  CLI์— ๊ธฐ๋ณธ์ ์œผ๋กœ ํด๋ฆฌ ํ•„์„ ์‚ฝ์ž… (์ฃผ์„ ์ฒ˜๋ฆฌ ๋œ)ํ•˜๋Š” Angular๋Š” IE <= 11์— ํ•„์š”ํ•œ ์ •ํ™•ํ•œ ํด๋ฆฌ ํ•„์˜ ๋ฃจํ”„๋ฅผ ์œ ์ง€ํ•˜๋ฏ€๋กœ ํ›จ์”ฌ ๋” ํฐ ํด๋ฆฌ ํ•„์„๋กœ๋“œ ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด์œ ์—†์ด ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ์ง€์›์— ๊ด€์‹ฌ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  • ์žฅ์  : ๋Œ€๊ธฐ์—… ์ง€์›
    Angular๋Š” ๋Œ€๊ธฐ์—…์—์„œ ์ง€์›ํ•˜๋Š” ๋ช‡ ์•ˆ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.
    ์—ฌ๊ธฐ๋ฅผ ์ง€์›ํ•จ์œผ๋กœ์จ ๋ช‡ ๊ฐ€์ง€ ํ”„๋กœ์ ํŠธ์—์„œ์ด๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ƒํƒœ๊ณ„์— ๋‹ค์‹œ ๊ธฐ์—ฌํ•œ ํšŒ์‚ฌ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ์ž์™€ ๊ธฐ์ˆ  ์ž‘์„ฑ์ž์—๊ฒŒ ํ’€ ํƒ€์ž„์œผ๋กœ ์ผํ•˜๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋” (์ด ๊ฒฝ์šฐ GDE ๋ฐ DevRel)์— ํˆฌ์žํ•˜๋Š” ๊ณต์‹ ์œ ์ง€ ๊ด€๋ฆฌ์ž๊ฐ€๋ฉ๋‹ˆ๋‹ค. Google์˜).
    ์ด๊ฒƒ์€ ์ถ”๊ฐ€ ์กฐํ•ญ, ํ•ด์ง€ ๋ฉ”๋ชจ ๋˜๋Š” ์ผ๋ถ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ˜ผ๋ž€ ์Šค๋Ÿฝ๊ฑฐ๋‚˜ ๋‘๋ ค์šธ ์ˆ˜์žˆ๋Š” ๊ธฐํƒ€ ์‚ฌํ•ญ์ด์—†๋Š” MIT ๋ผ์ด์„ผ์Šค์™€ ํ•จ๊ป˜ ์ œ๊ณต๋˜๊ธฐ ๋•Œ๋ฌธ์— PRO๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ, REST API์™€ ๊ฐ™์€ ์ผ๋ถ€ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด Vuejs ๋ฅผ ๊ตฌํ˜„

์š”์ฆ˜ Vuejs๋Š” ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Vuejs ๊ฐ€ WordPress ์ฝ”๋“œ์— ํ†ตํ•ฉ๋˜๋ฉด ํ˜„๋ช…ํ•œ ์„ ํƒ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@cyberwani @thephilip @evoratec ๋ฐ ๊ธฐํƒ€.

@ntwb ๋Š” ์ด๋ฏธ ๋‹ค์Œ ๋Œ“๊ธ€์— ๋‹ต์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๋” ์ด์ƒ "๋‚˜๋Š” XYZ์— ํˆฌํ‘œ"ํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ๊ทธ๋“ค์€์ด ๋ฌธ์ œ๋ฅผ ๊ตฌ๋…ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋ถˆํ•„์š”ํ•œ ๋‹ต์žฅ์„ ๋ณด๋‚ด๋Š” ๊ฒƒ ์™ธ์—๋Š” ๋Œ€ํ™”์— ์ถ”๊ฐ€ ํ•  ์ผ์ด ์—†์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ ์“ธ๋ชจ์—†๋Š” ๋ง์€ ๊ทธ๋งŒํ•ด์ฃผ์„ธ์š”. ์ง€์›์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด github ์ด๋ชจํ‹ฐ์ฝ˜์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ ํ˜ธํ•˜๋Š” ๋Œ“๊ธ€์— ์ข‹์•„์š”๋ฅผ ํ‘œ์‹œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Vue.

๊ทธ๋Ÿฐ๋ฐ ํ˜„์žฌ Vue ๋’ค์— Alibaba๊ฐ€ ์žˆ์œผ๋ฉฐ ๋ชจ๋ฐ”์ผ์—์„œ Vue API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” Weex Apache ํ”„๋กœ์ ํŠธ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚œ ์ •๋ง ์—ฌ๊ธฐ์— ์•ฝ๊ฐ„์˜ ์ ˆ์ œ๋ฅผ ๋„ฃ์—ˆ ์–ด, ๋ถ„๋ช…ํ•œ ๋…ผ์Ÿ์—†์ด ๋„ˆ๋ฌด ๋งŽ์€ ํŒฌ ๋ณด์ด๋“ค

์ด๊ฒƒ์€ ๋งˆ์ง€๋ง‰ ๊ฒฝ๊ณ ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ ๋‹จ๊ณ„๋Š” ๋Œ“๊ธ€ ์‚ญ์ œ๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ €, ์ €๋Š” Marko, Preact ๋˜๋Š” Vue.js๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์†”์งํžˆ ๋งํ•ด์„œ ๊ทธ๋“ค ์ค‘ ์–ด๋Š ๊ฒƒ๋„ ์ต์ˆ™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์›Œ๋“œ ํ”„๋ ˆ์Šค ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€์ด ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๋Œ€ํ•ด ๋งํ•˜๋Š” ๊ฒƒ์„ ๋“ฃ๊ณ  ์ฝ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค ๊ฐ๊ฐ, ๊ฐ๊ฐ์˜ ๊ธฐ์ˆ ์  ์žฅ์ , ๊ฐ๊ฐ์˜ ์ฃผ๋ณ€ ์ƒํƒœ๊ณ„, ๋นŒ๋“œ ๋„๊ตฌ, ๊ทธ๋ฆฌ๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ์ด ํ”„๋กœ์ ํŠธ ๋’ค์—์žˆ๋Š” ์‚ฌ๋žŒ๊ณผ ์ปค๋ฎค๋‹ˆํ‹ฐ. ๐Ÿ˜„

"๋‚ด ํˆฌํ‘œ๋Š” XYZ์— ๋Œ€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค"๋ฅผ ์ฝ๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํˆฌํ‘œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ์œ„๋กœ ์Šคํฌ๋กคํ•˜์—ฌ ์ด๋ฏธ ์œ„์—์„œ ์–ธ๊ธ‰ ํ•œ ์„ ํƒํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ์ด๋ชจํ‹ฐ์ฝ˜ _ ์ข‹์•„์š” _ ๋ฐ˜์‘์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ‘

์ด์ „ ๋Œ“๊ธ€ ์ดํ›„ ๋‘ ๊ฐœ์˜ ์ƒˆ ๋Œ“๊ธ€์ด ํ‘œ์‹œ๋˜๋Š” ๋ฐ ์˜ค๋ž˜ ๊ฑธ๋ฆฌ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค .๐Ÿ˜ž

์ด๋ฅผ ์œ„ํ•ด ... https://github.com/WordPress/gutenberg/issues/2733#issuecomment -329705942 ์ดํ›„์— ๋Œ“๊ธ€์ด ์ถ”๊ฐ€๋˜์—ˆ๊ณ  _ "๋‚˜๋Š” XYZ์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค"_ ๋˜๋Š” ๊ทธ์— ๋Œ€ํ•œ ํ…์ŠคํŠธ ๋งŒ ์žˆ์œผ๋ฉด ๊ท€ํ•˜์˜ ๋Œ“๊ธ€์ด ์‚ญ์ œ ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋งค์šฐ ๋†’์œผ๋ฉด ๋™์ผํ•œ ilk์˜ ํ–ฅํ›„ ๋Œ“๊ธ€ ๋„ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค .

์ด ๋ฌธ์ œ๋กœ ๋Œ์•„๊ฐ€์„œ ๋Œ“๊ธ€์ด ์‚ญ์ œ ๋œ ์ด์œ ๊ฐ€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด

@ahmadawais ๋ช‡ ๊ฐ€์ง€ ์˜๊ฒฌ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ตฌํ…๋ฒ ๋ฅดํฌ์˜ React์—์„œ ...?

์— ๊ด€ํ•ด์„œ:

@patrickgalbraith ์‚ฌ์‹ค Preact๋ฅผ ๊ณ ๋ คํ•˜๋Š” ์ž˜๋ชป๋œ ์ด์œ ์ž…๋‹ˆ๋‹ค. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ๋” ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์—๊ฐ€ ์•„๋‹ˆ๋ผ ์žฅ์ ์œผ๋กœ ํŒ๋‹จํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. Preact์—์„œ ๋‹ค์Œ ๋ฌธ์ œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • VueJS์— ๋น„ํ•ด ๋” ์ž‘์€ ์ปค๋ฎค๋‹ˆํ‹ฐ
  • Code Smells โ€” ๋งค์šฐ ์œ ์‚ฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ์˜ ์ „ํ™˜์œผ๋กœ ์ธํ•ด ์ž˜๋ชป๋œ ์‚ฌ๋ก€๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (๋” ๋น ๋ฅธ ๊ฒฝ๋กœ๋ผ๋Š” ๋ถ„๋ช…ํ•œ ์ด์œ  ๋•Œ๋ฌธ).
  • Preact๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ์€ ์–ด์จŒ๋“  React๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค (์Šค๋ ˆ๋“œ์—์„œ ์ฝ์œผ์‹ญ์‹œ์˜ค)

์‚ฌ์†Œํ•œ ์ค„์˜ ์ฝ”๋“œ๊ฐ€์žˆ๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€์žˆ์„ ๋•Œ๋Š” ๋งค์šฐ ์กฐ์‹ฌํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์—”์ง€๋‹ˆ์–ด๋Š” ๋ฌด์–ธ๊ฐ€๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๊ณ , ์ƒˆ๋กœ์šด ์–ธ์–ด์™€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๋ฐฐ์šฐ๊ณ , ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ๋‚˜์€ ์ผ์„ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. Joel์€ ์•„์ฃผ ์˜ค๋ž˜ ์ „์— ์žฌ ์ž‘์„ฑ์˜ ์œ„ํ—˜์— ๋Œ€ํ•ด ๋งํ–ˆ์Šต๋‹ˆ๋‹ค .
Preact๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋งŽ์€ ์‹œ๊ฐ„์„ ์ ˆ์•ฝ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™„์ „ํžˆ ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ ์ด๋™ํ•˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ๊ณผ์†Œ ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋‹น์‹ ์ด "์‚ฌ์‹ค Preact๋ฅผ ๊ณ ๋ คํ•˜๋Š” ์ž˜๋ชป๋œ ์ด์œ ์ž…๋‹ˆ๋‹ค"๋ผ๊ณ  ์“ด ์ด์œ ๋ฅผ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์—”์ง€๋‹ˆ์–ด๋กœ์„œ ์†”๋ฃจ์…˜์„ ํ‰๊ฐ€ํ•˜๊ณ  ์„ ํƒํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ค€ ๋ชฉ๋ก์—์„œ ๋น„์šฉ๊ณผ ์ถœ์‹œ ์‹œ๊ฐ„์ด ๋†’์Šต๋‹ˆ๋‹ค.
๋ฌธ์ œ๊ฐ€ ์‹ค์ œ๋กœ Facebook ํŠนํ—ˆ๋ผ๋ฉด Preact๋Š” ๋น„์šฉ์„ ์ตœ์†Œํ™”ํ•˜๋ฉด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค. Preact๋Š” React ๋ฐ Vue๋ณด๋‹ค ๋” ์„ฑ๋Šฅ์ด ๋›ฐ์–ด๋‚ฉ๋‹ˆ๋‹ค : ๋” ์ž‘์€ ํ’‹ ํ”„๋ฆฐํŠธ์™€ ๋” ๋น ๋ฅธ ๋Ÿฐํƒ€์ž„ ๋ Œ๋”๋ง. Addy Osmani์˜ ๊ธ€ ๋„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

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

Vue๊ฐ€ ์—ฌ์ „ํžˆ ์„ ํ˜ธํ•˜๋Š” ์˜ต์…˜ ์ธ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์—ฌ๊ธฐ์„œ ์„ธ ๋ฒˆ์งธ ์š”์ ์€ "Preact๋กœ ๊ณ ์ •ํ•˜๋Š” ๊ฒƒ์€ ์–ด์จŒ๋“  React๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™๋‹ค"๋Š” ๊ฒƒ์ด Preact๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์„ ์ฃผ์ €ํ•˜๋Š” ์ฃผ๋œ ์ด์œ  ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ž˜๋ชป? ํŠนํ—ˆ ์™ธ์— React์˜ ๋ฌธ์ œ์ ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

ํฐ ๊ทธ๋ฆผ์„ ๋ณด๋ฉด์„œ

๊ตฌํ…๋ฒ ๋ฅดํฌ๋ฅผ ์œ„ํ•ด ์„ ํƒํ•œ ๋ชจ๋“  ๊ฒƒ์ด ์นผ๋ฆฝ์†Œ์—๋„ ์‚ฌ์šฉ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.
Gutenberg๋Š” ํ”„๋ก ํŠธ ์—”๋“œ์—์„œ๋งŒ React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ๋ณด๋ฉด ์ƒํ™ฉ์ด ๋” ๋ณต์žกํ•ด ์ง€์ง€๋งŒ Preact๋Š” ์—ฌ์ „ํžˆ ๋” ์‰ฌ์šด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์˜ต์…˜์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

๊ธฐ์ค€์„ ๋ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์žฌ ์ž‘์„ฑ์„ ์ง„์ง€ํ•˜๊ฒŒ ๊ณ ๋ คํ•˜๊ณ  ๋™ํ˜• ๋ Œ๋”๋ง์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š” ํ•˜๋‹ค๋ฉด MarkoJS ๊ฐ€ ํ›„๋ณด ๋ชฉ๋ก์—์„œ ๋†’์€ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

์ฒ˜์Œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ React ์ƒํƒœ๊ณ„๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด MarkoJS๋Š” ์ƒ๊ฐํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๊ณต์—ฐ์„๋ณด๊ณ  ์žˆ๋Š”๋ฐ MarkoJS๋Š” ๋ผ์ด๋ฒŒ์ด์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค . React๋ณด๋‹ค 40 ๋ฐฐ ๋น ๋ฅด๋ฉฐ Vue๋ณด๋‹ค 6 ๋ฐฐ ๋น ๋ฆ…๋‹ˆ๋‹ค. ๋‚ด ์ฑ…์—์„œ 30 % ๊ฐœ์„ ์€ ๋ฌด๊ด€ํ•˜์ง€๋งŒ 10 ๋ฐฐ ์ด์ƒ ๊ฐœ์„ ๋˜๋ฉด ์ง„์ง€ํ•˜๊ฒŒ์ฃผ์˜๋ฅผ ๊ธฐ์šธ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค.
์ ๋‹นํžˆ ์„ฑ๊ณต์ ์ธ ์กด์žฌ๊ฐ์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ  100 ๋Œ€๊ฐ€ ์•„๋‹Œ 10 ๋Œ€์˜ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ 20 ๋Œ€๊ฐ€ ์•„๋‹Œ 2 ๋Œ€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ํฐ ์ฐจ์ด๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์™„์ „ํ•œ ๊ณต๊ฐœ ๋‚˜๋Š” Preact ๋˜๋Š” MarkoJS์— ๋Œ€ํ•œ ๊ฐ์ •์  ์• ์ฐฉ์ด ์—†์Šต๋‹ˆ๋‹ค . ๋‚˜๋Š” ๊ทธ๋“ค์ด ์—”์ง€๋‹ˆ์–ด๋ง ์ „๋ง์˜ ๋Œ€์•ˆ๋ณด๋‹ค ๋” ์˜๋ฏธ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‹น์‹ ์˜ ๊ฒฐ์ •์— ํ–‰์šด์„ ๋น•๋‹ˆ๋‹ค ๐Ÿ˜ƒ

@BTS_twt แ„ แ„ แ„ แ„ แ„ แ„ แ„ แ„ แ„

๋‚˜๋Š” Drupal ์„ธ๊ณ„์—์„œ ์™”๊ธฐ ๋•Œ๋ฌธ์— (์šฐ๋ฆฌ๋Š”์ด ๋ฌธ์ œ๋ฅผ๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. : D) ์ €๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ดํ•ด ๊ด€๊ณ„๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ฃผ์„์„ ์ฝ์œผ๋ฉด ์—ฌ๊ธฐ์— ์•ฝ 5 ๊ฐœ์˜ "์ƒ์œ„"ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ์žˆ์œผ๋ฉฐ ๋ชจ๋‘๊ฐ€ ์„ ํƒํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์ข‹์•„ํ•˜๋ฏ€๋กœ ์†Œํ’ˆ์„ ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์š”์ฆ˜์—๋Š” ์†๋„ ์ธก๋ฉด์ด ๋ฌด์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๊ณ ๋ คํ•ด์•ผ ํ•  ์œ ์ผํ•œ ๋‘ ๊ฐ€์ง€ ์š”์†Œ๋Š” a) ์ •๋ง๋กœ ๋ชจ๋“  ๊ฒƒ์„ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๊นŒ? b) React ๊ฐœ๋ฐœ์ž์˜ ์ „ํ™˜์€ ์–ด๋–ป๊ฒŒ ๋  ๊ฒƒ์ด๋ฉฐ ์ƒˆ๋กœ์šด ๊ฐœ๋ฐœ์ž์˜ ๊ฒฝ์šฐ ์šฐ์Šน ํ•œ fw๋ฅผ ๋ฐฐ์šฐ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์‰ฌ์šด ์ „ํ™˜์„์œ„ํ•œ preact-compat, inferno-compat ... ๋ ˆ์ด์–ด๊ฐ€ ์žˆ์ง€๋งŒ ์„ฑ๋Šฅ์ด ์ €ํ•˜๋ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ์ „ํ™˜์ด ์šฐ์•„ํ•˜๊ฒŒ ์ด๋ฃจ์–ด์ง€๋ฉฐ ๋ชจ๋“  ๊ฒƒ์„ ํ•œ ๋ฒˆ์— ๋‹ค์‹œ ์ž‘์„ฑํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. ๋น„์ฆˆ๋‹ˆ์Šค POV์—์„œ ์ด๊ฒƒ์€ ์ƒ๊ฐํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ POV์™€ ๋ฏธ๋ž˜์—์„œ๋Š” ์ฐจ์ด๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด์ œ DX๋Š” ๋ชจ๋“  ๊ฒƒ์ด์žˆ๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. ๋ฐ˜์‘ ํ˜• fws์— ๊ฒฝํ—˜์ด์žˆ๋Š” ์‚ฌ๋žŒ์€ ๊ฐœ๋…์ด ๋™์ผํ•˜๊ณ  ๊ตฌ๋ฌธ ๋งŒ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ƒˆ๋กœ์šด fw๋กœ ์ „ํ™˜ํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ์—†์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ดˆ๋ณด์ž, ๊ทธ๊ฒƒ์ด ์ค‘์š”ํ•œ ์‚ฌ๋žŒ์ž…๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด fw์—์„œ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์–ด๋ ต๊ณ  / ์‰ฝ์Šต๋‹ˆ๊นŒ? ๊ธฐ์กด ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์–ด๋ ต๊ณ  / ์‰ฝ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์€ ์˜ค๋กœ์ง€ a) ์ข‹์€ ๋ฌธ์„œ์™€ b) ์ปค๋ฎค๋‹ˆํ‹ฐ (ํฌ๋Ÿผ, SO, ์ฑ„ํŒ…๋ฃธ, ๋ธ”๋กœ๊ทธ ..)์—๋งŒ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๋งํ–ˆ๋“ฏ์ด ๋‚˜๋Š” WP ์‚ฌ๋žŒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ค FW๋ฅผ ์„ ํ˜ธํ•˜๋Š”์ง€ ๋งํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ €๋Š” ์ „ ์„ธ๊ณ„ ์ˆ˜์ฒœ ๋ช…์˜ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น  ํฐ ๊ฒฐ์ •์— ๋Œ€ํ•ด ๋จธ๋ฆฌ๋ฅผ ์‹œ์›ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด 2c๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

@ntwb : ์ œ ๋Œ“๊ธ€์€ ์‚ญ์ œํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ , ํŒฌ ๋ถ„๋“ค์˜ ๋Œ“๊ธ€๋„ ์ผ์ข…์˜ ๊ฒ€์—ด์ด๋ผ๊ณ  ์ƒ๊ฐ ํ•ด์š”.

์™œ:

๊ท€ํ•˜์˜ ๋Œ“๊ธ€์ด # 2733 (๋Œ“๊ธ€) ์ดํ›„์— ์ถ”๊ฐ€๋˜์—ˆ๊ณ  "XYZ์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค"๋ผ๊ณ  ๋งํ–ˆ๊ฑฐ๋‚˜ ๊ท€ํ•˜์˜ ๋Œ“๊ธ€์ด ์‚ญ์ œ ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋งค์šฐ ๋†’์€ ํ…์ŠคํŠธ ์ผ โ€‹โ€‹๊ฒฝ์šฐ, ๋™์ผํ•œ ilk์˜ ํ–ฅํ›„ ๋Œ“๊ธ€ ๋„ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค. .

๊ทธ ์œ„์— ํŒฌ ๋ณด์ด๋“ค์˜ ๋Œ“๊ธ€์ด ๋งŽ์ด ๋ณด์ž…๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์™œ ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๊นŒ?
์ด์ค‘ ๊ธฐ์ค€ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Angular๋Š” ๋ถ„๋ช…ํ•œ ์„ ํƒ์ž…๋‹ˆ๋‹ค. Roy์™€ Meligy๊ฐ€ ํ™˜์ƒ์ ์ธ ํฌ์ธํŠธ๋ฅผ ๋งŒ๋“ค์–ด 100 % ์ง€์›ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. WordPress๋Š” ์‚ฌ์šฉ ์ค‘์ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋ก  ์ธก๋ฉด์—์„œ๋„ Enterprise ์˜์—ญ์œผ๋กœ ์ด๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์žฌ๋ฏธ์žˆ๋Š” ์†Œ์Šค๋ฅผ ์—ฐ๊ฒฐํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. https://vuejs.org/v2/guide/comparison.html ํŠนํžˆ : "... Angular์˜ ๋ณต์žก์„ฑ์€ ์ฃผ๋กœ ํฌ๊ณ  ๋ณต์žกํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ... ". ๊ทธ ๊ฐ„๋‹จํ•œ ์ง„์ˆ ์€ ๋จธ๋ฆฌ์— ๋ชป์„ ๋ฐ•์•˜๋‹ค. WordPress๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ๋ณต์žกํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด๋ฉฐ ์•ž์œผ๋กœ๋„ ๊ณ„์† ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@ChrisCinelli ๋‹จ์ˆœํžˆ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ "๋‚˜๋Š” xyz์—๊ฒŒ ํˆฌํ‘œํ•œ๋‹ค"๋ผ๊ณ  ๋งํ•˜์ง€ ๋ง๋ผ๊ณ  ์š”์ฒญํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋‚˜๋Š” ๋‹น์‹ ์ด ์–ด๋””์—์„œ ์™”๋Š”์ง€ ์ดํ•ดํ•˜์ง€๋งŒ ๊ทธ ์ฝ”๋ฉ˜ํŠธ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์€ ํ˜•ํŽธ์—†๋Š” ํ˜•์‹์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค ์ค‘ ํ•˜๋‚˜๋ฅผ ์ œ๊ฑฐ

๊ถŒ์žฅํ•˜์ง€ ์•Š์€ ํ”„๋ ˆ์ž„ ์›Œํฌ (์œ„์˜ Angular ๊ถŒ์žฅ)๋ฅผ ๊ณต๊ฒฉํ•˜๊ณ  ์‹ถ์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋” ์ผ์ฐ ๊ฐ€์ ธ ์˜ค์ง€ ์•Š์•˜์ง€๋งŒ, ์™„์„ฑ๋„๋ฅผ ์œ„ํ•ด Preact ๋ฐ ๊ธฐํƒ€ React์™€ ์œ ์‚ฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์ •๋ฆฌํ•ด์•ผ ํ•  ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. . ์—ฌ๊ธฐ์— ๋„ฃ์„ ๊ฒƒ์ด๊ณ , ๊ทธ๊ฒƒ์ด ๊ฑฑ์ •๊ฑฐ๋ฆฌ์ธ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์€ WordPress์˜ ๋ชซ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ React ๋ผ์ด์„ผ์Šค ์— ๋Œ€ํ•œ ํŠนํ—ˆ / IP ๋ณ€ํ˜ธ์‚ฌ๊ฐ€ ์ž‘์„ฑํ•œ ๊ฒŒ์‹œ๋ฌผ ์˜ ์ธ์šฉ๋ฌธ์ž…๋‹ˆ๋‹ค ( ๊ตต์€ ๊ฐ•์กฐ ํ‘œ์‹œ๋Š” ์†Œ์Šค์—์„œ ๋ณต์‚ฌ ๋จ).

์ €๋Š” "๊ทธ๋Ÿผ ๋ชจ๋‘ [์—ฌ๊ธฐ์—์„œ ๋Œ€์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ]๋ฅผ ์‚ฌ์šฉํ•ฉ์‹œ๋‹ค."๋ฅผ ๋งŽ์ด ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์ž ๊น๋งŒ ๊ธฐ๋‹ค๋ ค ๋ด. Facebook ํŠนํ—ˆ๊ฐ€ React (์ฐจ๋ณ„, ๊ตฌ์„ฑ ์š”์†Œ ํ™” ๋“ฑ)๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ํŠนํ—ˆ๋Š” Preact / Vue / et al์„ ํฌํ•จ ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ React๋Š” ๋‹น์‹ ์—๊ฒŒ ํŠนํ—ˆ๋ฅผ ๋ถ€์—ฌํ•ฉ๋‹ˆ๋‹ค! ๋Œ€์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฒ˜์Œ๋ถ€ํ„ฐ ์นจํ•ด์ž๊ฐ€๋ฉ๋‹ˆ๋‹ค. ์ด ๋ชจ๋“  ๊ฒƒ์€ Facebook์ด ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์™€์ด๋ฅผ ์‹œํ–‰ํ•˜๋ ค๋Š” ์š•๊ตฌ๋กœ ๊ท€๊ฒฐ๋˜์ง€๋งŒ,์ด ๊ฒŒ์ž„์„ n ๋ฒˆ์งธ ์ˆ˜์ค€๊นŒ์ง€ ์ „์Ÿ์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด React ๋Œ€์•ˆ์ด ๋” ์œ„ํ—˜ ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ ๋‚ด ์ดํ•ด๊ฐ€ ๋งž๋‹ค๋ฉด WordPress๋Š” ๋ผ์ด์„ผ์Šค ์ž์ฒด์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์— React๋ฅผ ๋– ๋‚˜์ง€ ์•Š๊ณ ์ด ๋ผ์ด์„ผ์Šค๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ „๋‹ฌํ•ด์•ผํ•˜๋ฏ€๋กœ ํ˜ผ๋ž€๊ณผ ๊ฒฐ์ •์„ ๋ฐฉ์–ดํ•ด์•ผ ํ•  ํ•„์š”์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

React ๋Œ€์•ˆ์œผ๋กœ ๊ฐ€๋ฉด ๋Œ€์•ˆ ๋ผ์ด์„ผ์Šค๊ฐ€ ํ—ˆ์šฉ๋˜๋Š” ๊ฒฝ์šฐ ๋ฐฉ์–ด ํ•  ๊ฒƒ์ด ์ ์„ ์ˆ˜ ์žˆ์ง€๋งŒ WordPress์— ์—ฌ์ „ํžˆ ์•ฝ๊ฐ„์˜ ํ˜ผ๋ž€์ด์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ๊ฑฑ์ •ํ•  ๊ฒƒ์ธ์ง€ ์•„๋‹Œ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์€ WordPress์˜ ๋ชซ์ž…๋‹ˆ๋‹ค.

@ChrisCinelli ๋Š” ๊ฑด์„ค์ ์ธ ๋น„ํŒ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ด๋ฆฐ ์†์œผ๋กœ ๊ทธ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์—”์ง€๋‹ˆ์–ด๋กœ์„œ ๋น„์šฉ๊ณผ ์‹œ๊ฐ„์ด ๊ฐ€์žฅ ๋†’๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๊ธฐ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํŠน์ • ๊ธฐ์—…์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋ชฉํ‘œ๋Š” ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๋ชฉํ‘œ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ข‹์€ JS FW๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ตฌํ…๋ฒ ๋ฅดํฌ๋Š” ์•„์ง ์ถœ์‹œ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ž‘๋™ํ•œ๋‹ค๋ฉด Preact๊ฐ€ ํ™•์‹คํ•œ ์Šน์ž๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ง€๊ธˆ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค :

  • JS FW๋Š” ๋” ๋งŽ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์‰ฝ๊ฒŒ ์ฑ„ํƒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์šฐ๋ฆฌ๊ฐ€ ์„ ํƒํ•œ JS FW์—๋Š” ์ž์ฒด ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์ƒํƒœ๊ณ„๊ฐ€ ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.
  • PHP ๊ธฐ๋ฐ˜ ํ”„๋กœ๋•์…˜ FOSS ์†Œํ”„ํŠธ์›จ์–ด๋กœ ์ž…์ฆ ๋œ ์‹ค์ ์€ ์žฅ์ ์ž…๋‹ˆ๋‹ค. Vue + Laravel
  • ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ๋” ์‰ฝ๊ธฐ ๋•Œ๋ฌธ ๋งŒ์ด ์•„๋‹ˆ๋ผ ์žฅ์ ์„ ๊ธฐ๋ฐ˜์œผ๋กœ JS FW ์„ ํƒ

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

WordPress ๊ฐœ์„ ์˜ ์ƒˆ๋กœ์šด ๋‹จ๊ณ„๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ Preact-React ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ฉด WordPress ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋– ๋‚˜ ์œ ์‚ฌํ•œ ํ•™์Šต ๊ณก์„ ์œผ๋กœ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (_HINT_ : WordPress + Preact + React ๋Œ€์‹  Laravel + Vue) ๊ทธ๋ฆฌ๊ณ  BTW๋Š” Drupal 8์—์„œ ์ผ์–ด๋‚˜๋Š” ์ผ์„ ์žŠ๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๋ฏผ์‚ฌ ๋Œ“๊ธ€์„ ์‚ญ์ œํ•˜์ง€ ๋งˆ์„ธ์š”. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์˜๊ฒฌ์„ ํ‘œ๋ช…ํ•˜๋ ค๋Š” ์š•๊ตฌ๊ฐ€ ์••๋„์ ์ž…๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์ด ์›Œ๋“œ ํ”„๋ ˆ์Šค์— ๊ด€์‹ฌ์ด ์žˆ๊ณ  ๋“ฃ๊ณ  ์‹ถ์–ดํ•œ๋‹ค๊ณ  ๋งํ•˜๋ฉด์„œ ์ข‹์€ ์ผ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋ฟ๋งŒ ์•„๋‹ˆ๋ผ WordPress ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด Github๋กœ ์ด๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ •๋ง๋กœ +1 ๋Œ“๊ธ€์„ ํ—ˆ์šฉ ํ•  ์ˆ˜ ์—†๋‹ค๋ฉด ์ƒ๋‹จ์— ์‚ฌ์šฉ์ž ์ด๋ฆ„์„ ์œ ์ง€ํ•˜๋Š” ์ง‘๊ณ„๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

ํ•ฉ๋ฆฌ์ ์ธ ํ† ๋ก ์„ ์ฐพ๊ณ  ์žˆ๋‹ค๋ฉด "X, Y ๋˜๋Š” Z์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค."๋ผ๋Š” ๋Œ“๊ธ€์ด ๋งŽ์ด ์†Œ์Œ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜ ์žˆ์ง€๋งŒ Vue.js๋ฅผ ์ง€์›ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์˜ ๋ช…ํ™•ํ•œ ํŒจํ„ด์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ๊ตฌํ…๋ฒ ๋ฅดํฌ์— ์ฝ”๋“œ๋ฅผ ๊ธฐ์—ฌํ•  ์‚ฌ๋žŒ์ด ์ˆ˜๋ฐฑ ๋ช…, ์ˆ˜๋ฐฑ ๋ช…์ด์ง€๋งŒ ๊ทธ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ํ…Œ๋งˆ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์‚ฌ๋žŒ์€ ์ˆ˜๋งŒ ๋ช…์ด๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Gutenberg์˜ ์„ฑ๊ณต์€ ์ตœ์ข… ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์œ ์ผํ•œ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ WordPress๋ฅผ ์„ฑ๊ณต์œผ๋กœ ์ด๋„๋Š” ์ค‘์š”ํ•œ ๊ฒƒ์€ ์‰ฝ๊ฒŒ ํ™•์žฅ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

์•ž์„œ ์–ธ๊ธ‰ํ–ˆ๊ณ  ์•Œ๋ฆผ์„ ๋„๋ ค๊ณ  ์—ฌ๊ธฐ์— ์™”์ง€๋งŒ ์•ฝ๊ฐ„ ๋ฌด๊ฒŒ๋ฅผ ๋‘๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋นŒ๋“œํ•˜๊ณ  ์‹œ๊ฐ„์ด ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋ฉฐ ์ž˜ ์ง€์›๋˜๊ณ  ๋ฌธ์„œํ™”๋˜๊ณ  ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์›ํ•˜๋ฉด ์‹œ๊ฐ„๊ณผ ์†Œ์ค‘ํ•œ ์‹œ๊ฐ„์ด ํ›จ์”ฌ ์ €๋ ดํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ตฌ์ฒด์ ์ธ ๊ฒฝํ—˜์ด ๋งŽ์Šต๋‹ˆ๋‹ค. Ember์™€ ํ•จ๊ป˜ ๊ฐ€์‹ญ์‹œ์˜ค.

PWA๋ฅผ ๋” ๋งŽ์ด ๊ตฌ์ถ•ํ•˜๊ฑฐ๋‚˜ ์„œ๋ฒ„ ๋ Œ๋”๋ง ํŽ˜์ด์ง€์— ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋“œ๋กญํ•˜๋Š” ๊ฒฝ์šฐ Ember๋Š” ์ข‹์ง€ ์•Š์€ ์„ ํƒ์ด๋ฉฐ Vue์™€ ๊ฐ™์€ ๊ฒƒ์ด ๋งค๋ ฅ์ ์ธ ์ด์œ ๋ฅผ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ปจ๋ฒค์…˜ ์ค‘์‹ฌ์˜ ์ธก๋ฉด์—์„œ Ember๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ 90 ์ด์ƒ์˜ ๋“ฑ๋Œ€ ์ ์ˆ˜๋กœ ๋ช‡ ๊ฐœ์˜ PWA๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ด์•ผํ•˜๋Š” ๋งˆ์ง€๋ง‰ ํ”„๋กœ์ ํŠธ์—์„œ ํ•ด๋‹น ๋“ฑ๋Œ€ ์ ์ˆ˜๋ฅผ ์–ป๊ณ  ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์ด ํ™œ์„ฑํ™” ๋œ ์ƒํƒœ๋กœ ์•ฑ์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐ 1 ์‹œ๊ฐ„ ๋ฏธ๋งŒ์ด ๊ฑธ๋ ธ์Šต๋‹ˆ๋‹ค.

๋†’์€ ๋“ฑ๋Œ€ ์ ์ˆ˜์— ํ•„์š”ํ•œ SSR ๋ฐ ์„œ๋น„์Šค ์ž‘์—…์ž ์บ์‹œ๋Š” ๋งค์šฐ ๊นŒ๋‹ค๋กœ์šด ํ”„๋กœ์„ธ์Šค ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Ember๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์ด ํ”„๋กœ์„ธ์Šค๋Š” ๋งค์šฐ ์‰ฝ๊ณ  ์ž˜ ๋ฌธ์„œํ™”๋˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๋˜๋Š” ์• ๋“œ์˜จ ๋ช‡ ๊ฐœ๋งŒ ์„ค์น˜ํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค (๋Œ€๋ถ€๋ถ„์˜ ์•ฑ์—์„œ).
๋‚ด ๊ฒฝํ—˜์ƒ Preact๋Š” Preact CLI์—์„œ ์ด๋Ÿฌํ•œ ๋‘ ๊ธฐ๋Šฅ์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜์ง€๋งŒ SSR ๊ฒฐ๊ณผ๋ฅผ ๊นจ๋œจ๋ฆด ์ˆ˜์žˆ๋Š” ์ธ๊ธฐ์žˆ๋Š” (P) React ๊ทœ์น™์ด ์žˆ์Šต๋‹ˆ๋‹ค.
Vue์™€ ํ•จ๊ป˜ ๊ณต์‹ ๋ฌธ์„œ๋Š” Nuxt.js๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ „์ฒด SSR ๊ฐ€์ด๋“œ ๋ฅผ ๋”ฐ๋ฅผ ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์ด ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘ ๊ธฐ๋ณธ Vue ๋ฌธ์„œ๋ฅผ ๋„˜์–ด์„œ ๋”ฐ๋ผ์•ผ ํ•  ๋” ๋งŽ์€ ํŒจํ„ด์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์•„๋ฌด์—๊ฒŒ๋„ ๋งํ•˜์ง€ ์•Š๊ณ  ์š•์„ค์ด๋‚˜ ์š•์„ค์ด ์•„๋‹Œ ํ•œ ๋ฌธ์ œ์— ๋Œ€ํ•œ ๋Œ“๊ธ€ ์‚ญ์ œ๋ฅผ ๋ณด๋ฅ˜ํ•ฉ์‹œ๋‹ค. ๋Œ€ํ™”๋ฅผ ๋•๊ณ  ์ง‘์ค‘ํ•˜๋ ค๋Š” ์‚ฌ๋žŒ๋“ค์„ ์™„์ „ํžˆ ์–ป์ง€ ๋งŒ, ๋Œ“๊ธ€์„ ์‚ญ์ œํ•˜๋Š” ๋‚˜์„ ํ˜•์— ๋น ์ง€๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค.

VueJS @rtablada ์™€ ๋น„๊ตํ•˜์—ฌ Ember์— ๋Œ€ํ•ด "์ž˜ ๋ฌธ์„œํ™”๋˜์–ด์žˆ๋Š”"๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ์ž˜

๊ฐœ์ธ์ ์œผ๋กœ Vue ๋˜๋Š” React์™€ ๋น„๊ตํ•˜์—ฌ Ember๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@ahmadawais ๋ชจ๋‘๊ฐ€์ด ๊ฒฐ์ •์ด ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น  ๊ฒƒ์ด๋ผ๋Š” ์‚ฌ์‹ค์„ ์žŠ์–ด ๋ฒ„๋ฆฌ๊ณ  ๋ช‡ ๋…„ ์•ˆ์— ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ˜„๋Œ€์ ์ธ ํ”„๋ ˆ์ž„ ์›Œํฌ์˜ ์žฅ์ ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์ง€๋งŒ ๋ผ์ด๋ธŒ์™€ ์ฃฝ์Œ์— ๋ฌถ์—ฌ ์žˆ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ ๊ฐ™๋‚˜์š”? ์•„๋‹ˆ์•ผ!

์–ผ๋งˆ ์ „์— ๋น„์Šทํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ ์—ฐ๊ตฌ์™€ ์‹œ๋„ ๋์— ๋ฌผ๊ณผ ๋ถˆ์„ ์—ฐ๊ฒฐํ•˜๋ ค๋Š” ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ ๋งํ•ด์„œ ์›น ๊ตฌ์„ฑ ์š”์†Œ์˜ ์‚ฌ์šฉ์ž ์ •์˜ ์š”์†Œ, ์›ํ•˜๋Š” ๊ธฐ์ˆ  (์˜ˆ : Vue, React, Angular)์„ ๋ž˜ํ•‘ํ•˜๊ณ  ํ‘œ์ค€ DOM API๋ฅผ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์†”๋ฃจ์…˜์—๋Š” ์—ฌ๋Ÿฌ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ์œผ๋ฉฐ ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ์›ํ•˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ (๋ฌผ๋ก  ๋ฐ”๋žŒ์งํ•˜๊ฒŒ๋Š” ํ•˜๋‚˜๋งŒ)
  • ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ํ‘œ์ค€ DOM API์ž…๋‹ˆ๋‹ค. ์ผ๋ฐ˜ JavaScipt๋ฅผ ํ†ตํ•ด ์กฐ์ž‘ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹น์‹œ Vue์™€ ํ•จ๊ป˜ ์ž‘์—…ํ•˜๋ฉด์„œ Vue ์šฉ Custom Element์˜ ์–ด๋Œ‘ํ„ฐ ( https://github.com/karol-f/vue-custom-element)๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค . ๋”ฐ๋ผ์„œ ์šฐ์ˆ˜ํ•œ ํ˜ธํ™˜์„ฑ (์˜ˆ : Vue์˜ $ emit send ํ‘œ์ค€ DOM ์ด๋ฒคํŠธ ์ผ๋ฐ˜ JS ๋˜๋Š” ์˜ˆ : React / Angular) ๋ฐ IE9 + ํ˜ธํ™˜์„ฑ์„ ํ†ตํ•ด ์บก์ฒ˜๋ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹น์‹ ๊ณผ ๊ฐ™์€ ํ•ด๊ฒฐ์ฑ…์„ ๋ณด๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

  • ๋ฏธ๋ž˜ ๋ณด์žฅ
  • ์˜ค๋Š˜ ์„ ํƒํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ์™€ ์—ฐ๊ฒฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž๋Š” ํ‘œ์ค€ HTML ์š”์†Œ๋ฅผ๋ณด๊ณ  ์›ํ•˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ ๋˜๋Š” ์ผ๋ฐ˜ JS์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŽ˜์ด์ง€์—์žˆ๋Š” ๊ฒฝ์šฐ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ž๋™์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ์•Œ๋ ค์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜๋™ Vue ์ดˆ๊ธฐํ™”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค (์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ง€์—ฐ๋กœ๋“œ ํ•  ์ˆ˜๋„ ์žˆ์Œ).

๊ทธ๋ฆฌ๊ณ  ๋” ๋งŽ์€.

์ด๋Ÿฌํ•œ ์†”๋ฃจ์…˜์€ Vue์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค. ์›ํ•˜๋Š” ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์›น ๊ตฌ์„ฑ ์š”์†Œ์˜ ์‚ฌ์šฉ์ž ์ •์˜ ์š”์†Œ๋Š” ํ‘œ์ค€ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋Šฅ์ด๋ฉฐ ์–ด๋””๋กœ๋„ ์‚ฌ๋ผ์ง€์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค!

๋ฌธ์•ˆ ์ธ์‚ฌ!

์ œ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ๊ตฌํ…๋ฒ ๋ฅดํฌ์— ์ฝ”๋“œ๋ฅผ ๊ธฐ์—ฌํ•  ์‚ฌ๋žŒ์ด ์ˆ˜๋ฐฑ ๋ช…, ์ˆ˜๋ฐฑ ๋ช…์ด์ง€๋งŒ ๊ทธ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ํ…Œ๋งˆ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์‚ฌ๋žŒ์€ ์ˆ˜๋งŒ ๋ช…์ด๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Gutenberg์˜ ์„ฑ๊ณต์€ ์ตœ์ข… ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์œ ์ผํ•œ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ WordPress๋ฅผ ์„ฑ๊ณต์œผ๋กœ ์ด๋„๋Š” ์ค‘์š”ํ•œ ๊ฒƒ์€ ์‰ฝ๊ฒŒ ํ™•์žฅ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Vue๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ํฌ์ธํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— @dmccan์˜ ์œ„ ์ฃผ์„์„ ์ธ์šฉํ•ฉ๋‹ˆ๋‹ค.

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

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

์ผ๋ถ€ ์‚ฌ๋žŒ๋“ค์€ ๊ธฐ์—…๊ณผ Angular์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ณ  ์žˆ์ง€๋งŒ WordPress๋Š” ํ•ด๋‹น ๋ถ„์•ผ์—์„œ ์•ฝ๊ฐ„์˜ ์‚ฌ๋ž‘์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ฒฐ์ •์€ ์˜จ ๋ณด๋”ฉ ๊ฐœ๋ฐœ์ž์˜ ์šฉ์ด์„ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋ฉ”ํƒ€ ๋ฐ•์Šค์™€ ๊ทธ ๋ฐ–์˜ ๊ฒƒ์— ๋Œ€ํ•ด ๋ณธ ํ† ๋ก ์„ ํ†ตํ•ด ํ”Œ๋Ÿฌ๊ทธ์ธ ์ž‘์„ฑ์ž๋Š” ํด๋ž˜์‹ ํŽธ์ง‘๊ธฐ๊ฐ€ ์‚ฌ๋ผ์งˆ ๊ฒฝ์šฐ ํฌ๊ธฐํ•˜๋Š” ๋Œ€์‹  ์ž‘์—…์„ "Gutenberg-ify"ํ•˜๋„๋ก ์œ ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

Vue.js ์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•ด์•ผ ํ•  ๋ช‡ ๊ฐ€์ง€ ์ถ”๊ฐ€ ์‚ฌํ•ญ : (๊ทธ๋ƒฅ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ, ๋‹ค๋ฅธ libs, FW ๋ฐ ์˜ต์…˜์€ ๋†’์ด ํ‰๊ฐ€๋˜๋ฉฐ ํ™•์‹คํžˆ ๊ณ ์œ  ํ•œ ๊ธฐ๋Šฅ๊ณผ ํ”„๋กœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค)

  • PRO ํŠธ๋žœ์Šค ํŒŒ์ผ๋Ÿฌ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๊ฐ•์š” ํ•  ํ•„์š”๋Š” ์—†์œผ๋ฉฐ jquery๊ฐ€ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์›น์—์„œ ์ง์ ‘ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐœ๋ฐœ์ž๊ฐ€ Wordpress UI์™€ ํ†ตํ•ฉํ•˜๋Š” ๋ฐ ๋†€๋ž๋„๋ก ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€์˜ ๋ชจ๋“  ๋ถ€๋ถ„์— ์ƒˆ vue ์ธ์Šคํ„ด์Šค๋ฅผ ์œ„์ ฏ์œผ๋กœ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํฐ Wordpress ํ”„๋กœ์ ํŠธ๋Š” Vue ๊ฐ€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ ๋ ์ง€์— ๋Œ€ํ•ด ๊ฐ€์ •ํ•˜์ง€ Vue.js๋กœ ์ ์ง„์ ์œผ๋กœ ์ฑ„ํƒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด Laravel / Vue๊ฐ€ ์ธ๊ธฐ ์žˆ๊ณ  ํ•จ๊ป˜ ์ž˜ ์ž‘๋™ํ•˜๋Š” ์„ฑ๊ณต์˜ ์—ด์‡ ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. :)

  • PRO JSX ๋ฐ css-in-js๋„ ์ง€์›๋ฉ๋‹ˆ๋‹ค!

React / JSX ์ฝ”๋“œ๊ฐ€์žˆ๋Š” ํ˜„์žฌ WordPress ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณ€๊ฒฝ ์š”๊ตฌ ์‚ฌํ•ญ์ด ์ ์€ vue.js๋กœ ๋น ๋ฅด๊ฒŒ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (๋ฐ”๋ฒจ ํ”Œ๋Ÿฌ๊ทธ์ธ๋„ ์žˆ์Šต๋‹ˆ๋‹ค : babel-plugin-transform-react-to-vue )

  • FACT Vue๋Š” Preact์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ Angular / React์™€ ๋‹ฌ๋ฆฌ Google์ด๋‚˜ Facebook๊ณผ ๊ฐ™์€ ๋Œ€๊ธฐ์—…์ด ์†Œ์œ  ํ•œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ Wordpress์™€ ๊ฐ™์€ ๊ฑฐ๋Œ€ํ•œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ž ์žฌ์  ์ธ ๊ณต๊ธ‰ ์—…์ฒด ์ข…์†์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ ์œ„ํ•ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ํšŒ์‚ฌ ์†Œ์œ ๊ฐ€ ์•„๋‹Œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋ผ๋ฉด ๋ˆ„๊ตฐ๊ฐ€ ์‹œ์ž‘ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค (๋”ฐ๋ผ์„œ "์ฃผ์š” ์ธ ์˜์กด์„ฑ"์€ CON ์œผ๋กœ ์–ธ๊ธ‰๋˜๋Š” ๊ฒƒ์€ ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค).

VueJS์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.
๋‚ด๊ฐ€ ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ์•„๋ฌด๊ฒƒ๋„ ์•Œ๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด ์•„๋‹ˆ๋ผ ์˜์–ด๋กœ ๋ฐœ์Œ๋˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋‹จ์„œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” Joomla๋ฅผ ์ˆ˜๋…„๊ฐ„ ์‚ฌ์šฉํ–ˆ๊ณ  ํ•ญ์ƒ ํ‹€๋ ธ๋‹ค๊ณ  ๋ฐœ์Œํ–ˆ์Šต๋‹ˆ๋‹ค.

๋†๋‹ด์€ ์ œ์ณ๋‘๊ณ .
์—ฌ๊ธฐ์—์„œ๋Š” ์ด์ „ ๋ฉ”ํƒ€ ๋ฐ•์Šค ๋ฐ ์‚ฌ์šฉ์ž ์ •์˜ ํ•„๋“œ๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๋” ๋‚˜์€์ง€ ๋…ผ์˜ํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋งŽ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ง€๊ธˆ ์•Œ๊ณ  ์žˆ๋“ฏ์ด React๋Š” ๋งค์šฐ ๋‚˜๋นด์Šต๋‹ˆ๋‹ค.

์ด์ œ์ด ํ˜ธ๋ฅผ ๊ตฌ๋… ์ทจ์†Œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ† ๋ก ์— ์ง‘์ค‘ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๊ธฐ์— ์ž‘์—… ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค : https://github.com/WordPress/gutenberg/issues/2741

Laravel ๋•Œ๋ฌธ์— Vue๋ฅผ ์ œ์•ˆํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ WordPress ์‚ฌ์šฉ์ž๋“ค์ด WP๋ฅผ ๋‘ ๋ฒˆ์งธ ์„ ํƒ์œผ๋กœ ์œ ์ง€ํ•˜๋ฉด์„œ Laravel์„ ๊ธฐ๋ณธ CMS ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. Preact๋Š” Novell DOS๊ฐ€ MS DOS, PC DOS ๋ฐ ๊ทธ ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ์™€ ๋น„์Šทํ•œ ๋ณต์ œ ๋ฐ ๋Œ€๊ทœ๋ชจ ํ˜ธํ™˜์„ฑ ๊ณ„์ธต์ž…๋‹ˆ๋‹ค.

cu, w0lf.

Vue.js ๋๊นŒ์ง€!

๋‹น์‹ ์€ ํ™•์‹คํžˆ Hyperapp ์„
์žฅ์ 

  1. Elm (๋ชจ๋ธ,๋ณด๊ธฐ, ์—…๋ฐ์ดํŠธ) ์•„ํ‚คํ…์ฒ˜์™€ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  2. "์•ก์…˜"(๋ชจ๋ธ ๋ฐ ์ธํ„ด ๋ทฐ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ํ˜ธ์ถœ ๋จ)์ด๋ผ๊ณ ํ•˜๋Š” Reducer์™€ ๊ฐ™์€ ๋‚ด์žฅ Redux๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
  3. JSX ์‚ฌ์šฉ
  4. "๊ธฐ๋Šฅ์  ํ”„๋กœ๊ทธ๋ž˜๋ฐ"์„ค๊ณ„ ์žฅ๋ ค
  5. 1kb ์ด๋ฏ€๋กœ๋กœ๋“œํ•˜๊ธฐ ์‰ฝ๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

๋‹จ์ 

  1. ์•„์ง ์ƒˆ๋กญ๊ณ  ์—์ฝ” ์‹œ์Šคํ…œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‹น์‹ ์€ ๊ทธ๊ฒƒ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ณ  ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์•„์ง ๋ฐํ˜€์ง€์ง€ ์•Š์€ ๋ฌธ์ œ๊ฐ€์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Gutenberg ๋ธ”๋ก์˜ ์›์น™์€ Web Components ์˜ ์›์น™๊ณผ ์ž˜ ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค. ๋‚ฎ์€ ์ˆ˜์ค€์˜ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ํ‘œ์ค€ (์„ฑ์ˆ™ํ•˜๊ณ  ํ…Œ์ŠคํŠธ ๋œ ํด๋ฆฌ ํ•„ ํฌํ•จ)์œผ๋กœ WordPress์— ์™„๋ฒฝํ•˜๊ฒŒ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  : Polymer- ์„คํƒ•์ด ํฌํ•จ ๋œ ์›น ๊ตฌ์„ฑ ์š”์†Œ.

Vue๋Š” ํ™˜์ƒ์ ์ธ ์˜ต์…˜์ด๋ฉฐ ์—ฌ๊ธฐ์— ์ œ๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ๋ฏฟ๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” 2016 ๋…„ ์ดˆ์— Vue๋ฅผ๋ณด๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” Vue๋ฅผ ์ข‹์•„ํ–ˆ๊ณ  ๊ทธ๊ฒƒ์ด "์ˆ˜์š”"์ธ์ง€ ์•„๋‹ˆ๋ฉด ๊ทธ ์„ฑ์žฅ์ด ์ง‘์— ์“ธ๋งŒํ•œ ๊ฒƒ์ด ์žˆ๋Š”์ง€ ๊ฒฐ์ •ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹œ Github์—๋Š” 16,000 ๊ฐœ์˜ ๋ณ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ‹์ง€๊ณ  ๋ชจ๋“  ๊ฒƒ์ด์—ˆ์ง€๋งŒ ์‚ฌ๋žŒ๋“ค์€ Angular ๋Œ€ React ์“ฐ๋ ˆ๊ธฐ์˜ ํ•œ๊ฐ€์šด๋ฐ์„œ ์‹ค์ œ๋กœ ์ ์‘ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

2016 ๋…„ 9 ์›” 17 ์ผ๋ถ€ํ„ฐ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์žƒ์–ด ๋ฒ„๋ฆฌ๊ณ  ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ •ํ™•ํžˆ 1 ๋…„ ์ „, ์˜ค๋Š˜์ž…๋‹ˆ๋‹ค. ( ์—ฌ๊ธฐ ๋‚ด ํ˜„์žฌ ๋ฐ์ดํ„ฐ ์„ธํŠธ์ž…๋‹ˆ๋‹ค. )

์ง€๋‚œ 1 ๋…„ ๋™์•ˆ ์ €๋Š” Vue์˜ ์ธ๊ธฐ๊ฐ€ _ ๊ธฐ๋ก์„ ๊นจ๋Š” _ ๋น„์œจ๋กœ ์ฆ๊ฐ€ํ•˜๋Š” ๊ฒƒ์„ ๋ณด์•˜์Šต๋‹ˆ๋‹ค (์ธํ„ฐ๋„ท์—์„œ ์–ธ๊ธ‰ํ•˜๊ณ  Github ์Šคํƒ€๋ฅผ ์ถ”์ ํ•˜๋Š” ์ธก๋ฉด์—์„œ). Vue๋Š” 365 ์ผ ๋™์•ˆ ๋ณ„ 40,000 ๊ฐœ๋ฅผ ๋ชจ์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ•˜๋ฃจ ํ‰๊ท  109 ํšŒ์ž…๋‹ˆ๋‹ค. ์ด์— ๋น„ํ•ด ์ „ ์„ธ๊ณ„์ ์œผ๋กœ ์‚ฌ๋ž‘๋ฐ›๋Š” _React_๋Š” ๊ฐ™์€ ๊ธฐ๊ฐ„์— 49,000์—์„œ 75,000์œผ๋กœ ์„ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค. (ํ•˜๋ฃจ 71) Vue๋Š” ์‚ฌ์šฉ์ž ํ‰๊ฐ€ ์ธก๋ฉด์—์„œ ํ–ฅํ›„ ๋ช‡ ๊ฐœ์›” ๋‚ด์— React๋ฅผ ๋Šฅ๊ฐ€ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋‘๊ฐ€ React์˜ ์„ฑ์žฅ์ด ์—ญ๋Œ€ ๊ฐ€์žฅ ๋†€๋ž๋‹ค ๊ณ  ์ด์•ผ๊ธฐํ•˜๋Š” ๋™์•ˆ Vue๊ฐ€ ์‹ค์ œ ํƒ€์ดํ‹€ ๋ณด์œ ์ž๋ผ๋Š” ์‚ฌ์‹ค์„ ์•Œ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ Vue๊ฐ€ ์œ ๋ช…ํ•œ ์ง€์› (Facebook) ๋•Œ๋ฌธ์ด ์•„๋‹ˆ๋ผ ๋„๊ตฌ๋กœ์„œ ์ง„์ •์œผ๋กœ ์‚ฌ๋ž‘ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค ๋•Œ๋ฌธ์— ์„ฑ์žฅํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

Vue๋Š” 1 ๋…„ ๋„˜๊ฒŒ ๋งค์ผ ๋งค์ผ Github์˜ ์ธ๊ธฐ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋ชฉ๋ก์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. 99 %๋Š” React๋ณด๋‹ค ๋†’์Šต๋‹ˆ๋‹ค. ํ•˜๋ฃจ์˜ 10 %, React๋Š” ์‚ญ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๋ชจ๋“  ๊ฒƒ์€ "์ธ๊ธฐ๊ฐ€ ๋” ๋งŽ์ด ์ฆ๊ฐ€ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— Vue๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค!"๋ผ๊ณ  ์™ธ์นฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ œ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์€ Vue๊ฐ€ ๋ชจ๋“  ๊ทœ๋ชจ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„์œ„ํ•œ ํ›Œ๋ฅญํ•˜๊ณ  ์ง๊ด€์ ์ด๋ฉฐ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ (์ข…์ข… "์ž‘์€ ์•ฑ์— ์ ํ•ฉ"๋กœ ์ž˜๋ชป ํ‘œ์‹œ๋จ)์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ๋žŒ๋“ค์ด ์ง„์ •์œผ๋กœ ์ข‹์•„ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ์žฅํ–ˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋„๊ตฌ ๋งŒ์ด ์•„๋‹™๋‹ˆ๋‹ค. Vue๋Š” ์ƒํƒœ๊ณ„์ž…๋‹ˆ๋‹ค. ๋Œ€๊ทœ๋ชจ ์ง€์› ์ปค๋ฎค๋‹ˆํ‹ฐ๋„ ํ•จ๊ป˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

์ถ”๊ฐ€ํ• ๊นŒ์š” ... .vue ํŒŒ์ผ์€ ์ฒœ์žฌ์ž…๋‹ˆ๋‹ค. CSS ๋ชจ๋“ˆ์— ๋ช…๋ฐฑํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ๊ณ  ์™ธ๋ถ€ ํŒŒ์ผ์— ์Šคํƒ€์ผ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— React์—์„œ ์Šคํƒ€์ผ๋ง์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์€ ๋„๊ตฌ๊ฐ€ ๊ตฌ์ถ•๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. (Idk ...)ํ•˜์ง€๋งŒ Vue์—๋Š”์ด ๋ฌธ์ œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. Vue์—๋Š” ๊ตฌ๋ฌธ์— ๊ตฌ์›Œ์ง„ ์ œ์–ด๋ฌธ์ด ์žˆ์œผ๋ฉฐ (์œ„์—์„œ ์‚ฌ์šฉ์ž ์ง€์ • ์š”์†Œ ์ฃผ์„์„ ๋ณด์•˜์œผ๋ฏ€๋กœ) ์‚ฌ์šฉ์ž ์ง€์ • ์š”์†Œ์™€ ์ž˜ ์ž‘๋™ ํ• ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋…ผ๋ฆฌ์  ์‚ฌ์šฉ์ž ์ง€์ • ์š”์†Œ๋ฅผ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ / ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค.

Preact๋Š” ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค. ์†”์งํžˆ ์˜ค๋Š˜ ๋˜ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Preact๋ฅผ ๋ณด๋ฉด ๋ธŒ๋žœ๋“œ๊ฐ€ ์•„๋‹Œ React๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค. ํ˜์‹ ์ ์ด๊ฑฐ๋‚˜ ์›น ๊ธฐ๋ฐ˜ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์„ ๋ฐœ์ „์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง€์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด ๋„๊ตฌ์ฒ˜๋Ÿผ ๋ณด์ด๊ณ  ์ž‘๋™ํ•˜์ง€๋งŒ ๋” ๋‚˜์€ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋‚ด 2 ์„ผํŠธ์ž…๋‹ˆ๋‹ค. ์ด์ œ ๋‚˜๋Š” ํŒŒ์‚ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ์ตœ์ข… ๊ฒฐ์ •์ด ๊ท€ํ•˜๋ฅผ ํ–‰๋ณตํ•˜๊ฒŒํ•˜๊ณ  ์ œํ’ˆ์˜ ๋ฏธ๋ž˜๋ฅผ์œ„ํ•œ ํ›Œ๋ฅญํ•œ ํ† ๋Œ€๊ฐ€๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@ahmadawais :

  • ์ถœ์‹œ ์‹œ๊ฐ„์€ ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ํ”„๋กœ์ ํŠธ์™€ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ ๋ชจ๋‘์— ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ  ๋ฐฐ์†ก๋˜๊ธฐ ์ „์— ์“ธ๋ชจ ์—†๊ฒŒ๋˜์–ด ๋ฐฐ์†ก๋˜์ง€ ์•Š์€ ํ”„๋กœ์ ํŠธ์˜ ์˜ˆ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ถ€ ํ”„๋กœ์ ํŠธ๋Š” ๋ฉ”์ด์ € ๋ฆด๋ฆฌ์Šค๋ฅผ ํ–ฅํ•œ ์ž‘์—… ์ค‘์— ์ค‘๋‹จ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
  • Preact์— ๋ฐ˜๋Œ€ํ•œ๋‹ค๋Š” ๊ฒƒ์€ "๋ผ์ด์„ผ์Šค ์ด์™ธ์˜ ์ด์œ ๋กœ React์—์„œ ์‹ค์ˆ˜๋ฅผํ–ˆ๋‹ค"๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค. "์ค‘๊ธ‰ / ์‹ ๊ทœ ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” ํ•™์Šต ๊ณก์„ ์ด ์ด๋ฏธ ๊ฑฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค."๋ผ๋Š” ๋ง์€ ์›Œ๋“œ ํ”„๋ ˆ์Šค ๊ฐœ๋ฐœ์ž๊ฐ€ React๋กœ ์ธํ•ด ์ด๋ฏธ ๊ธธ์„ ์žƒ์—ˆ๋‹ค๋Š” ์˜๋ฏธ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋†€๋ž์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Vue๊ฐ€ ๋œ ์žฅํ™ฉํ•˜๋”๋ผ๋„ ํ•™์Šต ๊ณก์„  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ๊ธฐ๋Š” ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์˜ค๋ž˜๋œ PHP WP ์—”์ง„๊ณผ ๋‹จ์ผ ํŽ˜์ด์ง€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ๋งค์šฐ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Vue์™€ React๋Š” ์„œ๋กœ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
    ์™œ Wordpress์™€ Laravel ๊ฐ„์˜ ๊ฒฝ์Ÿ์„ ๋ณด๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ฌ๊ธฐ ์ˆœ์ง„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” Drupal 8 ์ด์•ผ๊ธฐ์— ๋Œ€ํ•ด ๊ฑฐ์˜ ์•Œ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.
    ๋‚ด ๊ด€์ ์—์„œ Wordpress๋Š” CMS์ด๋ฉฐ ๊ธฐ์ˆ  ์‚ฌ์šฉ์ž๊ฐ€ ์•„๋‹Œ ๋Œ€๊ทœ๋ชจ ์‚ฌ์šฉ์ž ๊ธฐ๋ฐ˜๊ณผ ์ด๋ฏธ ๋‚ด์žฅ ๋œ ๊ธฐ๋Šฅ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๋ฅผ ๋Œ์–ด๋“ค์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ํ…œํ”Œ๋ฆฟ์ด ์žˆ์œผ๋ฉฐ ๊ฐœ๋ฐœ์ž๋Š” ๋น„ ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉ์ž ์ •์˜ ํ•  ์ˆ˜์žˆ๋Š” ์ƒˆ ์‚ฌ์ดํŠธ๋ฅผ ๋งค์šฐ ๋น ๋ฅด๊ฒŒ ๊ตฌ์ถ• ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    Laravel์€ ๋‚ด๊ฐ€ ์•„๋Š” ํ•œ CMS์˜ ๋งŽ์€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” PHP ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ๋” ๋งŽ์€ ์ž์œ ๊ฐ€ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  • Vue + Laravel๋กœ ๋ช‡ ๊ฐ€์ง€ ์„ฑ๊ณต์„ ๊ฑฐ๋‘์—ˆ๋‹ค๋Š” ๊ฒƒ์ด "Vue๊ฐ€ Wordpress์— ์ข‹๋‹ค"๋ผ๋Š” ์˜๋ฏธ์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” PHP ๋ฐ JS ํ”„๋ ˆ์ž„ ์›Œํฌ ์‚ฌ์ด์— ์•„์ฃผ ์ž‘์€ ๊ณ ์œ  ์‹œ๋„ˆ์ง€ ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ข‹์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๋Š” ๋ฐ ์ „์ ์œผ๋กœ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์›Œ๋“œ ํ”„๋ ˆ์Šค๊ฐ€ ์˜์กดํ•˜๋Š” ํ˜„์žฌ ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋Œ€๋ถ€๋ถ„์ด Vue์— ์ต์ˆ™ํ•˜๊ณ  Vue๋ฅผ ์ข‹์•„ํ•œ๋‹ค๋ฉด ์ตœ์ข… ๊ฒฐ์ •์— ํฐ ๋น„์ค‘์„ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

์—”์ง€๋‹ˆ์–ด๋ง ์ธก๋ฉด์—์„œ Marko JS์™€ Vue๋Š” ๋ชจ๋‘ ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ React์—์„œ ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์› ๊ณ  ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์ œ๊ฑฐ ํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ์˜๋ฏธ์—์„œ Marko๋Š” Vue๋ณด๋‹ค ๋” ๋งŽ์€ ์ƒ์šฉ๊ตฌ ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Marko๋Š” ๋™์ผํ•œ ์œ„์น˜์— ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์‘์ง‘๋ ฅ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์œ ์ง€ํ•˜๊ณ  HTML์ด ์ข‹์€ ๊ฒƒ์€ HTML์— ๋‚จ๊ฒจ๋‘๊ณ  Javascript๊ฐ€ ์ข‹์€ ๊ฒƒ์€ Javascript์— ๋‚จ๊ฒจ ๋‘ก๋‹ˆ๋‹ค. ๋˜ํ•œ 10 ๋ฐฐ ๋” ๋น ๋ฆ…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ตœ๊ทผ Vue์— ๋งŽ์€ ํŒฌ์ด ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค ์™ธ์—๋Š” Marko๋ณด๋‹ค Vue๋ฅผ ์„ ํ˜ธํ•˜๋Š” ์ด์œ ๊ฐ€ ๋งŽ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฏธ์•ˆํ•˜์ง€๋งŒ Marko์˜ ๊ตฌ๋ฌธ๊ณผ ์„ค์ •์€ VueJS์— ๋น„ํ•ด ๋”์ฐํ•ฉ๋‹ˆ๋‹ค. ์„ฑ๋Šฅ๋ฉด์—์„œ ๋‚˜๋Š” MarkoJS๊ฐ€ ์ž‘๋™ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ์ค‘์š”ํ•œ ๋ฐฉ์‹์œผ๋กœ ๋” ๋น ๋ฅธ ์†Œ์Šค๋ฅผ ๋ณธ ์ ์ด ์—†์Šต๋‹ˆ๋‹ค.

@ bovas85 ๊ตฌ๋ฌธ์€ ์ฃผ๊ด€์ ์ด์ง€๋งŒ Marko์˜ ๊ตฌ๋ฌธ์ด " Marko์˜ ํ˜„์žฌ ๊ตฌ๋ฌธ์„ ๋„์ž… ํ•œ ๋ฆด๋ฆฌ์Šค๋Š” ์‚ฌ์šฉ์ž๋“ค๋กœ๋ถ€ํ„ฐ ๋งค์šฐ ํ˜ธํ‰์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ์€ Marko ๊ตฌ๋ฌธ๊ณผ Vue ๊ตฌ๋ฌธ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•œ ๊ฐœ์š”๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋น ๋ฅด๊ฒŒ ์ •๋ฆฌ ํ•œ ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค.

๊ตฌ๋ฌธ : Marko ๋Œ€ Vue

์ด์ „์— ์—ฐ๊ฒฐํ–ˆ์ง€๋งŒ Marko์™€ Vue (๋ฐ React) ๊ฐ„์˜๋ณด๋‹ค ์‹ฌ์ธต์  ์ธ ๋น„๊ต๋Š” ๋‹ค์Œ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

Meetup : UI ๊ตฌ์ถ•-React, Vue ๋ฐ Marko์˜ ๋น„๊ต (Marko ์ž‘์„ฑ์ž) - ๋น„๋””์˜ค | ์Šฌ๋ผ์ด๋“œ

์„ฑ๋Šฅ๊ณผ ๊ด€๋ จํ•˜์—ฌ ํ™•์ธํ•  ์ˆ˜์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ๋ฒค์น˜ ๋งˆํฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/marko-js/isomorphic-ui-benchmarks

๋‹ค์Œ์€ Marko ๋ฐ Vue๊ฐ€ ํ™œ์„ฑํ™” ๋œ ๋ฒค์น˜ ๋งˆํฌ์˜ ๋น ๋ฅธ ์‹คํ–‰์ž…๋‹ˆ๋‹ค.

์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง ์„ฑ๋Šฅ

_Node.js ( v8.4.0 ) _

Running "search-results"...

Running benchmark "marko"...
marko x 5,180 ops/sec ยฑ2.09% (87 runs sampled)

Running benchmark "vue"...
vue x 135 ops/sec ยฑ3.81% (68 runs sampled)

Fastest is marko

Running "color-picker"...

Running benchmark "marko"...
marko x 10,206 ops/sec ยฑ0.72% (87 runs sampled)

Running benchmark "vue"...
vue x 1,664 ops/sec ยฑ5.20% (66 runs sampled)

Fastest is marko

ํด๋ผ์ด์–ธํŠธ ์ธก ์„ฑ๋Šฅ

_Chrome ๋ฒ„์ „ 63.0.3218.0 (๊ณต์‹ ๋นŒ๋“œ) canary (64 ๋น„ํŠธ) _

Running "search-results"...
Running benchmark "marko"...
marko x 351 ops/sec ยฑ1.18% (58 runs sampled)
Running benchmark "vue"...
vue x 206 ops/sec ยฑ1.61% (57 runs sampled)
Fastest is marko

Running "color-picker"...
Running benchmark "marko"...
marko x 7,516 ops/sec ยฑ2.90% (41 runs sampled)
Running benchmark "vue"...
vue x 4,593 ops/sec ยฑ3.03% (54 runs sampled)
Fastest is marko

๊ทธ๊ฒƒ๋“ค์€ ์šฐ๋ฆฌ๊ฐ€ Marko.js๋ฅผ ์œ„ํ•ด ๋งŒ๋“  ๋ฒค์น˜ ๋งˆํฌ์ด๋ฏ€๋กœ ๋‹น์—ฐํžˆ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์•ฝ๊ฐ„์˜ ์†Œ๊ธˆ์œผ๋กœ ๊ฐ€์ ธ ๊ฐ€์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ๊ณต์ •ํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ๋…ธ๋ ฅ์„ ๊ธฐ์šธ์˜€์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ Marko.js ๋ฐ ์‚ฌ์šฉ ํŽธ์˜์„ฑ์— ๊ด€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์˜๊ฒฌ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

Marko๋Š” ํ•ญ์ƒ Node.js์™€ ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํ†ตํ•ฉ์„ ๋ชฉํ‘œ๋กœํ–ˆ์Šต๋‹ˆ๋‹ค. npm์„ ํ†ตํ•ด marko ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ ํ•œ ํ›„ HTTP ์‘๋‹ต ์ŠคํŠธ๋ฆผ์— ํ…œํ”Œ๋ฆฟ์„ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋ชจ๋“  ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

require('marko/node-require'); // require .marko files!

const http = require('http');
const template = require('./template');

http.createServer().on('request', (req, res) => {
  template.render({
    name: 'Frank',
    count: 30,
    colors: ['red', 'green', 'blue']
  }, res);
}).listen(8080);

์—ฌ๋Ÿฌ๋ถ„์ด ์–ป์„ ์ˆ˜์žˆ๋Š” ๊ฒƒ๋งŒ ํผ ๊ฐ„๋‹จํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Marko๋Š” ๋˜ํ•œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” JavaScript ๋ชจ๋“ˆ ๋ฒˆ ๋“ค๋Ÿฌ์™€ ํ•จ๊ป˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. http://markojs.com/docs/bundler-integrations-overview/

์ตœ์ƒ์œ„ Marko UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ DOM์— ๋ Œ๋”๋งํ•˜๋ ค๋ฉด ์—ฌ๊ธฐ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

require('./fancy-button')                  // Import the Marko UI component
  .renderSync({ label: 'Click me' })   // Render the button with the provided input
  .appendTo(document.body);         // Mount the UI component to the DOM

@ patrick-steele-idem http://www.stefankrause.net/wp/?p=431 ๋ฒค์น˜ ๋งˆํฌ์— ๋”ฐ๋ฅด๋ฉด markoJs
Vue et al.

๋”ฐ๋ผ์„œ ์ผ๋ฐ˜์ ์ธ ํด๋ผ์ด์–ธํŠธ ์ธก ์Šคํฌ๋ฆฝํŒ…์—์„œ Markojs์™€ Vue๊ฐ€ ๋™์ผํ•˜๊ฒŒ ์„ฑ๋Šฅ์„ ๋ฐœํœ˜ํ•œ๋‹ค๊ณ  ๊ฒฐ๋ก ์„ ๋‚ด๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋‚ด๊ฐ€ ๋งํฌ ํ•œ ๋ฒค์น˜ ๋งˆํฌ์—๋Š” ssr์ด ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‚˜๋Š” ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Vue์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค. jQuery๋Š” ์ด๋ฏธ WordPress๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•œ ๊ฑฐ์˜ ์š”๊ตฌ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค. jQuery์— ์ต์ˆ™ํ•œ ์‚ฌ๋žŒ๋“ค์€ Vue ๊ตฌ๋ฌธ์— ์ต์ˆ™ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. DOM์— ๋Œ€ํ•œ ์ด๋ฐ์˜ฌ๋กœ๊ธฐ๋Š” Angular์™€ ๊ฐ™์€ ๊ทน๋‹จ์  ์ธ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ํŽธ์˜๋ฅผ ์œ„ํ•ด WordPress ์ฃผ์ฒด๋กœ ๋Œ์•„๊ฐ‘๋‹ˆ๋‹ค.

์•ฝ 2 ๋…„ ์ „์— Calypso์— ๋Œ€ํ•ด ์ œ์•ˆํ–ˆ๋“ฏ์ด HyperScript API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” Mithril.js๋Š” React๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ์ข‹์€ ์„ ํƒ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ‘œ์ค€ MIT ๋ผ์ด์„ผ์Šค๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

React์—์„œ ๋‹ค๋ฅธ vdom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ ์œ„ํ•ด ์ตœ์†Œํ•œ์˜ ๋ฌด๊ฑฐ์šด ์ž‘์—…์„ ์ž๋™์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๊ธฐ์œ„ํ•œ ์ƒˆ๋กœ์šด ๋„๊ตฌ์— ๋Œ€ํ•œ ์ž‘์€ ํˆฌ์ž๋Š” Automattic์ด ํ—ค์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ฏธ๋ฆฌ ์ˆ˜ํ–‰ ํ•  ์ œ์•ˆ์œผ๋กœ ํ•ด๋‹น ๋ฌธ์ œ์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ๊ฐœ๋ฐœ์ž ์‹œ๊ฐ„์„ ์ ˆ์•ฝ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React์— ๋Œ€ํ•œ ๋‚ด๊ธฐ.

vdom์ด ์•„๋‹Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š์•„๋„ ๊ณ ๋ คํ•  ์ˆ˜์žˆ๋Š” vdom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ (์˜ˆ : inferno.js, maquette ๋“ฑ)๋Š” 25 ๊ฐœ๊ฐ€ ๋„˜์Šต๋‹ˆ๋‹ค. ์ด ๋ชฉ๋ก ์€ vdom ์˜ต์…˜์„ ๊ณ ๋ คํ•˜์—ฌ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•ด ๋ชจ์•„ ๋†“์€ ๋ชฉ๋ก ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ Mithril.js ๋˜๋Š” HyperScript API๋ฅผ ๊ฐ•์กฐํ•˜๋Š” (๋˜๋Š” ์ตœ์†Œํ•œ ์ง€์›ํ•˜๋Š”) ๋‹ค๋ฅธ vdom์ด ์ตœ์„ ์˜ ์„ ํƒ ์ธ ๋ช‡ ๊ฐ€์ง€ ๊ธฐ์ˆ ์  ์ด์œ ์ž…๋‹ˆ๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ React์˜ JSX ๋˜๋Š” Angular์˜ ์ž์ฒด ํ…œํ”Œ๋ฆฟ ์ ‘๊ทผ ๋ฐฉ์‹๊ณผ ๊ฐ™์€ JavaScript ๊ธฐ๋ฐ˜ UI๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ๋Œ€ํ•œ ํ…œํ”Œ๋ฆฟ ์ ‘๊ทผ ๋ฐฉ์‹์ด๋‚˜ Vue๋ฅผ ํฌํ•จํ•œ ๋‹ค๋ฅธ ๋งŽ์€ UI ์‹œ์Šคํ…œ์˜ ํ…œํ”Œ๋ฆฟ ์‹œ์Šคํ…œ์ด ๊ตฌ์‹์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์™œ? ๋ณต์žกํ•œ CSS ์Šคํƒ€์ผ ์‹œํŠธ (์ด์ „ WordPress ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๊ฐ™์€)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์ธก ์ƒ์„ฑ HTML ํ…œํ”Œ๋ฆฟ ๊ธฐ๋ฐ˜ ์›น ์•ฑ์„ ์ž‘์„ฑํ•˜๊ธฐ์œ„ํ•œ ํ™˜๊ฒฝ ์„ค์ • ๋ฐ "๋ชจ๋ฒ” ์‚ฌ๋ก€"๋Š” ๋‹จ์ผ ํŽ˜์ด์ง€ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•˜๋Š” "์ตœ์•…์˜ ์‚ฌ๋ก€"๊ฐ€๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ์ตœ์‹  ๋‹จ์ผ ํŽ˜์ด์ง€ ํด๋ผ์ด์–ธํŠธ ์ชฝ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•˜๊ธฐ์œ„ํ•œ ๊ธฐ์ˆ ์  ์š”๊ตฌ ์‚ฌํ•ญ์€ ํด๋ผ์ด์–ธํŠธ ์ชฝ ์ฝ”๋“œ์˜ ๋ณต์žก์„ฑ์ด ์ฆ๊ฐ€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ๋กœ ์„œ๋ฒ„ ๊ธฐ๋ฐ˜ ์ฝ”๋“œ์™€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์š”์ปจ๋Œ€, ํ…œํ”Œ๋ฆฟ๊ณผ ๋ณต์žกํ•œ CSS ์Šคํƒ€์ผ ์‹œํŠธ ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์˜ค๋ž˜๋œ "๋ชจ๋ฒ” ์‚ฌ๋ก€"๋Š” ํ™•์žฅ๋˜์ง€ ์•Š์•„ ์ฝ”๋“œ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ๋Œ€์•ˆ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์ตœ์‹  ์›น์•ฑ์€ Mithril + Tachyons + JavaScript / TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ์ฝ”๋“œ๊ฐ€ JavaScript / TypeScript ์ธ ๋‹จ์ผ ํŒŒ์ผ์— ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์•ฑ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ์ผ๋ถ€๋ฅผ (๋‚˜์˜๊ฒŒ) ๋‹ค์‹œ ๊ตฌํ˜„ํ•˜๋Š” CSS ๋˜๋Š” HTML์˜ ์ผ๋ถ€ ๋น„ํ‘œ์ค€ ๋ณ€ํ˜•์œผ๋กœ ๋ถ€๋ถ„์ ์œผ๋กœ ์ž‘์„ฑํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. (์Œ, Tachyons ๋˜๋Š” ์œ ์‚ฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์œ„์— ํ•„์š”ํ•œ ์‚ฌ์šฉ์ž ์ •์˜ CSS๊ฐ€ ์•ฝ๊ฐ„์žˆ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ๋งค์šฐ ์ ์Šต๋‹ˆ๋‹ค.)

๋‹ค์Œ์€ ๊ทธ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋”ฉ ๋†€์ดํ„ฐ์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค .

๋”ฐ๋ผ์„œ HyperScript (๋ฐ vdom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํฌํ•จ)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ์ž‘์„ฑํ•˜๋ฉด Mithril๊ณผ ๊ฐ™์€ ๋ฐฑ์—”๋“œ๋ฅผ ๊ฑฐ์˜ ๋ชจ๋“  ๋‹ค๋ฅธ vdom ๋˜๋Š” ๋น„ vdom ์†”๋ฃจ์…˜์œผ๋กœ ๋Œ€์ฒด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์„ ํƒ๊ถŒ์ด์žˆ์„ ๋•Œ HyperScript API๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ์„ ํƒํ•˜๋Š” ๊ฒƒ์€ ๋ฒ„๊ทธ ๋‚˜ ๋ผ์ด์„ ์Šค ๋ฌธ์ œ๊ฐ€์žˆ๋Š” ๊ธฐ๋ณธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์œ„ํ—˜์„ ์™„ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

Tachyons ๋˜๋Š” ์œ ์‚ฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ์ปค์ง์— ๋”ฐ๋ผ ์œ ์ง€ ๊ด€๋ฆฌ ํ•  ์ˆ˜์—†๋Š” CSS ํŒŒ์ผ์˜ ์œ„ํ—˜์„ ์™„ํ™”ํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก  ์ €๋Š” ๋งŽ์€ ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ HTML์„ ์กฐ์ •ํ•˜๋ฉด์„œ ์ž๋ž๊ณ  HTML ๋ชจ์–‘์˜ ํ…œํ”Œ๋ฆฟ์„ ์ข‹์•„ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ทธ๋“ค์€ JSX ๋˜๋Š” ๋ฌด์—‡์ด๋“  ์ข‹์•„ํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ค‘๊ฐ„์—์„œ ์ฝ”๋“œ๊ฐ€ ์•„๋‹Œ ๊ฒƒ๋“ค์„ ๋ฆฌํŒฉํ† ๋งํ•˜๊ฑฐ๋‚˜ ์œ ํšจ์„ฑ์„ ๊ฒ€์‚ฌํ•˜๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์–ด๋ ค์šด์ง€ ๋ฌด์‹œํ•˜๊ณ  ๊ธฐ๋ปํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ผ๋ถ€ IDE๋Š” JSX ํ…œํ”Œ๋ฆฟ ๋ฆฌํŒฉํ† ๋ง์—์„œ ๋” ๋‚˜์•„์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ €๋Š” ๋ฐ์Šคํฌํƒ‘์—์„œ ์›น ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๊ณ  (๋ณดํ†ต) ์ฝ”๋“œ์—์„œ ์ง์ ‘ UI๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์‹œ์Šคํ…œ (์˜ˆ : Swing, Tk, wxWidgets ๋“ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ)๊ณผ ํ•จ๊ป˜ ์ž‘์—…ํ•˜๋Š” ์ž„๋ฒ ๋””๋“œ ๊ฐœ๋ฐœ์— ์™”์Šต๋‹ˆ๋‹ค. ํ‘œ์ค€ ๋„๊ตฌ๊ฐ€ ๋‚ด๊ฐ€ ์ž‘์—…ํ•˜๋Š” ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ๋ฆฌํŒฉํ† ๋งํ•˜๊ณ  ๋งŽ์€ ๋ถˆ์ผ์น˜๋ฅผ ๊ฐ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์„œ ์‹คํ–‰๋˜๋Š” ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ์„ ํƒํ•œ ๋ธŒ๋ผ์šฐ์ €์˜ ์†๋„ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ˆˆ์— ๋„๋Š” ์ฐจ์ด๊ฐ€ ์—†๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ์ตœ์„ ์˜ ์„ ํƒ์ธ์ง€ ํ‰๊ฐ€ํ•˜๊ธฐ์œ„ํ•œ ๋ฉ”ํŠธ๋ฆญ์œผ๋กœ ํ”„๋ŸฐํŠธ ์—”๋“œ ์„ฑ๋Šฅ ์‚ฌ์šฉ์„ ์ค‘์ง€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์‚ฌ์šฉ ํ•œ๋‹ค๋ฉด SSR ์„ฑ๋Šฅ์„์ฃผ์˜ ๊นŠ๊ฒŒ ์‚ดํŽด ๋ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์นผ๋ฆฝ์†Œ๋Š” SSR์„ ๋ชฉํ‘œ๋กœํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์„ฑ๊ณตํ•˜๋ฉด ์–ธ์  ๊ฐ€ Calypso๋Š” wordpress.com์—์„œ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์ดํŠธ๋ฅผ ์šด์˜ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํšŒ์‚ฌ๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ CPU๊ฐ€ ์•„๋‹Œ ์„œ๋ฒ„์˜ CPU์— ๋Œ€ํ•ด ์ง€๋ถˆํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋น„์šฉ ์ธก๋ฉด์—์„œ Marko ์˜

Wordpress๊ฐ€ ๊ทธ๊ฒƒ์„ ๋ฌด์‹œํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ธฐ๊บผ์ด ํšŒ์‚ฌ์—์„œ ์ผํ•˜๊ณ  10 ๋ฐฐ์˜ ์‹œ์žฅ ๊ธ‰์—ฌ๋ฅผ ๋ฐ›๊ณ  Vue๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , ์ข‹์€ React ๋Œ€์•ˆ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค =)

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

https://hueniverse.com/performance-at-rest-75bb8fff143

@ahmadawais Angular ํ•ต์‹ฌ ํŒ€-์šฐ๋ฆฌ๋Š” CMS / ์œ„์ ฏ ์Šคํƒ€์ผ ๊ฐœ๋ฐœ๊ณผ ๊ด€๋ จ๋œ ๋งŽ์€ ํฅ๋ฏธ๋กœ์šด ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” Custom Elements ์ง€์›์— ๋Œ€ํ•œ ํˆฌ์ž๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

๋Œ€ํ™” ๋ชฉ๋ก์„ ๋” ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋Œ€์‹  ๊ด€์‹ฌ์ด ์žˆ์œผ์‹œ๋ฉด ์˜คํ”„๋ผ์ธ์œผ๋กœ ์ฑ„ํŒ…์„ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. Google ๋‹ท์ปด์˜ robwormald์— ์—ฐ๋ฝ์ฃผ์„ธ์š”. ํ–‰์šด์„ ๋น•๋‹ˆ๋‹ค,์ด ์ „ํ™”๋ฅผํ•ด์•ผ ๋ถ€๋Ÿฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค ;-)

์‚ฌ๋žŒ๋“ค์ด ์›ํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ํ†ต์ฐฐ๋ ฅ์„ ์–ป๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ฐ„๋‹จํ•œ ์„ค๋ฌธ ์กฐ์‚ฌ๋ฅผ ์—ฌ๊ธฐ์—์„œ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€ ๋ฐ ์ธ์ฆ ์ž‘์—… ์ค‘์ž…๋‹ˆ๋‹ค. (Firebase ์‹ ๊ทœ)

์ถ”์‹ . Vue ๐Ÿ––์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“œ๋Š” ๋ฐ ์•ฝ 1 ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ์Šต๋‹ˆ๋‹ค.

@vinayakkulkarni ์„ค๋ฌธ ์กฐ์‚ฌ์— Mithril.js๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

@pdfernhout : ๐Ÿ‘

๋๋‚œ. MithrilJS๋ฅผ ๋ชฉ๋ก์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • [x] VueJS
  • [x] ๊ฐ๋„
  • [x] ์ •ํ™•ํ•œ
  • [x] ์— ๋ฒ„
  • [x] ๋งˆ๋ฅด์ฝ”
  • [x] ์ธํŽ˜๋ฅด๋…ธ
  • [x] ์•„์šฐ๋  ๋ฆฌ์•„
  • [x] ๋ฏธํŠธ ๋ฆด

์‚ฌ๋žŒ๋“ค์ด ๋ฌด์—‡์„ ๊ฒฐ์ •ํ•˜๋Š”์ง€ ๋ณด์ž ..
์ถ”์‹ . @ahmadawais ์˜ ํŠธ์œ„ํ„ฐ ์„ค๋ฌธ ์กฐ์‚ฌ ๋„์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. ์ €๋Š” Drupal ํ•ต์‹ฌ ๊ด€๋ฆฌ์ž์ž…๋‹ˆ๋‹ค. @ivanjaros ๊ฐ€ ์ด์ „ ์˜๊ฒฌ์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด Drupal์˜ ๊ด€๋ฆฌ UI์˜ ํ–ฅํ›„ ์ผ๋ถ€ ๋น„ํŠธ์— ๋Œ€ํ•ด Preact, Vue ๋˜๋Š” ๋‹ค๋ฅธ ๊ฒƒ์„ ํ‰๊ฐ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๋‹น์‹ ์ด ์„ ํƒํ•œ ๊ฒƒ๊ณผ ๋‹ค๋ฅธ ๊ฒƒ์— ์ •์ฐฉ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋‹น์‹ ์ด ์„ ํƒํ•œ ๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์„ ํƒํ•  ๋•Œ ๊ณ ๋ คํ•  ์ตœ์†Œํ•œ ํ•˜๋‚˜์˜ ์š”์†Œ๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€์ด ๋‘ ๊ฐ€์ง€ Drupal ๋ฌธ์ œ๋ฅผ ์—ด์—ˆ๊ณ  ๋” ๋งŽ์€ ๋ฌธ์ œ๊ฐ€ ์˜ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ / ํ† ๋ก ์ด ์œ ์šฉ ํ•  ๊ฒฝ์šฐ ์—ฌ๊ธฐ์—์„œ ์ƒํ˜ธ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

์ด ๋‘ ๊ฐ€์ง€ ๋ฌธ์ œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋‚˜๋Š” ์—ฌ์ „ํžˆ Vue๋ฅผ ๊ฐ•๋ ฅํ•˜๊ฒŒ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. Vue์˜ ๋‹ค๋ฅธ ๋ชจ๋“  ์ด์ ์„ ์–ป๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๊ฐ€ ํ•จ๊ป˜ ์‚ฌ๋Š” ๊ฒƒ์ด ๊ดœ์ฐฎ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Vue์˜ ์ €์ž๋กœ์„œ ์ €๋Š” ๋ถ„๋ช…ํžˆ ํŽธํ–ฅ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๊ธฐ์„œ ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์„ ํƒํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ์–ธ๊ธ‰์„ ํ”ผํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ช‡ ๋ฒˆ ๋˜์ง„ "Marko๋Š” Vue๋ณด๋‹ค 10 ๋ฐฐ ๋น ๋ฅด๋‹ค"๋ผ๋Š” ๋ง์„๋ดค์„ ๋•Œ ์ข€ ๋” ์„ค๋ช… ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋˜ํ•œ ๊ธฐ์ˆ ์  ์ธ ๋…ผ์Ÿ์œผ๋กœ ํ† ๋ก ์„ ํƒˆ์„ ์‹œํ‚ค๊ณ  ์‹ถ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ด€์‹ฌ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด์ด ์š”์ง€ ์— ๋ช‡ ๊ฐ€์ง€ ์ƒ๊ฐ์„ ์ ์–ด ๋†“์•˜์Šต๋‹ˆ๋‹ค.

์žฌ์ •์  ๋ฌธ์ œ์— ๋Œ€ํ•ด @ michaelbdavidson7 : ์ €๋Š” Vue์—์„œ 1.5 ๋…„ ๋„˜๊ฒŒ ํ’€ ํƒ€์ž„์œผ๋กœ ์ž‘์—… ํ•ด ์™”์œผ๋ฉฐ Patreon ์ง€์›์€ ์ •๋ง ์•ˆ์ •์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค. Patreon ์„œ์•ฝ ๋ณ€๋™์„ ์ถ”์ธกํ•˜๋Š” ๋Œ€์‹  Vue์˜ ์ปค๋ฐ‹ ํ™œ๋™์„ ํ™•์ธํ•˜์—ฌ ์Šค์Šค๋กœ ํŒ๋‹จ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ฐœ๋ฐฉํ˜• ์žฌ์ • ๊ธฐ์—ฌ ์ฑ„๋„์„ ๋ณด์œ ํ•œ๋‹ค๋Š” ๊ฒƒ์€ WP / Automattic์ด ์ฃผ์š” ํ›„์›์ž๊ฐ€ ๋จ์œผ๋กœ์จ Vue์˜ ์ง€์† ๊ฐ€๋Šฅ์„ฑ์„ ์‰ฝ๊ฒŒ ๋ณด์žฅ ํ•  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค (Matt ์ž์‹ ์€ ์ด๋ฏธ ๊ฐœ์ธ ํ›„์›์ž์ž…๋‹ˆ๋‹ค!). ์‹ค์ œ๋กœ ๋‘ ํ”„๋กœ์ ํŠธ์˜ ์ด์ต๊ณผ ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” Vuejs์— ํˆฌํ‘œํ•œ๋‹ค

@ tungbt94 ์™œ?

ํ™•์‹คํžˆ VueJS

๋” ํฐ ์งˆ๋ฌธ์€ ์™œ์ด ํŠนํ—ˆ ๋ฌธ์ œ ์ „์— ๋ฐ˜์‘์„ ์„ ํƒํ–ˆ๋Š”์ง€์ž…๋‹ˆ๋‹ค. ํŠนํ—ˆ๊ฐ€ ์•„๋‹ˆ๋”๋ผ๋„ ๋ฆฌ ์•กํŠธ๋ฅผ ์‚ฌ์šฉ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? preact๋ฅผ ์„ ํƒํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋งŽ์€ ํฌ์ธํŠธ๋Š” react๋ฅผ ์„ ํƒํ•˜์ง€ ์•Š๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ํˆฌํ‘œ๋Š” Preact

React ์ด์™ธ์˜ ๋‹ค๋ฅธ ๊ฒƒ์— ๋Œ€ํ•œ ๊ฒฝํ—˜์ด ๋งŽ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์„ ํƒํ• ์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” "ํฐ ๊ณต๋™์ฒด"์ฃผ์žฅ์ด ๋œ ์ค‘์š” ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์™œ? Automattic์ด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๊ฒฐ์ •ํ•  ๋•Œ ๊ทธ ๋†์žฅ์€ ์ˆ˜์ฒœ ๋ช…์˜ ์‹ ๊ทœ ์‚ฌ์šฉ์ž๋ฅผ ํ™•๋ณด ํ•  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ WP ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์˜ณ๋‹ค๋Š” ๊ฒƒ์„ ์•ˆ๋‹ค๋ฉด ๊ทธ๋“ค ์ค‘ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ทธ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ธฐ์—ฌํ•˜๊ธฐ ์‹œ์ž‘ํ•  ๊ฒƒ์ด๊ณ  ์ธ๊ธฐ๊ฐ€ ๋†’์•„์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ตฌํ…๋ฒ ๋ฅดํฌ์™€ ์นผ๋ฆฝ์†Œ๊ฐ€ ํ˜„์žฌ ์–ด๋””์— ์žˆ๋Š”์ง€๋ฅผ ๊ณ ๋ คํ•  ๋•Œ ์—ฌ์ „ํžˆ Preact๊ฐ€ ์ตœ๊ณ ์˜ ์—”์ง€๋‹ˆ์–ด๋ง ์„ ํƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ React์™€ ๋‹ฎ์€ ๋‹ค๋ฆฌ๋ฅผ ํƒœ์šฐ๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์—ฌ์ „ํžˆ ๊ฐ•ํ•˜๋‹ค๊ณ  ๋Š๋ผ๊ฑฐ๋‚˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์•ผํ•œ๋‹ค๋ฉด MarkoJ ๊ฐ€ ์ตœ์„ ์˜ ์„ ํƒ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›์ด ์—ฌ์ „ํžˆ ๊ฑฑ์ •๊ฑฐ๋ฆฌ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Github ์Šคํƒ€๊ฐ€ ์–ด๋–ป๊ฒŒ ๋“  ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์ƒ๊ด€ ๊ด€๊ณ„๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด Vue๋Š” MarkoJ์— ๋น„ํ•ด ์—ฌ์ „ํžˆ 10 ๋ฐฐ์ด์ง€๋งŒ ๊ทธ๋ž˜ํ”„๋ฅผ ๋ณด๋ฉด ๋น ๋ฅด๊ฒŒ ๋ณ€๊ฒฝ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Vue๋Š” ์„ ํ˜• ์ ์œผ๋กœ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
screen shot 2017-09-18 at 12 01 36 am

๊ทธ๋Ÿฌ๋‚˜ MarkoJ ๋Š” ๊ธฐํ•˜ ๊ธ‰์ˆ˜์  ์ธ ์„ฑ์žฅ์˜ ๋ณ€๊ณก์ ์—์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
screen shot 2017-09-18 at 12 01 44 am

MarkoJs ์˜ ์ฃผ ์ €์ž ์ธ @ patrick-steele-idem์€ ํ•ญ์ƒ https://gitter.im/marko-js/marko ์—์„œ ๋งค์šฐ ๋ฐ˜์‘์ด ์ข‹์•˜์Šต๋‹ˆ๋‹ค .

์‚ฌ๋žŒ๋“ค์ด ๊ถ๊ทน์ ์œผ๋กœ MarkoJ๋ฅผ ์„ ํƒํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ๋ชจ๋“  ์ข…๋ฅ˜์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์„ ํƒํ•  ๋•Œ JFK์˜ ์ธ์šฉ๋ฌธ์„ ์˜์—ญํ•˜๋Š” ๋Š๋‚Œ์ด

๊ฐœ์ธ์ ์œผ๋กœ ๊ด€๋ จ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜๊ณ  ์ง€์›ํ•˜๋Š” ๋งŽ์€ JS ๊ฐœ๋ฐœ์ž ๋กœ๋ถ€ํ„ฐ ์ƒ๋‹นํ•œ ์ฐธ์—ฌ๋ฅผ @ahmadawais ์—๊ฒŒ ์ถ•ํ•˜๋ฅผ ์ „ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

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

AngularJS๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ๋งค๋ฒˆ ์ฃผ์š” ์—…๋ฐ์ดํŠธ๊ฐ€ ๋งˆ์Œ์— ๋“ค์ง€ ์•Š์œผ๋ฏ€๋กœ VueJS๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Marko์— +1. ์šฐ๋ฆฌ ํŒ€์ด ์‚ฌ์šฉํ•˜๊ณ  ๋งค์šฐ ๋งŒ์กฑ ํ•œ ํ›Œ๋ฅญํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ๋น„๋™๊ธฐ ๋ Œ๋”๋ง, ์ดˆ๊ณ ์† (์„œ๋ฒ„์˜ ๋ฌธ์ž์—ด ๋ฐ ๋ธŒ๋ผ์šฐ์ €์˜ vdom์œผ๋กœ ๋ Œ๋”๋ง), ๋‹จ์ผ ๋˜๋Š” ๋‹ค์ค‘ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ ๋ฐ IMO๊ฐ€ ์ตœ๊ณ ์˜ ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค.

@WebReflection ์˜ hyperHTML ์„ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค.

๋‚˜๋Š” Angular๋ฅผ ์ข‹์•„ํ•œ๋‹ค

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ฐ๋„๋ฅผ ์„ ํƒ

๊ทธ๋ƒฅ ๊ฐ๋„

๋‚˜๋Š” ๊ฐ๋„๋ฅผ ์„ ํƒ

๋ชจ๋‚œ

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ ˆ์ž„ ์›Œํฌ์— ํˆฌํ‘œํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์ •ํ™•ํ•œ ์ด์œ ์™€ ๊ทธ๊ฒƒ์ด ๊ตฌํ…๋ฒ ๋ฅดํฌ์— ์–ด๋–ป๊ฒŒ ๋„์›€์ด๋˜๋Š”์ง€ ์•„๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

"๋‚˜๋Š” X์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค"๋ผ๊ณ  ๋งํ•˜๋ ค๊ณ  ์—ฌ๊ธฐ ์˜ค๋Š” ์นœ๊ตฌ๋“ค์—๊ฒŒ ์šฐ๋ฆฌ๋„ X์— ํˆฌํ‘œํ•ด์•ผํ•˜๋Š” ์ด์œ ๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”. "I vote X"๋Š” ๋‹น์‹ ์ด X๋ฅผ ์ข‹์•„ํ•œ๋‹ค๋Š” ๊ฒƒ ์™ธ์—๋Š” ์•„๋ฌด ๊ฒƒ๋„ ๋งํ•ด์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

๋„ˆ๋ฌด ๋งŽ์€ ์ŠคํŒธ์œผ๋กœโ€œ๋‚˜๋Š” ํˆฌํ‘œํ”„๋ ˆ์ž„ ์›Œํฌโ€, github๊ฐ€ ์ €์—๊ฒŒ ์‚๊ฑฑ ๊ฑฐ๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” ๋™๋ฃŒ ๊ฐœ๋ฐœ์ž๋“ค์ด 'I voteโ€ฆ'๋ฅผ ๊ฒŒ์‹œํ•˜๋Š” ๋Œ€์‹  https://vinayakkulkarni.github.io/poll/ https://vinayakkulkarni.github.io/poll/ ์—์„œ ๊ท€ํ•˜๊ฐ€ ์„ ํƒํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๋Œ€ํ•ด ์นœ์ ˆํ•˜๊ฒŒ ํˆฌํ‘œ ํ•  ๊ฒƒ์„ ์ด‰๊ตฌํ•ฉ๋‹ˆ๋‹ค.

๋˜ ๋‹ค๋ฅธ ์ œ์•ˆ์€์ด ๋Œ€ํ™”๋ฅผ ์ž ๊ทธ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์ฃผ์š” ๊ฐœ๋ฐœ์ž๋Š” ์ด๋ฏธ ์ด์— ๋Œ€ํ•ด ๋ฐœ์–ธ๊ถŒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

2017 ๋…„ 9 ์›” 18 ์ผ ์˜คํ›„ 8:01์— Mingyue [email protected] ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ผ์Šต๋‹ˆ๋‹ค.

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

โ€”
๋‹น์‹ ์ด ์–ธ๊ธ‰ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์„ ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ฑฐ๋‚˜ GitHub https://github.com/WordPress/gutenberg/issues/2733#issuecomment-330241898 ์—์„œ ๋ณด๊ฑฐ๋‚˜ https://github.com/notifications/unsubscribe-auth/AS3FbT23DvVwTLGL61tmK7KtuwZeg- ์Šค๋ ˆ๋“œ๋ฅผ ์Œ์†Œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

_hyperHTML_์— ๋Œ€ํ•ด ์–ธ๊ธ‰ ํ•ด ์ฃผ์‹ 

์ข‹์•„ํ•˜๋Š” JS ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๊ณต์œ ํ•˜์ง€ ๋ง๊ณ  ๊ทธ ์ด์œ ๋„ ๊ณต์œ ํ•˜์„ธ์š”.

๊ทธ๋Ÿฌ๋‹ˆ ์ œ๊ฐ€ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค ...

: zap : ํ•˜์ดํผ HTML :

  • PRO : ์ดˆ๋ณด์ž์—๊ฒŒ ์นœ์ˆ™ํ•˜๊ณ  P / React ์‚ฌ์šฉ์ž์—๊ฒŒ ์นœ์ˆ™ ํ•จ (JSX ๋Œ€์‹  ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์ž‘์„ฑ ํ•จ)
  • PRO : ๋น ๋ฅด๊ณ  VDOM์—†์ด ํƒ€์˜ค๋ฅด๋Š”; ๋ฉ”๋ชจ๋ฆฌ ์†Œ๋น„ ๊ฐ์†Œ (์‹ ํฅ ์‹œ์žฅ ์ „ํ™” ์นœํ™”์ )
  • PRO : ๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค (IE <11์— ๋Œ€ํ•ด์„œ๋งŒ ํŠธ๋žœ์Šค ํŒŒ์ผ ๋œ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ํ•„์š”)
  • PRO : JS / DOM / HTML ํ‘œ์ค€์„ ์™„์ „ํžˆ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜์ง€๋งŒ TypeScript ์™€๋„ ํ˜ธํ™˜ ๊ฐ€๋Šฅ
  • PRO : ์ถ”๊ฐ€ ํด๋ฆฌ ํ•„ ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ํŒจ์น˜์—†์ด 5K (์ตœ์†Œ ์••์ถ•) ๋ฏธ๋งŒ์— ์ ํ•ฉ
  • PRO : IE9 ํŠน์œ ์˜ 100 % ์ฝ”๋“œ ์ปค๋ฒ„๋ฆฌ์ง€
  • PRO : NodeJS์™€ ๋™์ผํ•œ API๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. 100 % ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง ํ˜ธํ™˜
  • PRO : ๊ทธ๊ฒƒ์€ SSR ๋ ˆ์ด์•„์›ƒ / ๋…ธ๋“œ๋ฅผ ๋ถ€์ˆ˜๊ณ ์—†์ด ์กด์žฌ DOM์„ ์ฑ„ํƒ ํ•  ์ˆ˜์žˆ๋‹ค
  • PRO : P / React๋ณด๋‹ค ์‚ฌ์šฉ์ž ์ •์˜ ์š”์†Œ์™€ ๋” ์ž˜
  • PRO : React , Vue.js , Polymer , Angular ๋˜๋Š” Marko ๊ฐ€ํ•˜๋Š” ์ผ์„ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ฐ๊ฐ์˜ ํฌ๊ธฐ / ๋Œ€์—ญํญ / ์„ฑ๋Šฅ ์ธก๋ฉด์—์„œ ์Šน๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ์ด ์Šค๋ ˆ๋“œ์—์„œ ์ง€๊ธˆ๊นŒ์ง€ ์‚ฌ์šฉ ๋œ ๋ฉ”ํŠธ๋ฆญ์— ๋”ฐ๋ผ CONS

  • ๋‹จ์  : ์ „ํˆฌ ํ…Œ์ŠคํŠธ๋ฅผ ๊ฑฐ์ณ ์™„์ „ํžˆ ํ…Œ์ŠคํŠธ๋˜๊ณ  ๋™๊ฒฐ ๋œ API๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ์ƒ๋Œ€์ ์œผ๋กœ ์ Š์€ ํ”„๋กœ์ ํŠธ (2017 ๋…„ 3 ์›”)์ด๋ฏ€๋กœ ์ธ๊ธฐ๋„, ์ฑ„ํƒ๋ฅ  ๋˜๋Š” ๊ธฐ์—ฌ์ž ์ˆ˜ ์ธก๋ฉด์—์„œ ๊ฒฝ์Ÿ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
  • ๋‹จ์  : ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ๋งŽ์€ ๊ฒƒ์„ ๋•๊ณ  ์žˆ์œผ๋ฉฐ ํ”„๋กœ์ ํŠธ๊ฐ€ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์ง€๋งŒ ์ง€๊ธˆ๊นŒ์ง€ ์ฃผ์š” ๊ธฐ์ˆ  ๊ณตํ—Œ์ž๋Š” ์ €์ž…๋‹ˆ๋‹ค. ์ €๋Š”์ด ํ”„๋กœ์ ํŠธ์— 100 % ์ „๋…ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๊ฐ€๋Šฅํ•œ ํ•œ ๋งŽ์ด ์ถ”์ง„ํ•  ์˜ํ–ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋‹ค์Œ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ _hyperHTML_์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ๊ฑฐ์˜ "_bigs_"์™€ ๋…ผ์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค (๋” ์ด์ƒ ์ถ”์ธกํ•˜์ง€๋Š” ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ํ›„๋ฐ˜๋ถ€๋ฅผ ๋ฌด์‹œํ•ด๋„๋ฉ๋‹ˆ๋‹ค.)

: dart : ์ €๋Š” ์ง„์ •์œผ๋กœ ์›น์˜ ๋ฏธ๋ž˜๋Š” ํ”Œ๋žซํผ์„ ๊ฐ€๋Šฅํ•œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. 10 ๋…„ ์ „๋ณด๋‹ค ํ™•์‹คํžˆ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด๋ฉฐ, ์ตœ์‹  ECMAScript ์‚ฌ์–‘ ๋•๋ถ„์— ์“ฐ๊ธฐ, ์ฝ๊ธฐ ๋ฐ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. _hyperHTML_์€ ์ž ์žฌ๋ ฅ ์ธก๋ฉด์—์„œ "_ ํ˜„์žฌ ์›น ์•„ํŠธ ์ƒํƒœ _"๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ,์ด ๋ชฉ๋ก์—์žˆ๋Š” ๋‹ค๋ฅธ ๋ชจ๋“  ๊ฒฝ์Ÿ์ž๋Š” ES6 ์ด์ „ ์‹œ๋Œ€์— ํƒœ์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค.

์ปค๋ฎค๋‹ˆํ‹ฐ ๊ทœ๋ชจ, ๊ธฐ์—ฌ์ž ๋ฐ GitHub ๋ณ„ํ‘œ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•˜์ง€๋งŒ ํ…Œ์ŠคํŠธ, ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ € ์ฝ”๋“œ ๋ฒ”์œ„ ๋ฐ ๋ฒ„๊ทธ ์–‘๋„ ๊ณ ๋ คํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉฐ _hyperHTML_ ๋ฐ ์นœ๊ตฌ์˜ ์ˆ˜๋ฅผ ๊ฐ€๊นŒ์ด์—์„œ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ตœ์„ ์„ ๋‹คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 0 (๋ฒ„๊ทธ๊ฐ€ ์•„๋‹Œ ํ† ๋ก  ์˜†์— ์‹ค์ œ๋กœ 0์ž…๋‹ˆ๋‹ค).

๋งˆ์ง€๋ง‰์œผ๋กœ, ์•„๋ฌด๋„ ์ƒˆ๋กœ์šด ์†”๋ฃจ์…˜์— ๊ธฐํšŒ๋ฅผ์ฃผ์ง€ ์•Š๊ณ  ๋ณ„๊ณผ ๊ณผ๋Œ€ ๊ด‘๊ณ ๋งŒ์œผ๋กœ ํŒ๋‹จํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ƒˆ๋กœ์šด ์†”๋ฃจ์…˜์ด ์ธ๊ธฐ๋ฅผ ์–ป๋Š” ๋ฐ ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฌผ๋ก , ๋‚˜๋Š” ๋‚˜์˜ ์ตœ์‹  ์†”๋ฃจ์…˜์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ–ˆ๊ณ , ๋‚˜์˜ ๊ณ ๋ ค ์‚ฌํ•ญ์€ ์ฃผ๊ด€์ ์ธ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ ๋  ์ˆ˜ ์žˆ์ง€๋งŒ, ํŠนํžˆ ์ƒˆ๋กœ์šด ์†”๋ฃจ์…˜์— ๋Œ€ํ•œ ๊ธฐํšŒ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋‚˜์˜ ํ›„์ž์˜ ๋ฌธ์žฅ์€ ๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋งค์šฐ ์ผ๋ฐ˜์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

์นœ์• ํ•˜๋Š”

๋‚˜๋Š” ๊ฐ๋„๋ฅผ ์ข‹์•„ํ•œ๋‹ค

๊ฐ๋„์™€ Google์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ฐ๋„๋ฅผ ์ข‹์•„ํ•œ๋‹ค

Angular๋Š” ์‹ค์ œ ํ”„๋ ˆ์ž„ ์›Œํฌ ์ผ๋ฟ์ž…๋‹ˆ๋‹ค!

AngularJs๊ฐ€ ์•„๋‹Œ Angular๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๊ฐ๋„ ๋งŒ์ด ์‹ค์ œ ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค!

์˜์‹ฌํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.์ด ๋Œ“๊ธ€์€ ๋ด‡์ด ์ž‘์„ฑํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@OP :์ด ์Šค๋ ˆ๋“œ๋ฅผ ์ž ๊ทธ์‹ญ์‹œ์˜ค.

Angular (AngularJS๊ฐ€ ์•„๋‹˜)์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

Angular ๋Š” ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. Google ํŒ€์€ ์ข…์†์„ฑ ์ฃผ์ž…์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑ ์š”์†Œ, ๋ชจ๋“ˆ, ๋ผ์šฐํ„ฐ๋ฅผ ํฌํ•จํ•˜์—ฌ ๊ฐœ๋ฐœ ์ง„ํ–‰์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋งŽ์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์ข…์†์„ฑ์„ ์ •๋ ฌํ•˜๋Š” ๋ฐ ๋งŽ์€ ์ž‘์—…์„ ์ ˆ์•ฝ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. angular-cli๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์€ ์ž‘์—…์„ ์ ˆ์•ฝ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ์ž๋ฅผ ์—ด๊ธฐ ๋งŒํ•˜๋ฉด ์•ฑ์ด aot, ํŠธ๋ฆฌ ์‰์ดํ‚น ๋ฐ ๊ธฐํƒ€ ์—ฌ๋Ÿฌ ์ตœ์ ํ™”๋กœ ์ž˜ ์ปดํŒŒ์ผ๋ฉ๋‹ˆ๋‹ค.

TypeScript ๋Š” angular๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ํ›Œ๋ฅญํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. MicroSoft์—์„œ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰ ์ „์ฒด angular ํ”Œ๋žซํผ์€ ts๋กœ ๋นŒ๋“œ๋ฉ๋‹ˆ๋‹ค. TS๋กœ ์•ฑ์„ ๋นŒ๋“œํ•˜์„ธ์š”! ์ฝ”๋“œ์˜ ์–‘์ด ์ ์  ์ปค์งˆ ๋•Œ ์‚ถ์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ํ›Œ๋ฅญํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํด๋ฆญ ํ•œ ๋ฒˆ์œผ๋กœ IDE์—์„œ (vscode์™€ ๊ฐ™์€) ๋ฆฌํŒฉํ† ๋ง์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ •์  ์œ ํ˜• ๊ฒ€์‚ฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ€๋Šฅํ•œ ํ•œ ๋นจ๋ฆฌ ๋ฒ„๊ทธ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. TS๋Š” ๋˜ํ•œ OOP์˜ ์ข‹์€ ๊ตฌํ˜„์„ ์ œ๊ณตํ•˜๋ฏ€๋กœ ํ›จ์”ฌ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ •๋ ฌํ•˜๊ณ  ์žฌ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ meterial design2, primeng๊ณผ ๊ฐ™์ด ๊ฐ๋„๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ• ๋œ ๋งŽ์€ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ์œผ๋ฉฐ ์šฐ๋ฆฌ ํŒ€์—์„œ ๋งŒ๋“  Jigsaw๋ฅผ ์ถ”์ฒœํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ZTE China์˜ ๋น… ๋ฐ์ดํ„ฐ ์ œํ’ˆ์— ์ฑ„ํƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ZTE์˜ ๋ชจ๋“  ์•ฑ์„ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Anglar๋Š” ํ›Œ๋ฅญํ•œ ์„ ํƒ์ž…๋‹ˆ๋‹ค !!

screen shot 2017-09-18 at 8 58 42 pm

๋ชจ๋“  ๋ด‡์—๊ฒŒ : ๐Ÿ–•

์•„๋งˆ๋„ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ AngularJs ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๊ฒŒ์‹œํ–ˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋” ์ด์ƒ ๋ฉ”์‹œ์ง€๋ฅผ ๋ฐ›๊ณ  ์‹ถ์ง€ ์•Š์œผ๋ฉด ์Šค๋ ˆ๋“œ๋ฅผ ์Œ์†Œ๊ฑฐ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ฒฐ๊ตญ์ด ์ฃผ์ œ์— ๋Œ€ํ•œ ๋น„์Šทํ•œ ๋Œ€ํ™”๊ฐ€ ์›Œ๋“œ ํ”„๋ ˆ์Šค ๊ธฐ์—ฌ์ž ๋งŒ์žˆ๋Š” ๊ณณ์—์„œ ์ผ์–ด๋‚˜์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ œ๊ฐ€ EmberJS ์Šฌ๋ž™ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ทธ๋ฃน์—์„œ ์ด๋ฏธ ํ‘œํ˜„ํ•œ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ œ ์ƒ๊ฐ์„ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. 10 ๋ถ„ ๋™์•ˆ ํ† ๋ก ์„ ์ฝ์–ด ๋ณด์‹œ๋ฉด ์ถ”์ฒœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค : https://embercommunity.slackarchive.io / wb-marketing / page-2 / ts-1505456102000189 ๊ฑฐ๊ธฐ์— ๊ฝค ๋งŽ์ด ์žˆ์ง€๋งŒ ํ† ๋ก ์— ๋Œ€ํ•œ ๋ฏธ๋ฌ˜ํ•œ ์ดํ•ด๋ฅผ ์–ป์œผ๋ ค๋ฉด ๊ทธ๊ฒƒ์„ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๊ทธ ํ† ๋ก ์˜ ์ฃผ์š” ์š”์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • Ember ํ”„๋ ˆ์ž„ ์›Œํฌ์—์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” 2-4 ์ฃผ ์ŠคํŒŒ์ดํฌ๋ฅผ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋น„๊ตํ•  ๋•Œ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‹จ๊ธฐ์ ์œผ๋กœ์ด๊ธฐ๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์ง€๋งŒ Ember๋Š” ์–ด๋–ค ์žฅ๊ธฐ ํ”„๋กœ์ ํŠธ์—์„œ๋„ ์ด๊น๋‹ˆ๋‹ค.
  • ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๊ณ ๋ คํ•  ๋•Œ ๊ธฐ์ˆ  ๊ตฌํ˜„๋ฟ๋งŒ ์•„๋‹ˆ๋ผ "์†Œํ”„ํŠธ ์Šคํ‚ฌ"์ธก๋ฉด (์ปค๋ฎค๋‹ˆํ‹ฐ ๊ทœ๋ชจ, LTS ์ง€์›์— ๋Œ€ํ•œ ํ—Œ์‹ , ํ”„๋กœ์ ํŠธ์˜ ํ•ต์‹ฌ ๊ฒฐ์ •์— ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ฐธ์—ฌ)๋„ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
  • Ember๋Š” ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ์ฝ”๋“œ๋ฅผ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•  ํ•„์š”์—†์ด ember-cli "๋‚ด๋ถ€"๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ• ๋œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์— ๋Œ€ํ•œ ์ฃผ์š” ๊ฐœ์„  ์‚ฌํ•ญ์„ ์ œ๊ณต ํ•œ ์‹ค์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ์ฝ”๋“œ์— ๋Œ€ํ•œ ์‚ฌ์†Œํ•œ ์—…๊ทธ๋ ˆ์ด๋“œ ( ember-watson ๊ฐ™์€ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ํฌํ•จ ๋œ code-mod ํฌํ•จ)์˜ ๊ฒฝ์šฐ๋„์žˆ์–ด ์ƒ๋‹นํ•œ ์„ฑ๋Šฅ๊ณผ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„์˜ ์š”์ ์— ๋Œ€ํ•ด 10,000 ๋‹จ์–ด์˜ ์—์„ธ์ด๋ฅผ ํ–‰๋ณตํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์—์ด ์ฃผ์„์—์„œ ๋„ˆ๋ฌด ์ž์„ธํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ "Ember ์‚ฌ๊ณ  ๋ฐฉ์‹"์„ ๊ฐ€์ง„ ์‚ฌ๋žŒ๊ณผ์ด ๋ฌธ์ œ๋ฅผ ๋…ผ์˜ํ•˜๊ณ ์žํ•˜๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ์‹œ๊ฐ„์„ ์ œ๊ณตํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์˜์‚ฌ ๊ฒฐ์ •๊ถŒ์ž ์ค‘ ๋ˆ„๊ตฌ๋ผ๋„ ๋” ๋„“์€ Ember ์ƒํƒœ๊ณ„์— ๋Œ€ํ•ด ๋” ๋พฐ์กฑํ•œ ์งˆ๋ฌธ์„ํ•˜๊ธฐ ์œ„ํ•ด 1 ์‹œ๊ฐ„ ๋™์•ˆ ์ „ํ™”๋ฅผ ๊ฑธ๊ณ  ์‹ถ๋‹ค๋ฉด ๊ธฐ๊บผ์ด ๊ทธ๋ ‡๊ฒŒ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ œ ํŠธ์œ„ํ„ฐ ์—์„œ ์ €์—๊ฒŒ ์—ฐ๋ฝํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (DM ์˜คํ”ˆ) ์ €๋Š” ํ•ต์‹ฌ ํŒ€์›์€ ์•„๋‹ˆ์ง€๋งŒ 1.0 ์ด์ „๋ถ€ํ„ฐ Ember ์•ฑ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋‹ค์–‘ํ•œ ์•ฑ์œผ๋กœ ๋ชจ๋“  ์—…๊ทธ๋ ˆ์ด๋“œ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฑฐ์ณค์Šต๋‹ˆ๋‹ค ๐Ÿ‘

๋‚˜๋Š” eBay์—์„œ "My eBay"๋ฅผ ์œ„ํ•ด ์ผํ•ฉ๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ์„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” MarkoJS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ๊ฐœ๋ฐœ ๋‹จ๊ณ„๋ฅผ ์ฆ๊ฒผ์Šต๋‹ˆ๋‹ค. ์ €์ฒ˜๋Ÿผ ๋…ธ๋“œ์˜ ์ŠคํŠธ๋ฆฌ๋ฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ์„ ์ข‹์•„ํ•œ๋‹ค๋ฉด MarkoJS๋Š” ์ŠคํŠธ๋ฆฌ๋ฐ ๋ฐ ๋น„๋™๊ธฐ ๋ Œ๋”๋ง์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ MarkoJS์— ๋Œ€ํ•ด ์ข‹์•„ ํ•œ ๋‹ค๋ฅธ ์‚ฌ์‹ค :

  • ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ Œ๋”๋ง ๋œ UI ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋™์ž‘์„ ํšจ์œจ์ ์œผ๋กœ ๋ฐ”์ธ๋”ฉํ•ฉ๋‹ˆ๋‹ค.

  • ๋งค์šฐ ํšจ์œจ์ ์ธ ์ด๋ฒคํŠธ ์œ„์ž„

  • ์„œ๋ฒ„์—์„œ ๋ธŒ๋ผ์šฐ์ €๋กœ์˜ ๋น ๋ฅธ ์ƒํƒœ ์ง๋ ฌํ™”

@vinayakkulkarni ๋‹น์‹ ์˜ ์•„์ด๋””์–ด๋Š” ์ข‹์€ ๊ฒƒ ๊ฐ™์ง€๋งŒ ๋ฌธ์ œ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ 1 ๊ฐœ ์ด์ƒ์˜ ํˆฌํ‘œ๋ฅผ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค (๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ €๋กœ ์‹œ๋„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค).

ํŠธ์œ„ํ„ฐ ์„ค๋ฌธ ์กฐ์‚ฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ (์ด๋ฏธ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค) ํˆฌํ‘œ๋ฅผ ๊ณ ์œ ํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋กœ๊ทธ์ธ ์‹œ์Šคํ…œ์„ ๊ตฌํ˜„ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์„œ๋ฒ„ ๋ Œ๋”๋ง์€ ์—ฌ๊ธฐ์„œ ๋Œ€ํ™”์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค. Node๋Š” ํ•„์ˆ˜ WordPress ์Šคํƒ์˜ ์ผ๋ถ€๊ฐ€๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ Node์—์„œ ์ด๋Ÿฌํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๋ Œ๋”๋ง๋˜๋Š” ์†๋„๋Š” ๊ฒฐ์ •๊ณผ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.

Vue.js! ์ด ํ”„๋กœ์ ํŠธ๋ฅผ๋ณด์„ธ์š” https://github.com/bstavroulakis/vue-wordpress-pwa

์ €๋Š” Angular (AngularJS๊ฐ€ ์•„๋‹˜)๋ฅผ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๊ฐ€์žฅ ํฐ ์ปค๋ฎค๋‹ˆํ‹ฐ, ์•ˆ์ •์ ์ด๊ณ  ์™„์ „ํ•œ ์ƒํƒœ๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Angular๋Š” ๋งค์šฐ ๋Š๋ฆฌ๊ณ  v4์—์„œ๋Š” typescript๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜๋ฏ€๋กœ ์›Œ๋“œ ํ”„๋ ˆ์Šค ๊ฐœ๋ฐœ์— ์“ธ๋ชจ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

ํ”Œ๋žซํผ์˜ ์„ฑ์ˆ™๋„์— ๋”ฐ๋ผ Angular๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฐฐ์šฐ๊ธฐ๊ฐ€ ๋” ์‰ฝ๊ณ  ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ ์ธ Ember Js๊ฐ€ ์ž‘์—…์— ๋น„ํ•ด ๋„ˆ๋ฌด ํฌ๊ณ  Glimmer Js๊ฐ€ ์•„์ง ๋„ˆ๋ฌด ์ƒˆ๋กญ๊ธฐ ๋•Œ๋ฌธ์— Vue์— ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. :-)

์„œ๋ฒ„ ๋ Œ๋”๋ง์€ ์—ฌ๊ธฐ์„œ ๋Œ€ํ™”์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.

์ œ ๊ฒฝ์šฐ์—๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๊ด€๋ จ์„ฑ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋ฐฉ๊ธˆ ์–ธ๊ธ‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋…ธ๋“œ๋Š” ํ•„์ˆ˜ WordPress ์Šคํƒ์˜ ์ผ๋ถ€๊ฐ€๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

_hyperHTML_์€ PHP๋ฅผ ํฌํ•จํ•˜์—ฌ ๋ชจ๋“  ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง ์ฝ˜ํ…์ธ ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” Zend ์ธ์ฆ ์—”์ง€๋‹ˆ์–ด์ด๋ฉฐ ์ด๋ฏธ WordPress๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์–ธ๋ก ์ธ / ์ถœํŒ์‚ฌ์™€ ํ•จ๊ป˜ ์ผํ•ด ์™”์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ด๋Ÿฌํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ Node์—์„œ ๋ Œ๋”๋ง๋˜๋Š” ์†๋„๋Š” ๊ฒฐ์ •๊ณผ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.

ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๋ฐฑ์—”๋“œ์—์„œ๋„ ์ž‘๋™ํ•˜๊ณ , ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‹ฌ์ง€์–ด NativeScript ์™€๋„ ํ˜ธํ™˜ ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์€ ํ˜„์žฌ์™€๋Š” ๋ฌด๊ด€ ํ•œ ์žฅ์  ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ฐœ๋ฐฉํ˜• ํ”„๋กœ์ ํŠธ๊ฐ€ ๊ณ ๋ คํ•  ์ˆ˜์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ๋ฏธ๋ž˜์— ํ˜ธํ™˜๋˜๋Š” ์ข‹์€ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

@webreflection ๋‚˜๋Š” ํŠน๋ณ„ํžˆ ๋‹น์‹ ์„ ์„ ํƒํ•˜๋Š” ๊ทธ ์ฝ”๋ฉ˜ํŠธ๋ฅผ ์˜๋ฏธํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. Marko์˜ "์ŠคํŠธ๋ฆฌ๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„"์„ ๊ฐ•์กฐํ•œ ์œ„์˜ ์˜๊ฒฌ์— ๋Œ€ํ•œ ์‘๋‹ต์œผ๋กœ ๋” ๋งŽ์ด ์–ธ๊ธ‰๋˜์—ˆ์ง€๋งŒ BE ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ๋Œ€ํ•œ ๋ชจ๋“  ์˜๊ฒฌ์„ ๋‹ค๋ฃจ๊ธฐ์œ„ํ•œ ๊ฒƒ์ด ์—ˆ์Šต๋‹ˆ๋‹ค.

์ „๋ง

https://ma.tt/2017/09/on-react-and-wordpress/์˜ @mAAdhaTTah :

๊ทธ ๊ฒŒ์‹œ๋ฌผ์€ ๊ฒŒ์‹œ๋˜์ง€ ์•Š๊ณ  ๋Œ€์‹  ๊ตฌํ…๋ฒ ๋ฅดํฌ ํŒ€์ด ํ•œ ๋ฐœ ๋’ค๋กœ ๋ฌผ๋Ÿฌ๋‚˜์„œ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ…๋ฒ ๋ฅดํฌ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋งํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌํ…๋ฒ ๋ฅดํฌ๋Š” ์ตœ์†Œํ•œ ๋ช‡ ์ฃผ ์ •๋„ ์ง€์—ฐ ๋  ๊ฒƒ์ด๋ฉฐ ๋‚ด๋…„์œผ๋กœ ์ถœ์‹œ ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋” ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

Automattic์€ ๋˜ํ•œ Gutenberg๊ฐ€ Calypso๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๋„๋ก ์„ ํƒํ•œ ๋ชจ๋“  ๊ฒƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Calypso๋Š” ์ด๋ฏธ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐธ์กฐ : https://github.com/Automattic/wp-calypso/blob/master/server/render/index.js#L58

๊ทธ๋ž˜์„œ ๋‚ด ์ดํ•ด๋Š” SSR ๊ณต์—ฐ์ด ๊ด€๋ จ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ต๊ทค๋Ÿฌ๋„ ์ข‹์•„ํ•ด์š”!
AngularJS js ์‹ค์ œ ํ”„๋ ˆ์ž„ ์›Œํฌ!

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

@chriscinelli WordPress๊ฐ€ ์•„๋‹Œ Automattic์ž…๋‹ˆ๋‹ค. WordPress ์ž์ฒด๋Š” ๋…ธ๋“œ๋กœ ์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด๋Ÿฌํ•œ ์กฐ๊ฑด์—์„œ์˜ ์„ฑ๋Šฅ์€ ํ”„๋กœ์ ํŠธ์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.

๋ถ„๋ช…ํžˆ Angular๊ฐ€ ์ตœ์„ ์˜ ์„ ํƒ์ž…๋‹ˆ๋‹ค.

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

Angular์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.

Vue.js์— ํˆฌํ‘œํ•ฉ๋‹ˆ๋‹ค.
ํŠนํžˆ ๋ทฐ ๋ ˆ์ด์–ด๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ๋Œ€๋ถ€๋ถ„์˜ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•ฉ๋‹ˆ๋‹ค.

Vue์— ํˆฌํ‘œํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค !!!

๊ฐ์ง„ ํŒŒ๋™์„ ๋˜์ ธ

@trotyl ๊ทธ ๋Œ“๊ธ€์€ ๋ฐ›์•„ ๋“ค์ผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€์„ ์ˆ˜์ •ํ•˜์—ฌ ์‚ญ์ œํ–ˆ์Šต๋‹ˆ๋‹ค.

์˜ค, AngularJS๋Š”ํ•˜์ง€ ๋งˆ์„ธ์š”
์ด์ œ Angular์ž…๋‹ˆ๋‹ค.

wikipedia์˜ @mAAdhaTTah :

WordPress ๋Š” ์„ค๋ฆฝ์ž ์ธ Matt Mullenweg์™€ Mike Little์— ์˜ํ•ด 2003 ๋…„ 5 ์›” 27 ์ผ์— b2 / cafelog์˜ ํฌํฌ๋กœ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ฃผ๋กœ ์ฃผ๋ณ€ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์˜ํ•ด ๊ฐœ๋ฐœ๋˜์—ˆ์ง€๋งŒ WordPress ๋Š” Matt Mullenweg๊ฐ€ ์„ค๋ฆฝ ํ•œ ํšŒ์‚ฌ ์ธ Automattic ๊ณผ ๋ฐ€์ ‘ํ•œ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ Calypso์ž…๋‹ˆ๋‹ค : https://developer.wordpress.com/calypso/ ๊ทธ๋ฆฌ๊ณ  Calypso๋Š” SSR์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ด์ „ ๋Œ“๊ธ€ ์—์„œ ์ผ ๋“ฏ์ด Matt์˜ ReactJS ์ง€์› ์„ ์›ํ•œ๋‹ค๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค. Automattic์€ SSR์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ Calypso ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฒฐ์ •๊ณผ ๊ด€๋ จํ•˜์—ฌ SSR ์„ฑ๋Šฅ์„ ๋งŒ๋“ค๊ธฐ์— ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋จผ ๋ฏธ๋ž˜์— Wordpress ๊ฐœ๋ฐœ์ž๊ฐ€ Preact (๋˜๋Š” Vue ๋˜๋Š” Marko ๋˜๋Š” ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ)์— ์ต์ˆ™ํ•ด์ง€๋ฉด ์ƒˆ๋กœ์šด ๋ฏธ์นœ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋…ธ๋“œ๋ฅผ ํ†ตํ•ด Wordpress์˜ ๋” ๋งŽ์€ ๋ถ€๋ถ„์„ ์ œ๊ณตํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด SSR์ด ๋”์šฑ ์ค‘์š”ํ•ด์ง‘๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ SSR ์„ฑ๋Šฅ์ด ํ›จ์”ฌ ๋” ์ค‘์š” ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

SSR์— ๋Œ€ํ•ด ๋…ผ์˜ํ•˜๊ธฐ ์œ„ํ•ด ๋Œ€ํ™”๊ฐ€ ์ง„ํ–‰๋จ์— ๋”ฐ๋ผ ์ด๊ฒƒ์ด Ember์—๊ฒŒ ๋งค์šฐ ๋†’์€ ์šฐ์„  ์ˆœ์œ„์ด๋ฉฐ Ember-Fastboot ์˜ ์ถœํ˜„๊ณผ ํ•จ๊ป˜ ์ƒ๋‹นํžˆ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ๊ณ ๋ ค๋˜์—ˆ๋‹ค๋Š” ์ ์„ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์ด ํ˜„๋ช…ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ช‡ ๊ฐ€์ง€ ํด๋ผ์ด์–ธํŠธ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ๊ณผ ํ•จ๊ป˜ Fastboot๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ (๋Œ€๋‹จํ•œ ํšจ๊ณผ๋ฅผ ์œ„ํ•ด) ์ด๊ฒƒ์€ ๋†’์€ ์ˆ˜์ค€์˜ ๊ธฐ์ˆ  ํ† ๋ก  ์ด๋ฏ€๋กœ @tomdale์— ๋ฌธ์˜ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

@chriscinelli WordPress ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”„๋กœ์ ํŠธ์™€ Automattic ํšŒ์‚ฌ๋Š” ์—ฌ์ „ํžˆ ๋ณ„๋„์˜ ์—”ํ‹ฐํ‹ฐ์ž…๋‹ˆ๋‹ค. Automattic์ด SSR๋กœ ์ธํ•ด ๋‘˜ ์ค‘ ํ•˜๋‚˜์— ์ฐฌ์„ฑํ•˜์—ฌ ๋…ผ์Ÿ์„ ๋ฒŒ์ผ ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์—ฌ์ „ํžˆ WordPress ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ WordPress ์ฝ”์–ด๋ฅผ์œ„ํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๊ณ ๋ คํ•˜๋Š” ๋ฐฉ์‹์„ ๋ฐ”๊พธ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์‹คํ–‰ํ•˜๋ ค๋ฉด ๋…ธ๋“œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์–ด์จŒ๋“ ,์ด ์Šค๋ ˆ๋“œ์—์„œ ๊ตฌ๋…์„ ์ทจ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ํ† ๋ก ์„ ์˜คํ”„๋ผ์ธ์œผ๋กœ ๊ณ„์†ํ•˜๋ ค๋ฉด ๋‚ด ์ด๋ฉ”์ผ์ด ๋‚ด ํ”„๋กœํ•„์— ์žˆ์Šต๋‹ˆ๋‹ค.

๋…ธ๋“œ ์‹คํ–‰์„ ์š”๊ตฌํ•˜์ง€ ์•Š์œผ๋ฉฐ ์‹ค์ œ๋กœ๋„ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

SSR ๊ธฐ๋Šฅ์„ ์ฐจ๋ณ„์ ์œผ๋กœ ์‚ผ์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ๋…ธ๋“œ SSR์ด ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ๋…ธ๋“œ SSR ์—†์ด๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋‹จ์ง€ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ ์ผ๋ฟ, ์š”๊ตฌ ์‚ฌํ•ญ๋„ ์•„๋‹ˆ๊ณ  ์ข…์†์„ฑ๋„ ์•„๋‹™๋‹ˆ๋‹ค.

Vue.js์— ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” MIT์— ๊ฐ”๊ณ  ํ•ฉ๋ฆฌ์ ์œผ๋กœ ๋˜‘๋˜‘ํ•ด์•ผํ•˜๋Š” ์ˆ˜์„ ์•„์น˜์ž…๋‹ˆ๋‹ค. ์ €๋Š”์ด ์ผ์„ ์ˆ˜๋…„ ๋™์•ˆ ํ•ด์™”๊ณ  ์—ฌ๊ธฐ์ €๊ธฐ์„œ ๋ช‡ ๋ช…์˜ ๊ฐœ๋ฐœ์ž๋ฅผ ์ธํ„ฐ๋ทฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์›น์ด ๋˜‘๋˜‘ํ•œ ์‚ฌ๋žŒ๋“ค๋กœ ๊ฐ€๋“ ์ฐจ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ Vue์˜ ๋‹จ์ˆœํ•จ์ด Angular์˜ ๋ณต์žก์„ฑ๊ณผ ๋™๋“ฑํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‚ฌ๋žŒ์€ "๋ณต์žกํ•จ"์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๊ด€์ ์„ ์žƒ์—ˆ์Šต๋‹ˆ๋‹ค. Google์ด ์ƒ๊ฐํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ Javascript๋Š” ์™„์ „ํžˆ ์‚ฌ์†Œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—„์ฒญ๋‚˜๊ฒŒ ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค. Vue๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Vue๋Š” PHP๋งŒํผ ์‰ฝ์Šต๋‹ˆ๋‹ค. "Vue๊ฐ€ ๋ฐฐ์šฐ๊ธฐ ๋” ์‰ฝ๋‹ค"๋Š” ๊ฒƒ์€ Vue๊ฐ€ Angular๋ณด๋‹ค ์–ผ๋งˆ๋‚˜ ์‰ฌ์šด ์ง€ ์„ค๋ช…ํ•˜๋Š” ๋ฐ ๊ฐ€๊น์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. React๋ณด๋‹ค ํ›จ์”ฌ ์‰ฝ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

React๋Š” ํ‰๋ฒ”ํ•œ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ easy-peasy์™€ google-level ์‚ฌ์ด์˜ ๊ฒฝ๊ณ„๋ฅผ ๊ฑท๊ณ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์†Œ๊ทœ๋ชจ ์ƒ์ ์˜ ๊ฒฝ์šฐ React๊ฐ€ ์†Œ๊ทœ๋ชจ ํŒ€์— ๋„์ „ ํ•  ์ˆ˜์žˆ์„๋งŒํผ ๋ณต์žกํ•˜๋‹ค๊ณ  ๋งํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. React๋Š” ์˜ˆ๋ฅผ ๋“ค์–ด PHP / Wordpress๋ณด๋‹ค ๋” ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค. React๋ฅผ ์„ ํƒํ•จ์œผ๋กœ์จ Wordpress / Automattic์€ ๊ฐœ๋ฐœ์ž๊ฐ€ Wordpress ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ์ง„์ž…ํ•˜๊ธฐ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. ์ˆ˜๋ฐฑ ๋ช…์˜ ์‚ฌ๋žŒ๋“ค์ด "React is easy", "์›น์ด ์ ์  ๋” ์Šค๋งˆํŠธ ํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค"๋ผ๊ณ  ์™ธ์น  ๊ฒƒ์ด๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ํ•˜๋ฃจ๊ฐ€ ๋๋‚˜๋ฉด ๋” ๋ณต์žกํ•œ ๊ฒƒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋” ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” Vue๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฒƒ์ด WP ๋ฟŒ๋ฆฌ์— ๋” ๊ฐ€๊น๊ณ  WP ์ปค๋ฎค๋‹ˆํ‹ฐ ์ „์ฒด์— ๋Œ€ํ•œ ๊ธฐ์ˆ ์  ๋ถ€๋‹ด์ด ์ ์„ ๊ฒƒ์ด๋ผ๊ณ  ๊ฒธ์†ํ•˜๊ฒŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์›น ํŒจ๋Ÿฌ๋‹ค์ž„์€ ์ œ์ณ๋‘๊ณ -๋•Œ๋กœ๋Š” ๋‹จ์ˆœํ•œ ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

Angular์™€ Vue๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๋‘ ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

Vue, React, MarkoJS, Inferno, Preact ๋“ฑ์€ ๋ทฐ ๋ ˆ์ด์–ด๋งŒ์„ ๋‹ค๋ฃจ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. Angular๋ฅผ ํฌํ•จํ•˜์—ฌ ๋ชจ๋‘ HTML์„ ์ƒ์„ฑํ•˜๊ณ  ์„ ์–ธ์ ์ธ ๋ฐฉ์‹์œผ๋กœ DOM์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Angular๋Š” ํ”„๋ŸฐํŠธ ์—”๋“œ ๊ฐœ๋ฐœ์„์œ„ํ•œ ์ „์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ๋ฅผ ์›ํ•˜๋ฉฐ ๋ทฐ ๋ ˆ์ด์–ด๋ฅผ ๋„˜์–ด์„œ๋Š” ๋” ๋งŽ์€ ๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React์˜ ๊ตฌ๋ฌธ์€์ด ์ƒ˜ํ”Œ์—์„œ ๊ฐ€์žฅ ์˜ค๋ž˜๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. Facebook์€ ๋งค์šฐ ์ œํ•œ๋œ ํ”„๋กœํ† ์ฝœ ํ‘œ๋ฉด์—์„œ ๋งŽ์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” (๋„ˆ๋ฌด ๋งŽ์„ ์ˆ˜๋„ ์žˆ์Œ) ๋งค์šฐ ๋ณต์žกํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ๋ฐ ๊ฝค ์ข‹์€ ์ผ์„ํ–ˆ์Šต๋‹ˆ๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด React ๋‚ด๋ถ€์˜ ๋ณต์žก์„ฑ์„ ์•Œ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๊ธฐ๋ณธ์„ ๋ฐฐ์šฐ๊ณ  ๋ฐ˜๋‚˜์ ˆ ๋งŒ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ชฉ๋ก์˜ ๋‹ค๋ฅธ ๋ชจ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” React์—์„œ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ๊ตฌ๋ฌธ์„ ๋‹จ์ˆœํ™”ํ•˜๊ณ , React์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ , ๋™์ผํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ Javascript ์ฝ”๋“œ์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ณ  ๊ทธ ์œ„์— ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค.
Preact๋Š” 3Kb์—์„œ React์™€ ๋งค์šฐ ์œ ์‚ฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์œ ์ง€ํ•˜๋Š” ๋ฐ ํฐ ์—ญํ• ์„ํ–ˆ์Šต๋‹ˆ๋‹ค.
Inferno์™€ Marko๋Š” ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ๋Œ€ํญ ์ตœ์ ํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.
Marko์™€ Vue๋Š” ์ƒ์šฉ๊ตฌ ์ฝ”๋“œ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด ๊ตฌ๋ฌธ์„ ๋งŽ์ด ๋‹จ์ˆœํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.
Marko๋Š” ๋˜ํ•œ ์ฝ”๋“œ๋ฅผ ๋” ๊ฑด์กฐํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์„ ํƒ์  Jade / Pug ์œ ์‚ฌ ๊ตฌ๋ฌธ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด ๋ชจ๋“  ๊ฒƒ์„ ๊ฐ„๋‹จํ•˜๊ณ  ์ง๊ด€์ ์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๋น„๋™๊ธฐ ํ…œํ”Œ๋ฆฟ์„ ์ƒ์„ฑํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ Angular ์™ธ์— ์ด๋Ÿฌํ•œ ๋ชจ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์—”์ง€๋‹ˆ์–ด๊ฐ€ ๋ฐ์ดํ„ฐ, ๋ผ์šฐํŒ… ๋“ฑ์„ ๊ฐ€์ ธ ์˜ค๋Š” ์ „๋žต๊ณผ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์ œ๊ณตํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. Redux์™€ ๋ฏธ๋“ค์›จ์–ด๋Š” Gutemberg๊ฐ€ ๋ฐ์ดํ„ฐ ๊ณ„์ธต์„ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ์ธ๊ธฐ์žˆ๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

React์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ๋•Œ Gutenberg๋Š” "๋ณ€๊ฒฝํ•  ๋‹ค๋ฅธ ๊ฒƒ"์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Angular๊ฐ€ ์‚ฌ์šฉ์ž์— ๋Œ€ํ•ด ๋…๋ฆฝ์  ์ธ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ ํ–ˆ๋”๋ผ๋„ https://github.com/angular-redux/ng-redux ์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๊ฐœ๋ฐœ๋˜๊ณ  ์ง€์› ๋˜์—ˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  Redux ๋ฐ Javascript (vs Typescript)์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ž์—ฐ์Šค๋Ÿฌ์šด ์„ ํƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. Javascript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์ง€๊ธˆ๊นŒ์ง€์˜ ํˆฌํ‘œ๋ฅผ ๋ณด๋ฉด ๊ตฌํ…๋ฒ ๋ฅดํฌ ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ๊ตฌ๊ธ€์˜ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ฐ•ํ•˜๊ฒŒ ๋ฐ˜๋Œ€ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Angular๋Š” ์˜ต์…˜์ด ์•„๋‹ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

PHP์™€ ์ด๋Ÿฌํ•œ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์™„์ „ํžˆ ๋‹ค๋ฅธ ์ง์Šน์ž…๋‹ˆ๋‹ค.

PHP ๋ฐฑ์—”๋“œ์™€ ๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ ํ”„๋ŸฐํŠธ ์—”๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์ง€๋งŒ ์‹œ๋„ˆ์ง€ ํšจ๊ณผ๊ฐ€์—†๊ณ  ์œ ์‚ฌ์ ์ด ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์•ฑ์€ jQuery๋ฅผ ๋ฟŒ๋ฆฐ ์ผ๋ฐ˜ PHP ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ๋ณด๋‹ค ์ ์–ด๋„ ํ•œ ๋‹จ๊ณ„ ๋” ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์ตœ์‹  ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์•ฑ์€ ์ƒํƒœ ์ €์žฅ ๋ฐ ๋น„๋™๊ธฐ ํ๋ฆ„ ์ด๋ผ๋Š” ๋‘ ๊ฐ€์ง€ ํฐ ๋ณต์žก์„ฑ์„ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ง€๋‚œ ๋ช‡ ๋…„๊ฐ„ ๋ถˆ๋ณ€์„ฑ๊ณผ async / await ์— ์˜ํ•ด์„œ๋งŒ ์™„ํ™”๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์„ฑ์žฅํ•จ์— ๋”ฐ๋ผ ๊ฐœ๋ฐœ์ž ํ๋ฆ„์ด ๋Š๋ ค์ง‘๋‹ˆ๋‹ค. ์ผ๋ถ€ ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ๋‹ค์‹œ ์ปดํŒŒ์ผํ•˜๊ณ  ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผํ•˜๋ฉฐ ์•ฑ์€ ๋‹ค์‹œ ์ดˆ๊ธฐํ™”๋ฅผ ๊ฑฐ์ณ์•ผํ•ฉ๋‹ˆ๋‹ค. ํ•ซ ์žฌ ์žฅ์ „์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋ง‰๋Œ€ํ•œ ์–‘์˜ ํˆด๋ง์ด ๊ตฌ์ถ•๋˜์—ˆ์œผ๋ฉฐ ๋ฉ‹์ง€๋”๋ผ๋„ ์—ฌ์ „ํžˆ ์™„๋ฒฝํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.
๋ทฐ ๋ ˆ์ด์–ด์— ๋Œ€ํ•ด ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ ํƒํ•˜๋“  ์ถ”๊ฐ€ ๋ณต์žก์„ฑ์„ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

PHP์—์„œ๋Š” ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ํŒŒ์ผ์„ ์ €์žฅํ•˜๋ฉฐ ๋นŒ๋“œํ•˜๊ฑฐ๋‚˜ ๋‹ค์‹œ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ ๋„ ํŽ˜์ด์ง€๋ฅผ ์ฆ‰์‹œ ๋‹ค์‹œ๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ฒƒ์ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋” ์ค‘์š”ํ•œ PHP๋Š” ์™„์ „ํžˆ stateless ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ๋กœ๋“œ ํ•  ๋•Œ๋งˆ๋‹ค ๋นˆ ์Šฌ๋ ˆ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์—ญ ๋ณ€์ˆ˜์กฐ์ฐจ๋„ ๊ฐ ์š”์ฒญ๋งˆ๋‹ค ๊นจ๋—ํ•œ ์ƒํƒœ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค (๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ข‹์€ ๋ณ€๋ช…์ด ์•„๋‹™๋‹ˆ๋‹ค = P). ๋ช‡ ๋…„ ๋™์•ˆ PHP ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ์—ฌ์ „ํžˆ ๋‹จ์ˆœํ•จ๊ณผ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์ด ๊ทธ๋ฆฌ์›Œ์š”. CakePHP, Symphony ๋˜๋Š” Laravel๊ณผ ๊ฐ™์€ ์ตœ์‹  ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์ •๊ตํ•œ ์—”์ง€๋‹ˆ์–ด๊ฐ€ ๋” ํ™˜์˜ํ•˜๋Š” ๋‹ค๋ฅธ ์–ธ์–ด ๋ฐ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๋น„ํ•ด ๋งŽ์€ ๊ฒƒ์„ ๋†“์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ˆ์™ธ๋Š” ์†๋„์ž…๋‹ˆ๋‹ค. PHP๋Š” ๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ์œผ๋กœ ๋‹จ์ˆœํ•จ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ๋กœ๋“œ ํ•  ๋•Œ๋งˆ๋‹ค ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. HHVM ๋ฐ PHP7์„ ์‚ฌ์šฉํ•˜๋ฉด ์„ฑ๋Šฅ์ด ํฌ๊ฒŒ ํ–ฅ์ƒ๋˜์—ˆ์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ node.js๋กœ ๋‹ฌ์„ฑ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ๊ณผ๋Š” ๊ฑฐ๋ฆฌ๊ฐ€ ๋ฉ€์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก 

์ตœ๊ทผ์— ํ”„๋ŸฐํŠธ ์—”๋“œ์— ์‚ฌ์šฉํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์ด ๊ทธ๊ฒƒ์„ ์ข‹์•„ํ•œ๋‹ค๊ณ ํ•˜๋”๋ผ๋„ ๊ทธ๊ฒƒ์ด ๊ตฌํ…๋ฒ ๋ฅดํฌ๋ฅผ์œ„ํ•œ ์ตœ์„ ์˜ ์„ ํƒ์„ ์˜๋ฏธํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.
_ ๊ตฌํ…๋ฒ ๋ฅดํฌ์˜ ํ•ต์‹ฌ ๊ธฐ์—ฌ์ž ๋Œ€๋ถ€๋ถ„์ด ํŠน์ • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ข‹์•„ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์€ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

๊ฒฐ๊ตญ :

์ž์‹ ์˜ ์˜์ง€์— ๋ฐ˜ํ•˜๋Š” ์‚ฌ๋žŒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๊ฐ™์€ ์˜๊ฒฌ์ž…๋‹ˆ๋‹ค

์ด ์Šค๋ ˆ๋“œ์—๋Š” ๋‹ค์–‘ํ•œ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์žฅ๋‹จ์ ์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ์ƒ๋‹นํžˆ ๋งŽ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

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

๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์˜ ๊ฒฐ์ •์— ๋‹ค์‹œ ํ–‰์šด์„ ๋น•๋‹ˆ๋‹ค ๐Ÿ˜ƒ

Vue์— ํˆฌํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ดˆ๋ณด์ž์—๊ฒŒ ์นœ์ˆ™ํ•˜๊ณ  ๊ฒฌ๊ณ ํ•ฉ๋‹ˆ๋‹ค. Vue๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ WordPress๋กœ ์ฒ˜์Œ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ ๋Š๊ผˆ๋˜ ๋Š๋‚Œ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. + ๐Ÿ’ฏ

@ colorful-tones๋Š” ์ดˆ๋ณด์ž์—๊ฒŒ๋งŒ ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค! ๋ชจ๋“  ํ”„๋กœ์ ํŠธ์—๋Š” ๋ผ์ดํ”„ ์„œํด์ด ์žˆ์œผ๋ฉฐ ๋Œ€๋ถ€๋ถ„์˜ ์ž‘์—…์€ ์œ ์ง€ ๋ณด์ˆ˜ ์ง„ํ–‰์— ์žˆ์Šต๋‹ˆ๋‹ค.

@ChrisCinelli ๋ช‡ ๊ฐ€์ง€ ์„ค๋ช… ๋ฐ ์˜๊ฒฌ :

Angular๋Š” ํ”„๋ŸฐํŠธ ์—”๋“œ ๊ฐœ๋ฐœ์„์œ„ํ•œ ์ „์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ๋ฅผ ์›ํ•˜๋ฉฐ ๋ทฐ ๋ ˆ์ด์–ด๋ฅผ ๋„˜์–ด์„œ๋Š” ๋” ๋งŽ์€ ๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Vue์—๋Š” ๋ผ์šฐํŒ…, ์ƒํƒœ ๊ด€๋ฆฌ, ํ…Œ์ŠคํŠธ, Linting ๋“ฑ์„์œ„ํ•œ ๊ณต์‹ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๊ณต์‹ CLI ๋„๊ตฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋“ค ๋ชจ๋‘๋Š” vuejs ์กฐ์ง ์•„๋ž˜์— ์žˆ์œผ๋ฉฐ ํ•ต์‹ฌ ๊ตฌ์„ฑ์›์ด ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ณ  Vue ์ž์ฒด์™€ ๋™๊ธฐํ™”๋˜์ง€๋งŒ ๊ฐ€์žฅ ์ข‹์€ ๋ถ€๋ถ„์€ ๋ฐฐ์šฐ๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค (๋”ฐ๋ผ์„œ 'Progressive Framework'์ฒ ํ•™). React์™€ ๋‹ฌ๋ฆฌ ์ด๊ฒƒ์€ ๊ณต์‹์ ์ธ ํ˜•ํƒœ์˜ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์•ฝ๊ฐ„์˜ ๋ง์žฅ๋‚œ :์ด ๋ชจ๋“  ๊ฒƒ์ด Angular๋ณด๋‹ค ๋ฐฐ์šฐ๊ธฐ ์‰ฝ๊ณ  ๋น ๋ฅด๋ฉฐ ๊ฐ€๋ณ์Šต๋‹ˆ๋‹ค. :๋ฏธ์†Œ:

Marko๋Š” ๋˜ํ•œ ์„ ํƒ์ ์ธ Jade / Pug ์œ ์‚ฌ ๊ตฌ๋ฌธ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

.vue ํŒŒ์ผ์€ ํ…œํ”Œ๋ฆฟ, ์Šคํฌ๋ฆฝํŠธ ๋˜๋Š” ์Šคํƒ€์ผ (์˜ˆ : pug, typescript, coffescript, sass, stylus ...)์— ๋ชจ๋“  ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค!

์—”์ง€๋‹ˆ์–ด๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ ์˜ค๊ธฐ์œ„ํ•œ ์ „๋žต๊ณผ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์ œ์‹œํ•˜๋„๋ก ์š”๊ตฌ

์ด๊ฒƒ์€ ๋‹จ์ง€ ์˜ˆ์ผ ๋ฟ์ด์ง€ ๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ ์˜ค๋Š” ๋ฐ ๊ณผ๋„ํ•œ ์—”์ง€๋‹ˆ์–ด๋ง์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

async created () {
  const result = await fetch('/api/items')
  this.items = await result.json()
}

๊ฑฐ๊ธฐ์—์„œ ๋งค์šฐ ๊ฐ„๋‹จํ•œ Vue ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋งŒ๋“ค์–ด ์ฝ”๋“œ๋ฅผ ๋”์šฑ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ผ๋ถ€ ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ๋‹ค์‹œ ์ปดํŒŒ์ผํ•˜๊ณ  ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผํ•˜๋ฉฐ ์•ฑ์€ ๋‹ค์‹œ ์ดˆ๊ธฐํ™”๋ฅผ ๊ฑฐ์ณ์•ผํ•ฉ๋‹ˆ๋‹ค.

์œ ์ผํ•œ ์ฐจ์ด์ ์€ ๋นŒ๋“œ ๋‹จ๊ณ„๋กœ, ์˜ค๋Š˜๋‚  ๊ณต์‹ vue-cli ๋˜๋Š” poi ์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ์„ ์ €์žฅํ•˜๋ฉด ์•ฑ์„ ๊ฑฐ์˜ ์ฆ‰์‹œ ์ƒˆ๋กœ ๊ณ ์น  ์ค€๋น„๊ฐ€๋ฉ๋‹ˆ๋‹ค (๋นŒ๋“œ ์‹œ๊ฐ„์€ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ๋„ ๋งค์šฐ ์œ ์šฉํ•˜๋ฉฐ Symfony์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€๊ทœ๋ชจ PHP ์•ฑ์„ ๊ฐœ๋ฐœ ํ•œ ๊ฒฝํ—˜์œผ๋กœ ๋ณผ ๋•Œ ๋” ๊ณ ํ†ต ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค). ๋˜ํ•œ Hot Module Remplacement ๊ธฐ๋Šฅ์€ PHP ์„ธ๊ณ„์— ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํฐ ์žฅ์ ์ด๋ฉฐ (๋‚ด๊ฐ€ ์•„๋Š” ํ•œ) ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด ์ƒˆ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Sass ์ปดํŒŒ์ผ๊ณผ ๊ฐ™์€ ๋น„์šฉ์ด ๋งŽ์ด ๋“œ๋Š” ์ž‘์—…-๊ทธ๋Ÿฌ๋‚˜ PHP๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค). ๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , Vue๋Š” webpack HMR์„ ๋งค์šฐ ์ž˜ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ๋ณต์žก์„ฑ์„ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

IMHO, ์ผ๋ถ€ ๋งค์šฐ ์ธ๊ธฐ์žˆ๋Š” PHP ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” Vue์™€ ๊ฐ™์€ ์ผ๋ถ€ ํ”„๋ŸฐํŠธ ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ / ํ”„๋ ˆ์ž„ ์›Œํฌ๋ณด๋‹ค ๋” ๋ณต์žกํ•˜๊ณ  ๋ฐฐ์šฐ๊ธฐ ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๊ทธ ๋ฐ˜๋Œ€๋„ ๋งค์šฐ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค.)

๊ตฌํ…๋ฒ ๋ฅดํฌ์™€ ์œ ์‚ฌํ•œ ๋ธ”๋ก ๊ธฐ๋ฐ˜ ํŽธ์ง‘๊ธฐ๋ฅผ ๊ตฌ์ถ• ํ•œ 2 ๋…„ ์ด์ƒ์˜ ๊ฒฝํ—˜์„ ๋ฐ”ํƒ•์œผ๋กœ ์˜ฌ๋ฐ”๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์„ ํƒํ•  ๋•Œ ํ•ด๊ฒฐํ•ด์•ผ ํ•  ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

  • VueJS / Marko / Angular๋Š” ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ๊ณผ ์–ด๋–ป๊ฒŒ ํ†ตํ•ฉ๋ฉ๋‹ˆ๊นŒ? Gutenberg์˜ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ์€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ? ๋“œ๋ž˜๊ทธ ํ•  ๋•Œ ๊ณ ์ŠคํŠธ ์š”์†Œ๋ฅผ ๋ณต์ œํ•ฉ๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ๊ธฐ์กด ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๊นŒ? ๋†“์„ ๋•Œ ๋ธ”๋ก์„ ๋†“์„ ์ž๋ฆฌ ํ‘œ์‹œ์ž๋ฅผ ์–ด๋””์— ์‚ฝ์ž… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

  • VueJS / Marko / Angular (๋ฐ ๊ฐ€์ƒ DOM)๋Š” Content Editables ๋ฐ DOM Range & Selection API์™€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ? ์ด ๋ฒ”์œ„ ๋ฐ ์„ ํƒ์˜ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ๋ถˆ์ผ์น˜๋Š” ์—ฌ๊ธฐ์„œ ํ™•์ธํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ตฌํ…๋ฒ ๋ฅดํฌ ํŽธ์ง‘๊ธฐ์—์„œ ๋ณต์‚ฌ / ์ž˜๋ผ ๋‚ด๊ธฐ / ๋ถ™์—ฌ ๋„ฃ๊ธฐ๋Š” ์–ด๋–ค ํ™•์žฅ์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ? ์—ฌ๋Ÿฌ ๋ธ”๋ก ์‚ฌ์ด์—์„œ ํ…์ŠคํŠธ๋ฅผ ์„ ํƒํ•˜๊ณ  ์ž˜๋ผ ๋‚ด๊ธฐ / ๋ณต์‚ฌ / ๋ถ™์—ฌ ๋„ฃ๊ธฐ๋ฅผ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ปจํ…์ธ  ํŽธ์ง‘ ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์€ ๊ฐ ๊ฐœ๋ณ„ ๋ธ”๋ก์— ์žˆ์Šต๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ๋ชจ๋‘ ํŽธ์ง‘ ๊ฐ€๋Šฅํ•œ ๋งˆ์Šคํ„ฐ ์ปจํ…์ธ ์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ?

  • ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์— YouTube ํ”Œ๋ ˆ์ด์–ด ๋˜๋Š” ํŠธ์œ„ํ„ฐ ํ”ผ๋“œ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด iframe ์‚ฝ์ž… ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์„ ํฌํ•จํ•˜๋Š” Gutenberg ๋ธ”๋ก์ด์žˆ๋Š” ๊ฒฝ์šฐ์ด ๋ธ”๋ก์„ ํ•œ DOM ์œ„์น˜์—์„œ ๋‹ค๋ฅธ ์œ„์น˜๋กœ ์ด๋™ํ•˜๋ฉด iframe์ด ์ž์ฒด์ ์œผ๋กœ ๋‹ค์‹œ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ์ฃผ์˜ ์‚ฌํ•ญ์œผ๋กœ๋Š” ์ด๋ฒคํŠธ๋ฅผ iframe์—์„œ ํŽธ์ง‘๊ธฐ๋กœ ๋‹ค์‹œ ์ „ํŒŒ ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค (ํŽธ์ง‘๊ธฐ์—์„œ ๋ธ”๋ก ์š”์†Œ๋ฅผ ๋“œ๋ž˜๊ทธํ•˜๊ณ  ์ปค์„œ๊ฐ€ ์ด์ œ ๊ต์ฐจ ์‚ฌ์ดํŠธ iframe ์œ„์— ์žˆ๊ณ  ๋ชจ๋“  ๊ฒƒ์ด ์ž‘๋™์„ ๋ฉˆ์ถ˜๋‹ค ๊ณ  ์ƒ์ƒํ•ด๋ณด์‹ญ์‹œ์˜ค).

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

์ „๋ง

Wordpress๋Š” ์ƒˆ๋กœ์šด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐฐ์šฐ๊ธฐ์— ์ถฉ๋ถ„ํžˆ ์‰ฌ์šฐ ๋ฉฐ ์กฐ๊ธˆ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด๋ฉด ๊ฐ•๋ ฅํ•ฉ๋‹ˆ๋‹ค. Vue์—์„œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.
WP๊ฐ€์ด ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ธฐ์  ๊ฒƒ์ž…๋‹ˆ๋‹ค!

๋‚ด ํˆฌํ‘œ๋Š” VUE์ž…๋‹ˆ๋‹ค!

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

https://custom-elements-everywhere.com/

VueJS์— ๋Œ€ํ•œ ๋‚˜์˜ ํˆฌํ‘œ. ๋ฉ‹์ง„ ํ”„๋ ˆ์ž„ ์›Œํฌ, ๋ผ ๋ผ๋ฒจ์ด ์ฆ๋ช…ํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

WP + Sage 9 (roots.io) + VueJS => ์™„๋ฒฝํ•œ ์Šคํƒ

Preact์—๋„ ๋ฌธ์ œ๊ฐ€์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://blog.cloudboost.io/3-points-to-consider-before-migrating-away-from-react-because-of-facebooks-bsd-patent-license-b4a32562d268

Preact๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ๋‚˜๋น ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Facebook์€ ๊ท€ํ•˜๊ฐ€ ์†Œ์†ก์„ ์‹œ์ž‘ํ•˜์ง€ ์•Š์•˜๋”๋ผ๋„ react ๋˜๋Š” preact ์‚ฌ์šฉ์„ ์ฐจ๋‹จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ณ€ํ˜ธ์‚ฌ๋Š” Preact๊ฐ€ ๋ฒ•์ •์—์„œ ์ €์ž‘๊ถŒ์„ ์œ ์ง€ํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ๋Œ€์‘์„ ์นจํ•ดํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ํ‹€๋ ธ๋‹ค๋ฉด ๋งํ•ด์ค˜. ๋ฒ•๋ฅ ์— ๋Œ€ํ•ด์„œ๋Š” ์ž˜ ๋ชจ๋ฅด์ง€๋งŒ ๋„์›€์ด๋˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์„ ์ฝ์—ˆ๊ณ  ์šฐ๋ฆฌ๊ฐ€ ๊ฒฐ์ •ํ•œ ํ›„ ์–ป์€ ๋ฒ•๋ฅ  ์ž๋ฌธ๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
ํ”„๋กœ์ ํŠธ์—์„œ React๋ฅผ ๋ฒ„๋ฆฌ์‹ญ์‹œ์˜ค. ์œ„ํ—˜์ด ํฌ๋‹ค๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์˜คํžˆ๋ ค ์šฐ๋ฆฌ
๋‹ค์šด ์ŠคํŠธ๋ฆผ ํด๋ผ์ด์–ธํŠธ์— ๋Œ€ํ•œ ์œ„ํ—˜์„ ์ตœ์†Œํ™”ํ•˜๊ณ ์žํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ณ€ํ˜ธ์‚ฌ๋Š”
๋™์˜ํ•˜๋Š” ์˜๊ฒฌ. ๋Œ€์‹  Polymer์™€ Vue๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
ํŠน์ • ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์œ„ํ•ด.

2017 ๋…„ 9 ์›” 20 ์ผ 11:04 PM์— "Coding Friend" [email protected]์ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

Preact์—๋„ ๋ฌธ์ œ๊ฐ€์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://blog.cloudboost.io/3-points-to-consider-before-
facebooks-bsd- ๋•Œ๋ฌธ์— ๋ฐ˜์‘์—์„œ-๋ฉ€๋ฆฌ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
ํŠนํ—ˆ ๋ผ์ด์„ ์Šค b4a32562d268

Preact๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ๋‚˜๋น ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์Šค ๋ถ์€
์‹œ์ž‘ํ•˜์ง€ ์•Š์•˜๋”๋ผ๋„ react ๋˜๋Š” preact๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•˜๋„๋ก ์ฐจ๋‹จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ณ ์†Œ. ์ด ๋ณ€ํ˜ธ์‚ฌ๋Š” Preact๊ฐ€ ๋ฒ„ํ‹ธ ์ˆ˜ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๊ทธ๊ฒƒ์€ ๋ฒ•์ •์—์„œ ์ €์ž‘๊ถŒ์ด๋ฉฐ ๋ฐ˜์‘์— ๋Œ€ํ•œ ์นจํ•ด๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ํ‹€๋ ธ๋‹ค๋ฉด ๋งํ•ด์ค˜. ๋ฒ•๋ฅ ์— ๋Œ€ํ•ด์„œ๋Š” ์ž˜ ๋ชจ๋ฅด์ง€๋งŒ ๋„์›€์ด๋˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

โ€”
๋Œ“๊ธ€์„ ๋‹ฌ์•˜ ๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜์‹  ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ณ  GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/WordPress/gutenberg/issues/2733#issuecomment-331045326 ,
๋˜๋Š” ์Šค๋ ˆ๋“œ ์Œ์†Œ๊ฑฐ
https://github.com/notifications/unsubscribe-auth/AH2_iHc8Rg54IDHqe8GIyVTdSbcJbZ9Iks5skeBngaJpZM4PYie9
.

๋‚˜๋Š” ๋”์ฐํ•œ ์ฝ”๋“œ๋ฅผ ๋ณธ ํ›„์—๋Š” WP๋ฅผ ๋‹ค์‹œ๋Š” ๋งŒ์ง€์ง€ ์•Š๊ฒ ๋‹ค๊ณ  ๋งน์„ธํ–ˆ์ง€๋งŒ VueJS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Valium์„ ์•ฝ๊ฐ„ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์‹œ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฉด์ฑ… ์กฐํ•ญ : ์ €๋Š” ๋ณ€ํ˜ธ์‚ฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋‚ด ์˜๊ฒฌ์ž…๋‹ˆ๋‹ค.


@ codingfriend1 ๊ทธ ๊ธฐ์‚ฌ๋Š” ์‹ค์šฉ์ ์ธ ์žฅ์ ์ด ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค.

์„ธ ๊ฐ€์ง€ ๊ฐ€์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ํŽ˜์ด์Šค ๋ถ์€ ์ •ํ™•ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃฐ ์ˆ˜์žˆ์„๋งŒํผ ๊ด‘๋ฒ”์œ„ํ•œ ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์˜ˆ๋ฅผ ๋“ค์–ด ABC๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํšŒ์‚ฌ๊ฐ€ ํŠนํ—ˆ ์นจํ•ด๋กœ FB๋ฅผ ๊ณ ์†Œํ•˜๋ฉด FB๋Š” ๋ฐ˜์‘ ํŠนํ—ˆ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ABC๋ฅผ ๊ณ ์†Œํ•ฉ๋‹ˆ๋‹ค.
  3. Facebook์˜ ํŠนํ—ˆ์—๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ๊ฐ€์ •์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์‚ดํŽด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. ํŽ˜์ด์Šค ๋ถ์€ ์ •ํ™•ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃฐ ์ˆ˜์žˆ์„๋งŒํผ ๊ด‘๋ฒ”์œ„ํ•œ ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ ์งœ๊นŒ์ง€ ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ฆ๊ฑฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ํŠนํ—ˆ๋Š” ๊ณต๊ฐœ๋˜์–ด ์žˆ์Œ์„ ๋ช…์‹ฌํ•˜์‹ญ์‹œ์˜ค. ์ •ํ™•ํ•œ ์†Œ์Šค ์ฝ”๋“œ๋Š” ๊ณต๊ฐœ ๋œ ์ง€์‹์ž…๋‹ˆ๋‹ค.
๋”์šฑ์ด Jason Miller (์ •๋ฐ€ ์ €์ž)๋Š” "Preact ์ค‘ ์–ด๋Š ๊ฒƒ๋„ ํŠนํ—ˆ๋ฅผ๋ฐ›์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค."๋ผ๊ณ  ์ฃผ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ €๋Š”์ด ๊ฐ€์ •์ด ์‚ฌ์‹ค์ด ์•„๋‹ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ฐ€๋Šฅ์„ฑ์€ ๋‚ฎ์Šต๋‹ˆ๋‹ค.

  1. ์˜ˆ๋ฅผ ๋“ค์–ด ABC๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํšŒ์‚ฌ๊ฐ€ ํŠนํ—ˆ ์นจํ•ด๋กœ FB๋ฅผ ๊ณ ์†Œํ•˜๋ฉด FB๋Š” ๋ฐ˜์‘ ํŠนํ—ˆ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ABC๋ฅผ ๊ณ ์†Œํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ Facebook์˜ ๋ช…์„ฑ์„ ํŒŒ๊ดด ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” FB๊ฐ€ ์ด๋นจ๊ณผ ๋ชป๊ณผ ์‹ธ์šธ ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜์ง€๋งŒ, ๊ทธ๋Ÿฐ ์‹์œผ๋กœ react์˜ ํŠนํ—ˆ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด FB๋ฅผ "ํŠนํ—ˆ ํŠธ๋กค"๋กœ ๋ถ„๋ฅ˜ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ•œํŽธ, FB๋Š” ๋ฒ•์  ์ˆ˜๋‹จ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹ธ์šธ ์ถฉ๋ถ„ํ•œ ์ž์›์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š”์ด ๊ฐ€์ •๋„ ๊ทธ๋Ÿด ๊ฒƒ ๊ฐ™์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

  1. Facebook์˜ ํŠนํ—ˆ์—๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ, ์ด๊ฒƒ์€ ์‚ฌ์‹ค์ด ์•„๋‹ˆ๋ผ ๊ฐ€์ •์ž…๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ "ํŠนํ—ˆ ๋ณด์œ "์™€ "์œ ํšจ ํŠนํ—ˆ ๋ณด์œ "๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๋‚˜๋Š” ๋ฒ•์›์ด ํŠนํ—ˆ๋ฅผ ๋ฌดํšจ๋กœ ํŒ๊ฒฐ ํ•œ ํ™˜์ƒ์ ์ธ ๊ธฐ์‚ฌ๋ฅผ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.

FB์˜ ํŠนํ—ˆ๊ฐ€ ๋„ˆ๋ฌด ๋„“์–ด์„œ ์žฅ์ ์ด ์—†์„ ๊ฐ€๋Šฅ์„ฑ์ด ํ•ญ์ƒ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด์ œ ํŽ˜์ด์Šค ๋ถ์ด ํŠนํ—ˆ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด _some_ ์žฅ์ ์ด์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋…ผ๋ฆฌ์ ์œผ๋กœ ๋งํ•ด์„œ ๊ทธ๊ฒƒ์ด ์ „์ œ๋ฅผ ๋‹ค๋ฃฌ๋‹ค๋ฉด ๊ทธ๊ฒƒ์€ ๋„ˆ๋ฌด ๊ด‘๋ฒ”์œ„ํ•˜๊ณ  ๋”ฐ๋ผ์„œ ๊ฐ€์น˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๊ฒƒ์€ ๊ฐ€์ •์ด ๊ฐ€์ • 1๊ณผ ์ง์ ‘ ์ถฉ๋Œํ•ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์Šค ๋ถ์ด ์ž์‹ ์„ ๋ฐฉ์–ดํ•˜๊ธฐ ์œ„ํ•ด ํŠนํ—ˆ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์ ์„ ๊ฐ์•ˆํ•  ๋•Œ ํŽ˜์ด์Šค ๋ถ์˜ ํŠนํ—ˆ๋Š” ์ง‘ํ–‰๋ ฅ์ด ์•„๋‹ˆ๋ผ ๊ด‘๋ฒ”์œ„ํ•˜๊ณ  ๊ฐ€์น˜๊ฐ€ ์—†์„ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก :

์„ธ ๊ฐ€์ง€ ๊ฐ€์ •์€ ๋ชจ๋‘ ํ…Œ์ŠคํŠธ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค ๋ชจ๋‘๊ฐ€ ์‚ฌ์‹ค๋กœ ํŒ๋ช…๋˜๊ณ  ๊ธฐ์ˆ ์ ์œผ๋กœ ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด, "์˜ˆ, preact๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์œ„ํ—˜ํ•ฉ๋‹ˆ๋‹ค."

๊ทธ๋Ÿฌ๋‚˜ ์‹ค์ œ๋กœ ์„ธ ๊ฐ€์ง€ ๊ฐ€์ •์ด ๋ชจ๋‘ ์ฐธ์ผ ๊ฐ€๋Šฅ์„ฑ์€ ๋„ˆ๋ฌด ๋‚ฎ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ๊ฐ€์ • 1๊ณผ 3์„ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ๋”์šฑ ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ๋ฒ•์›์ด ๋‹ฌ๋ฆฌ ๊ทœ์ •ํ•˜์ง€ ์•Š๋Š” ํ•œ preact (๋ฐ ๊ธฐํƒ€ vdom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ์•ˆ์ „ํ•˜๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฌ์ธํŠธ 1๊ณผ ๊ด€๋ จํ•˜์—ฌ Facebook์€ ๋ธŒ๋ผ์šฐ์ € ์Šคํฌ๋ฆฝํŠธ์—์„œ Efficient event delegation ์ด๋ผ๋Š” ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ jQuery์˜ live() ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค (๋‚˜์ค‘์— jQuery API์—์„œ on() ์ผ๋ถ€๊ฐ€ ๋จ)!

๊ทธ๋Ÿฌ๋‚˜ ๊ฐ€์ •์˜ ํƒ€๋‹น์„ฑ๊ณผ ๊ด€๊ณ„์—†์ด WordPress๊ฐ€ React์—์„œ ๋ฉ€์–ด์ง€๋Š” ์ด์œ ๋Š” WordPress์— Facebook์— ๋Œ€ํ•œ ์šฐ๋ ค๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด ์•„๋‹™๋‹ˆ๋‹ค . ๊ทธ๋ฆฌ๊ณ  ๋‚œ์—์„œ ์ธ์šฉํ•˜๊ณ ์žˆ์–ด ๋ฐœํ‘œ ํฌ์ŠคํŠธ (๊ฐ•์กฐ ๊ด‘์‚ฐ) ์œ„์˜ ๋ฌธ์ œ์— ๋งํฌ :

์ €๋Š” Facebook์˜ ์กฐํ•ญ์ด ํšŒ์‚ฌ๊ฐ€ ์ทจํ•  ์ˆ˜์žˆ๋Š” ๋ณด๋‹ค ์‹ค์ œ๋กœ ๋” ๋ช…ํ™• ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์Šค ๋ถ์˜ ํŠนํ—ˆ ์กฐํ•ญ์ด ๊ดœ์ฐฎ๋‹ค๊ณ  ์„ธ์ƒ์„ ์„ค๋“ํ•˜๋Š” ๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์ทจํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค.

์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํŠนํ—ˆ๊ฐ€ WordPress๋ฅผ ๋ฉ€์–ด์ง€๊ฒŒ ํ•œ ๊ฒƒ์€ ์ธ์‹, ํ˜ผ๋ž€ ๋ฐ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด์ „ ์˜๊ฒฌ์—์„œ ์„ค๋ช…ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ Preact์—๋„ ๋™์ผํ•œ ์šฐ๋ ค๊ฐ€ ์ ์šฉ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํฌ์ธํŠธ 1๊ณผ ๊ด€๋ จํ•˜์—ฌ Facebook์€ ๋ธŒ๋ผ์šฐ์ € ์Šคํฌ๋ฆฝํŠธ์—์„œ Efficient event delegation์ด๋ผ๋Š” ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ jQuery์˜ live () ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค (๋‚˜์ค‘์— jQuery API์—์„œ on ()์˜ ์ผ๋ถ€๊ฐ€ ๋จ)!

๊ทธ๊ฒƒ์€ ๊ทธ๋“ค์ด ์ด๋ฒคํŠธ ์œ„์ž„ ์•„์ด๋””์–ด๋ฅผ ๋ฐœ๋ช…ํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ?! 1995 ๋…„์œผ๋กœ ๊ฑฐ์Šฌ๋Ÿฌ ์˜ฌ๋ผ๊ฐ€๋Š” ์ธ์šฉ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ๋ฌด์Šจ ๋œป์ž…๋‹ˆ๊นŒ?

@ChrisCinelli ๋Š” Marko์˜ ๊ฒฝ์šฐ "์ง€์ˆ˜ ์  ์„ฑ์žฅ์˜ ๋ณ€๊ณก์ ์œผ๋กœ ๋ณด์ด๋Š” ๊ฒƒ"์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” ์ด๊ฒƒ์ด ๋‹จ์ˆœํžˆ ๊ทœ๋ชจ์˜ ๋ฌธ์ œ๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์— 5k ๋˜๋Š” 10k Github ๋ณ„์ด์žˆ๋Š” ๊ฒฝ์šฐ, ์˜ˆ๋ฅผ ๋“ค์–ด Hackernews์˜ ์ƒ๋‹จ ํŽ˜์ด์ง€์—์žˆ๋Š” ๋งํฌ์™€ ๊ฐ™์€ ๋‹จ์ผ ๋ฐœ์ƒ์€ ํ•˜๋ฃจ์— 1 ์ฒœ ๊ฐœ์˜ ๋ณ„์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ Marko์˜ ๊ฒฝ์šฐ ์ตœ๊ทผ ์ˆซ์ž์˜ 20 %์ž…๋‹ˆ๋‹ค.

Vue๊ฐ€ ๊ฐ€์ง€๊ณ ์žˆ๋Š” 65,000 ๊ฐœ์˜ ๋ณ„ ๊ทœ๋ชจ์—์„œ๋Š” ๊ทธ๋‹ค์ง€ ๋ˆˆ์— ๋„์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ณ„ ์—ญ์‚ฌ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ธํ•ด ์–ด๋Š ์‹œ์ ์—์„œ ๋ณ€๋™์ด ์ „ํ˜€ ํ‘œ์‹œ๋˜์ง€ ์•Š๊ณ  ๋๊นŒ์ง€ ์ง์„  ์ผ๋ฟ์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ƒํ™ฉ์€ Marko ์ž์ฒด์—๋งŒ ๊ตญํ•œ๋˜์ง€ ์•Š๊ณ  Inferno ๋˜๋Š” ์ตœ๊ทผ Vue์—์„œ ์˜๊ฐ์„๋ฐ›์€ ๋งˆ์ดํฌ๋กœ ํ”„๋ ˆ์ž„ ์›Œํฌ ์ธ MoonJS์—์„œ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ์ „์ฒด React ํŠนํ—ˆ ๋“œ๋ผ๋งˆ๋กœ ์ธํ•ด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์Šคํƒ€๋ฅผ ์–ป์—ˆ๋Š”์ง€์— ๋”ฐ๋ผ Preact๊ฐ€ ๋น„์Šทํ•œ ์ง€์ ์— ์žˆ๋‹ค๊ณ  ๋งํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹น์‹ ์€ ๋‹น์‹ ๊ณผ ๊ฐ™์€ ์†Œ์Šค์˜ ๋‹ค์Œ ๊ทธ๋ž˜ํ”„์—์„œ ๋‚ด๊ฐ€ ๋งํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Image of Yaktocat

์ด๋Ÿฌํ•œ ์‚ฌ๋žŒ๋“ค์ด ์‹ค์ œ๋กœ ๊ฐœ๋ฐœ์ค‘์ธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉ ํ•ด๋ณด๊ณ  ํ”„๋กœ๋•์…˜์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ๋‚˜์ค‘์— ๊ณ„์† ์‚ฌ์šฉํ•  ๊ฒƒ์ธ์ง€ ์‹œ๊ฐ„์ด ์•Œ๋ ค์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ชจ๋“  ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ Marko๊ฐ€ ์ž˜๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

Vue๋Š” ํฐ ๋ณ€๋™์ด์—†๋Š” ์•ˆ์ •์ ์ธ ์„ฑ์žฅ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์†๋„๋กœ ํฌ๋ฆฌ์Šค๋งˆ์Šค ์ด์ „์— React์—์„œ ์ตœ๊ณ ๊ฐ€๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ ์–ด๋„ Github์—์„œ๋Š”. :)

@aurelia๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ?
์›น ์‚ฌ์ดํŠธ : aurelia.io
@EisenbergEffect ๊ฐ€ ์ด๊ฒƒ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ €์—๊ฒŒ๋Š” ํ›Œ๋ฅญํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ์ž…๋‹ˆ๋‹ค!

  1. ๋‹จ์ˆœ ๊ทœ์น™ (์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ€๋Šฅ)
  2. ์ผ๋ฐ˜ HTML
  3. ๋ฐ”๋‹๋ผ JS
  4. ํ”„๋ ˆ์ž„ ์›Œํฌ ๊ฐœ์ž… ์—†์Œ!

์‚ฌ์šฉํ•˜๋ ค๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ (jQuery, Vue.js, Preact, Ember, HyperHTML ๋“ฑ)๋ฅผ ํ”Œ๋Ÿฌ๊ทธ์ธํ•˜๊ณ  Aurelia์— ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๊ฐ€๋ฅด ์น  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค!

๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ณ  ํ‘œ์ค€ ๊ธฐ๋ฐ˜์ด๋ฏ€๋กœ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›๋„ ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฉฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›์ด ์ •๋ง๋กœ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋„์›€์„๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (๋ณ„ 1 ๋งŒ ๊ฐœ ์ด์ƒ).

React๊ฐ€ MIT์—์„œ ์žฌ ๋ผ์ด์„ผ์Šค ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค : https://code.facebook.com/posts/300798627056246

์ด์ œ ๊ฒฐ์ •์„ ๋’ค์ง‘์–ด ์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํ™€๋ฆฌ ๋ชฐ๋ฆฌ! React๊ฐ€ ๋‹ค์‹œ ๋Œ์•„ ์™”์Šต๋‹ˆ๋‹ค. WordPress๊ฐ€ ๊ทธ๋žฌ์Šต๋‹ˆ๊นŒ? ํ™•์‹คํ•˜์ง€ ์•Š๋‹ค! ์˜ค์ „ 3์‹œ์ด๊ณ  ๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋งค์šฐ ํฅ๋ถ„๋ฉ๋‹ˆ๋‹ค! ๋‹น์‹ ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ!

React, Jest, Flow ๋ฐ Immutable.js ๋‹ค์‹œ ๋ผ์ด์„ ์Šค

๋‹ค์Œ ์ฃผ์—๋Š” ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ ์ธ React, Jest, Flow ๋ฐ Immutable.js๋ฅผ MIT ๋ผ์ด์„ ์Šค์— ๋”ฐ๋ผ ๋‹ค์‹œ ๋ผ์ด์„ ์Šค ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. React๋Š” ์›น์šฉ ์˜คํ”ˆ ์†Œ์Šค ์†Œํ”„ํŠธ์›จ์–ด์˜ ๊ด‘๋ฒ”์œ„ํ•œ ์ƒํƒœ๊ณ„์˜ ํ† ๋Œ€์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์žฌ ๋ผ์ด์„ ์Šคํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋น„ ๊ธฐ์ˆ ์  ์ธ ์ด์œ ๋กœ ์ง„ํ–‰ ์ƒํ™ฉ์„ ๋ณด๋ฅ˜ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๊ฒฐ์ •์€ ์šฐ๋ฆฌ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋Œ€ํ•œ ์‹ค๋ง๊ณผ ๋ถˆํ™•์‹ค์„ฑ์˜ ๋ช‡ ์ฃผ ํ›„์— ๋‚˜์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ BSD + ํŠนํ—ˆ ๋ผ์ด์„ผ์Šค๊ฐ€ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ช‡ ๊ฐ€์ง€ ์ด์ ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ๋ฏฟ์ง€๋งŒ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฒฐ์ •์ ์œผ๋กœ ์„ค๋“ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค.

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

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

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

์ œ ์ƒ๊ฐ์—๋Š” MIT ๋ผ์ด์„ ์Šค์™€ ๊ฐ€์žฅ ํ™œ๋ฐœํ•˜๊ณ  ๊ฐ€์žฅ ํฐ ์˜คํ”ˆ ์†Œ์Šค JS ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด React๊ฐ€ ๊ณ ์ˆ˜ ํ•  ์ˆ˜์žˆ๋Š” ํ™•์‹คํ•œ ์„ ํƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ํˆฌํ‘œ๋Š” ์ด์ œ React๋กœ ๋Œ์•„ ์™”์Šต๋‹ˆ๋‹ค . โ€” ์ธ๋ฅ˜์— ๋Œ€ํ•œ ๋ฏฟ์Œ์ด ํšŒ๋ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋น„์Šทํ•œ ๋Œ“๊ธ€ ๋Œ€์‹  ๐Ÿ‘๋กœ ํˆฌํ‘œํ•˜์„ธ์š”.

React ๋ผ์ด์„ผ์‹ฑ์˜ ์ด๋Ÿฌํ•œ ๋ณ€ํ™”์— ์ฐธ์—ฌํ•œ Wordpress์— ๋Œ€ํ•ด ํฐ ๊ฐ์‚ฌ๋ฅผ ํ‘œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

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

์งˆ๋Ÿ‰
ํ™•์‹คํžˆ
vueJS ์šฉ

๋˜ํ•œ ๊ฐ€์žฅ ํฐ ์ปค๋ฎค๋‹ˆํ‹ฐ, ๊ฐ•๋ ฅํ•œ ๊ฐœ๋ฐœ์ž ํŒ€, ์•ˆ์ •์ ์ด๊ณ  ์™„์ „ํ•œ ์ƒํƒœ๊ณ„๋ฅผ ๋ณด์œ ํ•œ Angular2.0 + (AngularJS๊ฐ€ ์•„๋‹˜)๋ฅผ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.

@CrazyBBer ๊ฐ€์žฅ ํฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ธ Angular 2/4์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋Š” ์–ด๋””์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์— ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์–ด์จŒ๋“  ๋๋‚ฌ์Šต๋‹ˆ๋‹ค. React๋Š” WordPress์™€ ํ•จ๊ป˜ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๊ธฐ์— ์žˆ์œผ๋ฉฐ Vue ์• ํ˜ธ๊ฐ€ ๋กœ์„œ๋„ React๋กœ ์ด๋ฏธ ์ž‘์„ฑ๋œ ์ฝ”๋“œ์˜ ์–‘์„ ๊ณ ๋ คํ•  ๋•Œ ์ƒํ™ฉ์„ ๋ฐ”๊ฟ€ ์ˆ˜์žˆ๋Š” ์ตœ์„ ์˜ ๋ฐฉ๋ฒ•์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

@ahmadawais @gustojs Reddit์˜ ์‚ฌ๋žŒ๋“ค์€ MIT๊ฐ€ ์ €์ž‘๊ถŒ๋งŒ์„ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๊ฐ€ React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํŠนํ—ˆ๊ถŒ์„ ๊ฐ€์ง€์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๋Š” ์šฐ๋ ค๋ฅผ ์ œ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ์ด ์ง„์ˆ ์€ ์ •๋ง ๋‚˜๋ฅผ ๊ดด๋กญ ํž™๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š”์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋‹จํ˜ธํ•˜๊ฒŒ ์„ค๋“ํ•˜์ง€ ๋ชปํ–ˆ์Œ์„ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค.

ํšจ๊ณผ์ ์œผ๋กœ "์šฐ๋ฆฌ๋Š” ํ‹€๋ฆฌ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์€ ์šฐ๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค."

@ahmadawais : ๋‚˜๋Š” ์•„์ง๋„ ๋‹น์‹ ์ด ๋ณ€๋•์ด ๋  ์ˆ˜ ๋ผ์ด์„ ์Šค ์–ด๋–ป๊ฒŒ ๋ฐ˜์‘ํ•˜๋Š”์ง€ ๋“ฑ์˜ ์™„๋ฒฝํ•œ ์˜ˆ๋ฅผ ๋ณธ ์ ์ด์œผ๋กœ ๋ทฐ์™€ ํ•จ๊ป˜๊ฐ€๋Š” ๊ฒƒ์ด ๋” ๋‚˜์€ ์„ ํƒ์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐ ๋จผ์ € ๊ทธ๋“ค์€ํ–ˆ๋‹ค BSD + Patents license MIT๋กœ ์ „ํ™˜ ํ•œ ์ง€๊ธˆ. ๊ฐ€๊นŒ์šด ์žฅ๋ž˜์— FB ์†Œ์œ ์˜ ๋ผ์ด์„ผ์Šค / ํŠนํ—ˆ๋กœ ๋‹ค์‹œ ์ „ํ™˜ํ•˜๋ฉด ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋ง๋ฆฌ๊ธฐ ์œ„ํ•ด ์ซ“๊ฒจ๋‚  ๊ฒƒ์ž…๋‹ˆ๋‹ค. Vue๋Š” ์ฒ˜์Œ๋ถ€ํ„ฐ MIT์˜€์œผ๋ฉฐ ์ฃผ์š” ๊ธฐ์—…์ด ์ฃผ๋„ํ•˜๋Š” ๊ธฐ์—…๋ณด๋‹ค ์ปค๋ฎค๋‹ˆํ‹ฐ ์ฃผ๋„์ ์ž…๋‹ˆ๋‹ค.

๊ฒŒ๋‹ค๊ฐ€ @ atanas-angelov-dev๊ฐ€ ๋งํ•œ ๊ฒƒ.

์ง€๊ธˆ ์ „ํ™˜ ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
Vue๊ฐ€ ๋” ๋‚˜์€ ๊ด€์ ์„ ์ œ๊ณตํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ๋ชจ๋“  ๊ฒƒ์„ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์•„! ์–ด์„œ ์˜ค์„ธ์š”, Aurelia์—๊ฒŒ ๊ธฐํšŒ๋ฅผ์ฃผ์„ธ์š”!
Angularjs ํŒ€์˜ ์ˆ˜์„ ๊ฐœ๋ฐœ์ž ์ค‘ ํ•œ ๋ช…์ด ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
Vue.js์ฒ˜๋Ÿผ ์†Œ๊ทœ๋ชจ ์ฑ„ํƒ์—์„œ ์ „์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@azure ํฌํ„ธ ํŒ€์กฐ์ฐจ๋„ ์ง€๊ธˆ ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด ๋…น์•„์›ƒ ๋Œ€์‹  Aurelia๋ฅผ ์„ ํƒํ–ˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค!
๊ทธ๋ฆฌ๊ณ  ๋ˆ„๊ฐ€ ์••๋‹ˆ๊นŒ?! ๊ทธ๋“ค์€ ์ด์ œ ์กฐ๊ธˆ์”ฉ Aurelia๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์กฐ๊ธˆ ์‹œ์ž‘ํ•˜์„ธ์š”. ์ข‹์•„ํ•  ๊ฑฐ๋ผ๋Š” ๊ฑธ ์•Œ์•„์š”!

Nirmal4G,
๋‹น์‹ ์˜ ๋…ผ๋ฌธ์€ ํŒ๋งค ์ ์œผ๋กœ ๋„ˆ๋ฌด๋‚˜ ๋ง๋„ ์•ˆ๋˜๊ฒŒ ๋“ค๋ฆฝ๋‹ˆ๋‹ค.
์‚ฌ์‹ค ์ €๋Š” ์ „์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ์—์ด 404 ํŽ˜์ด์ง€์™€ ๋™์ผํ•œ ๊ฒฐํ•จ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
http://aurelia.io/get-started.html

@ bovas85 ํŒ๋งค์ƒ ์ด ์•„๋‹ˆ๊ณ , ์ €๋Š” ๊ทธ ํŒ€์˜ ์ผ๋ถ€๋„ ์•„๋‹™๋‹ˆ๋‹ค . ๊ทธ๋“ค์€ ๋‚ด๊ฐ€ ๊ทธ๋“ค์˜ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์กฐ์ฐจ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.

@ cr101 / cc

ํ‘œ์ง€๋กœ ์ฑ…์„ ํŒ๋‹จํ•˜์ง€ ๋งˆ์„ธ์š”

Aurelia์— ๋Œ€ํ•ด ์•Œ๊ธฐ ์ „์—๋„ ๋งŽ์€ ์ธ๊ธฐ์žˆ๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•ด ์™”์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ธฐ์ค€์˜ ๊ท ํ˜•์„ ๋งž์ถฐ ์Šคํƒ์„ ์Œ“์•„์•ผํ•œ๋‹ค๋ฉด ๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ (๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ผ๊ณ  ๋ฏฟ์œผ์„ธ์š”)์˜ ๊ฒฝ์šฐ Aurelia๊ฐ€ 1 ์œ„๋ฅผ ์ฐจ์ง€ํ•˜๊ณ  Vue๊ฐ€ ๊ทธ ๋’ค๋ฅผ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

์ „์ฒด ํ”„๋ ˆ์ž„ ์›Œํฌ์—๋Š” ๊ฒŒ์‹œ๋ฌผ์—์„œ ์ง์ ‘ ์—ฐ๊ฒฐํ•˜๋Š”์ด 404 ํŽ˜์ด์ง€์™€ ๋™์ผํ•œ ๊ฒฐํ•จ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๊ฒŒ์‹œ ํ•œ ๋ชจ๋“  ๋งํฌ๋Š” 404 ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. http๋ฅผ https ์‚ฌ์ดํŠธ๋กœ ๋ฆฌ๋””๋ ‰์…˜ํ•˜๋Š” ๊ฒƒ์€ github์˜ ์ž˜๋ชป์ž…๋‹ˆ๋‹ค. ์ด์ œ ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ด, ๋ฒ„๊ทธ. ๋ฒ„๊ทธ๊ฐ€์—†๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”. ๊ฐํžˆ ์š”.

๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋งŽ์€ ์ค‘๋ณต ๋œ (์•„์ง ์œ ์šฉํ•œ) ์ถ”์ƒํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. W3C ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” API์— ๊ณต๊ฐœ ํ”„๋ ˆ์ž„ ์›Œํฌ ๋””์ž์ธ์„ ์ฑ„ํƒํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋งŽ์€ ์ถ”์ƒํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ์— ์ดˆ์ ์„ ๋งž์ถ”๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ์„ ์žƒ์ง€ ๋งŒ Aurelia๋Š” HTML์˜ W3C ๋ฐ ECMAScript ์‚ฌ์–‘์„ ๊ณ ์ˆ˜ํ•˜๋Š” ํ•œ ์ฝ”๋“œ๊ฐ€ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

_Aurelia๊ฐ€ ์—†๋‹ค๋ฉด Vue๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค. ์ฐจ์„ ์ฑ…์ž…๋‹ˆ๋‹ค ._

_ ํ‘œ์ค€์„ ์žฌ๋ฐœ ๋ช…ํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•์„ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ณด๋‹ค ํ‘œ์ค€์„ ๋ฐ›์•„๋“ค์ด๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค ._

@ Nirmal4G ๋Š” ๊ท€ํ•˜์˜ ์ฃผ์žฅ์— ๋Œ€ํ•œ ์ฆ๊ฑฐ๋ฅผ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ ์ด๋ฆ„์„ ํ”ผํ•˜์‹ญ์‹œ์˜ค. ํŠนํžˆ LOC์™€ ๊ด€๋ จํ•˜์—ฌ Vue๊ฐ€ hyperHTML๋ณด๋‹ค ์  ์—ˆ๋‹ค๊ณ  ๋ฏฟ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. vue์™€ ๋น„๊ตํ•˜์—ฌ hyperHTML๋กœ ์ž‘์„ฑํ•œ ๋ชจ๋“  ๊ฒƒ์€ LOC๊ฐ€ ์ ์–ด ๋ ˆ์ด์•„์›ƒ๊ณผ ๋กœ์ง์„ ๊ฒฐํ•ฉํ–ˆ์Šต๋‹ˆ๋‹ค . ๋‚ด๊ฐ€ LOC๋ฅผ ์–ด๋–ค ๊ฒƒ๊ณผ ๊ด€๋ จ๋œ ๋ฉ”ํŠธ๋ฆญ์ด๋ผ๊ณ  ๋ฏฟ์ง€ ์•Š๋Š” ํ•œ, ์ž…์ฆ๋˜์ง€ ์•Š์€ FUD๋ฅผ ์ฝ๋Š” ๊ฒƒ์€ ๋‚˜์—๊ฒŒ ๊ณต์ •ํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@WebReflection ๋‹น์‹ ์˜ ๋ง์„ ์žก์•„, ๋‚˜๋Š” ๋‹น์‹ ์ด Vue๋ณด๋‹ค ๋” ๋‚˜์˜๋‹ค๊ณ  ๋งํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋‹น์‹ ์„ ํ™”๋‚˜๊ฒŒํ–ˆ๋‹ค๋ฉด ๋ฏธ์•ˆํ•ฉ๋‹ˆ๋‹ค.

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

์ €๋Š” HyperHTML์„ ํ‰๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์„ฑ๋Šฅ์€ ์ธ์ƒ์ ์ด์—ˆ๊ณ  polyfill์€ ํ›Œ๋ฅญํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ์Šฌํ”„๊ฒŒ๋„ ๋‚ด ์š”๊ตฌ ์‚ฌํ•ญ์— ๋งž์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ์—๋Š” ํ•œ ๊ฐ€์ง€ ๋” ๋‚˜์€ ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ ์†Œ์›์€ ๋ˆ„๊ตฌ๋‚˜ ์‹ ์„ฑํ•˜๊ณ  ๋” ๋‚˜์€ ๋””์ž์ธ์œผ๋กœ ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์›Œํฌ์˜ ์ตœ๊ณ ๋ฅผ ๊ฒฐํ•ฉ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ทธ๋ ‡๊ฒŒ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๋ฏธ๋ž˜์— ์Šค์Šค๋กœ ๊ฐœ์„  ๋  ์ˆ˜์žˆ๋Š” ๊ฒƒ๊ณผ ๊ทธ๋ ‡์ง€ ์•Š์„ ๊ฒƒ์˜ ๊ท ํ˜•์„ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.

React๊ฐ€ ์ด์ œ MIT๊ฐ€ ๋  ๊ฒƒ์ด๋ผ๋Š” ์†Œ์‹์„ ๋“ค์œผ๋‹ˆ ์ •๋ง ๊ธฐ์ฉ๋‹ˆ๋‹ค.
์ด ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด ๋งค์šฐ ํฅ๋ถ„ํ•˜๊ณ  React์™€ WP API๊ฐ€ ์™„์ „ํžˆ ์ง€์›๋˜๋ฉด ์˜ค๋žœ ์‹œ๊ฐ„ ํ›„์— WordPress๋ฅผ ๋‹ค์‹œ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. :)

์‹ค์ œ React ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ธฐ๋‹ค๋ ค ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. MIT ๋˜๋Š” MIT + ํŠนํ—ˆ ..? ;)

๊ฐœ์ธ์ ์œผ๋กœ ์ €๋Š” React๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ Vue๊ฐ€ ๋” ์ƒ์‚ฐ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์–ด๋Š ์ชฝ์ด๋“  ๊ธฐ์˜์ง€๋งŒ ...

... ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ Vue์— ๋Œ€ํ•œ ๊ฐ•๋ ฅํ•œ ์ง€์›์„ ์—ผ๋‘์—๋‘๊ณ  ๋ผ์ด์„ ์Šค ์™ธ์—๋„์ด๋ฅผ ๊ณ ๋ คํ•  ๊ฒƒ์„ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค.

Vue๋Š” WordPress์— ๋” ์ ํ•ฉํ•œ ์„ ํƒ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Facebook์€ ์†Œ์†ก ํŠธ๋žฉ์—์„œ 4 ๊ฐœ์˜ ํ•ญ๋ชฉ์„ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋ชจ๋‘ MIT ๋ผ์ด์„ ์Šค์ž…๋‹ˆ๋‹ค.

  • ๋ฐ˜์‘
  • ๋†๋‹ด
  • ํ๋ฆ„
  • Immutable.js

ํ•œํŽธ, Facebook์˜ ์นดํ…Œ๊ณ ๋ฆฌ X ๋ผ์ด์„ ์Šค๋Š” ๋‹ค์Œ ํ•ญ๋ชฉ์— ๊ณ„์† ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

  • ๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ˜์‘
  • GraphQL
  • ์‹ค
  • ๊ณ„์ „๊ธฐ
  • Atom IDE
  • ๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๊ทธ๋“ค์— ์˜ํ•ด ๋งŒ๋“ค์–ด์ง€๊ณ  "์˜คํ”ˆ"์†Œ์Šค์—์„œ

๋‚˜๋Š” ์—ฌ์ „ํžˆ Vue๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค. ์žฅ๊ธฐ์ ์œผ๋กœ ๋ณผ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์–ด์จŒ๋“  Wordpress์— ๋Œ€ํ•ด React๋Š” ์ „ํ˜€ ์ดํ•ด๊ฐ€๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. PHP ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋„ˆ๋ฌด ๋งŽ์ด ํฌํ•จ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Vue๋Š” ํ•ญ์ƒ ๊ฐ€์žฅ ํ˜„๋ช…ํ•œ ์„ ํƒ์ฒ˜๋Ÿผ ๋ณด์˜€์Šต๋‹ˆ๋‹ค (๋˜ํ•œ React์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ณ ํ†ต์Šค๋Ÿฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค).

ํ•œํŽธ, Facebook์˜ ์นดํ…Œ๊ณ ๋ฆฌ X ๋ผ์ด์„ ์Šค๋Š” ๋‹ค์Œ ํ•ญ๋ชฉ์— ๊ณ„์† ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ˜์‘
GraphQL
์‹ค
๊ณ„์ „๊ธฐ
Atom IDE
๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๊ทธ๋“ค์— ์˜ํ•ด ๋งŒ๋“ค์–ด์ง€๊ณ  "์˜คํ”ˆ"์†Œ์Šค์—์„œ

@TheJaredWilcurt ์ฃ„์†กํ•˜์ง€๋งŒ ํ•ด๋‹น ๋ชฉ๋ก์—์„œ ์›์‚ฌ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์‹ถ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์› ์‚ฌ๋Š” ์ด๋Ÿฌํ•œ "Facebook Category X"๋ผ์ด์„ผ์Šค๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค-> https://github.com/yarnpkg/yarn

@ atanas-angelov-dev

Reddit์˜ ์‚ฌ๋žŒ๋“ค์€ MIT๊ฐ€ ์ €์ž‘๊ถŒ ๋งŒ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๊ฐ€ React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์—ฌ์ „ํžˆ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ํŠนํ—ˆ๊ถŒ์„ ๊ฐ€์ง€์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๋Š” ์šฐ๋ ค๋ฅผ ์ œ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค.

MIT๋Š” ํ›Œ๋ฅญํ•œ ๋ผ์ด์„ผ์Šค์ž…๋‹ˆ๋‹ค. jQuery๋„ MIT ๋ผ์ด์„ผ์Šค์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋‹น์‹ ์ด ๊ทธ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@vinayakkulkarni ์ €๋Š” ๋ณ€๋•์Šค๋Ÿฌ์šด React ๋ผ์ด์„ ์‹ฑ์ด ์–ด๋–ป๊ฒŒ ๋  ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ์™„๋ฒฝํ•œ ์˜ˆ๋ฅผ ๋ณด์•˜ ๊ธฐ ๋•Œ๋ฌธ์— Vue์™€ ํ•จ๊ป˜๊ฐ€๋Š” ๊ฒƒ์ด ๋” ๋‚˜์€ ์„ ํƒ์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๊นŒ์šด ์žฅ๋ž˜์— FB ์†Œ์œ ์˜ ๋ผ์ด์„ผ์Šค / ํŠนํ—ˆ๋กœ ๋‹ค์‹œ ์ „ํ™˜ํ•˜๋ฉด ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋ง๋ฆฌ๊ธฐ ์œ„ํ•ด ์ซ“๊ฒจ๋‚  ๊ฒƒ์ž…๋‹ˆ๋‹ค. Vue๋Š” ์ฒ˜์Œ๋ถ€ํ„ฐ MIT์˜€์œผ๋ฉฐ ์ฃผ์š” ๊ธฐ์—…์ด ์ฃผ๋„ํ•˜๋Š” ๊ธฐ์—…๋ณด๋‹ค ์ปค๋ฎค๋‹ˆํ‹ฐ ์ฃผ๋„์ ์ž…๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์ด ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์ด ์•„๋‹™๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋น„์Šทํ•œ ์งˆ๋ฌธ์— ๋Œ€ํ•ด Facebook์— ๋Œ€ํ•œ Samuel์˜ ์˜๊ฒฌ์„ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค. MIT์— ๋ผ์ด์„ผ์Šค๋ฅผ ๋ถ€์—ฌํ•˜๋ฉด ๋ผ์ด์„ผ์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ํฌํฌํ•˜๊ฑฐ๋‚˜ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ €๋Š” ๋ณ€ํ˜ธ์‚ฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

๋˜ํ•œ ๊ฐœ์ธ์ ์œผ๋กœ ํŽ˜์ด์Šค ๋ถ์€ ์‚ฌ๋žŒ๋“ค์„ ์†์ด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์„ ์˜์˜ ๋ชธ์ง“์œผ๋กœ ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋‚˜์—๊ฒŒ ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ๊ฐœ์ธ์ ์œผ๋กœ ํŽ˜์ด์Šค ๋ถ์€ ์‚ฌ๋žŒ๋“ค์„ ์†์ด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์„ ์˜์˜ ๋ชธ์ง“์œผ๋กœ ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋‚˜์—๊ฒŒ ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

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

Vue๋Š” ํ›จ์”ฌ ๋” ๋ถ€๋“œ๋Ÿฌ์šด ํ•™์Šต ๋ฐ ์ฑ„ํƒ ๊ณก์„ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ์ฒ˜์Œ๋ถ€ํ„ฐ WordPress์˜ ์ฃผ์š” ๊ธฐ๋ณธ ์•„์ด๋””์–ด์˜€์Šต๋‹ˆ๋‹ค.

@ahmadawais ๋‚ด๊ฐ€ ์•Œ์•„์š”-MIT๋Š” ๋ผ์ด์„ผ์Šค๋งŒํผ ํ›Œ๋ฅญํ•˜์ง€๋งŒ ์ด๊ฒƒ์€ ํฐ "๊ทธ๋Ÿฌ๋‚˜"Facebook์€ React์— ๋Œ€ํ•œ ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ MIT๋Š” ์–ด๋–ค ๋ชฉ์  ์œผ๋กœ๋“  ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•˜์ง€๋งŒ ์—ฌ์ „ํžˆ Facebook์˜ ์ €์ž‘๊ถŒ์„ ์นจํ•ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํ—ˆ (์ด ๋ชจ๋“  ๊ฒƒ์„ ์†Œ๊ธˆ ๋ฉ์–ด๋ฆฌ๋กœ ๊ฐ€์ ธ ๊ฐ€์‹ญ์‹œ์˜ค-IANAL)

๊ทธ๋ฆฌ๊ณ  ์ฃผ์ œ๋ฅผ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด Vue์—์„œ๋„ WordPress๋ฅผ ํ›Œ๋ฅญํ•˜๊ฒŒ ๋งŒ๋“  ๋งŽ์€ ๊ฒƒ์„ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๊ฒธ์†ํ•œ ์˜๊ฒฌ์œผ๋กœ๋Š” Vue๋งŒํผ ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ๋‹ค๋ฅธ ์ ์ ˆํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์—†์Šต๋‹ˆ๋‹ค.

Facebook์€ React์— ๋Œ€ํ•œ ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React์˜ ์–ด๋–ค ๋ถ€๋ถ„์ด ํŠนํ—ˆ๋ฅผ ๋ฐ›์•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ? (๋ฆฌ ์•กํŠธ์˜ ์–ด๋–ค ๊ฒƒ๋„ ํŠนํ—ˆ๋ฅผ ์–ป์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ์—ฐ๊ตฌ๋ฅผ ์‹œ๋„ํ•˜์‹ญ์‹œ์˜ค) ๋งํฌ๋ฅผ ๋ณด์—ฌ์ฃผ์ง€ "๋ถ„๋ช…ํžˆ"๊ฐ€ ์•„๋‹ˆ๋ผ .., ์ด๊ฒƒ์€ ์ „ํ˜€ ๋„์›€์ด๋˜์ง€ ์•Š๋Š” ์ข…๋ฅ˜์˜ ์ฝ”๋ฉ˜ํŠธ์ž…๋‹ˆ๋‹ค. ์ข‹์•„ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถ”์ฒœํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด FUD๋ฅผ ํผ๋œจ๋ฆฌ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๊ทธ ์žฅ์ ์„ ๋ณด์—ฌ์ฃผ๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ์ˆ˜ํ–‰ํ•˜์‹ญ์‹œ์˜ค.

React์— ํŠนํ—ˆ๊ฐ€ ์—†๋Š”๋ฐ ์›๋ž˜ BSD + Patents๋กœ ์ด๋™ ํ•œ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ํŽ˜์ด์Šค ๋ถ์€ ๊ทธ๋“ค์ด, ๋˜๋Š” ๊ทธ๋“ค์ด ๋ฌด์—‡์„ํ•˜์ง€ ๋ฌด์—‡ ๋งํ–ˆ๋‹คํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์™œ 2 ๋…„ ๋™์•ˆ ๋ผ์ด์„ผ์Šค๋ฅผ ์—‰๋ง์œผ๋กœ ๋งŒ๋“ค๊ณ  ํฌํŠธํด๋ฆฌ์˜ค์˜ ์ผ๋ถ€๋งŒ ๋ณ€๊ฒฝํ•˜๊ณ  ๋ณ€๊ฒฝ ํ•˜์ง€ ์•Š๊ฒ ๋‹ค๊ณ  ์ผ๊ด€๋˜๊ฒŒ ๋งํ•˜๋ฉด์„œ "๊ทธ๋ƒฅ ์ฒ˜๋ฆฌํ•˜์„ธ์š”. ์‚ฌ์šฉ ์—ฌ๋ถ€๋Š” ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค"๋ผ๊ณ  ๋งํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค.

"์ƒˆ๋กœ์šด"๋ผ์ด์„ ์‹ฑ์—์„œ React Native, GraphQL ๋“ฑ์„ ์ œ์™ธํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? React์˜ ํ–ฅํ›„ ๋ฒ„์ „์€ ๋ฌด์—‡์œผ๋กœ ์ „ํ™˜ ๋ ๊นŒ์š”? ๋ถˆ๋งŒ์„ ์ œ๊ธฐํ•˜๋Š” ์‚ฌ๋žŒ์— ๋”ฐ๋ผ Facebook์—์„œ 2 ๋‹จ๊ณ„ ๋ผ์ด์„ ์Šค๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๋ณด์žฅ์€ ์—†์Šต๋‹ˆ๋‹ค.

React Native ์ฝ”๋“œ์˜ ์ผ๋ถ€๊ฐ€ React๋กœ ๋กค๋ง๋˜๋ฉด ์–ด๋–จ๊นŒ์š”? GraphQL ๊ตฌํ˜„์ด ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ์ž‘๋™ํ•œ๋‹ค๋ฉด ์–ด๋””์— ์„œ ์žˆ์Šต๋‹ˆ๊นŒ ..?

Facebook์˜์ด ์กฐ์น˜๋Š” ๋‹ต๋ณ€๋ณด๋‹ค ๋” ๋งŽ์€ ์งˆ๋ฌธ์„ ์ œ๊ธฐํ•˜๋ฉฐ, ์—ฌ์ „ํžˆ React์˜ ๋ชจ๋“  ๋‹จ์ผ ์‚ฌ์šฉ์ด ์ง„์ •ํ•œ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ์ž ์žฌ์  ์ธ ์œ„ํ—˜์ž„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

PHP ์„ธ๊ณ„์— ์ด๋ฏธ ๊ตฌ์ถ• ๋œ ์ˆ˜ํ•˜๋ฌผ์ด์—†๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ธ Vue๋ฅผ ์ฑ„ํƒํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

@bjrmatos https://www.google.com/patents/US20170221242 ๋งž์•„์š” !

Vue์— ๋˜ ๋‹ค๋ฅธ +1. Facebook์€ ์—ฌ์ „ํžˆ โ€‹โ€‹ํ”„๋กœ์ ํŠธ ์ „๋ฐ˜์— ๊ฑธ์ณ ๋‘ ๊ฐœ์˜ ๋ผ์ด์„ ์Šค๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์ข‹์ง€ ์•Š๋‹ค.

@PericlesSouza ๋‹น์‹ ์€ ๋ถ„๋ช…ํžˆ ํŽ˜์ด์Šค ๋ถ๊ณผ ๊ฐ™์€ ํšŒ์‚ฌ๊ฐ€ ์ผ์„ ๊ฐœ์„ ํ•˜๊ณ  ์›น์„ ๋ฐœ์ „์‹œํ‚ค๊ธฐ ์œ„ํ•ดํ•˜๋Š” ํฐ ๋…ธ๋ ฅ์„ ๋ฌด์‹œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค .MIT์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ๋Œ€ํ•œ ๊ฒŒ์‹œ๋ฌผ์„ ์ฝ์œผ๋ฉด ๋ชจ๋“  ์งˆ๋ฌธ์— ๋‹ตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™œ ์•„์ง๋„ MIT ๋ผ์ด์„ ์Šค์— ๋Œ€ํ•ด์ด ๋น„ํ•ฉ๋ฆฌ์ ์ธ ์šฐ๋ ค๋ฅผ ์ œ๊ธฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ณ€๊ฒฝ ์‚ฌํ•ญ์œผ๋กœ ์ธํ•ด React๋Š” ๋‹ค๋ฅธ "True Open Source"ํ”„๋กœ์ ํŠธ์™€ ๋™์ผํ•œ ์œ„์น˜์— ์žˆ์Šต๋‹ˆ๋‹ค (True Open Source ํ”„๋กœ์ ํŠธ๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค) btw).

@Raymonf ๊ธ€์Ž„, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ์ตœ์‹  ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์ด๋ฏธ ํ•ด๋‹น ํŠนํ—ˆ (Vue ํฌํ•จ)๋ฅผ ์œ„๋ฐ˜ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— React, Vue ๋˜๋Š” ๋งํฌ์— ์„ค๋ช… ๋œ ๊ฐœ๋…์„ ๊ตฌํ˜„ํ•˜๋Š” ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„ ์›Œํฌ (btw ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ์›น)๋ฅผ ์‚ฌ์šฉํ•˜๋“  ์ƒ๊ด€์—†์ด ๋ˆ„๊ตฌ๋‚˜ ๋™์ผํ•œ ์œ„์น˜์— ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ์ด๋ฏธ ๋‹ค๋ฅธ ํšŒ์‚ฌ๊ฐ€ ์†Œ์œ  ํ•œ 2 ~ 3 ๊ฐœ์˜ ํŠนํ—ˆ๋ฅผ ์œ„๋ฐ˜ํ•˜๊ณ ์žˆ๋Š” ๊ฒฝ์šฐ, ํ˜„์žฌ ํšŒ์‚ฌ๊ฐ€ ์–ด๋–ค ์ข…๋ฅ˜์˜ ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๊ณ  ๋†€๋ž„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.) ์ •๋ง ๊ฑฑ์ •๋œ๋‹ค๋ฉด UI๋ฅผ ๊ทธ๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ์ด ๋ฒ•์  ๋งฅ๋ฝ์—์„œ ๋” ์ข‹๊ฑฐ๋‚˜ ๋” ๋‚˜์œ ๋Œ€์•ˆ์€ ์—†์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๋Ÿฌํ•œ ์ข…๋ฅ˜์˜ ๋Œ€ํ™”์— ๋‹ค์‹œ ์ฐธ์—ฌํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•ฉ์˜์— ๋„๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ๋‚ด ์˜๊ฒฌ์„ ์ค‘์ง€ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. React ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” MIT ๋กœ์˜ ๋ณ€๊ฒฝ์— ๋งŒ์กฑํ•ฉ๋‹ˆ๋‹ค (์›๋ž˜ ๋ผ์ด์„ผ์Šค๋ฅผ ๋” ๋งŽ์ด ๋น„๋ฐฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์กฐ์ฐจ๋„)

๊ฒฐ์ •์—์„œ ์›Œ๋“œ ํ”„๋ ˆ์Šค ํŒ€์—๊ฒŒ ํ–‰์šด์„ ๋น•๋‹ˆ๋‹ค. React BSD + Patents ๋ผ์ด์„ผ์Šค์— ๋Œ€ํ•œ ์ฃผ์š” ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์œผ๋ฉฐ ์ด์ œ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์ด ๊ทธ๋“ค์˜ ์ž„๋ฌด์ž…๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ Facebook์€ ์ตœ๊ทผ React์— ๋Œ€ํ•œ ๋ผ์ด์„ ์Šค๋ฅผ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค. WordPress๊ฐ€ ๊ณ„์†ํ•ด์„œ React๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๊ธฐ๋ณธ ํ”„๋ŸฐํŠธ ์—”๋“œ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๊นŒ?

@bjrmatos ์ด๊ฒƒ์€ ์ „ํ˜€ ์‚ฌ์‹ค์ด ์•„๋‹™๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ํ˜„๋Œ€์ ์ธ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์ด๋ฏธ ๊ทธ ํŠนํ—ˆ๋ฅผ ์œ„๋ฐ˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, hyperHTML์€ ๊ฐ€์ƒ DOM์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ์ •๊ทœ ์ฝœ๋ฐฑ ํ˜ธ์ถœ (ํŠนํ—ˆ ๋ถˆ๊ฐ€ )์„ ํ†ตํ•ด DOM API (ํŠนํ—ˆ ๋ถˆ๊ฐ€)๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜๊ณ  ์œ ์ผํ•œ diffing ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ•˜์—ฌ c hildNodes : after ๋…ธ๋“œ ๋ชฉ๋ก์€ Levenshtein ๊ฑฐ๋ฆฌ (ํŠนํ—ˆ ๋ถˆ๊ฐ€)์™€ ์ตœ์†Œ ์Šคํ”Œ ๋ผ์ด์Šค ์ž‘์—…๋Ÿ‰ (ํŠนํ—ˆ ๋ถˆ๊ฐ€, ๋‚ด๊ฐ€ ์ž‘์„ฑํ–ˆ๊ณ  ISC )์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•ฉ๋‹ˆ๋‹ค.

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

@noncototient ๊ทธ๊ฒƒ์€ ๋ฐฑ๋งŒ ๋‹ฌ๋Ÿฌ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค, ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๊นŒ? ๐Ÿ’ฏ

ํ† ๋ก ์ด ์กฐ๊ธˆ ๋ฌด์˜๋ฏธ ํ•ด์ง€๋ฉด์„œ ์—ฌ๊ธฐ์—์„œ ๊ตฌ๋…์„ ์ทจ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค.
์ข‹์€ ์ ์ด ๋งŽ์ด ๋‚˜์™”๊ณ ์ด ํ˜ธ๋ฅผ ๊ผผ๊ผผํžˆ ์ฝ์–ด ์ฃผ์‹  ๋ชจ๋“  ๋ถ„๋“ค์—๊ฒŒ ๋ฐฐ์›€์˜ ๊ฒฝํ—˜์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ด์ œ ๋ฌด์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด ์Šค๋ ˆ๋“œ๋ฅผ ์ž ๊ทธ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค (๋˜๋Š” ๊ธฐ์—ฌ์ž ๋งŒ ํ•ด๋‹น). ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ถฉ๋ถ„ํ•œ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์—ˆ๊ณ  ์ด์ œ๋Š” ๋น„ ๊ฑด์„ค์ ์ธ ๋…ผ์Ÿ์œผ๋กœ ์ด์–ด์งˆ ์ง€์ ์— ๋„๋‹ฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๊ฐ€ ์ข…๊ฒฐ๋ฉ๋‹ˆ๊นŒ?
@WordPress ๋Š” ์ง€๊ธˆ ์ƒˆ๋กœ์šด JavaScript Framework๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๐Ÿค”

์ €๋Š” ๊ฐœ์ธ์ ์œผ๋กœ @vuejs๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๐Ÿ˜…

๊ฐœ์ธ์ ์œผ๋กœ ๋‚˜๋Š” Vue๋ฅผ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

์ €์™€ ๋‹ค๋ฅธ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋ผ์ด์„ ์Šค์— ๊ด€ํ•œ ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ React์—์„œ ๋ฉ€์–ด์ง€๋Š” ๋ณ€๋ช… ์ผ๋ฟ์ž…๋‹ˆ๋‹ค.

Marko๋Š” ์—„์ฒญ๋‚˜๊ฒŒ ๊ฐ•๋ ฅํ•˜๊ณ  ์‰ฝ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ˜„์žฌ 50,000 ๊ฐœ์˜ ์ œํ’ˆ์œผ๋กœ ์—ญ๋™์  ์ธ ์›น ์Šคํ† ์–ด๋ฅผ ์™„์ „ํžˆ ์žฌ ์ž‘์„ฑํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ทธ๊ฒƒ์€ ๋†€๋ž๊ณ  ๋งค์šฐ ๊นŠ์€ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์ด ๊ธธ์„ ๊ฐ€๊ณ  ๋’ค๋Œ์•„ ๋ณด์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

Marko ๋Š” ์ข‹์ง€๋งŒ Prarko ๋Š” 100 ๋ฐ”์ดํŠธ ๋” ์ž‘๊ณ  (GZipped) ์ž์ฒด ์ตœ์ ํ™” ํ…Œ์ŠคํŠธ์—์„œ 0.01 % ๋” ๋น ๋ฅด๋ฏ€๋กœ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋”๋ผ๋„ ๋Œ€์‹  ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋‚ด์ผ Plarko ๊ฐ€ ์ถœ์‹œ๋˜์ง€๋งŒ Fibre๊ฐ€ ์ถ”๊ฐ€๋˜์–ด _

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋‚˜๋จธ์ง€ ์Šค๋ ˆ๋“œ๊ฐ€ ์ง„ํ–‰๋˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ์‹ค์ œ ๋ผ์ด์„ ์Šค๊ฐ€ ๋‚˜์™”์„ ๋•Œ ์–ด๋–ค ๊ฒƒ์ธ์ง€, Facebook์˜ 2 ๋‹จ๊ณ„ ๋ผ์ด์„ ์Šค์˜ ์˜๋ฏธ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์‚ดํŽด๋ณด๊ณ , ๋ฌธ์ œ๋ฅผ ์ฒ ์ €ํžˆ ์กฐ์‚ฌํ•œ ํ›„ WordPress ํŒ€์ด ์–ด๋–ค ๊ฒฐ์ •์„ ๋‚ด ๋ ธ๋Š”์ง€ ์‚ดํŽด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์›๋ž˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์ข‹์•„ํ•˜๋Š” ์—”์ง„์— ๋Œ€ํ•œ ์˜๊ฒฌ์„ ์š”์ฒญํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ฒŒ์‹œํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์€ ์š”์ฒญ ๋œ ๋‚ด์šฉ๊ณผ ์ผ์น˜ํ•˜๋Š” ๋Œ“๊ธ€์„ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด ์‚ฌ๋žŒ๋“ค์„ ๋›ฐ์–ด ๋„˜์Šต๋‹ˆ๋‹ค. ์ข€ ์ด์ƒํ•ฉ๋‹ˆ๋‹ค.

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

๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ์ ํŠธ์—์„œํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐ„๋‹จํ•œ ์งˆ๋ฌธ์œผ๋กœ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. SPA ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ํ•„์š” ํ•ฉ๋‹ˆ๊นŒ?

๋Œ€๋‹ต์ด ์˜ˆ์ธ ๊ฒฝ์šฐ ์ด์œ ๋ฅผ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜์‹ญ์‹œ์˜ค. ๊ทธ๋Ÿฌ๋ฉด ์ž ์žฌ์  ์ธ ํ›„๋ณด๋ฅผ ํ‰๊ฐ€ํ•  ์ˆ˜์žˆ๋Š” ์ผ๋ จ์˜ ๊ธฐ์ค€์ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง, ์•„๋งˆ๋„ ๋ผ์šฐํŒ… ๋“ฑ์„ ์œ„ํ•ด.

๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋‹ค์Œ ์งˆ๋ฌธ์„ํ•˜์‹ญ์‹œ์˜ค.

  1. ํ…œํ”Œ๋ฆฟ ์—”์ง„์ด ์ •๋ง ํ•„์š”ํ•œ ๊ฐ€์š”?

VanillaJS๋Š” ์ง€๊ตฌ์ƒ์—์„œ ๊ฐ€์žฅ ํฐ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋ผ์ด์„ ์Šค ๋ฌธ์ œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•ฉ๋‹ˆ๋‹ค.) ๋ฐ ES6 ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋ฉด React, Vue, Preact, Aurelia ๋“ฑ๊ณผ ๊ฐ™์€ _template_ ์—”์ง„์„ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ ์ง€์› ๊ธฐ๋Šฅ๊ณผ ํ•จ๊ป˜ ํ•ต์‹ฌ ๊ฐœ๋ฐœ์— ์ ํ•ฉํ•œ ๊ธฐ๋ฐ˜์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ์š”๊ตฌ์— ๋”ฐ๋ผ ํ–ฅํ›„ ๋ช‡ ๋…„ ๋™์•ˆ.

Matt Mullenweg๊ฐ€ ๋‹ต๋ณ€์„ ๊ฒŒ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค ...

์ง€๋‚œ์ฃผ์— ์ œ๊ฐ€ ์“ด ํŠนํ—ˆ ์กฐํ•ญ์„ ํŽ˜์ด์Šค ๋ถ์ด ์ฒ ํšŒ ํ•  ๊ฒƒ์ด๋ผ๋Š” ์†Œ์‹์„๋ณด๊ณ  ๋†€๋ž์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ React 16์—์„œ ๋ผ์ด์„ผ์Šค๊ฐ€ ํŠนํ—ˆ ์ถ”๊ฐ€์—†์ด ์ผ๋ฐ˜ MIT๊ฐ€ ๋  ๊ฒƒ์ด๋ผ๊ณ  ๋ฐœํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์›€์ง์ž„์— ๋Œ€ํ•ด Facebook์— ๋ฐ•์ˆ˜๋ฅผ ๋ณด๋‚ด๊ณ , ๋ชจ๋“  ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ์—์„œ ํŠนํ—ˆ ์กฐํ•ญ ์‚ฌ์šฉ์ด ์žฌ๊ฒ€ํ† ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด์ „ ์ž…์žฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ React์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ๋กœ ํ•œ ์šฐ๋ฆฌ์˜ ๊ฒฐ์ •์€ WordPress ์„ธ๊ณ„์—์„œ ๋งŽ์€ ํฅ๋ฏธ๋กœ์šด ํ† ๋ก ์„ ๋ถˆ๋Ÿฌ ์ผ์œผ์ผฐ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Gutenberg์—๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ Preact, Polymer ๋˜๋Š” Vue๋ฅผ ํฌํ•จํ•˜์—ฌ ์„ ํƒํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Gutenberg ๋ธ”๋ก (Gutenblocks)์„ ์ž‘์„ฑํ•  ์ˆ˜์žˆ๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ด์žˆ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด์ œ React๋Š” ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋˜๋Š” ์˜ต์…˜์ด ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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

โ†’ https://ma.tt/2017/09/facebook-dropping-patent-clause/

@ahmadawais @m

์ด์ „ ์ž…์žฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ React์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ๋กœ ํ•œ ์šฐ๋ฆฌ์˜ ๊ฒฐ์ •์€ WordPress ์„ธ๊ณ„์—์„œ ๋งŽ์€ ํฅ๋ฏธ๋กœ์šด ํ† ๋ก ์„ ๋ถˆ๋Ÿฌ ์ผ์œผ์ผฐ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Gutenberg์—๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ Preact, Polymer ๋˜๋Š” Vue๋ฅผ ํฌํ•จํ•˜์—ฌ ์„ ํƒํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Gutenberg ๋ธ”๋ก (Gutenblocks)์„ ์ž‘์„ฑํ•  ์ˆ˜์žˆ๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ด์žˆ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด์ œ React๋Š” ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋˜๋Š” ์˜ต์…˜์ด ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์ƒํ™ฉ์€ ๋ชจ๋‘์—๊ฒŒ ์Šน๋ฆฌ์ฒ˜๋Ÿผ ๋ณด์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๋Š”์ง€ ๊ธฐ๋‹ค๋ ค ๋ด…์‹œ๋‹ค.

์ง€๊ธˆ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์œผ์„ธ์š”. ์„ธ์ƒ์ด ์–ผ๋งˆ๋‚˜ ๋ณ€๋• ์Šค๋Ÿฌ์šด์ง€ ๋ณด๋Ÿฌ๊ฐ‘๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์ด ๋ง์„ ์ง€ํ‚ค์ง€ ์•Š๋Š” ๊ฒƒ์„ ๋ณด๋ฉด ์Šฌํ”ˆ ์ผ์ž…๋‹ˆ๋‹ค.

[ํŽธ์ง‘ : ๋ถˆ์พŒ๊ฐ์„์ฃผ๋Š” ์ง„์ˆ ๋กœ ์ธํ•ด ์ œ๊ฑฐ๋จ]

Gutenberg๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ํ–‰์šด์„ ๋น•๋‹ˆ๋‹ค.

ํ‰ํ™”.

๐Ÿ‘‹ ์ €๋Š” ์šฐ๋ฆฌ ๋ชจ๋‘๊ฐ€ ์—ฌ๊ธฐ์„œ ๋งŽ์€ ๋…ผ์˜๋ฅผํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ณ  ๋…ผํ‰ ํ• ๋งŒํผ ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. IMHO ์ง€๊ธˆ ์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์ง„ ๋ชจ๋“  ์˜ต์…˜์ด ์ข‹์€ ์˜ต์…˜ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋” ๋‚˜์€ ํ”„๋ ˆ์ž„ ์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” API๋กœ ๋๋‚˜๋ฉด ์•ฑ์—์„œ ์›ํ•˜๋Š” JS ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. MIT ๋ผ์ด์„ผ์Šค๋ฅผ ํ†ตํ•ด React๋Š” ์ข‹์€ (์ฝ๊ธฐ ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ) ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด์„ผ์Šค๋ฅผ ๊ฐ€์ง„ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฝ”์–ด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ์œ„์น˜๋ฅผ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๐ŸŽฏ ํŠน์ • JavaScript ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‘์›ํ•˜๊ฑฐ๋‚˜ ๋นŒ๋“œ ํ•œ ๊ฒฝ์šฐ (ํ•ต์‹ฌ ํŒ€) WordPress ๊ฐœ๋ฐœ์ž๋ฅผ์œ„ํ•œ ์‹ค์ œ ์˜ˆ์ œ๋ฅผ ๋นŒ๋“œํ•˜์—ฌ ์‚ฌ๋žŒ๋“ค์ด WordPress ๊ธฐ๋ฐ˜ ์•ฑ์—์„œ ์„ ํ˜ธํ•˜๋Š” JavaScript ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด๋””์–ด๋ฅผ ๊ฐ€์ง€๊ณ  ๋†€ ์ˆ˜ ์žˆ๋„๋ก ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. ์ง“๋‹ค.

์ง€๊ธˆ์€์ด ํ‹ฐ์ผ“์„ ๋‹ซ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ”Œ๋žซํผ๊ณผ ์ปค๋ฎค๋‹ˆํ‹ฐ๋กœ์„œ ์›Œ๋“œ ํ”„๋ ˆ์Šค์˜ ์„ฑ๊ณต์— ๋” ๋งŽ์€ ๊ธฐ์—ฌ๋ฅผํ•˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋˜‘๊ฐ™์€ ๊ฒƒ์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด WordPress ์†Œํ”„ํŠธ์›จ์–ด๋กœ ์ž‘์—…ํ•˜๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋กค๋Ÿฌ ์ฝ”์Šคํ„ฐ ๋ชจํ—˜์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ง„์ •์œผ๋กœ ๋ฏฟ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ๋ถ€ํ„ฐ ๋ช‡ ๋…„ ์ „์ฒ˜๋Ÿผ ์‚ฌ์šฉ์ž (์ธํ„ฐ๋„ท ์‚ฌ์ดํŠธ์˜ ์•ฝ 30 %)๊ฐ€ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๊ฐœ์„  ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ฌ๋Ÿฌ๋ถ„ ๋ชจ๋‘์ฒ˜๋Ÿผ ์—ฌ๊ธฐ์—์„œ WordPress๋ฅผ ์‘์›ํ•ฉ๋‹ˆ๋‹ค!

๊ฑด๋ฐฐ!

React์—์„œ ๋ฉ€์–ด์ง€๊ธฐ๋กœ ํ•œ ๊ฒฐ์ •์ด ์ฒ ํšŒ๋˜์—ˆ๋Š”์ง€ Matts์˜ ์˜๊ฒฌ์—์„œ ๋ช…ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ฒซ์งธ , ํŽ˜์ด์Šค ๋ถ์ด ์‚ฌ์šฉํ•  ์‹ค์ œ ๋ผ์ด์„ ์Šค๊ฐ€ ์•„์ง ๊ฒŒ์‹œ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ๊ฒƒ์ด ๋๋‚œ ์ฒ™ํ•˜๋Š” ๊ฒƒ์€ ์‹ค์ œ๋กœ ํ˜„๋ช…ํ•œ ์›€์ง์ž„์ด ์•„๋‹™๋‹ˆ๋‹ค.

๋‘˜์งธ, Facebook์ด ๋”ฐ๋ฅด๋Š” 2 ๊ณ„์ธต ๋ผ์ด์„ ์Šค๋ฅผ ๋‹ค๋ฃจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. React๋Š” MIT ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ React Native๋Š” + (๋น„๊ณต๊ฐœ) Patents ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ .. ๋‘˜ ๋‹ค ๊ณต์œ ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

React์—์„œ ์‚ฌ์šฉ๋˜๋Š” React Native ์ฝ”๋“œ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ? Fiber๋Š” ๋‘ ๊ฐœ์˜ ์„œ๋กœ ๋‹ค๋ฅธ ๋ผ์ด์„ผ์Šค๊ฐ„์— ๊ณต์œ ๋ฉ๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด GraphQL ์ฝ”๋“œ๊ฐ€ React๋กœ ๋“ค์–ด๊ฐ€๋‚˜์š”?

๋ชจ๋“  ๊ด€๋ จ Facebook ํ”„๋กœ์ ํŠธ๊ฐ€ ๋‹ค๋ฅธ ๋ผ์ด์„ ์Šค๋กœ ๊ฒŒ์‹œ๋˜๊ณ  Facebook์ด React์˜ ์ผ๋ถ€ ์ธก๋ฉด์ด ์‹ค์ œ๋กœ React Native Patent Grant ๋˜๋Š” Fiber์˜ ์ ์šฉ์„๋ฐ›๋Š”๋‹ค๊ณ  ๊ฒฐ์ •ํ•˜๋Š” ๊ฒฝ์šฐ WordPress๊ฐ€ React ๊ฒฝ๋กœ๋ฅผ ๋”ฐ๋ผ ๋‚ด๋ ค ๊ฐ€๋ฉด ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”? ํŠนํ—ˆ ๋ถ€์—ฌ?

์ง„์ง€ํ•˜๊ฒŒ, ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋งค์šฐ ์‹ ์ค‘ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜์‹ญ์‹œ์˜ค. ์ด ๋ฌธ์ œ๊ฐ€์—†๋Š” ๋Œ€๋‹ค์ˆ˜๊ฐ€ ์„ ํ˜ธํ•˜๋Š” ๋Œ€์•ˆ์ด์žˆ์„ ๋•Œ ์œ„ํ—˜์„ ๊ฐ์ˆ˜ํ•˜๋Š” ์ด์œ -Vue.

๋ฐ”๋žŒ์— ๋”ฐ๋ผ ๋ฐ”๋€Œ๋Š” ๋ผ์ด์„ ์Šค ๊ณ„์•ฝ์„ ์ œ๋Œ€๋กœ ์ƒ๊ฐํ•˜๋Š” ๋Œ€์‹  ๋ฏฟ์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์Šค ๋ถ์˜ ๋ณ€ํ˜ธ์‚ฌ๋“ค์€ ์ด๊ฒƒ์„ ๋ณ€๋•์Šค๋Ÿฝ๊ฒŒ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง„์ •ํ•œ ์˜คํ”ˆ ์†Œ์Šค๋ฅผ ๊ณ ์ˆ˜ํ•˜์‹ญ์‹œ์˜ค.

@PericlesSouza ๋ผ์ด์„ผ์Šค๋Š” ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์˜ ์„ค๋ช…์—์„œ ์‚ฌ๋žŒ๋“ค์ด ์ƒ์ƒํ•˜๋Š” ๊ฒƒ๊ณผ ์ •ํ™•ํžˆ ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค. ํ‘œ์ค€ MIT ๋ผ์ด์„ผ์Šค, ๊ทธ ์ด์ƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. React๋Š” React Native์— ์˜์กดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‘ ์‚ฌ๋žŒ์ด ๊ณต์œ ํ•˜๋Š” ์กฐ๊ฐ์€ React Native๊ฐ€ ์•„๋‹Œ React ํ”„๋กœ์ ํŠธ์— ์žˆ์Šต๋‹ˆ๋‹ค. React์™€ FB ์†Œ์œ ์˜ ์ข…์†์„ฑ์€ ์šฐ๋ฆฌ ํŒ€์ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ปค๋ฐ‹ ํ•  ์‹œ๊ฐ„์ด ์ƒ๊ธฐ๋Š” ์ฆ‰์‹œ MIT์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์žฌ๋ฏธ์žˆ๋Š” ์‚ฌ์—…์„ ๊ณ„ํšํ•˜๊ณ  ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฟก ๋นต๋€จ

๋‹น์‹ ์€ ํŽ˜์ด์Šค ๋ถ์—์„œ ์ผํ•ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜๊ฐ€ Facebook์„ ๋Œ€์‹ ํ•˜์—ฌ ๋ฐœ์–ธ ํ•  ๊ถŒํ•œ์ด์žˆ๋Š” ๋ณ€ํ˜ธ์‚ฌ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ๊ท€ํ•˜๊ฐ€ ์ฃผ์žฅํ•˜๋Š” ๋‚ด์šฉ์€ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋“  ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค. ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.

"Imagining"๋ผ์ด์„ผ์Šค๋Š” ๋ฒ•์ •์—์„œ ์ธ์ •๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด Facebook์ด ํŠนํ—ˆ ๋ณด์กฐ๊ธˆ์„ ์ฑ„ํƒํ•œ ์ด์œ , ํŠนํ—ˆ๊ฐ€ ๋ฌด์—‡์ธ์ง€ (๋˜๋Š” ๊ทธ๋ ‡์ง€ ์•Š์•˜๋Š”์ง€) ๋˜๋Š” 'IANAL'(I Am Not A Lawyer)์ด๋ผ๊ณ  ๋งํ•˜์ง€ ์•Š๊ณ  ์ง€๊ธˆ ๋ณ€๊ฒฝํ•œ๋‹ค๊ณ  ๋งํ•˜๋Š” ์ด์œ ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‘ ์‚ฌ๋žŒ์ด ๊ณต์œ ํ•˜๋Š” ์กฐ๊ฐ์€ React Native๊ฐ€ ์•„๋‹Œ React ํ”„๋กœ์ ํŠธ์— ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋ฒ•์  ๋ณด์žฅ์„ ํ†ตํ•ด ๊ทธ๋ ‡๊ฒŒ ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ?

React ๋ฐ FB ์†Œ์œ  ์ข…์†์„ฑ์€ ์šฐ๋ฆฌ ํŒ€์ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ปค๋ฐ‹ ํ•  ์‹œ๊ฐ„์ด ์ƒ๊ธฐ๋Š” ์ฆ‰์‹œ MIT์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React๊ฐ€ MIT์— ๊ฒŒ์‹œ๋˜๋„๋กํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋ถ€๋ถ„์ด ์ œ๊ฑฐ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? MIT๋ฅผ ์ค€์ˆ˜ํ•˜์ง€ ์•Š์•˜๋˜ _ ๋น„ FB ์†Œ์œ  ์ข…์†์„ฑ _์ด ์ด๋ฏธ ์‚ฌ์šฉ ์ค‘ ์ด์—ˆ์Šต๋‹ˆ๊นŒ? Facebook์˜ ๋ณ€ํ˜ธ์‚ฌ๋Š” ๋ชจ๋“  ๊ฒƒ์ด ์‹ค์ œ๋กœ MIT๋ฅผ ์ค€์ˆ˜ํ•œ๋‹ค๊ณ  ๋ณด์žฅํ• ๊นŒ์š”? Apache Software Foundation์ด์ด๋ฅผ ์ธ์ฆํ•˜๋Š” ๋ฐ ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆฝ๋‹ˆ๊นŒ?
.

๋ถ„๋ช…ํžˆ 2 ๊ณ„์ธต ๋ผ์ด์„ ์Šค๊ฐ€์žˆ๋Š” ๋‘ ํ”„๋กœ์ ํŠธ๊ฐ„์— ์ฝ”๋“œ๊ฐ€ ๊ณต์œ ๋œ๋‹ค๋Š” ์ ์„ ๊ฐ•์กฐํ•˜๋Š” ๊ฒƒ์ด ์˜ณ์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹น์‹ ์€ ๋‚ด ๋ง์„ ์™œ๊ณกํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. React์™€ React Native๊ฐ„์— ๊ณต์œ ๋˜๋Š” ์ฝ”๋“œ๋Š” MIT์— ๋”ฐ๋ผ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค. Fiber๋กœ ์ƒ๊ฐํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์€ MIT์— ๋”ฐ๋ผ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค. React๋Š” BSD + Patents ๋˜๋Š” ๊ท€ํ•˜๊ฐ€ ๋ฉธ์‹œํ•˜๋Š” ๊ธฐํƒ€ ํŠนํ—ˆ ํ—ˆ๊ฐ€์— ๋”ฐ๋ผ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ถ€์—ฌ ๋œ ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•˜๊ฑฐ๋‚˜ ์˜์กดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. React์—์„œ ๋ถ€ํ’ˆ์„ ์ œ๊ฑฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์•„๋Š” React์˜ ์œ ์ผํ•œ non-FB ์†Œ์œ  ์ข…์†์„ฑ์€ MIT์—์žˆ๋Š” ๊ฐ์ฒด ํ• ๋‹น์ž…๋‹ˆ๋‹ค.

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

๋ฟก ๋นต๋€จ

๋‚˜๋Š” ๋‹น์‹ ์˜ ๋ง์„ ์™œ๊ณกํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์ดํ•˜๋Š” ์ผ๊ณผ ์—ฌ๊ธฐ์— ์ฐธ์—ฌํ•  ์ค€๋น„๊ฐ€๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค.

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

๋‚˜๋Š” ๋‹น์‹ ์ด ๋‚ด ๋ง์„ ๋ฒ•์  ๋ณด์ฆ์œผ๋กœ ๋ฐ›์•„๋“ค์ด๋ผ๊ณ  ์ œ์•ˆํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์—ฌ๊ธฐ์— ๋‚ด ์˜๊ฒฌ์ด React์˜ ๋ผ์ด์„ผ์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ณผ:

Fiber๋กœ ์ƒ๊ฐํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์€ MIT์— ๋”ฐ๋ผ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ Fiber๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Facebook ๋ณ€ํ˜ธ์‚ฌ์™€ ์ถœ์› ๋œ ํŠนํ—ˆ๊ฐ€ Fiber๋กœ ์ •์˜ํ•˜๋Š” ๊ฒƒ์— ์ „์ ์œผ๋กœ ์˜์กดํ•ฉ๋‹ˆ๋‹ค.

React Native๊ฐ€ ํ˜„์žฌ React์™€ ์ฝ”๋“œ๋ฅผ ๊ณต์œ  ํ•  ๋•Œ React์™€ ๋‹ค๋ฅด๊ฒŒ ๋ผ์ด์„ ์Šค๋ฅผ๋ฐ›์„ ์˜ˆ์ •์ธ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๊ทธ๊ฒƒ์ด MIT ๋ผ์ด์„ผ์Šค๋ฅผ ๋ฌดํšจํ™”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ (๋ง์žฅ๋‚œ์„ ์šฉ์„œํ•˜์‹ญ์‹œ์˜ค)?

๋˜ํ•œ GraphQL์„ ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์•˜๋‹ค๋Š” ์ ์— ์œ ์˜ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋†“์นœ ๋‹ค๋ฅธ ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

React ๋ผ์ด์„ ์Šค ๋ฌธ์ œ์˜ ์š”์ ์€ ๋ฒ•์  ํ™•์‹ค์„ฑ์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฟก ๋นต๋€จ

๋‚ด ์š”์ ์— ๋Œ€ํ•œ ๊ท€ํ•˜์˜ ์ˆ˜์ • ์‚ฌํ•ญ์„ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.

React๋Š” BSD + Patents ๋˜๋Š” ๊ท€ํ•˜๊ฐ€ ๋ฉธ์‹œํ•˜๋Š” ๊ธฐํƒ€ ํŠนํ—ˆ ํ—ˆ๊ฐ€์— ๋”ฐ๋ผ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋ถ€์—ฌ ๋œ ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•˜๊ฑฐ๋‚˜ ์˜์กดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. React์—์„œ ๋ถ€ํ’ˆ์„ ์ œ๊ฑฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์•„๋Š” React์˜ ์œ ์ผํ•œ non-FB ์†Œ์œ  ์ข…์†์„ฑ์€ MIT์—์žˆ๋Š” ๊ฐ์ฒด ํ• ๋‹น์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ React์—์„œ ๋ถ€ํ’ˆ์„ ์ œ๊ฑฐํ•˜๊ณ  "๋‹ค์Œ ๋ฉฐ์น  ์•ˆ์—"์ฝ”๋“œ๋ฅผ ํ™•์ธํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋ง์”€ํ•˜์…จ์Šต๋‹ˆ๋‹ค.

React ๋ฐ FB ์†Œ์œ  ์ข…์†์„ฑ์€ ์šฐ๋ฆฌ ํŒ€์ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ปค๋ฐ‹ ํ•  ์‹œ๊ฐ„์ด ์ƒ๊ธฐ๋Š” ์ฆ‰์‹œ MIT์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์€ IANAL์„ ์žŠ์—ˆ์Šต๋‹ˆ๋‹ค ... :-)

์•„, ์‹ค์ œ๋กœ ๊ธด ํ˜•์‹์ด๋ผ๊ณ  ๋ง์”€ํ•˜์…จ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹น์‹ ์ด ๋‚ด ๋ง์„ ๋ฒ•์  ๋ณด์ฆ์œผ๋กœ ๋ฐ›์•„๋“ค์ด๋ผ๊ณ  ์ œ์•ˆํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์—ฌ๊ธฐ์— ๋‚ด ์˜๊ฒฌ์ด React์˜ ๋ผ์ด์„ผ์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์‹œ ํ•œ๋ฒˆ:

React ๋ผ์ด์„ ์Šค ๋ฌธ์ œ์˜ ์š”์ ์€ ๋ฒ•์  ํ™•์‹ค์„ฑ์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ์•„์ง ๋ฒ•์  ํ™•์‹ค์„ฑ์ด ์—†๋‹ค๋Š” ์ ์— ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ €๋Š” ๊ฐœ์ธ์ ์œผ๋กœ์ด ์Šค๋ ˆ๋“œ๊ฐ€ ๊ทธ ๊ณผ์ •์„ ์‹คํ–‰ํ–ˆ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ๊ธฐ์—ฌ์ž๋กœ๋งŒ ํ‘œ์‹œํ•˜๊ณ  ์‹ค์ œ ๋ผ์ด์„ ์Šค๊ฐ€ ๊ฒŒ์‹œ ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๋ฉด ํŒ€์ด ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ ๊ตฌ๋…์„ ์ทจ์†Œํ•ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์Šค ๋ถ์€ ์ž์‹ ์˜ desisionํ–ˆ๋‹ค ๋ฐ˜์ž‘์šฉ ๋คํ”„ํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค https://thenextweb.com/dd/2017/09/25/facebook-re-licenses-react-mit-license-developer-backlash/

@vinayakkulkarni ๋ญ”๊ฐ€์— ๋Œ€ํ•œ ์—ด์ •์€ ์ดํ•ดํ•˜์ง€๋งŒ, ๋‹น์‹ ์ฒ˜๋Ÿผ ๋Œ“๊ธ€์„

@sophiebits ์ด ์Šค๋ ˆ๋“œ์—์™€ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ƒˆ๋กœ์šด ์Šค๋ ˆ๋“œ์— ๋Œ€ํ•œ ์ฃผ์ œ ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ถˆํ–‰ํžˆ๋„ MIT ๋ผ์ด์„ผ์Šค (ํ‘œ์ค€ ๋ผ์ด์„ผ์Šค์กฐ์ฐจ๋„)๋Š” ํŠนํ—ˆ์™€ ๊ด€๋ จ๋œ "๋ถˆํ™•์‹ค์„ฑ"๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ•˜์—ฌ WordPress ๊ฒฐ์ •์„ ์•ž๋‹น๊ฒผ์Šต๋‹ˆ๋‹ค.

MIT๋Š” ๋ถ„๋ช…ํžˆ ํŠนํ—ˆ ๋ผ์ด์„ผ์Šค๋ฅผ ๋ถ€์—ฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Facebook์€ React์— ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํ˜„์žฌ ๋ผ์ด์„ ์Šค์—์„œ ๊ท€ํ•˜์—๊ฒŒ ๋ถ€์—ฌํ•œ๋‹ค๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ๋ผ์ด์„ ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ ์–ด๋„ ์–ด๋–ค ๋ผ์ด์„ ์Šค๊ฐ€ ๋ถ€์—ฌ๋˜์—ˆ๋Š”์ง€, ์–ด๋–ค ์กฐ๊ฑด์ด์ด๋ฅผ ์ทจ์†Œํ•˜๋Š”์ง€ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. MIT๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ผ์ด์„ผ์Šค ๋ถ€์—ฌ๋„๋ฐ›์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

ํŠนํ—ˆ ๋ถ€์—ฌ๋Š” ๊ด€๋ จ ํŠนํ—ˆ๊ฐ€ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค (๋˜๋Š” ๋ฌด์—‡์„ ๋ถ€์—ฌํ•ฉ๋‹ˆ๊นŒ?). ์•„๋ฌด๋„ ํŠนํ—ˆ๊ฐ€ ๋ฌด์—‡์ธ์ง€์กฐ์ฐจ ๋ชจ๋ฅธ๋‹ค๋Š” ๊ฒƒ์„ ์ œ์™ธํ•˜๊ณ ๋Š”. ํŽ˜์ด์Šค ๋ถ์€ ๊ทธ๊ฒƒ์„ ์Šน์ธํ–ˆ์„ ๋•Œ๋„ ๋งํ•˜์ง€ ์•Š์•˜๊ณ , ๋ณด์กฐ๊ธˆ ์ œ๊ฑฐ๋ฅผ ๋ฐœํ‘œํ–ˆ์„ ๋•Œ๋„ ๋งํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๊ฐœ์ธ์ ์œผ๋กœ ๋˜๋Š” WordPress ํŒ€์ด ์ด๊ฒƒ์ด ์˜๋ฏธํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ๊ณผ ์ƒ๊ด€์—†์ด ์—ฌ์ „ํžˆ ์กด์žฌํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๊ฒƒ์€ React์—์žˆ๋Š” (์•„์ง ์ƒ์žฅ๋˜์ง€ ์•Š์€) Facebook ํŠนํ—ˆ์˜ ๋ฒ•์  ์ƒํ™ฉ์— ๋Œ€ํ•œ ํ˜ผ๋ž€์ž…๋‹ˆ๋‹ค. ๋˜๋Š”-๊ทธ๋ ‡์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค]] ์œ„๋ฐ˜์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜ Facebook์— ์†Œ์†ก์„ ์ œ๊ธฐ ํ•  ๋•Œ ๋˜๋Š” ์ƒˆ ๋ผ์ด์„ ์Šค ํ›„์— React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๋ฌธ์ œ๋Š” ๋ถˆํ™•์‹ค์„ฑ์ด๋ฉฐ ์ œ๊ฐ€ ์ œ์•ˆํ•˜๋Š” ๊ฒƒ์€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ด ์Šค๋ ˆ๋“œ์— ๋Œ€ํ•œ ์˜๊ฒฌ์„ ์ œ์‹œ ํ•œ ๋Œ€๋‹ค์ˆ˜๋Š” Vue ๊ธฐ๋ฐ˜ ์†”๋ฃจ์…˜์„ ์›ํ•ฉ๋‹ˆ๋‹ค.

Vue์— ๋ผ์ด์„ ์Šค ํ˜ผ๋ž€์ด ์—†๋‹ค๋Š” ์‚ฌ์‹ค์— ๊ตญํ•œ๋˜์ง€ ์•Š๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค (ํŽ˜์ด์Šค ๋ถ์˜ 2 ๋‹จ๊ณ„ ๋ผ์ด์„ ์Šค ์ •์ฑ…์— ์—ฌ์ „ํžˆ ๋‚จ์•„ ์žˆ์Œ).

  1. Vue๋Š” ์ฒ˜์Œ๋ถ€ํ„ฐ ์ ์ง„์ ์œผ๋กœ ์ถ”๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์—ˆ์œผ๋ฉฐ, ๊ธฐ๋Šฅ์˜ ์„ฌ์œผ๋กœ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ์ ์ง„์ ์œผ๋กœ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  2. ๋˜ํ•œ ์„ ํƒ์ ์œผ๋กœ ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋˜๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ๋ผ์šฐํŒ… ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  3. HTML์„์œ„ํ•œ ๋‹ค์ค‘ ํ”„๋กœ์„ธ์„œ๋ฅผ ์ง€์›ํ•˜์—ฌ ๊ฐœ๋ฐœ์ž์—๊ฒŒ HTML, JSX, Pug ๋“ฑ์˜ ํ…œํ”Œ๋ฆฟ ์–ธ์–ด ๋˜๋Š” ๋ Œ๋”๋ง ๊ธฐ๋Šฅ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  4. ๋‹จ์ผ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ ๋ฐ ๋ฒ”์œ„๊ฐ€ ์ง€์ •๋œ CSS (Stylus, SASS, SCSS, PostCSS, CSS ๊ตฌ์„ฑ ์š”์†Œ)-๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ๋ฒ”์œ„ ์†์„ฑ์„ ๊ตฌ์„ฑ ์š”์†Œ ์Šคํƒ€์ผ ์„ ์–ธ์— ์ถ”๊ฐ€ํ•˜๋ฉด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค.

  5. ๊ณ„์‚ฐ ๋œ ์†์„ฑ (๋ฉ”๋ชจ ํ™” ํฌํ•จ) ๋‚ด์žฅ (์˜ˆ : MobX์™€ ๊ฐ™์€ ์ข…์†์„ฑ ์—†์Œ) ์ง€์›.

    6+. React์— ๋Œ€ํ•œ ์šฐ์ˆ˜ํ•œ ์„ฑ๋Šฅ, ํ›จ์”ฌ ๋‚ฎ์€ ํ•™์Šต ๊ณก์„ , PHP ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋” ๋†’์€ ์ฑ„ํƒ๋ฅ , ์˜ˆ๋ฅผ ๋“ค์–ด Laravel Mix ๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. Laravel ์ž์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜๋Š” https://unpkg.com/vue ๋ฅผ ํ†ตํ•ด Vue๋ฅผ ํฌํ•จํ•˜๊ณ  ์ฝ”๋”ฉ์„ ์‹œ์ž‘

Vue๋Š” ๋‹จ์ˆœํžˆ WordPress์— ๋” ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ :

76,364 Github ๋ณ„
571 ๋ฏธ๊ฒฐ ๋ฌธ์ œ (!)
4325 ๋‹ซํžŒ ๋ฌธ์ œ
178 ์˜คํ”ˆ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ (!)
5,644 ๊ฐœ์˜ ๋‹ซํžŒ ํ’€ ์š”์ฒญ

Vue :

68, 246 ๊ฐœ์˜ Github ๋ณ„ (๊ถค์ ์€ ํฌ๋ฆฌ์Šค๋งˆ์Šค๊นŒ์ง€ React๋ฅผ ์ถ”์›”ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค)
62 ๋ฏธํ•ด๊ฒฐ ๋ฌธ์ œ (๋ฒ„๊ทธ ์ˆ˜์ •์— ํ›จ์”ฌ ๋” ๋ฏผ๊ฐํ•˜๊ณ  ์š”์ฒญ ๋œ ๊ธฐ๋Šฅ ์ถ”๊ฐ€)
5,629 ์ข…๊ฒฐ ๋œ ๋ฌธ์ œ
17 ๊ฐœ์˜ ์˜คํ”ˆ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ
863 Closed Pull ์š”์ฒญ

@Meligy

MIT๋Š” ๋ถ„๋ช…ํžˆ ํŠนํ—ˆ ๋ผ์ด์„ผ์Šค๋ฅผ ๋ถ€์—ฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Facebook์€ React์— ํŠนํ—ˆ๋ฅผ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํ˜„์žฌ ๋ผ์ด์„ ์Šค์—์„œ ๊ท€ํ•˜์—๊ฒŒ ๋ถ€์—ฌํ•œ๋‹ค๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ๋ผ์ด์„ ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ ์–ด๋„ ์–ด๋–ค ๋ผ์ด์„ ์Šค๊ฐ€ ๋ถ€์—ฌ๋˜์—ˆ๋Š”์ง€, ์–ด๋–ค ์กฐ๊ฑด์ด์ด๋ฅผ ์ทจ์†Œํ•˜๋Š”์ง€ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. MIT๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ผ์ด์„ผ์Šค ๋ถ€์—ฌ๋„๋ฐ›์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

ํŠนํ—ˆ ๋ถ€์—ฌ๋Š” ๊ด€๋ จ ํŠนํ—ˆ๊ฐ€ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค (๋˜๋Š” ๋ฌด์—‡์„ ๋ถ€์—ฌํ•ฉ๋‹ˆ๊นŒ?). ํŽ˜์ด์Šค ๋ถ์€ ๊ทธ๊ฒƒ์„ ์Šน์ธํ–ˆ์„ ๋•Œ๋„ ๋งํ•˜์ง€ ์•Š์•˜๊ณ , ๋ณด์กฐ๊ธˆ ์ œ๊ฑฐ๋ฅผ ๋ฐœํ‘œํ–ˆ์„ ๋•Œ๋„ ๋งํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— ๋Œ€๊ธฐ์—…์˜ ์˜คํ”ˆ ์†Œ์Šค๊ฐ€ ์•„๋‹Œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ถ๊ทน์ ์œผ๋กœ ๊ทธ๋“ค์˜ ๋ณ€ํ˜ธ์‚ฌ๋Š” ํ˜„์žฌ ๋˜๋Š” ๋ฏธ๋ž˜์— ๊ฐœ๋ฐœ ํŒ€์˜ ์ข‹์€ ์˜๋„๊ฐ€ ๋ฌด์—‡์ด๋“  ๋ฌด์‹œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Facebook์€ + Patents ๋ผ์ด์„ผ์Šค๋ฅผ '๋ฌด์–ธ๊ฐ€ ๋˜๋Š” ๋ฌด์—‡์ด๋“ '์— ๋Œ€ํ•œ ๊ณต๊ฒฉ์ ์ธ ๋ฐฉ์–ด๋กœ ๊ตฌ์„ฑํ–ˆ์œผ๋ฉฐ ์ด์ œ ์šฐ๋ฆฌ๋Š” ๋งค์šฐ ๋™์ผํ•œ '๋ฌด์–ธ๊ฐ€ ๋˜๋Š” ๋ฌด์—‡์ด๋“ '์ด ์‹ค์ œ๋กœ React์— ๋Œ€ํ•ด ์กด์žฌํ•˜์ง€ ์•Š์ง€๋งŒ React Native ๋ฐ GraphQL ๋“ฑ์— ๋Œ€ํ•ด์„œ๋Š” _ ์—ฌ์ „ํžˆ ์กด์žฌํ•œ๋‹ค๊ณ  ๋ฏฟ๋„๋ก ์š”์ฒญ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

Automattic์€ Facebook์ด React์— ๋Œ€ํ•œ ๋ผ์ด์„ผ์Šค์™€ ์˜๊ฒฌ์„ ๋‹ค์‹œ ๋ณ€๊ฒฝํ•  ๋•Œ ์Šค์Šค๋กœ ๋ถ€๋‹ด์„์ง€๊ณ  React๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  ํฌํฌํ•˜๊ณ  ์ž์ฒด์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ๊ฒƒ์ด๋ผ๊ณ  ์•ฝ์† ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ €์—๊ฒŒ๋Š” ํŽ˜์ด์Šค ๋ถ์ด ์›Œ๋“œ ํ”„๋ ˆ์Šค์˜ ํ•จ์ •์„ ์„ค์ •ํ•˜๊ณ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ „ ์„ธ๊ณ„ ๋ชจ๋“  ์›น ์‚ฌ์ดํŠธ์˜ 25 %๊ฐ€ ํฐ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

์ด ์Šค๋ ˆ๋“œ๋ฅผ _ ๊ธฐ๊ณ ์ž ์ „์šฉ _ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ํ‘œ์‹œํ•˜์‹ญ์‹œ์˜ค. ์™„์ „ํžˆ ๊ตฌ๋…์„ ์ทจ์†Œ ํ•  ํ•„์š”์—†์ด FUD ๋ฐ ์ถ”์ธก ๋Œ€์‹  ๊ธฐ๊ณ ์ž์˜ ๊ฒฐ๊ณผ๋ฅผ ์ฝ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

@WebReflection Wordpress์˜ ์ดํ•ด ๊ด€๊ณ„์ž๋Š” ํ•ต์‹ฌ ๊ฐœ๋ฐœ์ž ์ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ™•์žฅ ๋œ ์ปค๋ฎค๋‹ˆํ‹ฐ์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค.

@PericlesSouza ๊ฐ€ Github ๋ณ„์„ ์ธ์šฉํ•˜๋Š” ๊ฒƒ์€ ์•„๋ฌด ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ ์ด ๋ฌธ์ œ๊ฐ€ ์–ด๋ฆฌ์„์€ ์ฃผ์žฅ์„ ๋˜์ง€๋Š” ์‚ฌ๋žŒ๋“ค์— ์˜ํ•ด ์„œ๋‘๋ฅด๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ์‚ฌ์‹ค์„ ๋ฌด์‹œํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค : https://npmcharts.com/compare/react , angular, @ angular / core , ember-cli, vue

Vue๋Š” ๋ ˆ์ด๋”์— ๋Œ€ํ•œ ๋‹จ์„œ์— ์ง€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—„์ฒญ๋‚˜๊ฒŒ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์€ React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๋‹น์‹ ์˜ ๊ธ€ ๋จธ๋ฆฌ ๊ธฐํ˜ธ์— ๋™์˜ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@PericlesSouza ๊ฐ€ Github ๋ณ„์„ ์ธ์šฉํ•˜๋Š” ๊ฒƒ์€ ์•„๋ฌด ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ ์ด ๋ฌธ์ œ๊ฐ€ ์–ด๋ฆฌ์„์€ ์ฃผ์žฅ์„ ๋˜์ง€๋Š” ์‚ฌ๋žŒ๋“ค์— ์˜ํ•ด ์„œ๋‘๋ฅด๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ์‚ฌ์‹ค์„ ๋ฌด์‹œํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค : https://npmcharts.com/compare/react , angular, @ angular / core , ember-cli, vue

Vue๋Š” ๋ ˆ์ด๋”์— ๋Œ€ํ•œ ๋‹จ์„œ์— ์ง€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—„์ฒญ๋‚˜๊ฒŒ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์€ React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๋‹น์‹ ์˜ ๊ธ€ ๋จธ๋ฆฌ ๊ธฐํ˜ธ์— ๋™์˜ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

NPM ํ†ต๊ณ„? ๊ทธ๋“ค์ด ์ธ์ •ํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ํ†ต๊ณ„๊ฐ€ ์ตœ์‹  ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ชจ๋“  ๋‹จ์ผ ์š”์ฒญ์„ ๋‹ค์šด๋กœ๋“œ ์š”์ฒญ์œผ๋กœ ๊ณ„์‚ฐํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ? (๊ทธ๋“ค์€ ์‚ฌ๋žŒ๋“ค์ด "ํ•œ ๋‹ฌ์— ์ˆ˜์‹ญ์–ต ๊ฐœ์˜ ํŒจํ‚ค์ง€"์ฃผ์žฅ์„ ๋น„์›ƒ์—ˆ์„ ๋•Œ ๋ธ”๋กœ๊ทธ์—์„œ์ด๋ฅผ ์ธ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.)

๊ทธ ๊ธธ์„ ๊ฐ€๊ณ  ์‹ถ๋‹ค๋ฉด ๋ชจ๋‘๊ฐ€ jQuery๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ข…์†์„ฑ ์™œ๊ณก ํ•„๋“œ๊ฐ€์—†๋Š” ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ์ˆ˜์น˜๋ฅผ ์‹œ๋„ํ•ด๋ณด์‹ญ์‹œ์˜ค.

https://npmcharts.com/compare/vue-cli , create-react-app

์ œ์‹œํ•˜๊ธฐ๋กœ ์„ ํƒํ•œ ์‚ฌ์ง„๊ณผ๋Š” ์™„์ „ํžˆ ๋‹ค๋ฅธ ์‚ฌ์ง„์ž…๋‹ˆ๋‹ค.

๋˜๋Š” ์›น ์‚ฌ์ดํŠธ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• :

https://w3techs.com/technologies/comparison/js-react , js-vuejs

image

image

BuiltWith ํ†ต๊ณ„๋กœ ๋’ท๋ฐ›์นจ๋ฉ๋‹ˆ๋‹ค.

image

์•„, ํŒ€์ด ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ง์ ‘ ์งˆ๋ฌธํ–ˆ์„ ๋•Œ์ด ์‚ฌ์ง„์„ ์—ฌ๊ธฐ์— ๋‚จ๊ฒจ ๋‘๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ๊ทธ๋“ค์„ ๊ฒฝ๋ฉธ๋กœ ๋Œ€ํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๊ทธ๋“ค์˜ ๋ง์„ ๋“ค์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

vue

@PericlesSouza Next.js ๋ฐ GatsbyJS ์™€ ๊ฐ™์€ React ์šฉ์œผ๋กœ ๋งค์šฐ ์ธ๊ธฐ์žˆ๋Š” ๋นŒ๋“œ ๋„๊ตฌ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— vue-cli์™€ create-react-app์„ ๋น„๊ตํ•˜๋Š” ๊ฒƒ์€ ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
๋งŽ์€ React ๊ฐœ๋ฐœ์ž๋Š” CLI๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋Œ€์‹  Gutenberg ๋ฐ Calypso์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ž์ฒด ์‚ฌ์šฉ์ž ์ง€์ • Webpack ๋นŒ๋“œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์‹ค์€ React ์ƒํƒœ๊ณ„๊ฐ€ Vue๋ณด๋‹ค ํ›จ์”ฌ ํฌ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฐ€์ง€๊ณ  Vue.js์— ๋Œ€ํ•œ ์ž๋ฃŒ UI ๋™์•ˆ 4339 ๋ณ„์„ ๊ฐ€์ง€๊ณ  ๋ฐ˜์ž‘์šฉ์— ๋Œ€ํ•œ ์ž๋ฃŒ UI๊ฐ€ 29078 ๋ณ„์ด์žˆ๋‹ค.

jQuery์˜ ์˜ค๋ฒ„ ํ—ค๋“œ์—†์ด Select2์™€ ์œ ์‚ฌํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ์„ ํƒ ์ƒ์ž ๊ตฌ์„ฑ ์š”์†Œ : Vue select ์—๋Š” 1,348 ๊ฐœ์˜ ๋ณ„์ด ์žˆ๊ณ  React select ์—๋Š” 8,493 ๊ฐœ์˜ ๋ณ„์ด ์žˆ์Šต๋‹ˆ๋‹ค.

@PericlesSouza , @drcmda ,์ด ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋Š” ๋งŽ์€ ๋ฐฉ์‹์œผ๋กœ ๊ฒฝ์Ÿ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ฌ์ง€์–ด cli์˜ npm ํ†ต๊ณ„์—์„œ๋„ AngularCLI์™€ EmberCLI๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ์ „ํ˜€ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

captura de tela de 2017-09-27 17-39-27
์ถœ์ฒ˜ : https://npmcharts.com/compare/vue-cli , create-react-app, @ angular / cli , ember-cli

captura de tela de 2017-09-27 17-30-17
์ถœ์ฒ˜ : https://w3techs.com/technologies/comparison/js-angularjs , js-react, js-vuejs

captura de tela de 2017-09-27 17-38-06
์ถœ์ฒ˜ : https://insights.stackoverflow.com/survey/2017#technology -frameworks-libraries-and-other-technologies

๊ทธ๋Ÿฌ๋‚˜์ด ๋Œ€ํ™”๋Š” ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ „์ฒด์ ์œผ๋กœ Wordpress ํ™˜๊ฒฝ์— ๋” ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@PericlesSouza @willgm ๊ทœ์น™์€ ๋‘˜ ๋‹ค์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ๋˜‘๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๊ณ„์‚ฐ๋˜๋ฉฐ ๊ณต์ •ํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ฃผ์žฅํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์†”์งํ•ฉ๋‹ˆ๋‹ค. ์„ ํƒ์ ์ธ CLI ๋‚˜ "์ข‹์•„์š”"์™€ "๋ณ„"์„ ์„ธ๋Š” ์ถ”์ฒœ ์›น ์‚ฌ์ดํŠธ์— ์ง‘์ฐฉํ•˜๋Š” ๊ฒƒ์€ ํ—›๋œ ์ผ์ž…๋‹ˆ๋‹ค. stackoverflow์กฐ์ฐจ๋„ ๋งค์šฐ ์ฃผ๊ด€์ ์ด๋ฉฐ ์˜ค๋Š˜๊นŒ์ง€ "builtwith ..."์‚ฌ์ดํŠธ์— ๋Œ€ํ•ด ๋“ค์–ด ๋ณด์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. CLI ํ†ต๊ณ„๋Š” CLI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ์˜ ์ˆ˜๋ฅผ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค (๋Œ€๋ถ€๋ถ„์€ ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค).

๋™์ผํ•œ ์ •ํ™•ํ•œ ์ƒํ™ฉ์—์„œ ์‹ค์ œ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์„ ๋ฐ˜์˜ํ•˜๋Š” ๊ฐ€์žฅ ๋ถ„๋ช…ํ•˜๊ณ  ์ค‘์š”ํ•œ ์†Œ์Šค์˜ ๋ฐ์ดํ„ฐ๋Š” ๋‚ด๊ฐ€ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š” ํ†ต๊ณ„์ด๋ฉฐ, ๊ทธ ์ƒํƒœ๋ฅผ ๋ฐ”๊พธ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜์ด ๋Œ€ํ™”๋Š” ์–ด๋–ค ํ”„๋ ˆ์ž„ ์›Œํฌ๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ „์ฒด์ ์œผ๋กœ Wordpress ํ™˜๊ฒฝ์— ๋” ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์–ด๋Š ๊ฒƒ์ด ๋” ์ ํ•ฉํ•œ ์ง€ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋ฃจ์— 400,000 ๋ช…์˜ ์‚ฌ๋žŒ๋“ค์ด npm์—์„œ React๋ฅผ ๊บผ๋‚ธ๋‹ค ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. Vue๋Š” ์ž์ฒด์ ์œผ๋กœ ๊ฒฝ์Ÿ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์‹ค์ œ๋กœ ์ด์Šˆ ํŠธ๋ž˜์ปค๋กœ ๋Œ์ง„ํ•˜๋Š” ๊ตฐ์ค‘์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@PericlesSouza @willgm ๊ทœ์น™์€ ๋‘˜ ๋‹ค์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ๋˜‘๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๊ณ„์‚ฐ๋˜๋ฉฐ ๊ณต์ •ํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ฃผ์žฅํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์†”์งํ•ฉ๋‹ˆ๋‹ค. ์„ ํƒ์ ์ธ CLI ๋‚˜ "์ข‹์•„์š”"์™€ "๋ณ„"์„ ์„ธ๋Š” ์ถ”์ฒœ ์›น ์‚ฌ์ดํŠธ์— ์ง‘์ฐฉํ•˜๋Š” ๊ฒƒ์€ ํ—›๋œ ์ผ์ž…๋‹ˆ๋‹ค.

์•„๋‹ˆ. React์—๋Š” ์ˆ˜์น˜๋ฅผ ์™œ๊ณกํ•˜๋Š” 16,800 ๊ฐœ์˜ ์ข…์† ํŒจํ‚ค์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. NPM์€ URL์„ ํ˜ธ์ถœ ํ•  ๋•Œ ์ข…์†์„ฑ ๊ฒ€์‚ฌ, ๋ด‡, ๋ฏธ๋Ÿฌ ๋“ฑ์˜ ๊ฒฐ๊ณผ๋กœ ๋‹ค์šด๋กœ๋“œ๋กœ ๊ฐ„์ฃผ๋˜๋Š” ๋ชจ๋“  ๊ฒƒ์ด 200 ๊ฐœ์˜ ๊ฒฐ๊ณผ ์ฝ”๋“œ์ž„์„ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค. ๋ง๋ถ™์—ฌ์„œ ๊ทธ๋“ค์€ ๋˜ํ•œ Vue๊ฐ€ ์ธ๊ธฐ๊ฐ€ ๋†’์€ ์ค‘๊ตญ์—์„œ ๋Œ€๋ถ€๋ถ„์˜ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ๋ฏธ๋Ÿฌ์—์„œ ๋ฐœ์ƒํ•˜๋ฉฐ ๊ณ„์‚ฐ๋˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค.

'์ง‘์ฐฉ', '์ œ์•ˆ ์›น ์‚ฌ์ดํŠธ', '๋ฌด์˜๋ฏธํ•œ'์–ธ์–ด ์‚ฌ์šฉ์œผ๋กœ ํŒ๋‹จํ•˜๋ฉด์ด ์ฃผ์ œ์— ๋Œ€ํ•œ ์‹ค์ œ ์ฃผ์žฅ์ด์—†๋Š” ๋ฐ˜๋ฉด, ํŒ€์˜ ์š”์ฒญ์— ๋”ฐ๋ผ Vue ์‚ฌ์šฉ์˜ ์žฅ์ ์„ ๊ฒŒ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์œ„ ).

Counting Stars-๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ React์˜ ์„ฑ๊ณต์„ ์ง€์  ํ•  ๋•Œ ๊ทธ๋ ‡๊ฒŒํ•˜์ง€๋งŒ Vue์˜ ์ธ๊ธฐ๋ฅผ ๋‚˜ํƒ€ ๋‚ด๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋ฉด ๊ทธ ๊ฐ€์น˜๋ฅผ ๋น„๋‚œํ•ฉ๋‹ˆ๊นŒ? ๋˜ํ•œ ํ›จ์”ฌ ๋” ๋งŽ์€ ๋ฏธํ•ด๊ฒฐ ๋ฌธ์ œ ( 571 )์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์•˜๊ณ , ์—ฌ์ „ํžˆ React์— ๋Œ€ํ•ด ๋ณด๋ฅ˜์ค‘์ธ ๋ฏธํ•ด๊ฒฐ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ ( 178 )์˜ ์ƒ๋‹นํ•œ ์ˆ˜์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋ฒ„๊ทธ ์ˆ˜์ • ๋ฐ Vue ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋†’์€ ์‘๋‹ต ์„ฑ๊ณผ ๋น„๊ตํ•  ๋•Œ ๊ธฐ๋Šฅ ์ถ”๊ฐ€๋Š” React ์‚ฌ์šฉ์„ ์ œ์•ˆ ํ•  ๋•Œ ์šฐ๋ คํ• ๋งŒํ•œ ์œ ํšจํ•œ ์›์ธ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

์ข‹์•„์š” ์„ธ๊ธฐ-๊ธ€์Ž„์š”, ์ด๊ฒƒ์ด ํŒ€์ด ์‹œ์ž‘ํ•˜๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์š”์ฒญํ•œ์ด ์Šค๋ ˆ๋“œ์˜ ์š”์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค . ๊ฒฐ๊ณผ๊ฐ€ ๋งˆ์Œ์— ๋“ค์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— ๋‹ค์‹œ, ๋งค์šฐ ๊ฒฐ์ •์ ์ž…๋‹ˆ๋‹ค.

30926861-eaaee986-a38c-11e7-844f-71e736b0734b

์•„๋‹ˆ. React์—๋Š” ์ˆ˜์น˜๋ฅผ ์™œ๊ณกํ•˜๋Š” 16,800 ๊ฐœ์˜ ์ข…์† ํŒจํ‚ค์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@PericlesSouza ์–ด๋–ป๊ฒŒ ๊ทธ ๊ฒฐ๋ก ์— ๋„๋‹ฌํ•ฉ๋‹ˆ๊นŒ. ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. 16.800 ๊ฐœ์˜ ํŒจํ‚ค์ง€๊ฐ€ package.json์—์„œ React๋ฅผ ์ข…์†์„ฑ์œผ๋กœ ์„ ์–ธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ค‘๊ตญ์ด ์•„๋‹Œ ๋ด‡์ด ์•„๋‹Œ ํŒจํ‚ค์ง€. Vue๋Š” ์•ฝ 2580 ๊ฐœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ์ด๋Š” ํ›จ์”ฌ ๋” ์ž‘์€ ์—์ฝ” ์‹œ์Šคํ…œ๊ณผ ์‚ฌ์šฉ์ž ๊ธฐ๋ฐ˜์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์™œ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์ฃผ์žฅ ํ•˜๋Š”๊ฐ€? ์‚ฌ์šฉ ํ†ต๊ณ„์— ์ง์ ‘ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ, ์‹ค์ œ ์‚ฌ๋žŒ ๋˜๋Š” ๋ด‡, ๋‘ ํŒจํ‚ค์ง€ ๋ชจ๋‘์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ด‡์ด ์–ด๋–ค ์ด์œ ๋กœ ์˜๋„์ ์œผ๋กœ Vue๋ฅผ ๊ฑด๋„ˆ ๋›ฐ๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ง€ ์•Š๋Š” ํ•œ.

๊ฐ ํŒจํ‚ค์ง€๋ฅผ ๋™์ผํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š” ์ถ”์ ๊ธฐ์—์„œ ํ•˜๋‚˜์˜ ํŒจํ‚ค์ง€๋ฅผ ์„ ๋ณ„ํ•˜๋Š” ๊ฒƒ์€ ๊ฑฐ์˜ ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— ์ข‹์•„์š”๋ฅผ ์„ธ๋Š” ๊ฒƒ์€ XY๊ฐ€ ํˆฌํ‘œ ํ•  ๊ณณ์„ ์•Œ๊ณ ์žˆ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ง€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก

๊ทธ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋Š” React์— ๋Œ€ํ•œ ์ข…์†์„ฑ์ด์žˆ๋Š” ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•  ๋•Œ๋งˆ๋‹ค ๋ฒ„์ „๊ณผ ์ข…์†์„ฑ์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด NPM์— ๋„๋‹ฌ ํ•  ๋•Œ๋งˆ๋‹ค NPM์€ ๊ทธ๋ ‡์ง€ ์•Š๋”๋ผ๋„ ํŒจํ‚ค์ง€์˜ download ๋กœ ๊ณ„์‚ฐํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์šด๋กœ๋“œ.

๊ทธ๊ฒƒ์ด ๊ทธ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ผ๋ฉด ๊ทธ๋Š” ๋งค์šฐ ์ •ํ™•ํ•ฉ๋‹ˆ๋‹ค. NPM์— ์˜ํ•ด ๋ช…์‹œ ์ ์œผ๋กœ ๋ช…์‹œ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์ž์‹ ์˜ '๋ฐฉ๋ฒ•๋ก '์„ '์˜๋„์ ์œผ๋กœ ์ˆœ์ง„ํ•˜๋‹ค'๊ณ  ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค (๋˜ํ•œ ๋ด‡๊ณผ ๋ฏธ๋Ÿฌ๋Š” ์š”์ฒญ์ด ๋ฌด์—‡์ธ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜์น˜๋ฅผ ์™œ๊ณก ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  React์—๋Š” ๋” ๋งŽ์€ ์ข…์† ํŒจํ‚ค์ง€๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ์ด ํšจ๊ณผ๊ฐ€ ๋” ๋‘๋“œ๋Ÿฌ์ง‘๋‹ˆ๋‹ค.

๋งŽ์€ ์ข…์† ํŒจํ‚ค์ง€์— ๊ด€ํ•ด์„œ๋Š”-์˜ˆ React๋Š” ์˜ค๋ž˜๋œ ํ”„๋ ˆ์ž„ ์›Œํฌ์ด๋ฏ€๋กœ ๋” ๋งŽ์€ ๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ์ผ์ข…์˜ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” React์™€ Vue๋กœ ๊ฐœ๋ฐœํ•˜๊ณ  Vue๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”์–ด๊ฐ€ ๊ฝค ์™„๋ฒฝํ•˜๊ณ  ๊ณต์‹ Router์™€ Vuex๋„ ๋‚ฎ์€ ์ข…์†์„ฑ์˜ ์ฒ ํ•™์„ ๋”ฐ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ถ”๊ฐ€ ํŒจํ‚ค์ง€๊ฐ€ ๋œ ํ•„์š”ํ•œ ๊ฒฝํ–ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Vue ์ž์ฒด๋Š” ์–ด๋–ค ํŒจํ‚ค์ง€์—๋„ ์˜์กดํ•˜์ง€ ์•Š์œผ๋ฉฐ React๋Š” ๋ช‡ ๊ฐ€์ง€ ํŒจํ‚ค์ง€์— ์˜์กดํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์ด์™€ ๊ด€๋ จํ•˜์—ฌ ๋‹ค๋ฅธ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ ๋‹ค๋ฅธ ์˜ˆ๋Š” ์‚ฌ๋žŒ๋“ค์ด Bootstrap๊ณผ React ์‚ฌ์ด์— ํ†ตํ•ฉ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์Šคํƒ€์ผ ๊ตฌ์„ฑ ์š”์†Œ, ํด๋ž˜์Šค ์ด๋ฆ„ ๋“ฑ๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Vue์—์„œ๋Š” ์ด๋Ÿฌํ•œ ํ”„๋กœ์ ํŠธ๋„ ์กด์žฌํ•˜์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚˜ ๊ตฌ์„ฑ์—†์ด ๊ตฌ์„ฑ ์š”์†Œ ๋ฒ”์œ„์˜ CSS๋ฅผ ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ์ „์ฒด ํ†ตํ•ฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์˜จ ๋‹ค์Œ ํŠธ๋ฆฌ๋ฅผ ์‹œ๋„ํ•˜๋Š” ๋Œ€์‹  ํ•„์š”์— ๋”ฐ๋ผ CSS ํ”„๋ ˆ์ž„ ์›Œํฌ์™€์˜ ๊ฐ„๋‹จํ•œ ํ†ตํ•ฉ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ Vue๋กœ ์ž‘์—…ํ•˜๊ธฐ๊ฐ€ ํ›จ์”ฌ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. -ํ•„์š”ํ•˜์ง€ ์•Š์€ 75 %๋ฅผ ํ„ธ์–ด๋ƒ…๋‹ˆ๋‹ค.

@PericlesSouza๋Š” 'Pros of Vue'๊ฒŒ์‹œ๋ฌผ์—์„œ ๊ด€๋ จ์„ฑ์ด ๋†’์€ ๋ช‡ ๊ฐ€์ง€ ํ•ญ๋ชฉ์„ ๋†“์ณค์Šต๋‹ˆ๋‹ค.

Reacts๊ฐ€ ์ž์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ์œ ์—ฐํ•œ ํ‘œ์ค€ Forms, Inputs, Layouts ๋“ฑ๊ณผ ๊ฐ™์€ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ…œํ”Œ๋ฆฟ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ—ˆ์šฉํ•˜๋Š” Named Slots.

๋น„ํ™œ์„ฑ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํŒŒ๊ดดํ•˜์ง€ ์•Š๊ณ  Keep-Alive ๋กœ์ปฌ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋Š” ์„ ํƒ์  ๊ธฐ๋Šฅ์ด์žˆ๋Š” ์กฐ๊ฑด๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค.

HTML ์š”์†Œ๋Š” ๋ฌธ์ž์—ด ํ…œํ”Œ๋ฆฟ์— ๋Œ€ํ•œ Vue ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ๋ฌธ์œผ๋กœ, ์ž˜๋ชป๋œ HTML์„ ์ดˆ๋ž˜ํ•˜๋Š” ๋ Œ๋”๋ง ๋œ HTML ์š”์†Œ์˜ ํ˜ธ์ด ์ŠคํŒ…์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

props๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์ด์ง€๋งŒ ํ˜•์ œ ๋˜๋Š” ๋ถ€๋ชจ๋ฅผ ์•Œ๋ฆฌ๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ํ›จ์”ฌ ๋‹จ์ˆœํ™” ๋œ '๋ฐฉ์ถœ'๋ฐ '์ด๋ฒคํŠธ ๋ฒ„์Šค'ํ๋ฆ„์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์Œ ์‚ฌ์ด์˜ ์ƒํ˜ธ ํ†ต์‹ ์— ์œ ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŠน์ • ์ง€์—ญ์„ ์ œ์–ดํ•˜๋Š” โ€‹โ€‹ํ•œ ํŽ˜์ด์ง€์˜ ์—ฌ๋Ÿฌ Vue ์ธ์Šคํ„ด์Šค. ์ด ๊ธฐ์ˆ ์€ ๋™์  ๋Œ€์‹œ ๋ณด๋“œ ๋˜๋Š” ํ”Œ๋Ÿฌ๊ทธ ํ˜• ์œ„์ ฏ ๋ฐ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ „์—ญ ๋ฐ ๋กœ์ปฌ ๊ตฌ์„ฑ ์š”์†Œ ๋ฐ ์‚ฌ์šฉ์ž ์ง€์ • ์ง€์‹œ๋ฌธ ๋“ฑ๋ก.

๊ณ„์‚ฐ ๋œ ์†์„ฑ ์™ธ์— ์ฒด์ธ ๊ฐ€๋Šฅํ•œ ํ•„ํ„ฐ.

์œ„์˜ ๋ชจ๋“  ๋‚ด์šฉ์€ ํ•ต์‹ฌ Vue ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค.

React๋Š” ํ›Œ๋ฅญํ•œ ํ”„๋ ˆ์ž„ ์›Œํฌ์ด๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜์ง€๋งŒ ๊ฐœ์ธ์ ์œผ๋กœ Vue๊ฐ€ ์ œ์•ˆ ๋œ ์‚ฌ์šฉ ์‚ฌ๋ก€์— ๋” ์ ํ•ฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ฟก๋ฟก

์˜ˆ, ์„œ๋‘๋ฅด๊ณ  Vue์˜ ์žฅ์ ์— ๋Œ€ํ•œ ์ „์ฒด ๋ชฉ๋ก์„ ๋งŒ๋“ค ์‹œ๊ฐ„์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ fbjs์— ์˜์กดํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ธฐ ๋•Œ๋ฌธ์— React๊ฐ€ ์˜์กด์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ์–ธ๊ธ‰ ํ•œ ๊ฒƒ์€ ํฅ๋ฏธ ๋ชจ๋“  ๊ฒƒ์ด ๊ฑฑ์ • ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

https://www.npmjs.com/package/fbjs

https://www.npmjs.com/browse/depended/fbjs

๋ชฉ์ 

Facebook์ด ์ž์ฒด JavaScript๋ฅผ ๋” ์‰ฝ๊ฒŒ ๊ณต์œ ํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋กํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  : _ ์—ฌ๊ธฐ์—์„œ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ  Facebook ํ”„๋กœ์ ํŠธ๋„ ์•„๋‹Œ ๊ฒฝ์šฐ ๋‚˜์œ ์‹œ๊ฐ„์— ๋Œ€๋น„ํ•˜์‹ญ์‹œ์˜ค _. _์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์šฐ๋ฆฌ์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์—ผ๋‘์—๋‘๊ณ  ๊ฒŒ์‹œ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ๋ฐ˜๋“œ์‹œ ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ์š”๊ตฌ์— ๋งž์ง€ ์•Š๋Š” ํ•œ ๊ธฐ๋Šฅ ์š”์ฒญ์„ ๋ฐ›์•„๋“ค์ด์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

571 ๋ฏธ๊ฒฐ ๋ฌธ์ œ (!)

์ง€๊ธˆ์€ 338์ž…๋‹ˆ๋‹ค. (๋‚˜๋Š” ๊ทธ๋“ค์„ ์ฒญ์†Œํ•˜๋Š” ๋ฐ ๋ฉฐ์น ์„ ๋ณด๋ƒˆ๋‹ค.)

์ง€๋‚œ ๋ช‡ ๋‹ฌ ๋™์•ˆ React ํŒ€์€ ๋Œ€์ฒด๋กœ ์ด์ „ ๋ฒ„์ „๊ณผ ํ˜ธํ™˜๋˜๋Š” React 16 ๋ฆด๋ฆฌ์Šค๋ฅผ ์ค€๋น„ ํ•˜๋Š๋ผ ๋ฐ”๋นด์Šต๋‹ˆ๋‹ค. ์—ญ๋Œ€ ๊ฐ€์žฅ ํฐ ๋ฆด๋ฆฌ์Šค ์˜€๊ธฐ ๋•Œ๋ฌธ์— ์ด์Šˆ ํŠธ๋ž˜์ปค์— ๋Œ€ํ•œ ์‘๋‹ต์ด ์•„๋‹ˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ React 16์€ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. :-)

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

์ด๊ฒƒ์ด ์™œ ์šฐ๋ฆฌ๊ฐ€ Vue๋ณด๋‹ค ๋” ๋งŽ์€ ์ด์Šˆ ์ˆ˜๋ฅผ ๊ฐ–๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ํ†ต์ฐฐ๋ ฅ์„ ์ œ๊ณตํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ fbjs์— ์˜์กดํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ธฐ ๋•Œ๋ฌธ์— React๊ฐ€ ์˜์กด์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ์–ธ๊ธ‰ ํ•œ ๊ฒƒ์€ ํฅ๋ฏธ ๋กญ์Šต๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์ด React๋ฅผ ๊ณ ๋ คํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ์•Œ๋žŒ ๋ฒจ์„ ์šธ๋ ค ์•ผํ•˜๋Š” ๋ถ€๋ถ„์— ์•ฝ๊ฐ„์˜ ๊ฐ•์กฐ์ ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. Facebook์˜ 2 ๊ณ„์ธต ๋ผ์ด์„ ์Šค ์ „๋žต์€ ์„œ๋กœ ๋‹ค๋ฅธ ๋ผ์ด์„ ์Šค ํ”„๋กœ์ ํŠธ๊ฐ„์— ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๊ทธ๊ฒƒ์— ์˜์กดํ•˜์ง€๋งŒ ๋ผ์ด์„ผ์Šค๊ฐ€ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ ๋ชฉ๋ก์„ ๋ณผ ๋•Œ ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ฒƒ์ด ๊ฑฑ์ • ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

๋ถˆํ–‰ํžˆ๋„ ์ด๊ฒƒ์€ ๊ทผ๊ฑฐ์—†๋Š” FUD์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํผ๋œจ๋ฆฌ๋Š” ๋™๊ธฐ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ React๋Š” MIT๋กœ ์žฌ ๋ผ์ด์„ผ์Šค๋˜์—ˆ์œผ๋ฉฐ React๊ฐ€ ์˜์กดํ•˜๋Š” ๋ชจ๋“  ์ฝ”๋“œ (์˜ˆ : fbjs)๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ๊ตํ™œํ•œ ๊ณ„ํš์ด ์—†์Šต๋‹ˆ๋‹ค.

๋Œ“๊ธ€ 5 ์ผ ์ „์— https://github.com/facebook/fbjs/commit/c69904a511b900266935168223063dd8772dfc40 ์—์„œ fbjs ๋ผ์ด์„ ์Šค๊ฐ€ MIT๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Œ์„ ์ง์ ‘ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉฐ์น  ์ „์— ๋‚˜์˜จ React 16 ๋ฆด๋ฆฌ์Šค์—๋Š” MIT๊ฐ€ ์•„๋‹Œ ๋‹จ์ผ ๋ฐ”์ดํŠธ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๊ฐ€ fbjs ์— ์˜์กดํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋ผ์ด์„ ์Šค๊ฐ€ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์€ ์™„์ „ํžˆ ๋ฌด๊ด€ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์น˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ๊ฐ€ MIT๊ฐ€ ์•„๋‹ˆ๋ผ Vue์— ์˜์กดํ•˜๋Š” ๊ฒƒ๊ณผ๋Š” ๋ฌด๊ด€ ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ง์ž…๋‹ˆ๋‹ค.

์ถ”์‹  : Vue๋Š” ํ›Œ๋ฅญํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉฐ ๋ˆ„๊ตฌ์—๊ฒŒ๋„ React๋ฅผ ๊ฐ•์š”ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ €๋Š” ์šฐ๋ฆฌ๊ฐ€์ด ๋…ผ์˜๋ฅผ ์‚ฌ์‹ค์— ๊ทผ๊ฑฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. :-) ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ๋น„ํŒ์— ๊ฐœ๋ฐฉ์ ์ด๋ฉฐ Vue์™€ React ๋ชจ๋‘ ์„œ๋กœ์—๊ฒŒ์„œ ๋ฐฐ์šธ ์ ์ด ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ชจ๋“  ๊ฒƒ์ด ํฅ๋ฏธ๋กœ์šด ์ด์•ผ๊ธฐ์ž…๋‹ˆ๋‹ค.

์™œ ํ”„๋ ˆ์ž„ ์›Œํฌ / ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ? ์•ž์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์›น ์ปดํฌ๋„ŒํŠธ ํ‘œ์ค€์€ ReactJS, Vue ๋ฐ ๊ธฐํƒ€๊ฐ€ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๊ตฌ์ถ• ๋œ ๊ฒƒ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค (ํ‘œ์ค€์ด ์กด์žฌํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—).

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

XXX ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ํ”Œ๋žซํผ ์›น ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด ๋ฌด์—‡์„ ์ œ๊ณตํ•ฉ๋‹ˆ๊นŒ?

์ฐธ์œผ๋กœ ํฅ๋ฏธ๋กœ์šด ์ด์•ผ๊ธฐ ...

์ง€๊ธˆ๊นŒ์ง€ React์˜ ๋„ค ๋ฒˆ์งธ ๋ผ์ด์„ ์Šค์ž…๋‹ˆ๋‹ค.

  1. ์›๋ž˜ Apache 2.0. ๊ดœ์ฐฎ ์•˜์–ด ์•ผ ํ–ˆ์ฃ ? ๋ฌธ์ œ๋Š” ๋ฌด์—‡ ์ด์—ˆ์Šต๋‹ˆ๊นŒ?
  2. ๊ทธ๋Ÿฐ ๋‹ค์Œ BSD + ํŠนํ—ˆ. ํŠนํ—ˆ๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๊ณต๊ฐœํ•˜์ง€ ์•Š๊ณ .
  3. ๊ทธ๋Ÿฐ ๋‹ค์Œ Google์„ ๊ธฐ์˜๊ฒŒํ•˜๊ธฐ ์œ„ํ•ด ์•ฝ๊ฐ„์˜ ์ˆ˜์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด์œ ์— ๋Œ€ํ•œ ์„ธ๋ถ€ ์ •๋ณด๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  4. ์ด์ œ MIT, React์˜ ์ง€์ •๋˜์ง€ ์•Š์€ ๋ฆฌํŒฉํ† ๋ง์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ React Native, GraphQL ๋“ฑ๊ณผ ๊ฐ™์€ ์ง์ ‘ ๊ด€๋ จ๋œ ํ”„๋กœ์ ํŠธ์—๋Š” ์ ์šฉ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค . ๊ณต๊ฐœ ์„ค๋ช…์ด์žˆ๋Š” ๊ณต์œ  ์ข…์†์„ฑ์€ "Facebook์ด ์šฐ๋ฆฌ ์ž์‹ ์˜ JavaScript๋ฅผ ๋” ์‰ฝ๊ฒŒ ๊ณต์œ ํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋กํ•ฉ๋‹ˆ๋‹ค. ์ฃผ๋กœ ์ด๋ ‡๊ฒŒํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ์–ด๋””์— ์žˆ๋Š”์ง€ ๋„ˆ๋ฌด ๋งŽ์ด ๊ฑฑ์ •ํ•˜์ง€ ์•Š๊ณ  ์ฝ”๋“œ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. "

๋ถ„๋ช…ํžˆ ๊ทธ ๋ชจ๋“  ๊ฒƒ์€ ์ „ํ˜€ ๊ฑฑ์ •ํ•  ๊ฒƒ์ด ์—†์Šต๋‹ˆ๋‹ค.

[Tammie Lister์— ์˜ํ•ด ์‚ญ์ œ ๋œ ์ˆ˜์ • : ์ด์™€ ๊ฐ™์€ ๊ฐœ์ธ ๋ฌธ๊ตฌ๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.]

@PericlesSouza ์ด์ „์—๋Š” ๋ผ์ด์„ ์Šค๊ฐ€ ํ˜ผ๋ž€ ์Šค๋Ÿฌ์›  ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋ฅผ ์‹ ๋ขฐํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ์ฃผ์žฅ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์ด ๋‹น์‹ ์˜ ์ฃผ์žฅ์ด๋ผ๋ฉด ์œ ํšจํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ผ์ด์„ผ์Šค๋Š” ์ง€๊ธˆ ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œ์„œ๋Š” ์•ˆ๋ฉ๋‹ˆ๋‹ค.

React๋Š” MIT์ž…๋‹ˆ๋‹ค.
์˜์กด์„ฑ fbjs๋Š” MIT์ž…๋‹ˆ๋‹ค.
React์™€ React Native๊ฐ€ ๊ณต์œ ํ•˜๋Š” ์ฝ”๋“œ (Repo ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์— ๊ณ„์† ํฌํ•จ๋˜์–ด ์žˆ์Œ)๋Š” MIT์ž…๋‹ˆ๋‹ค.
๋ชจ๋“  ์˜์กด์„ฑ์„ ํฌํ•จํ•œ React๋Š” MIT์ž…๋‹ˆ๋‹ค.
React๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด Create React App์ด ํ•„์š”ํ•˜์ง€ ์•Š์ง€๋งŒ MIT๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.
Relay์™€ graphql-js๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ ํ•„์š”ํ•˜์ง€ ์•Š์ง€๋งŒ MIT๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

์ƒˆ ๋ผ์ด์„ ์Šค๋กœ React 16.0์„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ํ™•์ธํ•˜๋Š” ๊ฒƒ์€ ์‰ฝ์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ MIT ๋ผ์ด์„ ์Šค๊ฐ€ 15.6.2 ์ธ React 15.x์˜ ์ƒˆ ๋ฒ„์ „๋„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” MIT ๋ผ์ด์„ ์Šค์— ๋”ฐ๋ผ React์˜ ๋ชจ๋“  ํ–ฅํ›„ ๋ฒ„์ „์„ ์ถœ์‹œ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.


๊ฒŒ๋‹ค๊ฐ€์ด ์Šค๋ ˆ๋“œ์˜ ๋‹ค๋ฅธ Facebook ์ง์›์€ React (MIT for 16? what for <16? 17+? ๋” ์ž˜ ์‚ดํŽด ๋ณด๋Š” ๊ฒƒ์ด package.json)์™€ React Native ๊ณต์œ  ์ฝ”๋“œ๋ฅผ ์ธ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฆฌํŒฉํ† ๋ง์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค (๊ทธ๋Ÿฐ ๋‹ค์Œ ๋Œ“๊ธ€์„ ํŽธ์ง‘ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ธ์šฉ ํ•œ ํ›„ ๊ทธ ์ง„์ˆ ์„ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด).

๋‚˜๋Š” ๊ทธ ์—”์ง€๋‹ˆ์–ด์ž…๋‹ˆ๋‹ค. (๊ทธ๋…€.)

๋‹น์‹ ์€ ๋…ผํ‰ https://github.com/WordPress/gutenberg/issues/2733#issuecomment ๋‚˜๋Š” ๋Œ€๋‹ต, -331737418 https://github.com/WordPress/gutenberg/issues/2733#issuecomment -331738521ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์ด๋ฉ”์ผ ํด๋ผ์ด์–ธํŠธ์— ๊ธฐ๋ก ๋œ ๋‘ ๋Œ“๊ธ€์˜ ์›๋ณธ ์ฝ˜ํ…์ธ ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

image

ํ˜„์žฌ ์ฝ˜ํ…์ธ ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

image

๋Œ“๊ธ€์„ ๋‹ฌ๊ณ  ๋‚˜์„œ ์ถ”๊ฐ€ ์งˆ๋ฌธ์„ ํฌํ•จํ•˜์—ฌ ๋Œ“๊ธ€์„ ํ›จ์”ฌ ๋” ๊ธธ๊ฒŒ ์ˆ˜์ •ํ•˜์…จ์Šต๋‹ˆ๋‹ค.

React๊ฐ€ MIT์— ๊ฒŒ์‹œ๋˜๋„๋กํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋ถ€๋ถ„์ด ์ œ๊ฑฐ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์›๋ž˜ ์˜๊ฒฌ์— ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ท€ํ•˜์˜ ์ˆ˜์ •์— ๋Œ€ํ•œ ์‘๋‹ต์œผ๋กœ ๋‚ด ๋Œ“๊ธ€์„ ์ˆ˜์ •ํ•˜์—ฌ ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

React์—์„œ ๋ถ€ํ’ˆ์„ ์ œ๊ฑฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์•„๋Š” React์˜ ์œ ์ผํ•œ non-FB ์†Œ์œ  ์ข…์†์„ฑ์€ MIT์—์žˆ๋Š” ๊ฐ์ฒด ํ• ๋‹น์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋‹ค์Œ ์˜๊ฒฌ์—์„œ ๋‚˜๋ฅผ ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ์ ์ ˆํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํŽธ์ง‘์— ์ถ”๊ฐ€ ํ•œ ์งˆ๋ฌธ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ป๊ฒŒ ๊ฐํžˆ ๋‚ด ๋Œ“๊ธ€์„ ํŽธ์ง‘ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? React ๋ฐ React Native ๊ณต์œ  ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ฃผ์žฅ์„ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ํŽธ์ง‘ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

-

์ €๋ฅผ gaslighting ์ค‘์ง€ํ•˜์‹ญ์‹œ์˜ค. ํ”ผ๊ณคํ•˜๋‹ค.

@youknowriad ์ด ์Šค๋ ˆ๋“œ๋ฅผ ์ž ๊ธ€ ์ •๋„๋กœ ์นœ์ ˆ ํ•˜์‹œ๊ฒ ์–ด์š”? ์—ฌ๊ธฐ์„œ ๋” ์ƒ์‚ฐ์ ์ธ ํ† ๋ก ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ์ƒํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์žˆ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์—ฌ์ „ํžˆ ๋ผ์ด์„ผ์Šค์— ๋Œ€ํ•ด ํ•ฉ๋ฒ•์ ์œผ๋กœ ์šฐ๋ คํ•˜๋Š” ๊ฒฝ์šฐ ์–ธ์ œ๋“ ์ง€ DM์„ ๋ณด๋‚ด ์ฃผ์‹œ๋ฉด ํ™•์ธ์„ ์œ„ํ•ด ์ตœ์„ ์„ ๋‹คํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋‹ค์Œ ์˜๊ฒฌ์—์„œ ๋‚˜๋ฅผ ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ์ ์ ˆํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํŽธ์ง‘์— ์ถ”๊ฐ€ ํ•œ ์งˆ๋ฌธ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ป๊ฒŒ ๊ฐํžˆ ๋‚ด ๋Œ“๊ธ€์„ ํŽธ์ง‘ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? React ๋ฐ React Native ๊ณต์œ  ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ฃผ์žฅ์„ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ํŽธ์ง‘ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ถ„๋ช…ํžˆ ๋‚ด๊ฐ€ ๊ท€ํ•˜์˜ ํŽธ์ง‘์— ์‘๋‹ตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ๋ฌธ์ œ์ž…๋‹ˆ๊นŒ?

๊ฐ€์Šค ๋ผ์ดํŒ…์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Facebook, React ๊ฐœ๋ฐœ ํŒ€ ๋ฐ ๋ผ์ด์„ ์Šค์˜ ๊ฐœ๋ฐฉ์„ฑ๊ณผ ์ผ๊ด€์„ฑ, ๊ทธ๋ฆฌ๊ณ  Reacts์˜ 4 ๊ฐ€์ง€ ๋ผ์ด์„ ์Šค ๋ชจ๋ธ์ด ์ƒ๋Œ€์ ์œผ๋กœ ์งง์€ ์ˆ˜๋ช… ์‹œ๊ฐ„์„ ๋‚˜ํƒ€๋‚ด ๋“ฏ์ด ๊ท€ํ•˜์˜ (ํ˜„์žฌ) ๊ฒŒ์‹œ๋ฌผ์€ ๋ถˆํ–‰ํžˆ๋„ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค.

๊ฐ„๋‹จํžˆ ๋ผ์ด์„ ์Šค๋ฅผ ์ œ์ณ๋‘์„ธ์š” : ๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, React๋Š” ์›น ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋„˜์–ด์„œ ์–ป์€ ๊ฒƒ์ด ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‘˜ ๋‹ค (์˜ˆ : Redux)์—์„œ ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

Web Components๋ฅผ ํ†ตํ•ด WordPress๋Š” ๋‹ค์–‘ํ•œ ํ”„๋ŸฐํŠธ ์—”๋“œ ํ”„๋ ˆ์ž„ ์›Œํฌ / ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ๋ณด๋‹ค ๋งŽ์€ ์š”์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด React, Vue, Angular ๋˜๋Š” WordPress ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ "๋“œ๋กญ ์ธ"ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ŸฐํŠธ ์—”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ตœ์ข… ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@sophiebits ์ง€๊ธˆ ์‘๋‹ต ํ•  ๊ฒŒ์‹œ๋ฌผ์˜ ๋ฒ„์ „์ด ๋ฌด์—‡์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋งˆ์นจ๋‚ด ์–ด๋–ป๊ฒŒ ๋ ์ง€ ํ™•์ธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. React์™€ ๋งค์šฐ ๋น„์Šทํ•œ ์ƒํ™ฉ์ž…๋‹ˆ๋‹ค.

@ Brian-McBride

๋‹น์‹ ์€ ์ข‹์€ ์ง€์ ์„ํ–ˆ๊ณ , ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด "์™œ ๋ฐ”๋‹๋ผ ์ž๋ฐ” โ€‹โ€‹์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฐ€?", ํ‘œ์ค€ ๊ธฐ๋ฐ˜, ์™„๋ฒฝํ•˜๊ฒŒ ํ˜ธํ™˜๋˜๋Š” ์Šค๋ ˆ๋“œ์—์„œ ๋” ์ผ์ฐ ์ œ๊ธฐ๋˜์—ˆ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.

ํ .

Remove references to PATENTS that crept in #11091
Merged  sophiebits  merged 1 commit into facebook:master from sophiebits:nopatentsagain a day ago

https://github.com/facebook/react/pull/11091

๋‚ด๊ฐ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋งํ–ˆ๋“ฏ์ด React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋ฒ„์ „ ์ œ์–ด์— ๋Œ€ํ•ด ๋งค์šฐ ์กฐ์‹ฌํ•˜์‹ญ์‹œ์˜ค.

์˜ˆ, ๋ผ์ด์„ผ์Šค ๋ณ€๊ฒฝ ์ด์ „์— ์—ด๋ฆฐ ํ’€ ์š”์ฒญ์—์„œ ์‹ค์ˆ˜๋กœ ํ—ค๋”๊ฐ€ ์ž˜๋ชป๋œ 3 ๊ฐœ์˜ ํŒŒ์ผ์„ ์ปค๋ฐ‹ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฆด๋ฆฌ์Šค ๋œ ๋ฒ„์ „์—๋Š” ์—†์—ˆ์Šต๋‹ˆ๋‹ค (ํ•˜๋‚˜๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ์˜€๊ณ  ๋‘ ๊ฐœ๋Š” ์›น ์‚ฌ์ดํŠธ์˜ ์ผ๋ถ€์˜€์Šต๋‹ˆ๋‹ค).

์‹ค์ˆ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์„ ๋•Œ ์ˆ˜์ •ํ–ˆ๊ณ , ๋” ์ด์ƒ ์šฐ๋ฐœ์  ์ธ ์ฐธ์กฐ๊ฐ€ ์ถ”๊ฐ€๋˜์ง€ ์•Š์•˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด CI์— ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ปค๋ฐ‹์—์„œ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์œ  ์†Œํ”„ํŠธ์›จ์–ด ํ”„๋กœ์ ํŠธ์—์„œ ๊ณ ๋ คํ•ด์•ผ ํ•  ๋˜ ํ•˜๋‚˜์˜ ์ถ”๊ฐ€ ์‚ฌํ•ญ์€ Facebook์ด React๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์–ป๋Š” ์ด์ ์ž…๋‹ˆ๋‹ค.

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

[ํŽ˜์ด์Šค ๋ถ]์€ ์ œ ๋™์ƒ์ด ์ €๋ฅผ ๋•Œ๋ฆฌ๊ฒŒํ•ด์„œโ€œ์™œ ์Šค์Šค๋กœ๋ฅผ ๋•Œ๋ฆฌ๋Š” ๊ฑฐ์ฃ ?โ€๋ผ๊ณ  ๋ฌป๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ทธ๋Š” ์—„๋งˆ์—๊ฒŒ ์ž์‹ ์˜ ์ž˜๋ชป์ด ์•„๋‹ˆ๋ผ๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค.

์ˆ˜๋…„์— ๊ฑธ์ณ Facebook์„ ๋ณด๋ฉด์„œ ์ €๋Š” ๋” ์ด์ƒ ๊ทธ ํšŒ์‚ฌ๋ฅผ ์–ด๋–ค ์‹ ์œผ๋กœ๋“  ์ง€์›ํ•˜๊ณ  ์‹ถ์ง€ ์•Š๋‹ค๋Š” ๊ฒฐ๋ก ์— ์ ์  ๋” ๊ฐ€๊นŒ์›Œ ์กŒ์œผ๋ฏ€๋กœ ๊ฐœ์ธ์ ์œผ๋กœ ๋Œ€์•ˆ์ด์žˆ์„ ๋•Œ๋งˆ๋‹ค FB ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ €๋Š” React์— ๊ด€ํ•œ ์ฑ…์„ ์ฝ์—ˆ๊ณ  ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ด€์ ์—์„œ๋ณด๊ธฐ์—๋„ ๋ฉ‹์ง€์ง€๋งŒ ๋Œ€์•ˆ๋„ ํ›Œ๋ฅญํ•˜๊ณ  Facebook์„ ์ง€์›ํ•˜๋Š” ์ง๊ณผ ํ•จ๊ป˜ ์˜ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

ํ˜„์žฌ ์œ ํ–‰ํ•˜๊ฑฐ๋‚˜ ๋ฉ‹์ง„ ๊ฒƒ์— ๊ด€ํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋‹ค์Œ ์„ธ๋Œ€์—๊ฒŒ ์ง๊ฐ„์ ‘ ์ ์œผ๋กœ ๊ฐ€์žฅ ๊ธฐ์ˆ ์  ์ธ ์ž์œ ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์— ๊ด€ํ•œ ๊ฒƒ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๊ณ ๋ คํ•ด์•ผ ํ•  ๋˜ ๋‹ค๋ฅธ ์ƒ๊ฐ ...

์ •์ค‘ ํ•œ ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆ„๋ฉด์„œ ์˜๊ฒฌ์„ ๋‚ด์ฃผ์‹  ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋˜ํ•œ @sophiebits , @gaearon , @ blake-newman ๋ฐ ์งˆ๋ฌธ์— ์นœ์ ˆํ•˜๊ฒŒ ๋‹ต๋ณ€ ํ•ด์ฃผ์‹  ํ”„๋กœ์ ํŠธ๋ฅผ ๋Œ€ํ‘œํ•˜๋Š” ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ํŠน๋ณ„ํ•œ ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ์ „ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค . ๊ท€ํ•˜์˜ ์ง€์‹์€ ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•˜๋ฉฐ ์–ธ์ œ๋‚˜ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๋Œ€ํ™”๋Š” ์ดํ›„ # core-js Slack ์ฑ„๋„์˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ํšŒ์˜๋กœ ์ด๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— ์ข‹์€ ์š”์•ฝ์ด ์žˆ์Šต๋‹ˆ๋‹ค . ์ด๋Ÿฌํ•œ ํ† ๋ก ์— ์ฐธ์—ฌํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด ์žˆ์œผ์‹œ๋ฉด ๊ทธ๊ณณ์— ์ฐธ์—ฌํ•ด ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋˜๋Š” ๊ธฐ์—ฌ, ํ…Œ์ŠคํŠธ ๋ฐ ํ”ผ๋“œ๋ฐฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ์ƒํ˜ธ ์šด์šฉ์„ฑ์— ๋Œ€ํ•œ ๋‘ ๊ฐ€์ง€ ์ ‘๊ทผ ๋ฐฉ์‹ : # 2463 ๋ฐ # 2791์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ ์ด ์Šค๋ ˆ๋“œ๋Š” ๊ทธ ๊ณผ์ •์„ ์‹คํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋ฅผ ์ž ๊ทธ๊ณ  ์žˆ์ง€๋งŒ ์œ„์—์„œ ์–ธ๊ธ‰ ํ•œ ์žฅ์†Œ์—์„œ ๋Œ€ํ™”๋ฅผ ๊ณ„์†ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ด ์Šค๋ ˆ๋“œ๋Š” ์ข‹์€ ํ† ๋ก ์„ ๊ฐ€์ ธ ์™”์ง€๋งŒ ์ผ๋ถ€๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š๋Š” ๋™์ž‘์„ ๋ณด์˜€๊ณ  ํŽธ์ง‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค. https://wordpress.org/about/etiquette/ ๋Š” ๋ชจ๋“  WordPress ํ”„๋กœ์ ํŠธ์— ์ ์šฉ๋˜๋ฉฐ ์œ„๋ฐ˜์ด๋‚˜์ด๋ฅผ ์ €์ง€๋ฅธ ์œ„๋ฐ˜์„ ์šฉ์ธํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์„ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฐฐ๋ คํ•˜๊ณ  ์ •์ค‘ํ•˜๊ฒŒ ๋Œ€ํ™”์— ๊ธฐ์—ฌ ํ•ด์ฃผ์‹  ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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