profile
ใ…Žใ…Ž

์ฃผ๋ง ์„œ๋น„์Šค ์›Œ์ปค ์ •๋ฆฌ

mock service worker(msw) ์“ฐ๋ฉด์„œ ๋Œ€๋žต์ ์œผ๋กœ ์•Œ๊ณ  ์žˆ๋Š” ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ๋ณด๊ธฐ ์œ„ํ•จ์„ค๋ช…์€ mdn https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_APIํ”„๋ก์‹œ ์„œ๋ฒ„ ์—ญํ™œ๋„คํŠธ์›Œํฌ๋ฅผ ๊ฐ€๋กœ์ฑ„์„œ

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

ํ”„๋ก ํŠธ์—”๋“œ ์ƒํƒœ์— ๊ด€ํ•œ ์ •๋ฆฌ ๊ธ€

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ์งœ์ฆ๋‚˜๋Š”๊ฑด ์ƒํƒœ๊ด€๋ฆฌ ๋ถ€๋ถ„์ด๋‹ค.๋ช‡ ๊ฐ€์ง€ ์ข‹์€ ๊ธ€์ด ๋งŽ์•„์„œ ์š”์•ฝ๊ฒธ ์ •๋ฆฌ๋ฅผ ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค ์ƒ๊ฐ์ด ๋“ ๋‹ค.https://leerob.io/blog/react-state-management๋ฆฌ์•กํŠธ ์ƒํƒœ ๊ด€๋ฆฌ์˜ ์—ญ์‚ฌ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธ€์ƒํƒœ์˜ ๋ถ„๋ฅ˜๋ฒ•์„ ์—ฌ๊ธฐ์„œ

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

idxgen ํ›„๊ธฐ

node์—์„œ ui ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋งŒ๋“ค๋•Œ ์ผ์ผํžˆ index.js ๋งŒ๋“ค๊ธฐ๊ฐ€ ์—ฌ๊ฐ„ ๊ท€์ฐฎ์€๊ฒŒ ์•„๋‹ˆ๋ผ์„œ, ์ž๋™์œผ๋กœ indexํŒŒ์ผ ๋งŒ๋“œ๋Š” ๊ฑธ ์ฐพ์•„๋ดค๋‹ค.์ผ๋‹จ idxgen์€ ๋ณ„๋กœ์ธ๊ฑธ๋กœํ˜„์žฌ ๋‚ด๊ฐ€ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ํด๋”๊ตฌ์กฐ์— ๋งž๊ฒŒ ์…‹ํŒ…ํ•˜๊ณ  ์‹ถ์€๋ฐ idxgen์—์„  ์„ค์ •ํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค๋‹ค.๋งŒ์•ฝ ๋””๋ ‰ํ† ๋ฆฌ

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

์˜ค๋Š˜์˜ ๋ป˜: ui ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋งŒ๋“ค ๋•Œ ์‹ ๊ฒฝ์จ์•ผํ•  ๊ฒƒ(์œ ๋‹ˆ๋ฒ„์…œ)

docuemnt์™€ navigator ๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ € ๊ฐ์ฒด ๋ฐฉ์ง€๋ฅผ ์ž˜ ํ•ด์•ผ๋จ์™œ๋ƒํ•˜๋ฉด ์„œ๋ฒ„์—์„  ์•„๋ž˜์™€ ๊ฐ™์Œ์•„๋ž˜ ํ›…์„ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•จ

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

typescript ํŒ - ์„œ๋กœ์†Œ ์œ ๋‹ˆ์˜จ ๋งŒ๋“ค๊ธฐ

์š”๋Ÿฌ๋ฉด ์•„๋ž˜๊ฐ™์€ ํƒ€์ž…์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.์ข€ ๋” ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์€ ๋‚˜์ค‘์— ๊ณ ๋ฏผํ•˜๋ฉด ์ข‹์„ ๋“ฏ

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

ssr์™€ server component์˜ ์ฐจ์ด์  ์กฐ์‚ฌ

ํด๋ผ์ด์–ธํŠธ JS ์•ฑ์˜ SSR์€ ํ™˜์ƒ์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„์—์„œ JS๋ฅผ HTML๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ์ด HTML์„ ํด๋ผ์ด์–ธํŠธ์— ์ œ๊ณตํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘๋˜๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ ์œ ์ €๊ฐ€ ์‹ค์ œ๋กœ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ, ์ฆ‰ ํ•˜์ด๋“œ๋ ˆ์ด์…˜์ด ๋˜์•ผ์ง€๋งŒ(hydration) ๋‹น์‹ ์˜ JS๊ฐ€

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

setTimeout๊ณผ setInterval์„ ์ด์šฉํ•œ ํ˜ธ์ถœ ์Šค์ผ€์ค„๋ง, arrow function - ์ •๋ฆฌ

์ผ์ดˆ ๊ฐ„๊ฒฉ์œผ๋กœ ์ˆซ์ž ์ถœ๋ ฅํ•˜๊ธฐ from์— ๋ช…์‹œํ•œ ์ˆซ์ž๋ถ€ํ„ฐ to์— ๋ช…์‹œํ•œ ์ˆซ์ž๊นŒ์ง€ ์ถœ๋ ฅํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ printNumbers(from, to)๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ์ˆซ์ž๋Š” ์ผ ์ดˆ ๊ฐ„๊ฒฉ์œผ๋กœ ์ถœ๋ ฅ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“œ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. 1.setInterva

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

function name์— ๊ด€ํ•ด์„œ ๊ฟ€์žผ ํฌ์ธํŠธ

function.name์€ ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ๋‚˜ํƒ€๋‚ด๋Š” ํ”„๋กœํผํ‹ฐ์ด๋‹ค.es6์˜ ์ŠคํŽ™์ด๋‹คdescriptor๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ์ฝ๊ธฐ ์ „์šฉ์ด๊ณ  ์—ด๊ฑฐ๋˜์ง€ ์•Š๋Š”๋‹ค.๋‹ค๋งŒ ์„ค์ •์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์–ด์„œ, ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.Function.prototype์˜ name์€ Symbol.hasIn

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

React Hook Form VS Formik - ์ •๋ฆฌ

https://blog.bitsrc.io/react-hook-form-vs-formik-form-builder-library-for-react-23ed559fdae ์ •๋ฆฌํ•จ๋‚˜๋งŒ ๋ถˆํŽธํ•˜๋‹ค๊ณ  ๋Š๋ผ๋Š”๊ฒŒ ์•„๋‹ˆ์˜€์Œ.ํผ์˜ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ๋งŽ์ด ํ•„์š”ํ•œ๊ฑฐ์˜€์Œ์ƒ๊ฐ๋ณด๋‹ค ์œ ์šฉํ•œ ํŒจ

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

๋ช‡ ๊ฐ€์ง€ ์œ ํšจํ•œ ํผ ํŒจํ„ด

์ œ์–ด ๋œ ์ž…๋ ฅ์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ชจ๋“  ์ž…๋ ฅ ๊ฐ’์„ ์ƒํƒœ์— ์ €์žฅํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ชจ๋“  ๊ฐ’ ๋ณ€๊ฒฝ์— ๋Œ€ํ•œ ํŠน์ • ์กฐ๊ฑด์„ ํ‰๊ฐ€ํ•˜๊ณ  ๊ทธ์— ๋”ฐ๋ผ ๋ฌด์–ธ๊ฐ€๋ฅผ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ „์—๋Š” ๋ฒ„ํŠผ์„ ๋น„ํ™œ์„ฑํ™”ํ•˜๊ธฐ ๋งŒํ–ˆ์Šต๋‹ˆ๋‹ค.

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

Why not field-level validations? - ์ •๋ฆฌ

https://goshakkk.name/y-no-field-level-validations/ ์ •๋ฆฌํ•จ์™œ ํ•„๋“œ ์ˆ˜์ค€์˜ ๊ฒ€์ฆ์„ ํ•˜์ง€ ์•Š๋Š”๊ฐ€?์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋ฅผ ํ•˜์ž.๋งŒ์•ฝ ๋ฆฌ์•กํŠธ์—์„œ ์œ ํšจ์„ฑ ๊ฒ€์ฆ์„ ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ๋ณดํ†ต ๊ทธ๋Ÿด ๋–„ <Input isRequried />

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

Transitioning from uncontrolled inputs to controlled - ์ •๋ฆฌ

https://goshakkk.name/turn-uncontrolled-into-controlled/ ์ •๋ฆฌ๋น„์ œ์–ด ํผ์œผ๋กœ ์‹œ์ž‘ํ–ˆ์–ด๋„ ๊ดœ์ฐฎ๋‹ค. ๋งŒ์•ฝ disabled submit, ์ฆ‰๊ฐ์ ์ธ ๊ฒ€์ฆ์ด ํ•„์š”ํ•ด์กŒ์œผ๋ฉด, ๋ณ€๊ฒฝํ•˜๋ฉด ๋œ๋‹ค.์ˆœ์„œ๋Š” ๊ฐ„๋‹จํ•˜๋‹ค. 1\. ๋ชจ๋“  ํผ ์ œ์–ด

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

Controlled and uncontrolled form inputs in React don't have to be complicated - ์š”์•ฝ

๋งŽ์€ ๊ธ€๋“ค์—์„œ setState vs. ref์— ์‚ฌ์šฉ์—๋Œ€ํ•œ ๋ฐ˜๋Œ€๋˜๋Š” ์ฃผ์žฅ๋“ค์ด ์žˆ์–ด์„œ ์–ด๋–ป๊ฒŸ์ด ์˜ณ์€ ๋ฐฉ๋ฒ•์ธ์ง€ ์„ ํƒํ•˜๊ธฐ ํž˜๋“ค๊ฒŒ ํ•œ๋‹ค.๋‘ ๋ฐฉ์‹์€ ์žฅ์ ์ด ์žˆ๋‹ค. ๊ฐ„๋‹จํ•œ ํผ์„ ๋งŒ๋“ค ๋•Œ๋Š” ๋น„์ œ์–ด๋„ ์œ ์šฉํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์ œ์–ด ๋ฐฉ์‹์˜ ์žฅ์  ๋˜ํ•œ ์žˆ๋‹ค.๋น„์ œ์–ด๋Š” pull๋ฐฉ์‹์œผ๋กœ ํ•„์š”ํ•  ๋•Œ ๋ฐ

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํ„ฐ๋”” : ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์ž๋ฃŒํ˜• ์ •๋ฆฌ

๋ช…์„ธ์˜ type conversion ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด๋‹ค. > ECMAScript ์–ธ์–ด๋Š” ํ•„์š”์— ๋”ฐ๋ผ* ์ž๋™ ์œ ํ˜• ๋ณ€ํ™˜์„ ์•”๋ฌต์ ์œผ๋กœ ์ˆ˜ํ–‰* ํ•œ๋‹ค. ํŠน์ • ๊ตฌ์กฐ์˜ ์˜๋ฏธ๋ก ์„ ๋ช…ํ™•ํžˆ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ผ๋ จ์˜ ๋ณ€ํ™˜ ์ถ”์ƒ์  ์—ฐ์‚ฐ์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•˜๋‹ค. ๋ณ€ํ™˜ ์ถ”์ƒ ์—ฐ์‚ฐ์€ ํด๋ฆฌ๋ชจํ”ฝ(๋‹ค

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

A Comprehensive guide to design-system(์ •๋ฆฌ๊ธ€)

https://www.invisionapp.com/inside-design/guide-to-design-systems/ ๊ธ€์„ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.๋””์ž์ธ ์‹œ์Šคํ…œ์ด ๋ฌด์—‡์ด๊ณ , ์–ด๋–ป๊ฒŒ ๊ตฌ์ถ•ํ–ˆ๋Š”์ง€ ์„ค๋ช…ํ•˜๊ณ  ๊ธฐ์—…๋“ค์˜ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด๋Š” ๊ธ€๋””์ž์ธ ์‹œ์Šคํ…œ์€ ๋ฐ˜๋ณต ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์˜

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

์›์ž ๋””์ž์ธ ์ดํ•ดํ•˜๊ธฐ: ๋ถ„์ž์™€ ์œ ๊ธฐ์ฒด (์ •๋ฆฌ๊ธ€)

https://www.futurelearn.com/info/blog/atomic-design-molecules-organisms ๊ธ€์„ ์ •๋ฆฌํ•จ์•„ํ† ๋ฏน ๋””์ž์ธ์€ ๋‚˜๋ฆ„ ์ž˜ ์ž‘๋™๋จ. ์ธํ„ฐํŽ˜์ด์Šค์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๊ตฌ์ถ•, ๋ชจ๋“ˆ์‹ ์‹œ์Šคํ…œ์„ ์ „ํ™˜ํ•˜์—ฌ ๋””์ž์ธ ์–ธ์–ด๋ฅผ ๋ฐœ์ „์‹œํ‚ค๋Š” ๋ฐ

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

Atomic CSS-in-JS ๊ธ€ ์ •๋ฆฌ

๋‹ค์Œ๊ธ€์„ ์ •๋ฆฌํ•จ https://sebastienlorber.com/atomic-css-in-js ๊ฐœ์š”๋งŒ ๋ฒˆ์—ญ ์ตœ๊ทผ ํŽ˜์ด์Šค๋ถ๊ณผ ํŠธ์œ„ํ„ฐ์˜ ํ”„๋กœ๋•์…˜ ๋ฐฐํฌ๋ฌผ๋“ค์„ ๋ณด๋ฉด, atmoic CSS-in-JS๋ผ๋Š” ์ƒˆ๋กœ์šด ํŠธ๋žœ๋“œ๊ฐ€ ์ฒœ์ฒœํžˆ ์„ฑ์žฅํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ด ํฌ์ŠคํŠธ์—์„ , a

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

How fast should your UI animations be? ์š”์•ฝ

https://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/ ๋ฅผ ์š”์•ฝํ•จ200ms๊ฐ€ ์ตœ์ƒ์˜ ํƒ€์ด๋ฐ์ด๋ผ๊ณ  ์—ฌ๊ฒจ์ง€์ง€๋งŒ, ์‚ฌ์‹ค ๊ทธ๋ ‡๊ฒŒ ๋‹จ์ˆœํ•˜์ง€ ์•Š๋‹ค.ํƒ€์ด๋ฐ์€ ์ข€ ๋” ๋ณต์žกํ•˜๋‹ค.200ms ~ 500ms๋Š” ์ธ

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

UI ๋””์ž์ธ ๊ฒฝํ—˜์ƒ ๋ฒ•์น™ ์ •๋ฆฌ

https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444 ๋ฅผ ์ •๋ฆฌ๋‹จ์ˆœํžˆ ๋ฒ•์น™์€ ์•„๋‹ˆ๊ณ  ๊ฒฝํ—˜์ƒ ๋””์ž์ธ ์ž‘์—…์— ๋„์›€์ด ๋ ๋งŒํ•œ ๊ทœ์น™๋“ค์„ ์ •๋ฆฌํ–ˆ๋‹ค.์ต์ˆ™ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋ฐ€๋„๋Š” ํ™”๋ฉด์ด๋‚˜ ppi 1์ธ์น˜ ๋‹น ํ”ฝ์…€ ์ˆ˜

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

โš›๏ธ ๐Ÿš€ ๋ฆฌ์•กํŠธ-์Šคํƒœํ‹ฑ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. - ๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•œ ์ง„๋ณด์ ์ธ ์ •์ -์‚ฌ์ดํŠธ ํ”„๋ ˆ์ž„์›Œํฌ!

์ง€๋‚œ ์—…๋ฐ์ดํŠธ๋Š” 2018๋…„ 7์›” 26์ผ์ด๋‹ค. Nozzlie.io์—์„ , ์„ฑ๋Šฅ๊ณผ ์œ ์ €/๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ๋งค์šฐ ์ง„์ง€ํ•˜๊ฒŒ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค. ์„ธ๊ณ„์ ์ธ ๋ฌธ์ œ๋ฅผ ํ‘ผ๋‹ค๊ณ  ์ฃผ์žฅํ•˜๋Š” ๋‹ค๋ฅธ ์ •์  ์‚ฌ์ดํŠธ ํˆด๋“ค์„ ์‚ฌ์šฉํ•ด์„œ ๋ช‡ ํ†ค์˜ ์‚ฌ์ดํŠธ๋“ค์„ ์ถœ์‹œํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์•„์ง๋„ ์šฐ๋ฆฌ์˜ ๋„“์€ ๊ฟˆ์„ ๋งŒ

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