post-thumbnail

TIL56.tabs menu(React, Vue)

์›น์‚ฌ์ดํŠธ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” 'tabs menu'๋ฅผ ๋ฆฌ์•กํŠธ์™€ ๋ทฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋งŒ๋“ค์–ด๋ณด์ž.

2020๋…„ 12์›” 10์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL55. Vue Todo-list

์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ๊ฐ„๋‹จํ•œ 'todo-list'๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž.

2020๋…„ 12์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL54.Slot

์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” 'slot'์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. Slot ์Šฌ๋กฏ์€ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ํ•จ์œผ๋กœ์จ, ํŠน์ • ์ปดํฌ๋„ŒํŠธ์— ๋“ฑ๋ก๋œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋งˆํฌ์—…์„ ํ™•์ •ํ•˜๊ฑฐ๋‚˜ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ์—„๊ฒฉํ•œ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๊ฐ€ ์•„๋‹Œ

2020๋…„ 12์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL53. Vue ๋ฐ์ดํ„ฐ ๋ณด๋‚ด๊ธฐ

Vue์—์„œ ์ž์‹์—๊ฒŒ ๋ถ€๋ชจ์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ๊ฒฝ์šฐ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.๋ถ€๋ชจ์—์„œ ์ž์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ props๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์„ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— props๋ฅผ ์„ ์–ธํ•ด์ค€๋‹ค.props์— ๋ฐ›์€ ๊ฐ’์„ data, methods ๋‹ค๋ฅธ ๊ณณ์—์„œ ์ง์ ‘์ ์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์–ด ์‚ฌ

2020๋…„ 12์›” 1์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL52.Vue Router

๋ทฐ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ์ด ์†์„ฑ์œผ๋กœ ๋ทฐ ๋ผ์šฐํ„ฐ ๊ฐ์ฒด๋ฅผ ๋„˜๊ฒจ์ค˜์•ผ ํ•œ๋‹ค.์ด์ œ๋Š” ๋ผ์šฐํ„ฐ๋ฅผ ์ด์šฉํ•ด ์ถœ๋ ฅ๋  ๋ถ€๋ถ„์„ ์ž…๋ ฅํ•ด์•ผํ•˜๋Š”๋ฐ, ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ์ธ App.vue์— ๋ผ์šฐํ„ฐ ๋ทฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋œ๋‹ค. router-viewํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฒฝ๋กœ์— ๋”ฐ๋ผ์„œ ๊ทธ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•ด์ค€๋‹ค.

2020๋…„ 11์›” 29์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL51.computed&watch

Vue์—์„œ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ํ•˜๊ธฐ์œ„ํ•ด์„œ๋Š” computed์™€ watch์— ๋Œ€ํ•ด์„œ ์ž˜ ์•Œ์•„์•ผ ํ•œ๋‹ค.data๋ฅผ ๊ฐ€๊ณตํ•ด์„œ ๋ณด์—ฌ์ค˜์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉ๋œ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ„๋‹จ๋ช…๋ฃŒํ•˜์ง€์•Š๊ธฐ ๋•Œ๋ฌธ์— computed๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹๋‹ค. ๊ณ„์‚ฐ๋œ ๊ฐ’์„ ์—ฌ๋Ÿฌ๋ฒˆ ์ฐธ์กฐํ•ด์•ผํ•  ๋•Œ ์„ฑ๋Šฅํ–ฅ

2020๋…„ 11์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL50.Vue ์„œ๋ฒ„ํ†ต์‹ 

vue.js์—์„œ ์„œ๋ฒ„ํ†ต์‹ ์„ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์ž.React์—์„œ ์„œ๋ฒ„ํ†ต์‹ ์„ ์œ„ํ•ด์„œ fetchํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค๋ฉด, vue์—์„œ axious๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. axios๋Š” javascript์šฉ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€๋งŒ, Vue.js์—์„œ๋„ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค.๋‘˜๋‹ค return ๊ฐ’์€ P

2020๋…„ 11์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL48.Vue directive

vue์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ๋””๋ ‰ํ‹ฐ๋ธŒ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์€ ๊ธฐ๋ณธ์ ์œผ๋กœ v-on:์ด๋ฒคํŠธ ํ˜•ํƒœ๋กœ ํ•ธ๋“ค๋งํ•  ์ˆ˜ ์žˆ๋‹ค.v-on์€ ์ž์ฃผ ์‚ฌ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ•์•ฝํ˜•์ธ @๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.v-bind๋Š” ์•„์ด๋””, ํด๋ž˜์Šค, ์Šคํƒ€์ผ๋“ฑ์˜ HTML ์†์„ฑ ๊ฐ’์— ๋ทฐ ๋ฐ์ดํ„ฐ ๊ฐ’์„

2020๋…„ 11์›” 22์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL47.Vue.js

react์™€ ๋น„์Šทํ•œ Vue์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. Vue.js๋ž€? ๋ทฐ๋Š” ์›นํŽ˜์ด์ง€ ํ™”๋ฉด์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋งํ•œ๋‹ค. ๋ฆฌ์•กํŠธ,์•ต๊ทค๋Ÿฌ์™€ ํ•จ๊ป˜ ์ธ๊ธฐ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ๊ธ‰๋ถ€์ƒ์ค‘์ด๋‹ค. ๋ทฐ๋Š” ๋ฆฌ์•กํŠธ์™€ ์•ต๊ทค๋Ÿฌ์— ๋น„ํ•ด ์‰ฝ๊ณ , ์„ฑ๋Šฅ์ด ์šฐ์ˆ˜ํ•˜๊ณ  ๋น ๋ฅด๋‹ค๋Š” ์žฅ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

2020๋…„ 11์›” 19์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€