2022๋…„ 10์›” 15์ผยท8๋ถ„ ์ฝ๊ธฐ

Vuejs ๋Œ€ React: ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ๋‘ ๊ฐ€์ง€ ํ”„๋ก ํŠธ์—”๋“œ JS ํ”„๋ ˆ์ž„์›Œํฌ ๋น„๊ต

์ด ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์€ ํ”„๋ก ํŠธ์—”๋“œ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์ธ Vue์™€ React 2022๋ฅผ ๋‚˜๋ž€ํžˆ ๋น„๊ตํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ReactJS์™€ Vuejs ์ค‘ ์–ด๋А ๊ฒƒ์ด ๋” ๋‚ซ์Šต๋‹ˆ๊นŒ?

Vuejs ๋Œ€ React: ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ๋‘ ๊ฐ€์ง€ ํ”„๋ก ํŠธ์—”๋“œ JS ํ”„๋ ˆ์ž„์›Œํฌ ๋น„๊ต

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

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

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

์™œ React์™€ Vue์ธ๊ฐ€? ๋„๊ตฌ ๊ฐœ์š”

๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ Vuejs ์™€ React js๋Š” "๊ฐ€์žฅ ์ข‹์•„ํ•˜๊ฑฐ๋‚˜, ์ฑ„ํƒํ•˜๊ฑฐ๋‚˜, ์„ฑ๊ณตํ•œ" ๋ชฉ๋ก์˜ ๋งจ ์œ„์— ๋ช‡ ๋…„์„ ๋ฒˆ๊ฐˆ์•„ ํ‘œ์‹œํ•˜๋Š” ์ €๋ช…ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๋‘ ๊ธฐ์ˆ  ๋ชจ๋‘ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋‹ค์–‘ํ•œ ์›น ์•ฑ์„ ๋งŒ๋“œ๋Š” ์‹ค์šฉ์ ์ธ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์ง€๋งŒ ๊ฐ ๊ธฐ์ˆ ์—๋Š” ์ตœ์ ์˜ ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๊ฐ€ ์žˆ๊ณ  ๊ณ ์œ ํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•ฉ๋‹ˆ๋‹ค.

๋จผ์ € Vue์™€ React๋ฅผ ๋น„๊ตํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์‹œ๊ฐ„์€ ํ•„์ˆ˜์ ์ธ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ๋‘ ๋ชจ๋ธ ๋ชจ๋‘ ๋น„์Šทํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ณ  ์ด์›ƒ์—์„œ ์ธ๊ธฐ๊ฐ€ ๋†’์œผ๋ฉฐ ์„ฑ๊ณต์ ์ธ ํšŒ์‚ฌ์—์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚œ์ด๋„, ๋ฐฐํฌ ๊ธฐ๊ฐ„ ๋ฐ ์ตœ์  ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๋ณ€ํ˜•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

Vue์™€ React์˜ ๋น„๊ต์—์„œ ๊ฐ€์žฅ ๋ˆˆ์— ๋„๋Š” ์ฐจ์ด์  ์ค‘ ํ•˜๋‚˜๋Š” Vuejs ์‹œ์Šคํ…œ ์„ค๊ณ„์ž์ธ Evan You์ž…๋‹ˆ๋‹ค. React js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ํ”„๋กœ๊ทธ๋žจ ์ƒ์„ฑ์— ์˜ํ–ฅ์„ ๋ฏธ์ณค์Šต๋‹ˆ๋‹ค.

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

Vue ๋Œ€ React: ์œ ์‚ฌ์ 

Vue์™€ React์˜ ์ฃผ์š” ์ฐจ์ด์ ์„ ๋…ผ์˜ํ•˜๊ธฐ ์ „์— ํŠน์„ฑ์„ ํ™•์ธํ•˜์—ฌ ๋จผ์ € Vue ๋Œ€ React๋ฅผ ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

Vue์™€ React์˜ ๋น„๊ต์—์„œ ์ฒซ ๋ฒˆ์งธ ์œ ์‚ฌ์ ์œผ๋กœ JavaScript๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Vue๋Š” ECMAScript 5์™€ 6์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด React๋Š” ECMAScript 6์— ์ง‘์ค‘ํ•ฉ๋‹ˆ๋‹ค. Babel๊ณผ ๊ฐ™์€ ๊ธฐ์ˆ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณ„๋กœ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React์™€ ํ•จ๊ป˜ ES5๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

JavaScript๋Š” ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์—์„œ ์‚ฌ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— React ๋ฐ Vue ๊ฐœ๋ฐœ์ž์˜ ๊ฐ€์šฉ์„ฑ์€ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘ ์ด ํŠน์ • ์–ธ์–ด์— ์ด๋ฏธ ๋Šฅ์ˆ™ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” ๋น„๊ต์  ๋นจ๋ฆฌ ์Šต๋“ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

TypeScript๋Š” Vue์™€ React์˜ ๋น„๊ต์—์„œ ๋˜ ๋‹ค๋ฅธ ์œ ์‚ฌ์ ์ž…๋‹ˆ๋‹ค. ์ฝ”๋“œ์™€ ๊ด€๋ จํ•˜์—ฌ React์™€ Vue ๋ชจ๋‘ TypeScript์™€ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ์ง€์›ํ•œ๋‹ค๋Š” ์ ์— ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ’๋ถ€ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฒฝํ—˜

๋‘˜ ๋‹ค ํ™˜์ƒ์ ์ธ UI๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ํƒ์›”ํ•ฉ๋‹ˆ๋‹ค. ๋ณธ์งˆ์ ์œผ๋กœ Vue์™€ React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ JavaScript๋ฅผ ์•Œ๊ณ  ์žˆ๋Š” ๊ธฐ๊ณ„์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜์‘ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€์ƒ DOM

Virtual DOM์€ Vue์™€ React์˜ ๋น„๊ต์—์„œ ๋˜ ๋‹ค๋ฅธ ์ฃผ์š” ์œ ์‚ฌ์ ์ž…๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ๋ฌด๊ฑฐ์šด DOM ํ™œ๋™์„ ์ œ๊ฑฐํ•˜์—ฌ ํ”„๋ŸฐํŠธ ์—”๋“œ ์†๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ๋Š” ์ ˆ์ฐจ ๋ชจ์Œ์ธ Virtual DOM์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ์™€ ์œ ์‚ฌํ•œ ์ตœ์†Œํ•œ์˜ JavaScript ์—”ํ„ฐํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฝ๋Ÿ‰ ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜

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

React์™€ Vue์—๋Š” ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์œผ๋ฉฐ ๊ฐ๊ฐ React ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ Vue ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์•Œ๋ ค์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

ํฌ๊ณ  ํ™œ๋™์ ์ธ ์ปค๋ฎค๋‹ˆํ‹ฐ

React์™€ Vue์—๋Š” Vue์™€ React์˜ ๋น„๊ต์—์„œ ๋˜ ๋‹ค๋ฅธ ์ฃผ์š” ์œ ์‚ฌ์ ์ธ ์ƒ๋‹นํ•œ ํ™œ์„ฑ ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ๋˜ํ•œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋„๊ตฌ์™€ ์ž์›์ด ํ’๋ถ€ํ•ฉ๋‹ˆ๋‹ค.

Vue ๋Œ€ React: ์ฐจ์ด์ 

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

Vue ๋ผ์šฐํ„ฐ, ์ค‘์•™ ์ œ์–ด์šฉ Vuex ๋ฐ Vue CLI๋Š” ์ด๋Ÿฌํ•œ ํŒŒํŠธ๋„ˆ ๋„๊ตฌ์˜ ๋ช‡ ๊ฐ€์ง€ ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. Vue CLI๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Vue ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค ์ค‘์— ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” Vue CLI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž์‹ ๋งŒ์˜ HTML ํ…œํ”Œ๋ฆฟ๊ณผ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ํ๋ฆ„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

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

์ƒํƒœ ๊ด€๋ฆฌ

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

๋ชจ๋ฐ”์ผ ๊ฐœ๋ฐœ

๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๊ฐ™์€ ๋ฐ˜์‘ ์•ฑ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋ฐ˜์‘ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” React ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์€ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋ชจ๋ฐ”์ผ ์•ฑ ์ œ์ž‘์„ ์œ„ํ•ด ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๋ฐ˜์‘ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Vue๋Š” NativeScript๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ”Œ๋žซํผ ๊ฐ„ ์•ฑ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๋น„์Šทํ•œ ์ž‘์—…์€ ๊ฐ๊ฐ NativeScript์™€ React Native์—์„œ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ NativeScripts ์•ฑ์€ React ๊ธฐ๋ณธ ์•ฑ๋ณด๋‹ค ํ›จ์”ฌ ๋” ์ž˜ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์ˆ™๋ จ๋œ ๊ฐœ๋ฐœ์ž๋Š” ๋ถ€ํ’ˆ์„ ์‹ ์†ํ•˜๊ฒŒ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๊ณ  React ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฉ‹์ง„ ๋ชจ์Šต์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, Vue์™€ React์˜ ๋น„๊ต์—์„œ ์ฃผ์š” ์žฅ์ ์„ ๋…ผ์˜ํ•˜๋ฉด์„œ ์šฉ์–ด ๊ตฌ๋ณ„์„ ๊ฐ•์กฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

๊ฒฐ๋ก ์ ์œผ๋กœ, Vue๋Š” ๋…ธ๋ จํ•œ ๋””์ž์ด๋„ˆ์™€ ์ดˆ๋ณด ๋””์ž์ด๋„ˆ ๋ชจ๋‘์˜ ์š”๊ตฌ๋ฅผ ์ถฉ์กฑ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋‚ด์žฅ ๋ฐ ์™ธ๋ถ€ ๋„๊ตฌ์˜ ํƒ์›”ํ•œ ์กฐํ•ฉ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Vue.JS์— ๋Œ€ํ•œ ๊ฐ„๋žตํ•œ ์†Œ๊ฐœ

Vue๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋ฐ ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ์ด์ƒ์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ์•ฑ์„ ๋นŒ๋“œํ•˜๋Š” ๋ฐ์—๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. Evan You๋Š” ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ์„ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด Vue๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹œ ๊ทธ๋Š” Angular์™€ ํ•จ๊ป˜ ์ž‘์—…ํ•˜๋ฉด์„œ "๋‚ด๊ฐ€ Angular์— ๋Œ€ํ•ด ์ข‹์•„ํ•˜๋Š” ๋ถ€๋ถ„์„ ์ œ๊ฑฐํ•˜๊ณ  ๋ณด์กฐ ์•„์ด๋””์–ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์—„์ฒญ๋‚˜๊ฒŒ ๊ฐ€๋ฒผ์šด ๊ฒƒ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋ฉด ์–ด๋–จ๊นŒ์š”?"๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Š” ์ธํ„ฐ๋ทฐ์—์„œ ๋งํ–ˆ๋‹ค.

Vue๋Š” ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ ์ง„์ ์œผ๋กœ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. Evan You๋Š” Vue๋ฅผ ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ํ•˜๋ฉฐ, ์ด๋Š” Vuex ๋˜๋Š” Vue Router์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ Vue์˜ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ๋ณด์™„ํ•  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์€ Vue์—์„œ ์™„์ „ํžˆ ์Šน์ธ๋˜์—ˆ์œผ๋ฉฐ ๊ธฐ๋ณธ๊ณผ ์›ํ™œํ•˜๊ฒŒ ํ†ตํ•ฉ๋ฉ๋‹ˆ๋‹ค.

ํ”„๋กœ

Vue.js๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํŠน๋ณ„ํ•œ ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์˜ ์šฉ์ด์„ฑ

Vue.js์˜ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋…๋ฆฝ ์‹คํ–‰ํ˜• ํŒŒ์ผ์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ๋ชจ๋“  HTML, CSS ๋ฐ JavaScript ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Vue๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๋ฐ ์ตœ์ƒ์˜ ๊ฒฐ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๋Š” ์ ์€ ํฅ๋ฏธ๋กญ์Šต๋‹ˆ๋‹ค.

์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด

๋ชฉํ‘œ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋จธ๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ•œ ์ ์€ ์ˆ˜์˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ ์œ ํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์ „๋ฌธ Vue ๊ฐœ๋ฐœ์ž๋Š” Vue๊ฐ€ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ์ „๋ฌธ๊ฐ€๊ฐ€ ๋  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์€ HTML, CSS ๋ฐ JavaScript์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๊ฒฝํ—˜๋งŒ ์žˆ์œผ๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒˆ๋กœ์šด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ํฌ์†Œ์‹์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ Vue๋Š” atom ๋ฐ sublime textual๊ณผ ๊ฐ™์ด ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์ฝ”๋“œ ํŽธ์ง‘๊ธฐ์—์„œ๋„ ์ง€์›๋˜๋ฏ€๋กœ ์ด ํ”Œ๋žซํผ์„ ๋ณด๋‹ค ๊ฐ„๋‹จํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‰ฝ๊ฒŒ ํ†ตํ•ฉ

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

ํŽธ๋ฆฌํ•œ

๋งŽ์€ ๋ถ„์„๊ฐ€๋“ค์€ Vue์˜ ํ•™์Šต ๊ณก์„ ์ด ๊ทธ๋ฆฌ ๋†’์ง€ ์•Š๋‹ค๊ณ  ์ฃผ์žฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋งŽ์€ ์ดˆ๋ณด์ž์™€ ๊ฒฝํ—˜์ด ์—†๋Š” ๊ฐœ๋ฐœ์ž๋Š” ์ด ํ•™์Šต ๊ณก์„ ์ด ์œ ๋ฆฌํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋””์ž์ธํ•˜๋Š” Vue ํŒ€์˜ ๋””์ž์ด๋„ˆ๋Š” Angular๋‚˜ React์™€ ๋‹ฌ๋ฆฌ HTML, CSS, JavaScript์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด๊ฐ€ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ํ˜„์žฌ ์ˆœ์œ„ ๊ธฐ์ค€์ด ๋œ Vue.JS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ ์œ ํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ณ„ํ™” ๋ฐ ์ ์ง„์  ์ฑ„ํƒ ๊ฐ€๋Šฅ

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

๋‹จ์ 

์–ธ์–ด ์žฅ๋ฒฝ์€ Vue์˜ ๋‹จ์ ์ž…๋‹ˆ๋‹ค.

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

๊ณผ๋„ํ•œ ์œ ์—ฐ์„ฑ์€ ์œ„ํ—˜์„ ์ดˆ๋ž˜ํ•ฉ๋‹ˆ๋‹ค.

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

๊ตฌ์„ฑ ์š”์†Œ ๋ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ˆ˜ ๊ฐ์†Œ

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

React.js ์†Œ๊ฐœ

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

์ด JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” Facebook์—์„œ ์„ค๊ณ„ ๋ฐ ์—…๋ฐ์ดํŠธํ–ˆ์œผ๋ฉฐ ๊ฒฐ๊ตญ WhatsApp๊ณผ ๊ฐ™์€ ํ”„๋กœ๊ทธ๋žจ์—์„œ ํ™œ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Facebook์€ 2011๋…„ ๋‰ด์Šคํ”ผ๋“œ ์˜์—ญ์—์„œ ReactJS๋ฅผ ๋งŒ๋“ค์—ˆ์ง€๋งŒ 2013๋…„ 5์›”๊นŒ์ง€ ์ผ๋ฐ˜ ๋Œ€์ค‘์—๊ฒŒ ์ œ๊ณต๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

MVC(๋ชจ๋ธ ๋ทฐ ์ปจํŠธ๋กค๋Ÿฌ) ๋””์ž์ธ์€ ๋Œ€๋ถ€๋ถ„์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. React๋Š” MVC ๋””์ž์ธ์—์„œ ๋””์Šคํ”Œ๋ ˆ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” "V"์ด๊ณ  Redux ๋˜๋Š” Flux๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

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

ํ”„๋กœ

์—ฌ๊ธฐ์„œ๋Š” React์™€ Vue๋ฅผ ๋น„๊ตํ•˜์—ฌ React์˜ ์žฅ์ ์— ๋Œ€ํ•ด ๋…ผ์˜ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์œ ๋Šฅํ•œ ๊ฐœ๋ฐœ์ž๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ์Œ

React์˜ ๋ช…์„ฑ์œผ๋กœ ์ธํ•ด ๋งŽ์€ React ํ”„๋กœ๊ทธ๋ž˜๋จธ๊ฐ€ ์ทจ์—…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹œ์žฅ ๊ทœ๋ชจ๊ฐ€ ์ž‘์€ ๋‹ค๋ฅธ ๊ธฐ์ˆ ๊ณผ ๋น„๊ตํ•  ๋•Œ Vue์™€ ๊ฐ™์€ ๊ด‘๋ฒ”์œ„ํ•œ ์ „๋ฌธ ๋ถ„์•ผ๋ฅผ ๊ฐ€์ง„ ์ž๊ฒฉ์„ ๊ฐ–์ถ˜ React js ๊ฐœ๋ฐœ์ž๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.

ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์ œํ’ˆ ๊ฐœ๋ฐœ

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

๊ฐ€์†ํ™”๋œ ์„ฑ์žฅ

์ด๊ฒƒ์€ React์™€ Vue๋ฅผ ๋น„๊ตํ•  ๋•Œ ๋˜ ๋‹ค๋ฅธ ์ค‘์š”ํ•œ ์ „๋ฌธ๊ฐ€์ž…๋‹ˆ๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋งŽ์€ ์ •ํฌ ๋ฐ ๋ณต์žกํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ๋น ๋ฅด๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ๋ฅผ ๋ฆฌ์•กํŠธํ•˜์—ฌ ๋›ฐ์–ด๋‚œ ์บก์Аํ™”, TypeScript ๋“ฑ์œผ๋กœ ์ •๊ตํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์†Œ๊ทœ๋ชจ MVP ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•ด์•ผ ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์ƒ DOM

๊ฐ€์ƒ DOM์€ ์‹ค์ œ DOM๊ณผ React ์•ฑ์˜ ๋™๊ธฐํ™” ๋ฐ ๋ถ„๋ฆฌ๋ฅผ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. React Online DOM์€ ์—…๋ฐ์ดํŠธ ์‚ฌ์ด์˜ ์•ฑ ์บก์Аํ™”๋ฅผ ๊ฒ€์‚ฌํ•˜๊ณ  ์•ฑ์˜ ๋ณ€๊ฒฝ๋œ ์˜์—ญ๋งŒ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋ฏ€๋กœ ์•ฑ ์ถ”์ง„๋ ฅ๊ณผ ํšจ์œจ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ

React๊ฐ€ ์ค‘์š”ํ•œ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์€ React์˜ ๊ฐ€์žฅ ์„ฌ์„ธํ•œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ React API๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ ๋ฒ„์ „์—์„œ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์€ ์ƒํƒœ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ตฌ์„ฑ ์š”์†Œ

React ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” ๋ชจ๋“ˆ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋””์ž์ด๋„ˆ๋Š” ์•ฝ๊ฐ„์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ํ”„๋กœ๊ทธ๋žจ์˜ ์–ด๋А ์œ„์น˜์—๋‚˜ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ์‹œ๊ฐ์  ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋” ๊ด‘๋ฒ”์œ„ํ•˜๊ณ  ๋ณต์žกํ•œ UI๋ฅผ ํ˜•์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํ”„๋กœ๊ทธ๋ž˜๋จธ๊ฐ€ ๊ธฐ์„ฑ UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ์€ ์œ ๋น„์ฟผํ„ฐ์Šค์ž…๋‹ˆ๋‹ค. ๋จธํ‹ฐ๋ฆฌ์–ผ UI.

๋‹จ์ 

๊ฐœ๋ฐœ ํ…œํฌ

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

๋ถˆ์ถฉ๋ถ„ํ•œ ๋ฌธ์„œ

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

์žฅ์• ๋ฌผ ์—ญํ• ์„ ํ•˜๋Š” JSX

ReactJS๋Š” JSX๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. JavaScript์™€ HTML์˜ ํ˜ผํ•ฉ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๋ฌธ๋ฒ• ํ–ฅ์ƒ์ž…๋‹ˆ๋‹ค. JSX๋Š” ์ด๋Ÿฌํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์˜ ์ด์ ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์†Œํ”„ํŠธ์›จ์–ด ์—…๊ณ„์˜ ์ผ๋ถ€, ํŠนํžˆ ์ƒˆ๋กœ์šด ํ”„๋กœ๊ทธ๋ž˜๋จธ์—๊ฒŒ ์žฅ์• ๋ฌผ๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค. ์ „๋ฌธ๊ฐ€๋“ค์€ ํ•™์Šต ๊ณก์„ ์ด ์•ฝ๊ฐ„ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ํ•™์Šต ๊ณก์„ ์˜ ๋ณต์žก์„ฑ์œผ๋กœ ์–ด๋ ค์›€์„ ๊ฒช์Šต๋‹ˆ๋‹ค. Vuejs์™€ ๋‹ฌ๋ฆฌ react js๋Š” HTML์„ ๋ Œ๋”๋ง ๊ธฐ๋Šฅ์œผ๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Vue๊ฐ€ React๋ณด๋‹ค ๋‚˜์€ ๊ณณ

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

React๊ฐ€ ๋” ๋‚˜์€ ์„ ํƒ์œผ๋กœ ์ž…์ฆ๋œ ๊ณณ์€ ์–ด๋””์ธ๊ฐ€์š”?

๋ฐฐํฌ ๊ฒฝ๋กœ ์„ ํƒํ•˜๊ธฐ
AppMaster Cloud ๋˜๋Š” ์ž์ฒด AWS, Azure, Google Cloud ํ™˜๊ฒฝ์— ๋ฐฐํฌํ•˜์„ธ์š”.
์•ฑ ๋ฐฐํฌ
  • React js๋Š” Virtual DOM๋ณด๋‹ค ๋” ๋งŽ์€ API ์„ ํƒ์„ ์ œ๊ณตํ•˜๋Š” ์ถ”๊ฐ€ ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ณด๋‹ค ๊ด‘๋ฒ”์œ„ํ•˜๊ณ  ๋ณต์žกํ•œ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค ๋•Œ ์ˆ™๋ จ๋œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ๋‚˜์€ ์˜ต์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ํ›จ์”ฌ ๋” ๋งŽ์€ ๋ฐ์ดํ„ฐ์™€ ๋ฆฌ์†Œ์Šค๋กœ ์ƒ๋‹นํ•œ ๊ธฐ์ˆ  ์ง€์›์„ ์ œ๊ณตํ•˜๊ณ  ์›น ์•ฑ์— ๋ฐ˜์‘ํ•˜๋Š” ๊ฒƒ ์™ธ์—๋„ ๋ชจ๋ฐ”์ผ ์•ฑ ์ƒ์„ฑ์„ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

์ธ๊ธฐ๋„์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ Vue์™€ React

์ „๋ฌธ๊ฐ€ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋Œ€ํ•œ ์ฟผ๋ฆฌ์˜ ์–‘์€ ์‹œ์Šคํ…œ์ด ์–ผ๋งˆ๋‚˜ ์ข‹์•„ํ•˜๋Š”์ง€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ ์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ์˜ #reactjs์— ๋Œ€ํ•œ ์ฟผ๋ฆฌ๋Š” 331,000๊ฐœ๋ณด๋‹ค ๋” ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด ๊ฒŒ์‹œ๋ฌผ์ด ์ž‘์„ฑ๋œ ์‹œ์ ์„ ๊ธฐ์ค€์œผ๋กœ GitHub์— 174200๊ฐœ ์ด์ƒ์˜ ๋ณ„์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Vuejs ํ”„๋กœ๊ทธ๋ž˜๋จธ๋ฅผ ์ฐพ๊ณ  ๋ฏธ๋ž˜์˜ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์€ ๋” ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค. Vue.js์˜ ๋ช…์„ฑ๊ณผ ๊ด€๋ จํ•˜์—ฌ GitHub์—๋Š” 187,800๊ฐœ ์ด์ƒ์˜ ๋ณ„์ด ์žˆ๊ณ  #vuejs ๋ฒ”์ฃผ์˜ Stack Overflow์—๋Š” 83,400๊ฐœ ์ด์ƒ์˜ ์ฟผ๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. Vuejs ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” React js ์ƒํƒœ๊ณ„๋ณด๋‹ค ํ›จ์”ฌ ์ž‘์Šต๋‹ˆ๋‹ค. ๊ทผ๋ณธ์ ์ธ ๋ฌธ์ œ๋Š” React๊ฐ€ ๋‹จํŽธํ™”๋˜์–ด ๋นˆ๋ฒˆํ•œ ์ฟผ๋ฆฌ์— ๋Œ€ํ•œ ๋‹ต๋ณ€์„ ์–ป๊ธฐ๊ฐ€ ๋” ์–ด๋ ต๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฐ˜๋ฉด Vuejs๋Š” ์†”๋ฃจ์…˜์„ ๊ฐ„๋‹จํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ์„ค๊ณ„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์ง„๋ณด์ ์ธ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ์งง์€ ํ•™์Šต ๊ณก์„ ๊ณผ ์งง์€ ํ•™์Šต ์‹œ๊ฐ„์œผ๋กœ ์ธํ•ด Vue.js๋Š” ํ›จ์”ฌ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ์ด์ ์€ React์™€ Vue๋ฅผ ๋น„๊ตํ•  ๋•Œ ํฐ ๊ฐ€์น˜๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

React๋Š” ์ด๋ฒˆ ๋Œ€ํšŒ์—์„œ ์šฐ์Šนํ–ˆ์Šต๋‹ˆ๋‹ค. Facebook์ด ์ด ํ”Œ๋žซํผ์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ํ˜ธ๋„๊ฐ€ ๋†’์•„์ง€๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›์ด ์ฆ๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ๋†€๋ผ์šด ์ผ์ด ์•„๋‹™๋‹ˆ๋‹ค. Vue๋Š” ๋” ์ ์€ ์ˆ˜์˜ ๋„๊ตฌ์™€ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๋” ์ž‘์€ ์ƒํƒœ๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€๋งŒ Evan You์™€ ํŒ€์€ ๊ณ„์† ํ™๋ณดํ•ฉ๋‹ˆ๋‹ค.

์ทจ์—… ๊ธฐํšŒ์™€ ๊ด€๋ จํ•˜์—ฌ React ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” Vue๊ฐ€ 2013๋…„๋ถ€ํ„ฐ ์šด์˜๋˜๊ณ  ์†Œ์…œ ๋ฏธ๋””์–ด ๊ฐ•์ž์ธ Facebook์˜ ์ง€์›์„ ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— Vue๋ณด๋‹ค ํ›จ์”ฌ ์•ž์„œ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ์— ๋ฐ˜ํ•ด ๋ทฐ๋Š” ์•„์ง ์„ฑ์žฅ ์ค‘์ธ ์ Š์€ ๊ธฐ์—…์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ์†๋„ ๋ฐ ๋น„์šฉ

MVP๋ฅผ ๋น ๋ฅด๊ฒŒ ํ”„๋กœํ† ํƒ€์ž…ํ•˜๊ธฐ
ํ”„๋ ˆ์ž„์›Œํฌ ์žฌ์ž‘์„ฑ์— ์•ž์„œ UX์™€ ์š”๊ตฌ์‚ฌํ•ญ์„ ๊ฒ€์ฆํ•  ๊ฐ„๋‹จํ•œ MVP๋ฅผ ๋งŒ๋“œ์„ธ์š”.
ํ”„๋กœํ† ํƒ€์ž… ๋งŒ๋“ค๊ธฐ

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

๊ฐœ๋ฐœ ์†๋„

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

๋น„์šฉ

๊ฐ€๊ฒฉ์€ ์ง€์—ญ, ์—ฐ๊ณต์„œ์—ด, ์ฝ”๋”ฉ ๊ธฐ์ˆ  ๋“ฑ ๋‹ค์–‘ํ•œ ๋ณ€์ˆ˜์— ๋”ฐ๋ผ ํฌ๊ฒŒ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ฑ๋Šฅ

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

๋ทฐ

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

๋ฐ˜์‘

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

ํ™•์žฅ์„ฑ

๋ฐ์ดํ„ฐ ์šฐ์„  ๋ชจ๋ธ๋ง, ๋” ๋น ๋ฅด๊ฒŒ
PostgreSQL ๋ฐ์ดํ„ฐ ๋ชจ๋ธ์„ ์‹œ๊ฐ์ ์œผ๋กœ ๋งคํ•‘ํ•œ ๋’ค ํŽ˜์ด์ง€์™€ ์•ก์…˜์— ์—ฐ๊ฒฐํ•˜์„ธ์š”.
์ง€๊ธˆ ๋นŒ๋“œ

๋ทฐ์ด์Šค

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

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

๋ฐ˜์‘ js

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

์„ ์  ์„œ๋ฅ˜ ๋น„์น˜

์›น ๋ฐ ๋ชจ๋ฐ”์ผ ๊ณ„ํšํ•˜๊ธฐ
์ค€๋น„๋˜๋ฉด ๊ฐ™์€ ์ œํ’ˆ ์•„์ด๋””์–ด๋กœ ์›น๊ณผ ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋ฐ”์ผ ์•ฑ์„ ํ•จ๊ป˜ ๊ตฌ์ถ•ํ•˜์„ธ์š”.
์ง€๊ธˆ ๋งŒ๋“ค๊ธฐ

๋ทฐ์ด์Šค

Vue ๊ทธ๋ฃน์ด ์ƒ๋‹นํžˆ ์ฐธ์—ฌํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž˜ ๊ด€๋ฆฌ๋˜๊ณ  ์ •๋ฆฌ๋œ ๋ฌธ์„œ๊ฐ€ ํ’๋ถ€ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ์ง€์‹์„ ์Šต๋“ํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Vue ์„ค๋ฌธ ์กฐ์‚ฌ ์‘๋‹ต์ž์˜ 76%์— ๋”ฐ๋ฅด๋ฉด ํ”Œ๋žซํผ์˜ ๊ฐ€์žฅ ์ข‹์€ ๊ธฐ๋Šฅ์€ ๋›ฐ์–ด๋‚œ ๋ฌธ์„œํ™”์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Vue3์˜ ์ฃผ์š” ๊ฐœ์„  ์‚ฌํ•ญ ์ค‘ ํ•˜๋‚˜๋Š” ์—…๋ฐ์ดํŠธ๋œ ์„ค๋ช…์„œ์ž…๋‹ˆ๋‹ค.

Reactjs

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

Vue.js์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€

๋‚˜์‚ฌ

Vue๋Š” NASA ์ด๋ฏธ์ง€ ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค! NASA ์‚ฌ์ง„์„ ๋ฐฉ๋ฌธํ•˜์—ฌ ์ง€๊ธˆ๊นŒ์ง€ ์ฐ์€ ์‚ฌ์ง„ ์ค‘ ๊ฐ€์žฅ ๊ดœ์ฐฎ์€ ํฅ๋ฏธ๋กœ์šด ์šฐ์ฃผ ์‚ฌ์ง„ ๋ช‡ ์žฅ์„ ํ™•์ธํ•˜์„ธ์š”. ์›น ์•ฑ์€ NASA API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ด€๋ จ ์‚ฌ์ง„๊ณผ ์ •๋ณด๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค. ์ด ์•ฑ์˜ ์•„ํ‚คํ…์ฒ˜์—๋Š” Heroku๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ œ๊ณต๋˜๋Š” NASA API, Vue(2.5), Vue ๋ผ์šฐํ„ฐ ๋ฐ Node.js๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

์•„๋งˆ์กด์˜ ์ œํœด ํ”„๋กœ๊ทธ๋žจ

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

GitLab

GitLab ์€ ๋˜ํ•œ ์•ฑ์— Vue๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. " Vue.js์— ๋Œ€ํ•ด ์šฐ๋ฆฌ์—๊ฒŒ ๊ฐ€์žฅ ํฅ๋ฏธ๋กœ์šด ์ ์€ ์ง์›๋“ค์ด ๊ฐ„๋‹จํ•œ JavaScript๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. "๋ผ๊ณ  GitLab ํŒ€์€ ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ ๊ฒฐ์ •์„ ์š”์•ฝํ•œ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์—์„œ ๋งํ–ˆ์Šต๋‹ˆ๋‹ค. Vue.js๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‹œ์ž‘์ด ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์„ค๋ช…์„œ๋Š” ํ•„์š”ํ•œ ์ „์ฒด ์ง€์นจ์ด๋ฉฐ ์†Œ์Šค ์ฝ”๋“œ๊ฐ€ ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ jQuery๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ํ˜ธํ™˜๋ฉ๋‹ˆ๋‹ค.

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

์–ด๋„๋น„ ํฌํŠธํด๋ฆฌ์˜ค

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

๋ผ๋ผ์บ์ŠคํŠธ

PHP์™€ JavaScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋””์ž์ด๋„ˆ๋Š” Laravel์˜ Laracasts๋ฅผ ํ•™์Šต ๋„๊ตฌ๋กœ ์ฐธ์กฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. Vue๋Š” Laracast๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๋ฐ์—๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Laravel, Vue ๋ฐ ๊ธฐํƒ€ ์—ฌ๋Ÿฌ ๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ… ์ฃผ์ œ์— ๋Œ€ํ•œ ์ „๋ฌธ์ ์ธ ์Šคํฌ๋ฆฐ์บ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์ด ํ”Œ๋žซํผ์€ ํ”„๋กœ๊ทธ๋ž˜๋จธ๊ฐ€ ์›น ๊ฐœ๋ฐœ ๋Šฅ๋ ฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

ํŽ˜์ด์Šค๋ถ ๋‰ด์Šคํ”ผ๋“œ

Facebook์€ Newsfeed์˜ ์ผ๋ถ€์— Vue.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋งž๊ฒŒ ๊ธฐ์ˆ ์ด ์ถฉ๋ถ„ํžˆ ๊ฐœ๋ฐœ๋˜์—ˆ์Œ์„ ๋ณด์—ฌ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. Vue.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” Facebook ํ”ผ๋“œ์˜ ๋งˆ์ผ€ํŒ… ๊ด€๋ จ ๋ถ€๋ถ„์„ ๊ธฐ๋กํ•ด ๋‘์‹ญ์‹œ์˜ค.

์•Œ๋ฆฌ๋ฐ”๋ฐ”

1999๋…„์— ์„ค๋ฆฝ๋œ ์†Œ๋งค ์‚ฐ์—…์„ ์ „๋ฌธ์œผ๋กœ ํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ์ „์ž ์ƒ๊ฑฐ๋ž˜ ํ”Œ๋žซํผ์ธ Alibaba.com์€ 190๊ฐœ ์ด์ƒ์˜ ๊ตญ๊ฐ€ ๋ฐ ์ง€์—ญ์— ์ˆ˜์ฒœ๋งŒ ๊ฐœ์˜ ํ’ˆ๋ชฉ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์ดํŠธ์— ๋”ฐ๋ผ ์‚ฌ์šฉ์ž๋Š” ๋งค์ผ ๊ณต๊ธ‰์ž๋กœ๋ถ€ํ„ฐ ์ˆ˜๋งŒ ๊ฐœ์˜ ์ด๋ฉ”์ผ์„ ๋ณด๋‚ด๊ณ  ๋ฐ›์Šต๋‹ˆ๋‹ค.

๋ฌธ๋ฒ•์ ์œผ๋กœ

Vue๋Š” ๋˜ํ•œ ๋ฌด๋ฃŒ AI ๊ธฐ๋ฐ˜ ์“ฐ๊ธฐ ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, Grammarly๋Š” 250๊ฐœ ์ด์ƒ์˜ ๋ฌธ๋ฒ• ํ‘œ์ค€์— ๋Œ€ํ•ด ์„œ๋ฉด ์˜์–ด๋ฅผ ๊ฒ€์‚ฌํ•˜๋Š” ๋™์‹œ์— ์ฒ ์ž๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์ค‘๋ณต์„ ๊ฐ์ง€ํ•˜๋Š” ์˜จ๋ผ์ธ ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค. Grammarly ํ”„๋ก ํŠธ์—”๋“œ Vue ๊ฐœ๋ฐœ์ž๋Š” Vue.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง๊ด€์ ์ด๊ณ  ์•„๋ฆ„๋‹ค์šด ๊ณ ์œ ํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์•ฑ๋งˆ์Šคํ„ฐ

์ฝ”๋“œ๊ฐ€ ์—†๋Š” ํ”Œ๋žซํผ AppMaster๋Š” Vue3๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ณ  vuejs ํ”„๋ ˆ์ž„์›Œํฌ, JavaScript ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๋ฐ Typescript๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Vue ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ตœ์‹  ๋ฒ„์ „ ๋•๋ถ„์— ํ”Œ๋žซํผ์€ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ์ž‘๋™ํ•˜๊ณ  ๋Œ€๋ถ€๋ถ„์˜ ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜๋˜๋Š” ๋งค์šฐ ๋น ๋ฅธ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Framework Vuejs๋Š” ํŠน์ • ์ƒํ™ฉ์—์„œ SSR(์„œ๋ฒ„ ์‚ฌ์ดํŠธ ๋ Œ๋”๋ง) ๋ชจ๋“œ๋ฅผ ์ง€์›ํ•˜๋ฏ€๋กœ ๊ฒ€์ƒ‰ ๋กœ๋ด‡๊ณผ์˜ ํ˜ธํ™˜์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๊ณ  ๋ชจ๋“  ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์— ๋Œ€ํ•œ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ํ’ˆ์งˆ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React ์‚ฌ์šฉ ์‚ฌ๋ก€

์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ ์†Œ์Šค ์ฝ”๋“œ ๋ฐ›๊ธฐ
๋ช…์„ธ์—์„œ ์ƒ์„ฑ๋œ ๊น”๋”ํ•œ Go ๋ฐฑ์—”๋“œ ์ฝ”๋“œ์™€ ์ตœ์‹  Vue3 ์›น ์•ฑ์œผ๋กœ ๋ฐฐํฌํ•˜์„ธ์š”.
์ฝ”๋“œ ์ƒ์„ฑ

์šฐ๋ฒ„์ด์ธ 

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

์™“์ธ ์•ฑ

WhatsApp์€ Facebook์—์„œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด React JS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๊ณต์‹์ ์œผ๋กœ ๋„์ž…๋˜๊ธฐ ์ „์— ์—ฌ๋Ÿฌ ๋ฒ ํƒ€ ๋ฒ„์ „์ด ์žˆ์—ˆ์ง€๋งŒ Underscore.js ๋ฐ Velocity.js๋ฅผ ๊ฐ€์žฅ ํšจ๊ณผ์ ์ธ ๊ธฐ์ˆ  ์ค‘ ํ•˜๋‚˜๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. React๋Š” ์ด์ œ ์™„์ „ํžˆ ์ƒˆ๋กœ์šด WhatsApp Online ์•ฑ์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ์ด์ „์— ์–ธ๊ธ‰ํ•œ Facebook ๊ฒ€์ƒ‰ ๊ฒฝํ—˜๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

๋“œ๋กญ ๋ฐ•์Šค

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

์ธ์Šค ํƒ€ ๊ทธ๋žจ

Instagram์€ React js๋ฅผ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ง€๋ฆฌ์  ์šด์˜, Google Maps API, ์›น ๊ฒ€์ƒ‰ ์•ˆ์ •์„ฑ, ํ•ด์‹œํƒœ๊ทธ ์—†์ด ํ‘œ์‹œ๋˜๋Š” ํƒœ๊ทธ์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ์ธก๋ฉด์ด ์ด๋ฅผ ์ฆ๋ช…ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ชจ๋“  ๊ฒƒ์ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ API ๋‚ด์— ์žˆ์œผ๋ฉฐ ์˜ˆ์™ธ์ ์œผ๋กœ ๋†€๋ž์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Instagram์€ React js ๊ธฐ์ˆ ์— ์˜์กดํ•˜๋ฏ€๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ํ™˜์ƒ์ ์ธ ์†์„ฑ์— ๋น ๋ฅด๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”ผ์ž ํ—›

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

์ฝ”๋“œ์•„์นด๋ฐ๋ฏธ

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

์นธ์•„์นด๋ฐ๋ฏธ

์˜ค๋Š˜๋‚  Khan Academy์˜ ์—ฌ๋Ÿฌ ์š”์†Œ๊ฐ€ React๋กœ ๊ตฌ์ถ•๋˜์—ˆ์Šต๋‹ˆ๋‹ค. JavaScript ์—”์ง€๋‹ˆ์–ด ์ค‘ ํ•œ ๋ช…์ธ Joel Burget์€ React js ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•œ ์ž์‹ ์˜ ์ง€์‹๊ณผ ์ด์ „์— ์‚ฌ์šฉํ–ˆ๋˜ ์ผ๋ฐ˜์ ์ธ ์Šคํฌ๋ฆฝํŠธ์™€ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ์ง€ ์„ค๋ช…ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Š” ์ด๋ฅผ ์ข‹์€ ์—…๋ฐ์ดํŠธ๋กœ ์‹๋ณ„ํ•˜๊ณ  ๋น ๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ ์ „ํ™˜ ๋ฐ ๋ถˆํ•„์š”ํ•œ ์žฌ ๋ Œ๋”๋ง ์ œ๊ฑฐ์™€ ๊ฐ™์€ ๋Œ€๋ถ€๋ถ„์˜ ์ฃผ์š” ํŠน์„ฑ์„ ์„ธ์‹ฌํ•˜๊ฒŒ ๊ฒ€ํ† ํ•ฉ๋‹ˆ๋‹ค.

2022๋…„์—๋Š” ReactJS์™€ Vuejs ์ค‘ ์–ด๋А ๊ฒƒ์ด ๋” ๋‚ซ์Šต๋‹ˆ๊นŒ?

Vuejs์™€ React๋Š” ๋ชจ๋‘ ๋™์  ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์œ„ํ•œ ํ›Œ๋ฅญํ•œ ๋นŒ๋”ฉ ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ๋ณต์žกํ•œ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Vue์™€ React ์‚ฌ์ด๋ฅผ ๊ฒฐ์ •ํ•  ๋•Œ ๊ฐ„๋‹จํ•œ ํ•ด๊ฒฐ์ฑ…์€ ์—†์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ด๋‹ˆ์…”ํ‹ฐ๋ธŒ์— ์ ํ•ฉํ•œ ๊ฒƒ์„ ๊ฒฐ์ •ํ•  ๋•Œ ์‚ฌ์šฉ ์‚ฌ๋ก€, ๋น„์ฆˆ๋‹ˆ์Šค ๋ชฉํ‘œ, ์—์ฝ”์‹œ์Šคํ…œ, ํ”„๋กœ๊ทธ๋ž˜๋จธ ๊ธฐ์ˆ , ๋น„์šฉ ๋ฐ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๊ฐ„์„ ๊ณ ๋ คํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

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

์‰ฌ์šด ์‹œ์ž‘
๋ฉ‹์ง„๋งŒ๋“ค๊ธฐ

๋ฌด๋ฃŒ ์š”๊ธˆ์ œ๋กœ AppMaster๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.
์ค€๋น„๊ฐ€ ๋˜๋ฉด ์ ์ ˆํ•œ ๊ตฌ๋…์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹œ์ž‘ํ•˜๋‹ค
Vuejs ๋Œ€ React: ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ๋‘ ๊ฐ€์ง€ ํ”„๋ก ํŠธ์—”๋“œ JS ํ”„๋ ˆ์ž„์›Œํฌ ๋น„๊ต | AppMaster