profile
Front-end Develop๐Ÿฅฐ
post-thumbnail

[Vue] Router๋ชจ๋“œ

๐Ÿ“šTIL day39 Hash๋ชจ๋“œ(domain/#/~) ๊ธฐ๋ณธ์ ์ธ ๋„๋ฉ”์ธ์ฃผ์†Œ๋กœ๋งŒ ์š”์ฒญ์ด ๋“ค์–ด๊ฐ€๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธํŽ˜์ด์ง€๋“ค์—์„  ์š”์ฒญ์ด ๋ณด๋‚ด์ง€์ง€ ์•Š์Œ #๊ธฐํ˜ธ๋ฅผ ํ†ตํ•ด์„œ ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€์—์„œ ๋‚ด์šฉ์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉ ๊ธฐํƒ€ ํŠน๋ณ„ํ•œ ์ฒ˜๋ฆฌ ์—†์ด๋„ ๋ฐ”๋กœ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ๋ถ„ํ•ด์„œ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ ํ•˜๋‚˜์˜ ๋„๋ฉ”์ธ์„ ์‚ฌ์šฉํ•ด์„œ ์š”์ฒญ๋งŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฒ€์ƒ‰ ์ตœ์ ํ™”์˜ ๋‹จ์ ์ด ์žˆ์Œ ํ•ด์‹œ๋ชจ๋“œ์—์„  ์ƒˆ๋กœ๊ณ ์นจ์‹œ ์„œ๋ฒ„์— ์ „์†ก๋˜๋Š” ์š”์ฒญ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— 404 Error ๋ฐฉ์ง€ ๊ฐ€๋Šฅ HTML5๋ชจ๋“œ, History ๋ชจ๋“œ(domain/~) ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”์˜ ์žฅ์  ๊ธฐ๋ณธ์ ์ธ ์ฃผ์†Œ๋ฅผ ๋ฐ”๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์†Œ์— ๋งž๊ฒŒ ๋งค๋ฒˆ ์„œ๋ฒ„๋กœ ์š”์ฒญ์ด ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์Œ SPA๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด index.html ๋งŒ์œผ๋กœ ๋‚ด์šฉ์ด ๋™์ž‘ํ• 

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

[Vue] Store/Router

๐Ÿ“šTIL day38 Vuex Store store๋Š” ์ „ํ˜€ ๊ด€๋ จ ์—†๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค ์‚ฌ์ด์—์„œ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ ์šฉ ์ƒํƒœ๊ด€๋ฆฌ ํŒจํ„ด : state(์ค‘์•™์ง‘์ค‘ํ™”๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ์ดํ„ฐ), view(ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ๋‚ด์šฉ), action(๋ฐ˜์‘์„ฑ ๋ฐ์ดํ„ฐ๋“ค์„ ๋™์ž‘) createStore๋ฅผ ํ†ตํ•ด์„œ store ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ด์ค€ ์ดํ›„ use๋ฅผ ํ†ตํ•ด์„œ ์—ฐ๊ฒฐ store๊ธฐ๋ณธ ๊ตฌ์„ฑ : state(๋ฐ์ดํ„ฐ), getters(๊ณ„์‚ฐ๋œ ๋ฐ์ดํ„ฐ), mutations(๋ฐ์ดํ„ฐ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ), actions(๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์™ธ์˜ ๋กœ์ง๋“ค) state : vuex์—์„œ๋Š” ๊ด€๋ฆฌํ•˜๊ณ  ์‚ฌ์šฉํ•  ๋ฐ์ดํ„ฐ๋ฅผ ์ƒํƒœ(state)๋ผ๊ณ  ๋ถ€๋ฅด๋ฉฐ ์ค‘์•™์— ์ง‘์ค‘๋˜์–ด์žˆ๋Š” ์ €์žฅ์†Œ ์—ญํ• ๋กœ ๋ฐ์ดํ„ฐ ์ˆ˜์ •์— ์šฉ์ด state๋Š” ์ง์ ‘ ์ ‘๊ทผํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ this.$store๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅ <

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

[Vue] ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ์‹

๐Ÿ“šTIL day38 Teleport provide-inject Vuex(store) ๐ŸŽจ2021. 10. 05 ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์ด ์ ์  ํ™•์žฅ๋˜๊ณ  ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. props์—์„œ provide-inject, store๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๋ฐฉ์‹์˜ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์„ ์ž˜ ๊ณต๋ถ€ํ•˜๊ณ  ์ฐจ์ด์ ์„ ํŒŒ์•…ํ•ด์„œ ๋‚ด๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์ ํ•ฉํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค! ๋‚ด์ผ๋„ vue๊ฐ•์˜ ๋“ฃ๊ธฐ !! !! ! !

2021๋…„ 10์›” 5์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] Component

๐Ÿ“šTIL day38 $translate {} this.$http ํ†ตํ•ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Œ $๋Š” ์ „์—ญํ™”๋œ ๊ธฐ๋Šฅ์— ๋ถ™์–ด์ ธ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€๋ถ€๋ถ„ ๋ถ™์—ฌ์„œ ์‚ฌ์šฉํ•˜์ง€๋งŒ ์ƒ๋žต๋„ ๊ฐ€๋Šฅ--> Plugin ๋งŒ๋“ค๊ธฐ mixin vue ๋น„๋™๊ธฐ <!--+ created, mounted๋ผ๋Š” ์‚ฌ์ดํด์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋น„๋™๊ธฐ๋ฅผ ๋ณด์žฅํ•˜์ง€ ์•Š์Œ async, await๋ฅผ ๋ถ™์ด๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ ๋ฉ”์†Œ๋“œ๋ฅผ ๋งŒ๋“  ์ดํ›„ create

2021๋…„ 10์›” 5์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] Component

๐Ÿ“šTIL day36 Webpack Eslint ์ปดํฌ๋„ŒํŠธ Props Non-Prop ์ปดํฌ๋„ŒํŠธ ์ปค์Šคํ…€ ์ด๋ฒคํŠธ Slot ๋™์  ์ปดํฌ๋„ŒํŠธ</spa

2021๋…„ 10์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ•

๐Ÿ“šTIL day35 npm nvm npx day36 Components SFC(Single File Components) Parcel Webpack <span style="background-color

2021๋…„ 10์›” 2์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] Form-binding

๐Ÿ“šTIL day36 v-model ์ปดํฌ๋„ŒํŠธ props & emit $event ๐ŸŽจ2021. 10. 01 ํผ ์ž…๋ ฅ์„ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์› ๋‹ค. html์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ formํƒœ๊ทธ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•ด๋ณด์ง€ ๋ชปํ–ˆ๋Š”๋ฐ form์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณต๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ์•Œ๊ฒŒ๋๋‹ค. ๋‚ด๊ฐ€ ์•Œ๊ณ ์žˆ๋˜ ๊ฒƒ์€ input ์ •๋„์˜€๋Š”๋ฐ ใ…Žใ…Ž.. ์ƒ๊ฐ๋ณด๋‹ค ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ๋„ ์•Œ๊ฒŒ๋๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ์‹์ด ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ ์‹ค์Šตํ•ด๋ณธ ๊ฒƒ๋“ค์„ ๋‹ค์‹œ ์ฝ”๋”ฉํ•ด๋ณด๋ฉฐ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค! ๊ฐ•์˜๋ฅผ ๋งŽ์ด ๋“ฃ์ง€ ๋ชปํ•ด์„œ

2021๋…„ 10์›” 2์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] EventHandler

๐Ÿ“šTIL day34 list rendering ์ƒํƒœ์œ ์ง€ : ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ–ˆ์„ ๋•Œ ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋ถ€ ๋‹ค DOM์— ๋ฐ˜์˜ํ•˜์—ฌ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ตœ์ ํ™” ๊ณผ์ •์„ ๊ฑฐ์นจ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : ํ•œ์ชฝ ๋ฐฉํ–ฅ์—์„œ๋งŒ ๋ฐ์ดํ„ฐ๊ฐ€ ์—ฐ๊ฒฐ๋˜๋ฉฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ๋งŒ ๊ฐ€๋Šฅ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : v-model์„ ์‚ฌ์šฉํ•˜์—ฌ ์–‘์ชฝ ๋ฐฉํ–ฅ์—์„œ ๋ฐ์ดํ„ฐ ์—ฐ๊ฒฐ v-for v-for : ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ฐ˜๋ณตํ•˜์—ฌ ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ๋ฅผ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Œ ํ˜„์žฌ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ index ๊ฐ’์„ ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ v-for๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜๋ณตํ•˜๋ฉด value๊ฐ’์ด ์ถœ๋ ฅ๋จ ๊ฐ์ฒด ์ถœ๋ ฅ์‹œ ๋‘๋ฒˆ์งธ์ธ์ž๋กœ key, ์„ธ๋ฒˆ์งธ ์ธ์ž๋กœ value๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ ๊ฐ์ฒด๋ฐ์ดํ„ฐ๋Š” ๋ฐ˜๋ณต์‹œ key, value์˜ ์ˆœ์„œ๋ฅผ

2021๋…„ 9์›” 30์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[TIL]๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 0929

๐Ÿ“šTIL day33 Computed ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์ž‘ํ•  ๋•Œ ํ‘œํ˜„์‹์ด๋‚˜ methods๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์ค‘๋ณต์‹คํ–‰๋  ๋•Œ ์ด๋ฏธ ๊ฒฐ๊ณผ๊ฐ’์„ ์•Œ๊ณ  ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์—ฌ๋Ÿฌ๋ฒˆ ๊ณ„์‚ฐํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์„ฑ์ด ๋–จ์–ด์ง computed: ์บ์‹ฑ๊ธฐ๋Šฅ์ด ์žˆ์–ด ์ฒซ๋ฒˆ์งธ ์ถœ๋ ฅ์‹œ ๊ณ„์‚ฐ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑํ–ˆ๋‹ค ์ดํ›„ ์ถœ๋ ฅ์‹œ ์บ์‹ฑ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ์ถœ๋ ฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ๊ฒƒ์„ ๋ฐ˜๋ณต์ ์œผ๋กœ ์ถœ๋ ฅํ•  ๋•Œ ์œ ์šฉ ์žฅ์  : ์˜์กดํ•˜๋Š” ๋ฐ์ดํ„ฐ์—๋งŒ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ทธ ์™ธ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ ๋‹ค์‹œ ์—ฐ์‚ฐ๋˜๋Š” ๋ถ€์ž‘์šฉ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ด computed๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ํ• ๋‹นํ•  ์ˆ˜ ์—†์Œ computed ์•ˆ์—์„œ ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ get, set์œผ๋กœ ๊ตฌ๋ถ„ํ•ด์„œ ๊ฐ’์„ ํ• ๋‹นํ•˜๊ฑฐ๋‚˜ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅ watch watch : ๊ฐ์‹œํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€

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

[TIL]๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ 0928

๐Ÿ“šTIL day34 vue ์‹œ์ž‘ํ•˜๊ธฐ vue.js๋Š” html๊ตฌ์กฐ๋ฅผ ๋ฐ์ดํ„ฐ ์˜ต์…˜์„ ํ†ตํ•ด์„œ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Œ ๋ฐ˜์‘ํ˜• ๋ฐ์ดํ„ฐ, ๋ฐ˜์‘์„ฑ : ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ๋ฐ˜์‘ํ•ด์„œ ์—ฐ๊ฒฐ๋˜์–ด์žˆ๋Š” ํ™”๋ฉด๋„ ๊ฐ™์ด ๋ฐ”๋€œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜&์ธ์Šคํ„ด์Šค ์ƒ์„ฑ createApp : vue์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋งค์†Œ๋“œ mount : ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ html์š”์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๋งค์†Œ๋“œ vue.js application : vueApplication. instance Object ์ „์—ญ API : ์ „์ฒด ์˜์—ญ์—์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์œผ๋กœ cdn ๋นŒ๋“œ๋ฅผ ์„ค์น˜ํ•˜๋Š” ๊ฒฝ์šฐ์—” Vue ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด, npm์„ค์น˜์‹œ vue๋ฅผ importํ•˜์—ฌ ์‚ฌ์šฉ ๊ฐ€๋Šฅ vueModel : app.mount๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ๋ฐ˜ํ™˜๋˜๋Š” ins

2021๋…„ 9์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท