CODING ๐Ÿ’ป/VUE ๐Ÿ”ฅ 8

#06 VUE ํ„ฐ๋ฏธ๋„์„ POWERSHELL์—์„œ CMD๋กœ ๋ฐ”๊พธ์ž!

์ปดํ“จํ„ฐ๋ฅผ ํฌ๋งทํ•ด๋ฒ„๋ ค์„œ ๋ชจ๋“ ๊ฒŒ ๋‚ ๋ผ๊ฐ„ ๋‚˜.... VUE๊ฐœ๋ฐœํ™˜๊ฒฝ ์…‹ํŒ…์„ ํ•˜๊ณ  ์ด์ œ TERMINAL ์„ธํŒ…์„ ๋ฐ”๊พธ๋ ค ํ•œ๋‹ค! ๋‚˜์ค‘์— ๋˜ ํฌ๋งท๋  ์ˆ˜ ์žˆ์œผ๋‹ˆ๊นŒ โ˜… ๋ธ”๋กœ๊ทธ์— ํ˜น์‹œ ๋ชจ๋ฅด๋‹ˆ ์ ์–ด๋‘๊ธฐ >_ Preferences > Settings ๋ฐฉ๋ฒ• โ‘  shell window๋ผ๊ณ  ๊ฒ€์ƒ‰ Powershell์„ Comman Prompt๋กœ ๋ฐ”๊ฟ”์ฃผ๊น… ๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ VSCode ๋„๊ณ  ๋‹ค์‹œ ์‹คํ–‰์‹œํ‚ค๋ฉด ๋œ๋‹ค! ๊ผญ ํŒŒ๋ž€๋„ค๋ชจ๋ถ€๋ถ„ ๋ˆŒ๋Ÿฌ์„œ split Terminal์„ ๋ˆ„๋ฅด๊ณ  powershell์€ ํœด์ง€ํ†ต ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋œ๋‹ค! ๋ฐฉ๋ฒ• โ‘ก User > Features > Terminal ๋ˆ„๋ฅด๊ณ  ์ข€ ๋‚ด๋ฆฌ๋‹ค๋ณด๋ฉด Integrated > Default Profile : Windows๊ฐ€ ์žˆ๋Š”๋ฐ Powershell๋กœ ๋˜์žˆ๋Š”๊ฑธ 'Command Prompt'๋กœ ๋ฐ”๊ฟ”..

#05 VUE ๊ฒฝ๋กœ ์ „ํ™˜์‹œ ํŽ˜์ด์ง€ ์ œ๋ชฉ ๋ณ€ํ•˜๊ธฐ

routes:[ {path:"/", component:ABC} ] ์˜ component:ABC ๋’ค์— meta:{title: 'ํŽ˜์ด์ง€์ด๋ฆ„'}} ์„ ๋„ฃ๊ณ  router.beforeEach((to, from, next) => { if (to.meta.title) {document.title = to.meta.title} next( ) }) ๋ฅผ ๋„ฃ์œผ๋ฉด! ์™€~~~~~~~~์™„๋ฒฝํ•ด ..! ๋. ์ถœ์ฒ˜ ๋ฐ ์ฐธ๊ณ  ๐Ÿ˜ https://krcoder.com/p/121903

#04 Vue์—์„œ FontAwesome์„ ์‚ฌ์šฉํ•˜๋‹ค!

ํ‰์†Œ ๊นกhtml๋กœ๋งŒ ์ฝ”๋”ฉ์„ ํ•ด์™”๋˜ ๋‚˜.. ๊ทธ๋ž˜์„œ์ธ์ง€ ์ด๊ฑฐ๋งŒ ์น˜๋ฉด ๋์ด์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚˜๋Š” ์ด์ œ vue๋ฅผ ์“ฐ๋Š” h.u.m.a.n.... fontawesome์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์•˜๋‹ค!! ๊ทธ๋ ‡๊ฒŒ ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด๋˜ ๋„์ค‘..! ๊ฐ„๋‹จ๋ช…๋ฃŒ ๊น”๋”ํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฒ•์ด ์ •๋ฆฌ๋œ ๋ธ”๋กœ๊ทธ ๋ฐœ๊ฒฌ! https://velog.io/@inryu/Vue.js%EC%97%90%EC%84%9C-fontAwesome-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Vue.js์—์„œ fontAwesome ์‚ฌ์šฉํ•˜๊ธฐ documentmain.js.vueFont Awesome๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์•„์ด์ฝ˜ ํƒ€์ž…์€ ๋Œ€๋‹ค์ˆ˜๊ฐ€solid - ์† ๊ฝ‰ ์ฐฌ ๊ฒƒregular - ์†์ด ๋นˆ ๊ฒƒ์•„์ด์ฝ˜์„ ํƒœ๊ทธ๋กœ ์ž‘์„ฑํ•  ๋•Œ, ์•„์ด์ฝ˜์˜ ํƒ€์ž…์— ๋”ฐ๋ผsolid ๋Š” f..

#03 reset.css๋ฅผ Vue ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์— ๋‹ค ์ ์šฉ์‹œ์ผœ๋ณด๊ธฐ!

๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡ (์ด ๋ถ„ ๋ธ”๋กœ๊ทธ ์„ค๋ช…์ด ์ž˜ ๋‚˜์™€์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„ ์ฐธ๊ณ ํ•˜์˜€๋‹ค) ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡ https://kdinner.tistory.com/77 Vue ๊ด€๋ จ ์ž˜ ๋ชฐ๋ž๋˜ ๊ฐœ๋… ์ •๋ฆฌ 1. CSS scope 2. vue custom event CSS scope Vue์—์„œ css๋ฒ”์œ„ ์„ค์ •์—๋Š” global, scope๋กœ ํ•˜๋Š” ๋ฐฉ์‹ ๋‘ ๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. global๋กœ ์„ค์ •ํ•˜๋ฉด ๋ถ€๋ชจ, ์ž์‹๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ชจ์˜ค์˜ค์˜ค๋“  ํŒŒ์ผ์— ์ ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณดํ†ต ๊ฐ€์žฅ ์ตœ.. kdinner.tistory.com VUE CSS ๋ฒ”์œ„ ์„ค์ • ๋ฐฉ์‹์€ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค. 'Global', 'Scope'. Global์€ ๋ถ€๋ชจ, ์ž์‹ ๋ง๊ณ  ๋ชจ-๋“  ํŒŒ์ผ์— ์ ์šฉ๋ผ์„œ ์ตœ์ƒ์œ„์—์„œ reset.css ๋“ฑ์„ ๋„ฃ๋Š”๋‹ค๊ณ  ํ•œ๋‹ค. ๋‚ด๊ฐ€ ๋”ฑ ์›ํ•˜๋˜ ๊ธ€์ด์—ˆ๋‹ค!!! ๐Ÿ˜‹๐Ÿ˜‹ css ๋„ฃ๋Š”๊ฑธ ํ„ฐ๋“ํ•ด๋„..

#01 VUE , ์•„์ง์€ ๋‚˜ํ•œํ…Œ ์–ด๋ ค์šด ๋„ˆ.. ๐Ÿ”ฅ

์ฒ˜์Œ์— VUE๋ฅผ ๋ดค์„๋•Œ, ๋„ˆ๋ž€ ์•„์ด. ์ƒ์†Œํ•˜๊ธฐ๋งŒ ํ–ˆ๋‹ค. ํ”„๋ ˆ์ž„์›Œํฌ? ๋ผ์šฐํ„ฐ? ๋ญ”์†Œ๋ฆฌ์—ฌ... ์ด๋Ÿฐ ์ƒ๊ฐ ๋ฟ... ์ ˆ๋Œ€ ์นœํ•ด์ง€์ง€ ๋ชปํ• .. ๊ทธ๋Ÿฐ ์•„์ด. ๋งˆ์น˜.. ์™ธ๊ตญ์–ด 1๋„ ๋ชจ๋ฅด๋Š”๋ฐ ์™ธ๊ตญ์— ํ™€๋กœ ๋‚จ๊ฒจ์ง„ ๋А๋‚Œ์ด์—ˆ๋‹ค.. (?) ํ•˜์ง€๋งŒ.. VUE์— ๊ด€ํ•œ ์œ ํŠœ๋ธŒ๋„ ๋ณด๊ณ , ๋ธ”๋กœ๊ทธ๋„ ๋ณด๊ณ , ๊ตฌ๊ธ€๋ง๋„ ํ•˜๋ฉด์„œ... ์ด์ œ ์กฐ๊ธˆ์€ VUE์— ๋Œ€ํ•ด ์ดํ•ด๊ฐ€ ๊ฐ€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์•„ ๊ทผ๋ฐ.. ๊ฐ‘์ž๊ธฐ ์“ฐ๋‹ค๋ณด๋‹ˆ ์ผ๊ธฐ๊ฐ€ ๋˜๋ฒ„๋ ธ๋‹ค ;; ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฑฐ ์จ์•ผ์ง€... (์ž‰์—ฌ์ž‰์—ฌ) ๐Ÿ™„ โ˜… cli, router ์„ค์น˜๋ฒ• โ˜… ๊ทธ๋ƒฅ ์ด๊ฑฐ ์“ฐ์…ˆ npm install -g @vue/cli npm install vue-router --save ํ•˜ํ•˜ ์™„๋ฒฝํ•ด! ๊ทธ๋ฆฌ๊ณ  ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์ž. vue create lalalalala ๋ณด๋ผ์ƒ‰๋ถ€๋ถ„ lalalala์ €๊ฑฐ๋Š” ๋‹ค๋ฅธ๊ฑฐ๋กœ ..

VUE.JS ๋ฐฐ์šธ๋•Œ ์ฐธ๊ณ ํ•˜๊ธฐ ์ข‹์€ ์‚ฌ์ดํŠธ~ (๋‚ด๋ณด์“ด)

https://kbseung12345.tistory.com/2 [vue.js ๊ธฐ์ดˆ ๊ณต๋ถ€] vue.js - 01 vue.js๋ž€ Javascript์˜ํ”„๋ ˆ์ž„์›Œํฌ ์ž…๋‹ˆ๋‹ค. AngulerJs, ReactJs๋ณด๋‹ค ์œ ๋ช…ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ์ตœ๊ทผ ์ธ๊ธฐ๊ฐ€ ๋งค์šฐ ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. VueJs๋Š” ๋ฐœ์Œ๊ณผ ๋น„์Šทํ•˜๊ฒŒ View์— ์ตœ์ ํ™”์‹œํ‚จ kbseung12345.tistory.com https://niceman.tistory.com/43 Vue.js - ๊ธฐ์ดˆ ๋ฌธ๋ฒ• ๋ฐฐ์šฐ๊ธฐ(1) ๊ฐ•์˜ ๋ฐ ์˜ˆ์ œ ์†Œ์Šค Vue.js - ๊ธฐ๋ณธ CDN ์„ค์น˜ โ‘  Vue.js๋Š” ์ตœ์‹  ํŠธ๋ Œ๋“œ์— ๋งž๋Š” ์ง„๋ณด์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. โ‘ก ํ•ต์‹ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” ๋ทฐ ๋ ˆ์ด์–ด์— ์ดˆ์ ์„ ๋งž์ถฐ์–ด ์ฝ”๋”ฉํ•˜๋ฉด ๋œ๋‹ค. โ‘ข ๋Œ€๊ทœ๋ชจ ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ์—์„œ Vue.js๋Š” ํ†ตํ•ฉ ..

VUE.JS ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…~ (๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ฐ๋Š” ๊ธ€)

(์ฐธ๊ณ ๋กœ ๋‚˜๋Š” NODE.JS ์™€ VScode๊ฐ€ ๊น”๋ ค์žˆ๋‹ค) VS์ฝ”๋“œ๋ฅผ ํ‚ค๋ฉด ์ ˆ์ผ€ ๋‚˜์˜ค๋Š”๋””! ์ขŒ์ธก ํ•˜๋‹จ ๋ธ”๋Ÿญ์ฒ˜๋Ÿผ ์ƒ๊ธด์• ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์˜†์— ์ €๋ ‡๊ฒŒ ์˜์–ด๋“ค์ด ์ญˆ๋ฅด๋ฅต ๋œฌ๋‹ค! ๋‚ด๊ฐ€ ๊น ์„ค์น˜ ํŒŒ์ผ(?)๋“ค...*One Dark Pro๋Š” ์•ˆ๊นœ! ์ €๊ฑธ ์œ„ ๊ฒ€์ƒ‰์ฐฝ์— ์ณ์„œ ๋‹ค์šด๋ฐ›์œผ๋ฉด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฑฐ ๋ˆŒ๋Ÿฌ์„œ htmlํŒŒ์ผ ๋งŒ๋“ค๊ณ  ๋ฅผ ์จ์ฃผ๋ฉด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค!! ( ์ถœ์ฒ˜: https://doncolmi.github.io/Vue-1/ ) ๊ทธ๋ฆฌ๊ณ  ์šฐํด๋ฆญ์„ ํ•ด์„œ Open with Live Server์„ ๋ˆŒ๋Ÿฌ์ฃผ๋ฉด!!!! ์›๋ž˜๊ฐ™์•˜์œผ๋ฉด ์ €๊ธฐ์— 'Hello world!'๋ผ๊ณ  ์จ์ ธ์žˆ์–ด์•ผ ํ•จ..;;ใ…‹ ๊ทผ๋ฐ ๋‚œ ALL WHITE............. ๋ญ ์ฝ”๋”ฉ์€ ์˜ค๋ฅ˜์˜ ์—ฐ์†์ด๋‹ˆ๊ฝˆ~~~ ( ํ™•์žฅํ”„๋กœ๊ทธ๋žจ > VUE ๋ˆŒ๋Ÿฌ์„œ ์•ก์„ธ์Šค ํ—ˆ์šฉ์‹œํ‚ค๋ฉด ๋œ๋‹คํ•ด์„œ ํ•ด๋ดค์Œ...