profile
๐Ÿ„ ๊ฐœ๋ฐœ์ž๋กœ ์ปค๊ฐ€๋Š” ์ค‘!
post-thumbnail

Vue composition API๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž

Vue3์—์„œ ์ œ์‹œํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ์‹์˜ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ฅผ ์†Œ๊ฐœํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. (composition api) Vue2์—์„œ๋„ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๊ณ  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ์šฉ์ดํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‹ค๋ฌด์— ์ ์šฉํ•˜๋Š” ๊ฒƒ๋„ ์ƒ๊ฐ๋ณด๋‹ค๋Š” ์–ด๋ ต์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค! ๐Ÿฅณ

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

[Vue] Vuex modules ํด๋” ์ „์ฒด importํ•˜๋Š” ๋ฐฉ๋ฒ•

๊ธฐ์กด jsํŒŒ์ผ์—์„œ ํด๋” ์ž์ฒด๋ฅผ importํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Vue, React์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ index ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋ฉด ํด๋” ์•ˆ์— ๋“ค์–ด์žˆ๋Š” ํŒŒ์ผ ์ „์ฒด๋ฅผ import ํ•˜๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค! ์„ค์ • ๋ฐฉ๋ฒ•์€ import ํ•  ํด๋” ์•ˆ์— index.js๋ฅผ ๋งŒ๋“ค

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

[Vue] scss ์ถ”๊ฐ€ ๋ฐ ์ „์—ญ ์Šคํƒ€์ผ ์„ค์ •

Vue cli3 ์ด์ƒ๋ถ€ํ„ฐ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ scss ๊ด€๋ จ ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ ์ค‘๊ฐ„์— scss๋ฅผ ์ ์šฉํ•  ์ผ์ด ์ƒ๊ฒจ ํ•ด๋‹น ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค ๐Ÿ™‚์ œ์ผ ๋จผ์ € ํ•ด๋‹น package์— node-sass์™€ sass-loader๋ฅผ ์„ค์น˜ํ•ด์ค๋‹ˆ

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

4๊ฐ•.์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ

์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ์˜ ๊ฐœ์š”์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ๋‹ค๋ฅธ ์ปดํ“จํ„ฐ์— ๋ถˆ๋ฒ• ์ ‘์†ํ•˜์—ฌ ์ƒ๋Œ€๋ฐฉ ๊ตญ๊ฐ€๋‚˜ ๊ธฐ์—…, ๊ฐœ์ธ์— ์†์ƒ์„ ์ž…ํžˆ๋ ค๋Š” ํ–‰๋™๊ณผ๊ฑฐ์—๋Š” ๋„คํŠธ์›Œํฌ ํ˜น์€ ๋กœ์ปฌ ํ˜ธ์ŠคํŠธ ์ƒ์—์„œ์˜ ์ž˜๋ชป๋œ ์„ค์ •์„ ์ด์šฉํ•ด ๊ด€๋ฆฌ์ž ๊ถŒํ•œ์„ ์—…๋Š” ์ดˆ๋ณด์  ๋ฐฉ์‹์ด ๋Œ€๋‹ค์ˆ˜๊ธฐ์ˆ ์˜ ๋ฐœ์ „์— ๋”ฐ๋ผ ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ ๋ฐฉ์‹๋„ ๋‹ค์–‘

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

[Vue] ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ - ํ•„์ˆ˜

Vue ๊ณต์‹ ๋ฌธ์„œ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑํ•œ ํ•„์ˆ˜ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ์— ๋Œ€ํ•œ ๋‚ด์šฉ ์ •๋ฆฌ์ž…๋‹ˆ๋‹ค ๐Ÿ™‚์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ  ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.Style Guide - Vue.js1\. ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์€ ํ•ฉ์„ฑ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.html ํƒœ๊ทธ์˜ ๊ฒฝ์šฐ ํ•œ ๋‹จ์–ด๋กœ ํƒœ๊ทธ๊ฐ€ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ถฉ๋Œ

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

IE NodeList forEach ๋ฉ”์†Œ๋“œ ์‚ฌ์šฉ์‹œ ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

ie์—์„œ document.querySelectorAll()์„ ๋‹ด์€ ๊ฐ์ฒด์— forEach ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋…ธ์ถœ๋˜์–ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ •๋ฆฌ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด ForEach ์‚ฌ์šฉ๋ฒ•์€ Element ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ์ธ querySelectorAll์ด NodeList

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

3๊ฐ•. ์ธ์ฆ

์–ด๋–ค ์‹ค์ฒด๊ฐ€ ์ •๋ง ๊ทธ ์‹ค์ฒด๊ฐ€ ๋งž๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์‹ค์ฒด : ๋ฉ”์‹œ์ง€, ์‚ฌ์šฉ์ž, ์ถœ์ฒ˜, ์žฅ์น˜ ๋“ฑ (์ฆ‰, ์‹ค์ฒด์˜ ์ง„์‹ค์„ฑ์„ ํ™•์ธํ•˜๋Š” ๊ณผ์ •)์ˆ˜์‹ ๋œ ๋ฉ”์‹œ์ง€์— ๋Œ€ํ•œ ์ธ์ฆ๋ฉ”์‹œ์ง€์˜ ๋‚ด์šฉ์ด ์ „์†ก ๋„์ค‘ ๋ถˆ๋ฒ•์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๊ณ  ์ •ํ™•ํ•˜๊ณ  ์™„์ „ํ•˜๊ฒŒ ์ˆ˜์‹  ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๊ฒƒ๋ฉ”์‹œ์ง€์— ๋Œ€ํ•œ ๋ฌด๊ฒฐ์„ฑ

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

2๊ฐ•. ์•”ํ˜ธ์˜ ๊ฐœ๋…

์•”ํ˜ธ : ๋‘ ์‚ฌ๋žŒ์ด ์•ˆ์ „ํ•˜์ง€ ์•Š์€ ์ฑ„๋„์„ ํ†ตํ•˜์—ฌ ์ •๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ›๋”๋ผ๋„ ์ œ3์ž๋Š” ์ด ์ •๋ณด์˜ ๋‚ด์šฉ์„ ์•Œ ์ˆ˜ ์—†๋„๋ก ํ•˜๋Š” ๊ฒƒํ‰๋ฌธ : ์›๋ž˜์˜ ๋ฉ”์‹œ์ง€์•”ํ˜ธ๋ฌธ : ์ฝ”๋“œํ™”๋œ ๋ฉ”์‹œ์ง€์•”ํ˜ธํ™” : ํ‰๋ฌธ โ†’ ์•”ํ˜ธ๋ฌธ์œผ๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ณตํ˜ธํ™” : ์•”ํ˜ธ๋ฌธ โ†’ ํ‰๋ฌธ์œผ๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒํ‚ค(key) : ์•”ํ˜ธํ™”์™€ ๋ณต

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

1๊ฐ•. ์ปดํ“จํ„ฐ ๋ณด์•ˆ์˜ ๊ฐœ์š”

์ •๋ณด๋ณดํ˜ธ์˜ ๊ฐœ๋…์ •๋ณด๋ฅผ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์œ„ํ˜‘์œผ๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•œ ์ •์ฑ… ๋ฐ ๊ธฐ๋ฒ•(์ €์žฅ,์ „๋‹ฌ) (ํ—ˆ๋ฝ๋˜์ง€ ์•Š๋Š” ์ ‘๊ทผ, ์ˆ˜์ •, ํ›ผ์†, ์œ ์ถœ)์ปดํ“จํ„ฐ ๋ณด์•ˆ์˜ ๊ฐœ๋…์ •๋ณด๋ณดํ˜ธ์˜ ํ•œ ์˜์—ญ, ์ปดํ“จํŒ… ํ™˜๊ฒฝ์ด ๊ด€์—ฌ๋œ ๋ชจ๋“  ์ƒํ™ฉ์— ๋Œ€ํ•œ ์ •๋ณด ๋ณดํ˜ธ๋ฅผ ์˜๋ฏธ\*\*์ •๋ณด๋ณดํ˜ธ์˜ ํ•ต์‹ฌ๋ชฉํ‘œ๊ธฐ๋ฐ€์„ฑ๊ธฐ

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

jquery UI selectmenu ์ ‘๊ทผ์„ฑ ๊ณ ๋ ค

jquery ui ์œ„์ ฏ์„ ์‚ฌ์šฉํ•ด์„œ select box์— ๋Œ€ํ•œ ์ปค์Šคํ…€์„ ์‰ฝ๊ฒŒ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ฌ์ง€์–ด aria์™€ ๊ด€๋ จ๋œ ์›น ์ ‘๊ทผ์„ฑ๋„ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€๋˜๊ณ  ์‚ฌ์šฉ์ž์˜ ์•ก์…˜์— ๋”ฐ๋ผ ํ•ด๋‹น ๊ฐ’์ด ์ƒํ™ฉ์— ๋งž๊ฒŒ ๋ณ€๊ฒฝ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ ‘๊ทผ์„ฑ๊ณผ ๊ด€๋ จํ•ด์„œ๋„ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.๋‹จ์ ์ด๋ผ

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

[HTML5] history API ๋ธŒ๋ผ์šฐ์ € ์ด๋™

history API๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์„ธ์…˜ ๊ธฐ๋ก์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๋’ค๋กœ๊ฐ€๊ธฐ, ์•ž์œผ๋กœ ๊ฐ€๊ธฐ, ํŽ˜์ด์ง€ ์ด๋™ ๋“ฑ์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ SPA์™€ ๊ด€๋ จํ•˜์—ฌ html5์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๋ฉ”์†Œ๋“œ๋ฅผ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.ํ•ด๋‹น ๋ฉ”์†Œ๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—

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

[JavaScript] Swiper ์‚ฌ์šฉ๋ฒ• - ์Šฌ๋ผ์ด๋“œ ๊ตฌํ˜„

swiper๋Š” ์Šฌ๋ผ์ด๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋‹ค์–‘ํ•œ ๋ฉ”์†Œ๋“œ์™€ ์„ค์ •์„ ์ง€์›ํ•ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ ๋งค์šฐ ํŽธํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค ํ•˜์œ„ ๋ธŒ๋ผ์šฐ์ €(ie9)์—์„œ๋„ ๋ฌธ์ œ์—†์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ธก๋ฉด์—์„œ๋„ ๋›ฐ์–ด๋‚œ ๋ถ€๋ถ„์ด ์žˆ์Šต๋‹ˆ๋‹ค.๋˜ํ•œ ์‚ฌ์šฉ๋ฒ•๋„ ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ํƒœ

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

[JavaScript] ๋ ˆ์ด์–ด ํŒ์—… ์Šคํฌ๋กค ๋ง‰๊ธฐ

ํŒ์—…์ด ์—ด๋ฆด ๋•Œ ๋ธŒ๋ผ์šฐ์ €์˜ ์Šคํฌ๋กค์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ํ”ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ css๋ฅผ ํ™œ์šฉํ•˜์—ฌ body์— overflow:hidden์„ ์ ์šฉ ์‹œํ‚ต๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•๋„ ๊ฐ„ํŽธํ•˜๊ณ  ์Šคํƒ€์ผ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€๋งŒ ios safari์—์„œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๊ธฐ ๋•Œ

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