[๊ณต์ง] 1. ๊ฐ์ ๋
นํ์ ๋ํ ์์ง, ํธ์ง ๋ฑ ๊ธฐ์ ์ ์ผ๋ก ๋ถ์กฑํ ๋ถ๋ถ์ด ๋ง์ต๋๋ค. ๋ด์ฉ๋ฉด์์๋ ์ฒซ ๊ฐ์๋ผ ๋ถ์กฑํ ๋ถ๋ถ๋ค์ด ์์ต๋๋ค.
2. ๊ฐ์ ์ค์ Vue.js ๊ณต์ ๊ฐ์ด๋ ์ค ํต์ฌ ๋ฌธ๋ฒ ์ค ์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ์ฌ ํด๊ฒฐํ์ฌ ๊ฐ์ด๋ ํฉ๋๋ค.
2๋ถ๋ถํฐ ์งํ๋๋ ์ค์ ์น์ฑ ๊ฐ๋ฐ์ ์ํด ์
๋ฌธ์ ๋ถ๋ค์๊ฒ ํ์ํ, ๊ธฐ๋ณธ ๊ธฐ์ด ๊ฐ์ข์
๋๋ค.
Vue.js ์ ๋ํ ๊ธฐ๋ณธ์ง์ ์์ผ์๊ฑฐ๋, ์ด๋ฏธ ๊ณต๋ถ๊ฐ ๋์ด ์์ผ์๋ค๋ฉด ๊ตณ์ด ์๊ฐํ์ง ์์ผ์
๋ ๋๊ฒ ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค.
[Vue.js 2] ์ค์ ์น์ฑ ๊ฐ๋ฐํ๊ธฐ ์๋ฆฌ์ฆ
โข 1๋ถ: Vue.js ๊ฐ๋
~ ํต์ฌ ๐ ํ์ฌ ๊ฐ์
โข 2๋ถ - Vue Cli ๊ฐ๋ฐํ๊ฒฝ ๋ฐ ์ค์ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ (์ ์์ค)
โข 3๋ถ - ์ค์ ์น์ฑ '์ฑ์ผ๋ก ํ๋ ์ญ์ฌ๊ณต๋ถ' ๊ฐ๋ฐ (์ ์์ค)
๐ ๊ฐ์์๊ฐ
โข 1๋ถ: Vue.js ๊ฐ๋
~ ํต์ฌ ์ค์ต ์
๊ฐ์๋ฅผ ๋ณด๋ฉด์ jsFiddle ์ ํตํด ๋ฐ๋ก๋ฐ๋ก ๊ฐ์ด ์ฝ๋ฉ์ ํด ๋ณผ ์ ์์ต๋๋ค.
์ด๋ฌํ ์ค์ต์ ๊ฐ์ข๋ฅผ ๋์ผ๋ก๋ง ๋ณด๋ ๊ฒ๊ณผ ๋ฌ๋ฆฌ,
์ฌ๋ฌ๋ถ์ด ์ค์ Vue.js ์ ๊ธฐ๋ณธ ์ฝ๋ฉ์ ํ ์ ์๋๋ก
๋ถ๋ช
ํ ๋์์ ์ค ์ ์์ต๋๋ค. ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ๊ฐ์ด ์ฝ๋ฉ์ ํด ๋ณด์ธ์.
๋น์ ์ ๋ฐ๋ก vue ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ต๋๋ค.
๊ตฌํ๋ง ์กฐ์ ์ ๋๋ฌ์ผ ์ด๊ฐ๋ค์ ์นจ๋ต์ ๋ํ ๋คํ๋ฉํฐ๋ฆฌ๋ฅผ ๋ณด๋ฉด์,
๊ฐํ๊ธฐ์ ์กฐ์ ๊ณผ ์ผ๋ณธ์ ๋น๋กฏํ ๋ค๋ฅธ ์ด๊ฐ๋ค์ ์ญ์ฌ๋ ๋ง์ด ๋ฌ๋๋ค๋ ๊ฒ์ ์๊ฒ ๋์์ต๋๋ค.
์ง๊ธ์ 4์ฐจ ์ฐ์
ํ๋ช
์๋์ธ๋ฐ, 1์ฐจ ์ฐ์
ํ๋ช
(1760๋
๋), 2์ฐจ ์ฐ์
ํ๋ช
(1865๋
๋) ์๋์
์กฐ์ ์ ๋ฌด์์ ํ๊ณ ์์์๊น? ๋ผ๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
์กฐ์ ์ ์ ์ฐ์
ํ๋ช
์๊ธฐ์ ๋ค๋ฅธ ๋๋ผ๋ค์ ๋นํด ์ดํ ๋ก ๋ง์ด ๋ค์ณ์ง๊ฒ ๋์์ผ๋ฉฐ,
์กฐ์ ์ ์ํํ๋ ์ด๊ฐ๋ค(์ผ๋ณธ, ์ค๊ตญ, ๋ฌ์์, ๋ฏธ๊ตญ, ์๊ตญ, ํ๋์ค ๋ฑ) ์ ๋์๋์ ์ด๋ ํ ์ญ์ฌ๋ฅผ ์ด๋ฃจ์ด ์๋์ง๊ฐ ๊ถ๊ธํด์ก์ต๋๋ค.
๊ณต๋ถ๋ฅผ ํ๋ฉด์ ์ด๊ฒ์ ์น์ฑ์ผ๋ก ๋ง๋ค์ด ํจ๊ณผ์ ์ผ๋ก ์๋ฆฌ๊ณ ์ถ์ ์๊ฐ์ด ๋ค์ด
'์ฑ์ผ๋ก ํ๋ ์ญ์ฌ๊ณต๋ถ' ๋ผ๋ ์น์ฑ์ Vue.js + Vuetify ๋ก ๋ง๋ค๊ฒ ๋์์ต๋๋ค.
์ฑ์ ๋ง๋ค๋ฉด์, ์ ๊ฒ๋ ๊ทธ๋ฌ๋ฏ, ๋๊ตฐ๊ฐ์๊ฒ ์ฝ๋ฉ์ด ํ์ํ ์๊ฐ,
ํคํธ์ ๋งค๋ด์ผ์ด ๋์ด ์ค ์ ์๋ ๋๊ตฌ๋ฅผ ์๋น์ค[http://realcodecamp.com]๋ก ๋ง๋ค์ด ๋ณด๊ธฐ๋ก ํ์ต๋๋ค.
Real ์น์ฑ - '์ฑ์ผ๋ก ํ๋ ์ญ์ฌ๊ณต๋ถ ๊ฐ๋ฐ'์ ๋จผ์ ๋์์ ๊ฐ์ข๋ก ์งํํ๋ ค๊ณ ํ์ผ๋,
๊ธฐ๋ณธ๊ธฐ ์์ด ๋ฐ๋ก ์ค์ ๊ฐ๋ฐ์ ์ด๋ ต๋ค๋ ์๊ฐ์
โข 1๋ถ - Vue.JS ๊ฐ๋
~ ํต์ฌ ์ค์ต
โข 2๋ถ - Vue Cli ๊ฐ๋ฐํ๊ฒฝ ๋ฐ ์ค์ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ฅผ ๋จผ์ ์ถ๊ฐํ๊ฒ ๋์์ต๋๋ค.
๋ณธ ๊ฐ์๋ 1๋ถ - Vue.JS ๊ฐ๋
~ ํต์ฌ ์ค์ต ๋ถ๋ถ์
๋๋ค.
[๊ฐ์์ ์๋ก๋ Real ์น์ฑ]
"์ฑ์ผ๋ก ํ๋ ์ญ์ฌ๊ณต๋ถ" ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๐
๐ ์ฌ๊ธฐ์ ๋ค๋ฃจ๋ ํด
JSํผ๋ค(JSFiddle)
โข ์น ํ๋ก ํธ์๋ ๊ด๋ จ ๊ธฐ์ ์ฝ๋(ํ์
ํ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ค๋ํซ)๋ฅผ ์์ฑํ๊ณ ํ
์คํธํด๋ณด๊ธฐ ์ํ ์จ๋ผ์ธ ์๋น์ค์
๋๋ค.
๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)
โข ๋ง์ดํฌ๋ก์ํํธ์์ ๊ฐ๋ฐํ Git ์ ์ด, ๊ตฌ๋ฌธ ๊ฐ์กฐ ๊ธฐ๋ฅ ๋ฑ์ด ํฌํจ๋ ์์ค ์ฝ๋ ์๋ํฐ/๋๋ฒ๊ฑฐ์
๋๋ค.
๐๐ปโโ๏ธ ๊ฐ์ Q&A
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋์?
A. ๋ค, ๋ค์ ์ ์์ต๋๋ค. ๊ฐ๋ฐ์ ๋ํ ์ด์๋ง ์์ผ๋ฉด ๋๊ตฌ๋ผ๋ ๋ค์ ์ ์์ต๋๋ค. ์ ๋ํ ๋น์ ๊ณต์ ์
๋๋ค.
Q. ์ Vue.js๋ฅผ ๋ฐฐ์์ผ ํ๋์?
A. ์ง๊ธ๋ ๊ทธ๋ ์ง๋ง, ์์ผ๋ก์ ์น๊ฐ๋ฐ์ PWA(Progressive Web App, ๊ฐ์์์ ์์ธํ ์ค๋ช
ํฉ๋๋ค.) ํํ๋ก ๊ฐ๋ฐ์ด ์ด๋ค์ง ๊ฒ์
๋๋ค. Vue.js๋ ์ผ๋ฐ์ ์ธ ์น ํ๋ฉด์ธ์๋ ์ด PWA ๋ฅผ ๊ฐ๋ฐํ๊ธฐ์ ๋งค์ฐ ์ฉ์ดํ ํ๋ ์์์
๋๋ค. Vue.js๋ฅผ ํตํด, ํ๋ฒ์ ๊ฐ๋ฐ๋ก ์น๊ณผ ๋ชจ๋ฐ์ผ ๋ชจ๋๋ฅผ ์ถฉ์กฑํ ์ ์๋ ์น์ฑ์ ๋ง๋ค ์ ์์ต๋๋ค.
Q. Vue.js๋ฅผ ๋ฐฐ์ฐ๋ฉด ์ด๋ค ์ผ์ ํ ์ ์๋์?
A. Vue.js๋ฅผ ๋ฐฐ์ฐ๋ฉด ์ฌ๋ฌ๋ถ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ผ๋ฉฐ, ์ง๋ณด์ ์ธ ์นํ์ด์ง ๊ฐ๋ฐ ๋ฐ ์น์ฑ ๊ฐ๋ฐ์ ํ ์ ์์ต๋๋ค.