Vuejs ๋ React: ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ๋ ๊ฐ์ง ํ๋ก ํธ์๋ JS ํ๋ ์์ํฌ ๋น๊ต
์ด ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ํ๋ก ํธ์๋ JavaScript ํ๋ ์์ํฌ์ธ Vue์ React 2022๋ฅผ ๋๋ํ ๋น๊ตํ ๊ฒ์ ๋๋ค. ReactJS์ Vuejs ์ค ์ด๋ ๊ฒ์ด ๋ ๋ซ์ต๋๊น?

๊ฐ๋ฐ ๋ถ๋ฌธ์ ์๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๋ ๋ค์ํ ๊ธฐ์ ์ ์คํํ๊ณ ๋๋ถ๋ถ์ ๊ฒฝ๋ ฅ์์ ๊ธฐ์ ์ ๋ณต์ก์ฑ์ ํ์ ํ๋ ๋ฐ ์ง์คํด์ผ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด ๋ถ์ผ์์ ์ฑ์ฅํ๋ ์์ฒญ๋ ๋ณต์ก์ฑ์ ํฉ์ธ์ด๊ธฐ์๋ ๋๋ฌด ๊ฐ๋จํฉ๋๋ค. ๊ถ๊ทน์ ์ผ๋ก ์ํํธ์จ์ด ํ๋ก๊ทธ๋จ์ ๋จ์ํ ๊ฒ์์ด๋ ๋์งํธ ๋์๋ง๋ก ๊ทธ์น๋ฉฐ ์์ฒญ๋๊ฒ ๋ณต์กํ ์ฝ๋ฉ ๋ผ์ธ์ผ๋ก ์งํํ์ต๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ๊ธฐ์ ์ ๊ฐ๋ ์ ์์ต์ฑ ์๋ ์ํ์ผ๋ก ์ ํํ๊ธฐ ์ํด ์๋ก์ด ๊ธฐ์ ์ ๋ฐ๋ช ํ๊ธฐ ์์ํ์ต๋๋ค.
๋ฐ๋ผ์ ๋น์ฆ๋์ค ์์ ์๋ก์ ์ด์ ์จ๋ผ์ธ ํด๋ผ์ด์ธํธ ์ฑ์ ๋์์ธํ ๋ ์๋ จ๋ ํ๋ก๊ทธ๋๋จธ ํ์ ์ฐธ์ฌ์ํค๊ณ ์ฌ๋ฐ๋ฅธ ํ๋ก ํธ ์๋ ํ๋ ์์ํฌ ๋ฅผ ์ ํํ๋ ๊ฒ์ด ๊ทํ์ ์ฑ ์์ ๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ์ฅ ํฐ ๋ฌธ์ ๋ ์ดํด ๊ด๊ณ์๋ก์ ๋ค์ํ ๊ฐ๋ฅ์ฑ ์ค์์ ์ฌ๋ฐ๋ฅธ ์ ๋ต์ ์ ํํด์ผ ํ ๋ ๋ํ๋ฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํ๋ก์ ํธ ๋ฆฌ๋๋ ๊ฐ์ฅ ์ ํฉํ ๊ฒ์ ์ ํํ๋ ๊ฒ์ด ์๋๋ผ ์์ ์ ํ๋ก๊ทธ๋จ๊ณผ ํ์ฌ ๋ชฉํ์ ๊ฐ์ฅ ์ ๋ง๋ ๊ฒ์ ์ ํํ๋ ๋ฐ ๊ด์ฌ์ด ์์ต๋๋ค.
๊ทธ๋ฌ๋ ํ๋ก ํธ์๋ ์ฑ ์ ํ ์ ์ฐจ๋ ํ, ํ๋ซํผ, ๋์ด๋, ํ์ฅ์ฑ, ์ํ๊ณ, ๊ฒ์ฆ ๋ฐ ์ง์๊ณผ ๊ฐ์ ๋ค์ํ ์ธก๋ฉด์ ์ํฅ์ ๋ฐ์ต๋๋ค. ๋ฐ๋ผ์ ์ด 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๊ฐ ๋ ๋์ ์ ํ์ผ๋ก ์ ์ฆ๋ ๊ณณ์ ์ด๋์ธ๊ฐ์?
- 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๋ณด๋ค ํจ์ฌ ์์ ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ์ ๋ฐํด ๋ทฐ๋ ์์ง ์ฑ์ฅ ์ค์ธ ์ ์ ๊ธฐ์ ์ ๋๋ค.
๊ฐ๋ฐ ์๋ ๋ฐ ๋น์ฉ
React์ Vue๋ฅผ ๋น๊ตํ๋ ๋ ๋ค๋ฅธ ์ค์ํ ์์๋ ๊ฐ๋ฐ ์๋์ ๋๋ค. ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ์์ํ๊ธฐ ์ ์ ์ฌ์ฉํ ํ๋ก๊ทธ๋ ์๋ธ JavaScript ํ๋ ์์ํฌ๋ฅผ ๊ฒฐ์ ํด์ผ ํฉ๋๋ค. Vue ๋ฐ ReactJS๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์น ํ์ด์ง ๋๋ ์ฑ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋น์ฉ๊ณผ ๊ฐ๋ฐ ์๊ฐ์ด ๋ฌธ์
๊ฐ๋ฐ ์๋
์ฐ๋ฆฌ์ ์ฐ๊ตฌ์ ๋ฐ๋ฅด๋ฉด Vue์ React์ ๊ฐ๋ฐ ์๊ฐ์ ๋น์ทํฉ๋๋ค. ์ฌ์ค์ ํ๋ก๊ทธ๋จ์ ๋น ๋ฅด๊ฒ ๊ตฌ์ฑํ ์ ์๋ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ ๋ฐ ๋ชจ๋์ด ์๋ค๋ ๊ฒ์ ๋๋ค. ๋ฌผ๋ก ํ๋ก๊ทธ๋๋จธ์ ์ฝ๋ฉ ์ ๋ฌธ ์ง์๊ณผ ReactJS ๋๋ Vue๋ฅผ ๋ฐฐ์ธ ์ ์๋ ๋ฅ๋ ฅ์ด ๋ฌด์์ด๋ ๊ฒฐ์ ํ๊ฒ ์ง๋ง ์ค์ ๋ก๋ ๋น๊ต ๊ฐ๋ฅํ ์์ ์ ๋ํ ์๊ฐ ์์ธก์ด ๋์ผํฉ๋๋ค.
๋น์ฉ
๊ฐ๊ฒฉ์ ์ง์ญ, ์ฐ๊ณต์์ด, ์ฝ๋ฉ ๊ธฐ์ ๋ฑ ๋ค์ํ ๋ณ์์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
์ฑ๋ฅ
JavaScript ํ๋ ์์ํฌ๋ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ์ ์ฌ์ฉํ์ฌ HTML ํ์ผ์ ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํธ๋ฆฌ ๋์์ธ์ด๋ผ๊ณ ํ๋ DOM ํธ๋ฆฌ๋ ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๊ฐ์ DOM์ ๊ตฌ์กฐ์ ๊ธฐ๋ฅ์ ํ๋ซํผ์ ํจ์จ์ฑ์ ๊ฒฐ์ ํฉ๋๋ค. ๊ฐ์ DOM์ ๊ตฌ์ถํ๊ณ ์คํํ๋ ๊ฒ์ด ๊ฐ๋จํ๊ณ ๋น ๋ฅด๋ฉด ์์คํ ์ด ๋น ๋ฅด๊ฒ ์๋ํฉ๋๋ค. ์ฑ๋ฅ์ React์ Vue๋ฅผ ๋น๊ตํ ๋ ์ค์ํ ์์ ์ค ํ๋์ ๋๋ค.

๋ทฐ
๋ค๋ฅธ ์ต์ ์ด๋ ๋ชจ๋ ์ ๋ฐ์ดํธ๋ก ์ธํด Vue ํ๋ก๊ทธ๋จ์ ์กฐ๊ฑด์ด ๋ ๋ชจํธํด์ ธ์ ์ฑ์ด ๋น ๋ฅด๊ฒ ๋ก๋๋๊ธฐ๊ฐ ๋ ์ด๋ ค์์ง๋๋ค. ์ด ์ข๊ฒ๋ ์ด ํ๋ ์์ํฌ๋ ์์คํ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๊ฐ์ DOM์ ์ ๊ณตํฉ๋๋ค. ์ง์ฐ ๋ก๋ฉ์ Vue์ ๊ฐ์ฅ ์ค์ํ ๊ธฐ๋ฅ ์ค ํ๋์ ๋๋ค. ๋ก๋ฉ ์๊ฐ ๋จ์ถ์ ๊ธฐ์ฌํฉ๋๋ค.
๋ฐ์
React ์ฑ์ ๋ ๋น ๋ฅด๊ฒ ์คํ๋๊ณ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ฉฐ ํจ๊ป ์ ์๋ํ๋ ๋ณ๋์ ์์๊ฐ ์์ต๋๋ค. ๋ํ react์ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ํคํ ์ฒ๋ ๋ณด๋ค ๊ฐ๋ ฅํ ํ ํ์ด์ง ์ฑ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ฉฐ ํ์ฉ๋๋ ํ๋ก๊ทธ๋จ์ ์ ๊ตํจ์ ๋ฎ์ถ๊ณ ๊ฐ์ DOM ์ํธ ์์ฉ์ ์ ๊ฑฐํ์ฌ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋์ ๋๋ค. ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ ์ฒด ํ์ด์ง๋ฅผ ๋ค์ ๋ก๋ํ์ง ์๊ณ ๋ ์ฌ์ดํธ์ ํ์ํ ์กฐ์ ์ ๊ตฌํํ๋ ๋ฐ ์ง์คํฉ๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ์น ์ฌ์ดํธ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ์๊ฐ์ ๋ญ๋นํ๋ ๋์ ์๋ฃ๋ฅผ ์๋ก ๊ณ ์นฉ๋๋ค.
ํ์ฅ์ฑ
๋ทฐ์ด์ค
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 ์ฌ์ฉ ์ฌ๋ก
์ฐ๋ฒ์ด์ธ
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๋ฅผ ์ฌ์ฉํ๋ฉด ๊ตฌ์ ๋ฐฉ์์ผ๋ก ๋ง๋ค ๋๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ณ ์ ๋ ดํ๊ฒ ๊ฒฌ๊ณ ํ๊ณ ๊นจ๋ํ ์ฝ๋์ ์๋ํ๋ ์น ์ฑ์ ์์ฑํ ์ ์์ต๋๋ค.


