profile
๐Ÿ„ ์„ฑ์žฅํ˜• ๊ดด๋ฌผ..
post-thumbnail

์†”๋“œ์•„์›ƒ ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง ์†๋„๊ฐœ์„ 

์†”๋“œ์•„์›ƒ ์ƒํ’ˆ์ƒ์„ธ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง ์†๋„๊ฐœ์„  ๊ด€๋ จ ๋‚ด์šฉ์„ ์ž‘์„ฑ

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

React Context API ์˜์กด์„ฑ ์ฃผ์ž…์— ๊ด€ํ•˜์—ฌ..

๋ฆฌ์•กํŠธ ๊ณต์‹ ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.๋”ฐ๋ผ์„œ props drilling์„ ๋ฐฉ์ง€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.vue๋ž‘ ๋น„๊ตํ•ด๋ณธ๋‹ค๋ฉด event bus์™€ ๋น„์Šทํ•œ ๋ชฉ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.๊ธฐ๋ณธ์ ์œผ๋กœ React.createContext ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•˜์—ฌ context ๊ฐ์ฒด๋ฅผ

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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ํƒ€์ž…์ถ”๋ก ๐Ÿค– (type inference)

๊ธฐ๋ณธ์ ์œผ๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ Language server์— ์˜ํ•ด ํƒ€์ž…์ด ์ถ”๋ก ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹คํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ๊ธฐ๋ณธ๊ฐ’, ๋ฐ˜ํ™˜๊ฐ’ ์ง€์ •๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•ด์„œ ๊ฐ’์„ ํ• ๋‹น ํ•  ๋•Œ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด test ๋ณ€์ˆ˜์—์„œ ์–ด๋–ค ํƒ€์ž…์„ return ํ•ด์ฃผ๋Š”์ง€ ์ž๋™์œผ๋กœ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.test(123) ์‹คํ–‰์‹œ ํƒ€

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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๋ณ€์ˆ˜ - ์ œ๋„ค๋ฆญ ํƒ€์ž…

๊ธฐ์กด์— ๊ณ ์ •๋œ ํƒ€์ž…์„ ๋„˜์–ด์œ ๋‹ˆ์˜จ ํƒ€์ž…์„ ๋„˜์–ดโ€ฆํ•จ์ˆ˜ ์˜ค๋ฒ„๋กœ๋”ฉ์„ ๋„˜์–ดโ€ฆ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๊ตฌ์ถ•ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒ€์ž… ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ์ œ๋„ค๋ฆญ ํƒ€์ž…์„ ์‚ฌ์šฉํ•ด๋ณด์ž!์ผ๋ฐ˜์ ์ธ ํƒ€์ž…๊ณผ ๋‹ค๋ฅด๊ฒŒ ํ•จ์ˆ˜์˜ ์„ ์–ธ ์‹œ์ ์ด ์•„๋‹ˆ๋ผ ์‚ฌ์šฉ ์‹œ์ ์— ํƒ€์ž…์„ ์„ ์–ธํ•ด์ค๋‹ˆ๋‹ค.T๋Š” ์ œ๋„ค๋ฆญ ํƒ€์ž… ํŒŒ๋ผ๋ฏธ

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

์ฒ˜์Œ ๋งŒ๋‚œ react-query (๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ) ๊ฐœ๋… ์ •๋ฆฌ

react-query4๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ž‘์„ฑ๋œ ๊ธ€์ด๊ธฐ ๋•Œ๋ฌธ์— 5๊ฐ€ ๋‚˜์˜ค๋ฉด์„œ ์—…๋ฐ์ดํŠธ ๋œ ๋ถ€๋ถ„์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๋Š” ๊ฒŒ ์ œ์ผ ์ข‹์Šต๋‹ˆ๋‹ค!๊ฐœ๋…๋งŒ ๋น ๋ฅด๊ฒŒ ์‚ดํŽด๋ณด๋Š” ์ชฝ์œผ๋กœ ๊ฐ€๋ณ๊ฒŒ ์ฝ์–ด์ฃผ์‹œ๋ฉด ๋ ๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค :) React ํ™˜๊ฒฝ์—์„œ ๋น„๋™๊ธฐ Query ๊ณผ์ •์„ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌQuery๊ฐ€

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

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

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

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

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

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

2021๋…„ 6์›” 23์ผ
ยท
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

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๊ฐœ์˜ ๋Œ“๊ธ€
ยท