profile
๐Ÿ˜Ž

Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - Age of Vue.js ์™„๊ฐ• ํ›„๊ธฐ

์ฒ˜์Œ์— ์ดˆ๊ธ‰์ž ๋Œ€์ƒ์ด ์•„๋‹Œ ์ฑ…์œผ๋กœ ๋จผ์ € ์‹œ์ž‘ํ•ด์„œ ๊ทธ๋Ÿฐ์ง€ ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ๋„ ์ข€ ๊ฑฑ์ •๋์Œ ใ…œ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋„ ์•„์ง ์ž˜ ๋ชปํ•˜๋Š”๋ฐ ์ดํ•ด๊ฐ€ ์ž˜ ๋ ๊นŒ ์—„์ฒญ ๊ฑฑ์ •ํ–ˆ์—ˆ๋‹ค์•ˆ๊ทธ๋ž˜๋„ ์‚ฌ์„œ ๊ฑฑ์ •ํ•˜๋Š” ํŽธ์ด๋ผใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ๊ทธ๋ž˜๋„ ๊ฐ•์˜ ํ•˜๋‚˜ํ•˜๋‚˜ ๋ณด๋ฉด์„œ ์ฝ”๋“œ ๋”ฐ๋ผ์น˜๊ณ  ํ•˜๋‹ˆ๊นŒ ๊ฝค ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์› ์Œ๊ฐ•์˜๊ฐ€ ํŒŒํŠธ๋ณ„

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

220504

<figure>ํƒœ๊ทธ: ์‚ฝํ™”, ๋‹ค์ด์–ด๊ทธ๋žจ, ์‚ฌ์ง„ ๋“ฑ ๋ฌธ์„œ์˜ ์ฃผ์š” ํ๋ฆ„๊ณผ๋Š” ๋…๋ฆฝ์ ์ธ ์ฝ˜ํ…ํŠธ๋ฅผ ์ •์˜. ๋ฌธ์„œ์˜ ๋‚ด์šฉ๊ณผ๋Š” ์—ฐ๊ด€์„ฑ์„ ๊ฐ€์ง€๋‚˜ ์ฝ˜ํ…์ธ ์˜ ์œ„์น˜๊ฐ€ ๋ฌธ์„œ์˜ ์ฃผ์š” ํ๋ฆ„๊ณผ๋Š” ๋…๋ฆฝ์ ์ด์–ด์„œ ์ œ๊ฑฐํ•ด๋„ ๋ฌธ์„œ์˜ ํ๋ฆ„์— ์˜ํ–ฅ์„ ์ฃผ์–ด์„œ๋Š” ์•ˆ๋จ. ๊ทธ๋ฆผ ๋“ฑ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ์ด์ง€๋งŒ

2022๋…„ 5์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“220502

๋ฒจ๋กœ๊ทธ์— ์˜ฌ๋ฆด๊ฑด ๋งŽ์€๋ฐ ์ •์‹ ์ด ์—†์–ด์„œ ์ •๋ฆฌ๋ฅผ ๋ชปํ•˜๊ณ  ์žˆ์Œ...์ผ๋‹จ ์œ ํŠœ๋ธŒ api๋กœ ๋™์˜์ƒ ์ฒจ๋ถ€ํ•˜๋Š”๊ฑฐ๋ž‘์Šคํฌ๋กค์‹œ ์˜์—ญ๋ณ„๋กœ ํ™œ์„ฑํ™” ๋˜๋Š” ํƒญ์ด๋ž‘ ๋˜ ๋ญ์ง€ ๋ทฐ ๊ณต๋ถ€ํ•œ๊ฑฐ๋ž‘.. ์•”ํŠผ ์ •๋ฆฌํ•ด์„œ ์˜ฌ๋ ค์•ผํ•จ ๊ทธ๋ž˜๋„ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธํ•˜๋ฉด์„œ ์ƒˆ๋กœ ํ•ด๋ณธ๊ฒƒ๋„ ๋งŽ๊ณ  ์•Œ๊ฒŒ๋œ๊ฒƒ๋„ ๋งŽ๋‹ค fullpage.j

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

ํ•œ ๊ถŒ์œผ๋กœ ๋ฐฐ์šฐ๋Š” Vue.js 3 (1์ฃผ์ฐจ_1์žฅ~2์žฅ)

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด์ž ํ”„๋ ˆ์ž„์›Œํฌ. MVVM(Model-View-ViewModel) ํŒจํ„ด์„ ํ‘œ๋ฐฉํ•˜๋‚˜ ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ViewModel์— ์ง‘์ค‘๋˜์–ด ์žˆ๊ณ  ๋ณ„๊ฐœ๋กœ ๋ถ€๊ฐ€์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์ œ๊ณตํ•ด ์ข…ํ•ฉ์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. Visual Studio

2022๋…„ 4์›” 16์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“220414

์š”์ฆ˜ ์ƒˆ ํ”„๋กœ์ ํŠธ ํ•˜๋Š” ์ค‘์ธ๋ฐ ์ง„์‹ฌ ๋จธ๋ฆฌ ๋‹ค ๊ตณ์–ด์„œ ํฐ์ผ์ž„๋งˆ์Œ์ด ์ฐฉ์žกํ•˜๋‹ค๐Ÿคฆโ€โ™€๏ธ๐Ÿคฆโ€โ™€๏ธ์ง„์งœ ๋ญ๋“ ์ง€ ์•ˆ์“ฐ๋ฉด ๋‹ค ๊นŒ๋จน๋Š”๊ฐ€๋ณด๋‹คํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค ํ‰์†Œ์— ์ข€ ์ฐพ์•„์„œ ์—ฐ์Šต๋„ ํ•˜๊ณ  ํด๋ก ์ฝ”๋”ฉ๋„ ์ข€ ํ•˜๊ณ  ๊ทธ๋ž˜์•ผ๊ฒ ์Œ ์ด๋ ‡๊ฒŒ ๋งจ๋‚  ํ• ์ผ๋งŒ ์ ๋ฆฝํ•˜๋Š” ์ค‘ ํ• ์ผ์ด ๋ˆ์ด์—ˆ์œผ๋ฉด ์ง„์ž‘์— ์žฌ๋ฒŒ๋๋‹ค

2022๋…„ 4์›” 14์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€

๐Ÿ“220412

vue ์ฑ… ๋ถ„์ฒ ์˜ต์…˜ ๋„ฃ์–ด์„œ ์ฃผ๋ฌธํ–ˆ๋Š”๋ฐ ๋ถ„์ฒ ์ด ์•ˆ๋˜์„œ ์˜ด...๊ทธ๋ƒฅ ์“ฐ๋ ค๊ณ  ๋ถ„์ฒ  ์ทจ์†Œํ•œ๋Œ”๋Š”๋ฐ ์ƒ๋‹ด์›์ด ์ฑ… ์ž์ฒด๋ฅผ ์ทจ์†Œํ•œ๋‹ค๋Š”๋ง์ธ์ค„ ์•Œ๊ณ  ์ทจ์†Œํ•ด๋ฒ„๋ฆด๋ป”ํ–ˆ์Œ ์ข€ ๋‹นํ™ฉ์Šค๋Ÿฝ๋‹ค ์ผ๋‹จ ์ฑ…์ด ์˜จ๊ฑฐ๋ณด๋‹ˆ๊นŒ ์ƒ๊ฐ๋ณด๋‹ค ์ข€ ๋‘๊บผ์›Œ์„œ ๋†€๋žŒ์ž˜ ํ•  ์ˆ˜ ์žˆ์„์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ... ์ผ๋‹จ ์•ˆํ•˜๋Š”๊ฑฐ๋ณด๋‹ค๋Š” ๋‚˜์„ํ…Œ

2022๋…„ 4์›” 12์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

SVG ๋‹ค๋ฃจ๊ธฐ(์ƒ‰์ƒ๋ณ€๊ฒฝ, ํฌ๊ธฐ์กฐ์ •, keyframe ์• ๋‹ˆ๋ฉ”์ด์…˜)

svg ์ด๋ฏธ์ง€ ๋‹ค๋ฃจ๊ธฐ์ƒ‰์ƒ๋ณ€๊ฒฝํฌ๊ธฐ์กฐ์ •keyframe ์• ๋‹ˆ๋ฉ”์ด์…˜ <path> ํƒœ๊ทธ์— style="fill:\_\_\_" ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, ๋” ๊ฐ„๋‹จํ•˜๊ฒŒ fill="\_\_\_" ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ svg ์ด๋ฏธ์ง€์˜ ์ƒ‰์ƒ์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค. ์ƒ‰์ƒ์€ rgbํ˜•ํƒœ, hex ๊ฐ’,

2022๋…„ 4์›” 11์ผ
ยท
3๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ฒจ๋กœ๊ทธ์— CodePen ์‚ฝ์ž…ํ•˜๊ธฐ

์ง€๋‚œ ๊ธ€์„ ์“ธ๋•Œ jsFiddle์„ ๋ณธ๋ฌธ์— ์‚ฝ์ž…ํ–ˆ์—ˆ๋Š”๋ฐ, ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํŽ˜์ด์ง€์—์„œ๋Š” ์ œ๋Œ€๋กœ ์ž‘๋™ํ–ˆ์ง€๋งŒ ์‹ค์ œ ๋ณด์—ฌ์ง€๋Š” ๋ถ€๋ถ„์—์„œ๋Š” ๋‚ด์šฉ์ด ๋ณด์ด์ง€ ์•Š์•˜๋‹ค. ๋งํฌ๋‚˜ ์‚ฝ์ž… ๋ฐฉ๋ฒ•์ด ์ž˜๋ชป๋˜์—ˆ์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค๊ณ  ์ƒ๊ฐํ•ด์„œ ์—ฌ๋Ÿฌ๋ฒˆ ์‹œ๋„ํ•ด๋ดค์ง€๋งŒ ์ž˜ ๋˜์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋ž˜์„œ ์ฐพ์•„๋ณธ ๊ฒฐ๊ณผ, ์•„๋ฌด๋ž˜๋„ jsF

2022๋…„ 4์›” 9์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

์ˆซ์ž ์นด์šดํŠธ ์• ๋‹ˆ๋ฉ”์ด์…˜

Math.floor() ์ฃผ์–ด์ง„ ์ˆซ์ž์™€ ๊ฐ™๊ฑฐ๋‚˜ ์ž‘์€ ์ •์ˆ˜ ์ค‘์—์„œ ๊ฐ€์žฅ ํฐ ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜.์†Œ์ˆ˜๋ฅผ ์“ฐ๋ฉด ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์ •์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด ์ค€๋‹ค ์ œ์ด์ฟผ๋ฆฌ ์‚ฌ์šฉํ•œ ์ˆซ์ž ์นด์šดํŒ… ์• ๋‹ˆ๋ฉ”์ด์…˜. each๋กœ ๊ฐ๊ฐ์˜ ํด๋ž˜์Šค์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ์–ด์คŒ์•„์ง ๋ฐฐ์—ด์€ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋Š”๋ฐ ์ข€ ๋” ๊ณต๋ถ€ํ•ด์•ผํ• ๋“ฏ๐Ÿ˜ค

2022๋…„ 4์›” 7์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€