FastCampus For BusinessKDT ํํ ํฌ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ 2๊ธฐ(KDT FE2) ํ ๋ฒ์ ๋๋ด๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ด๊ฒฉ์ฐจ ํจํค์ง Online.์ํ์ฝ๋ฉ์ต์ฐ์ ๊ฐ์ฌ๋๋ฐ์์ ๊ฐ์ฌ๋
1. Git์ ๋ชฉ์ > Version / Backup / Collaborate 1.1 git์ ๋ชฉ์ 1 - ๋ฒ์ ๊ด๋ฆฌ ์์ ์ด ๋ง์์ง ์๋ก ํ์ผ๋ค๊ฐ์ ์์ ์ฌํญ๋ค์ ํ๋์ ๋ณด๊ธฐ ์ด๋ ค์์ง๋ค. git์ ๊ฐ๊ฐ์ ์์ ์ฌํญ์ ๋ฒ์ ์ผ๋ก ๋ง๋ค๊ณ ๋ฒ์ ๊ฐ์ ์ฐจ์ด์ ์ ๋ณด์ฌ์ค ์ ์๋ค. ์ฌ
์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํต์ฌ ์ค๊ธฐ๋ฅผ ํ์ตHTML, CSS, JS๋ฅผ ์ฌ์ฉํด ๋ฐ์ดํฐ๋ฅผ ๊ทธ๋ํฝ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(GUI)๋ก ๋ณํํ๊ณ , ๊ทธ๊ฒ์ผ๋ก ์ฌ์ฉ์์ ์ํธ ์์ฉํ ์ ์๋๋ก ํ๋ ๊ฒ. ํ์ด์ง์ ์ ๋ชฉ, ๋ฌธ๋จ, ํ, ์ด๋ฏธ์ง, ๋์์ ๋ฑ ์น์ ๊ตฌ์กฐ๋ฅผ ๋ด๋น ์ค์ ํ๋ฉด์ ํ์๋๋ ๋ฐฉ
for (์์์กฐ๊ฑด; ์ข ๋ฃ์กฐ๊ฑด; ๋ณํ์กฐ๊ฑด) { }true, {}, \[], 1, 2, 'false', -12, '3.14' ...false, ' ', null, undefined, 0 -0, NaN(Not a Number)( ) => { } vs function ( )
1. ์ฃผ์ 2. ์ค์ฒฉ scss css 3. ์์(๋ถ๋ชจ) ์ ํ์ ์ฐธ์กฐ scss css 4. ์ค์ฒฉ๋ ์์ฑ scss css 5. ๋ณ์ scss css 6. ์ฐ์ ์ฐ์ฐ scss css 7. ์ฌํ์ฉ scss css 8. ๋ฐ๋ณต๋ฌธ scss css 9. ํจ
๋ฌธ๋ฒ์ด ์ฝ๊ณ ๊ฐ๊ฒฐํ๋ค!๊ด๋ฆฌ๊ฐ ์ฝ๋ค!์ง์ ๊ฐ๋ฅํ ํ๋ซํผ๊ณผ ํ๋ก๊ทธ๋จ์ด ๋ค์ํ๋ค! ํ์ค์ด ์๋ค!๋ชจ๋ HTML ๋งํฌ์ ์ ๋์ ํ์ง ๋ชปํ๋ค!๋ํด๋ฌผ๊ณผ ๋ฐฑ๋์ฐ์ด ๋ง๋ฅด๊ณ ๋ณ๋๋ก ํ๋๋์ด ๋ณด์ฐํ์ฌ ์ฐ๋ฆฌ๋๋ผ ๋ง์ธ๋ํด๋ฌผ๊ณผ ๋ฐฑ๋์ฐ์ด ๋ง๋ฅด๊ณ ๋ณ๋๋ก ํ๋๋์ด ๋ณด์ฐํ์ฌ ์ฐ๋ฆฌ๋๋ผ ๋ง์ธ ๋ฌด๊ถํ ์ผ์ฒ๋ฆฌ
๊ตฌ์ฑ ์๋ ๋จ์ํ ์๋ ๋ฒ๋ค๋ง์/์คํ ํ๋ก์ ํธ์ ์ ํฉParcel GitHub๋งค์ฐ ๊ผผ๊ผผํ ๊ตฌ์ฑ์ค/๋ํ ํ๋ก์ ํธ์ ์ ํฉWebpack GitHubgit clone๊ณผ ๋ค๋ฅด๊ฒ commit ๋ด์ฉ์ ์ด๊ธฐํํ๊ณ copyํ ์ ์๋ค.
Vue3_Wabpack GitHubApp.vuev-once : ์ผํ์ฑ ๋ณด๊ฐ{{ }} : ์ผ๋ฐ ํ ์คํธ๋ก ํด์v-html : ์ค์ HTML๋ก ํด์v-bind : HTML ์์ฑ ์ฌ์ฉ v-bind ์ฝ์ด : :v-on ์ฝ์ด : @์ 1)App.vue์2)App.vueApp.v
Single Page Application ์ด๋? ์ธ์คํ๊ทธ๋จ, ํ์ด์ค๋ถ ๊ฐ์ด๋ชจ๋ฐ์ผ ์ฑ ์ฒ๋ผ ์๋ก๊ณ ์นจ ์์ด ํ๋ฉด์ด ๋ฐ๋ ์ ์๋๋ก ๋ถ๋ฅด๋ฝ๊ฒ ๋์ํ๋ ์น ํ์ด์ง๋ฅผ ๋งํ๋ค.npx: ํ๋ก์ ํธ ์์ฑํด์ฃผ๋ ๋ช ๋ น์ด ์ ๊ณตnode_modules ํด๋: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋ ๋ณด๊ดํจpublic
react bootstrap ๊ฒ์ ํ ์ฌ์ดํธ์ ์๋ ์ค์น ๋ช ๋ น์ด๋ฅผ ํฐ๋ฏธ๋์์ ์ ๋ ฅํด์ค๋ค.npm install react-bootstrap bootstrap1) css, import๋ก ๋ณต์ฌํด์ App.js์ ๋ถ์ฌ๋ฃ๊ธฐ2) css, link๋ก ๋ณต์ฌ index.html์ ๋ถ์ฌ