profile
Web Frontend Developer ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป #React #Nextjs #ApolloClient

[TIL 220120] (JS) ๋น„๋™๊ธฐ loop ๋ณ‘๋ ฌ๋กœ ์ˆœ์ฐจ ์ฒ˜๋ฆฌํ•˜๊ธฐ, (CSS) :not(), [attribute*=value] Selector, white-space pre vs pre-line vs pre-wrap

JS ๋น„๋™๊ธฐ loop ๋ณ‘๋ ฌ๋กœ ์ˆœ์ฐจ ์ฒ˜๋ฆฌํ•˜๊ธฐ css :not() https://developer.mozilla.org/en-US/docs/Web/CSS/:not :not()์€ CSS ์˜์‚ฌ ํด๋ž˜์Šค๋กœ ()์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” css ์„ ํƒ์ž์™€ ์ผ์น˜ํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ex) one, two๋ผ๋Š” className ๊ฐ–๋Š” div๋ฅผ ์ œ์™ธํ•˜๊ณ  color: gra...

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

[๋ฒ„๊ทธ] ๊ฐ„ํ—์  TypeError: fs.readFileSync is not a function ์˜ค๋ฅ˜

๋ช‡์ผ๊ฐ„ ์ด ์—๋Ÿฌ๋•Œ๋ฌธ์— ๊ณ ์ƒ์„ ํ–ˆ๋‹ค ๐Ÿ˜ญ ์™œ๋ƒํ•˜๋ฉด ํŠน์ •ํ•œ ์ƒํ™ฉ์—์„œ๋งŒ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š”๋ฐ ์ •ํ™•ํ•œ ์›์ธ์„ ๋ชจ๋ฅด๊ฒ ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์—๋Ÿฌ๋Š” ์„œ๋ฒ„์‚ฌ์ด๋“œ์—์„œ readFileSync๋กœ ํŒŒ์ผ์„ ์ฝ์„ ๋•Œ ๋ฐœ์ƒํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์„œ๋ฒ„์‚ฌ์ด๋“œ๋Š” "nodeํ™˜๊ฒฝ์ด๋‹ˆ ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š์•„์•ผ ๋˜๋Š”๊ฑฐ ์•„๋‹Œ๊ฐ€!?

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

[React] SEO ์ ์šฉํ•˜๊ธฐ (with next.js)

๐Ÿ” SEO๋ž€? SEO๋ž€ Search Engine optimization์˜ ์•ฝ์ž๋กœ ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”๋ฅผ ๋งํ•œ๋‹ค. SEO๋ฅผ ํ•˜๋Š” ๊ถ๊ทน์  ๋ชฉํ‘œ๋Š” ๊ฒ€์ƒ‰ ์—”์ง„ ๊ฒฐ๊ณผ์—์„œ ์ˆœ์œ„๋ฅผ ๋†’์ด๋Š” ๊ฒƒ์ด๋‹ค. ๋‹ค์‹œ๋งํ•ด ์›น์‚ฌ์ดํŠธ์˜ ๊ฒŒ์‹œ๊ธ€ ๋˜๋Š” ์‡ผํ•‘๋ชฐ ์ƒํ’ˆ ๋“ฑ์ด Google, Bing ๋“ฑ์˜ ๊ฒ€์ƒ‰ ๊ฒฐ

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

[CSS] ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ ์ ์šฉํ•˜๊ธฐ (styled-component์—์„œ media query ์ ์šฉ)

๋“ค์–ด๊ฐ€๋ฉฐ ํ˜„์žฌ ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ๋ฅผ ์ง์ ‘ ๋งŒ๋“œ๋Š” ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰์ค‘์ด๋‹ค. ์›๋ž˜๋Š” ๋ฐ์Šคํฌํƒ‘ ์œ ์ €๋ฅผ ํƒ€๊ฒŸ์œผ๋กœ ๋งŒ๋“ค์—ˆ์ง€๋งŒ ๋ชจ๋ฐ”์ผ์—์„œ๋„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์–ด ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ณด์•˜๋‹ค. 1. meta ํƒœ๊ทธ viewport: ์›น ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ์ž์˜

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

[TIL 220115] CSS rem๊ณผ em์˜ ์ฐจ์ด์ , WebAPI์˜ ResizeObserver๋ž€?

1. css rem๊ณผ em์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ผ๊นŒ? ์ ˆ๋Œ€๋‹จ์œ„์™€ ์ƒ๋Œ€๋‹จ์œ„ css์—์„œ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋‹จ์œ„๋Š” 2์ข…๋ฅ˜๋กœ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฒซ์งธ๋Š” ๋‹ค๋ฅธ ์š”์†Œ์— ์ƒ๋Œ€์ ์ด์ง€ ์•Š๊ณ  ๊ณ ์ •๋œ ๊ฐ’์„ ๊ฐ–๋Š” ์ ˆ๋Œ€๋‹จ์œ„๋‹ค. Ex) cm, mm, px ๋“ฑ ๋‘˜์งธ๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ ๋˜๋Š” ๊ธฐ๋ณธ

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

[TIL 220112] next.config.js rewrites()

1. next.config.js rewrites() ํŽ˜์ด์ง€ ์š”์ฒญ์ด ๋“ค์–ด์˜จ path๋ฅผ ๋‹ค๋ฅธ path๋กœ ๋งคํ•‘์‹œ์ผœ์ค€๋‹ค. ์ฆ‰ /blog ํŽ˜์ด์ง€๋ฅผ ํ™ˆ ๊ฒฝ๋กœ์ธ / ๋กœ ์„ค์ •ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด next.config.js ํŒŒ์ผ์— ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. Refs https://n

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

Mindset #1

๋ฒจ๋กœ๊ทธ์— ์•„์ง ์Šคํฌ๋žฉ ๊ธฐ๋Šฅ๊ฐ™์€๊ฑด ์—†์œผ๋‹ˆ ๊ฐœ๋ฐœ์ž ๋งˆ์ธ๋“œ๋ฅผ ๊ฐ€์ง€๊ธฐ ์œ„ํ•ด ๋„์›€๋˜๋Š” ๊ธ€๋“ค์€ ์ง์ ‘ ์จ๋†“์„ ์˜ˆ์ •์ด๋‹ค.์•Œ๊ณ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ํ™•์‹คํ•˜๊ฒŒ ์•ˆ๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์„ ๋งŒํผ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.์ „์— ๊ณต์‹๋ฌธ์„œ๋ฅผ ์œ„์ฃผ๋กœ ๊ณต๋ถ€ํ•˜๋ผ๋Š” ์œ ํŠœ๋ธŒ๋ฅผ ๋ณด๊ณ , ๊ดœํžˆ ์˜์–ด๋กœ ์จ์ง„ ๊ณต์‹๋ฌธ์„œ๋ฅผ

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

[React] useCallback์€ ์–ธ์ œ ์‚ฌ์šฉํ• ๊นŒ?

useCallback์€ ๋ฉ”๋ชจ์ด์ œ์ด์…˜๋œ ์ฝœ๋ฐฑ์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.(\* ๋ฉ”๋ชจ์ด์ œ์ด์…˜: ์ปดํ“จํ„ฐ ํ”„๋กœ๊ทธ๋žจ์ด ๋™์ผํ•œ ๊ณ„์‚ฐ์„ ๋ฐ˜๋ณตํ•ด์•ผํ• ๋•Œ, ์ด์ „์— ๊ณ„์‚ฐํ•œ ๊ฐ’์„ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•ด ๋†“์Œ์œผ๋กœ์จ ๋™์ผํ•˜๋‚˜ ๊ณ„์‚ฐ์˜ ๋ฐ˜๋ณต ์ˆ˜ํ–‰์„ ์ œ๊ฑฐํ•˜์—ฌ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์†๋„๋ฅผ ๋น ๋ฅด๊ฒŒ ํ•˜๋Š” ๊ธฐ์ˆ )์ธ๋ผ์ธ ์ฝœ๋ฐฑํ•จ์ˆ˜์ฝœ๋ฐฑํ•จ์ˆ˜์˜

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

[a11y] ์›น ํ‘œ์ค€ ๋ฐ ์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ UI๋ž€?

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

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

[TIL 220111] requestAnimationFrame(), React.useRef()

์˜ค๋Š˜์€ ๋ธ”๋กœ๊ทธ ์ฒซํ™”๋ฉด์ด ๋„ˆ๋ฌด ์‹ฌ์‹ฌํ•ด์„œ interactive developer ๊น€์ข…๋ฏผ์”จ์˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉฐ wave ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ถ”๊ฐ€ํ•ด๋ณด์•˜๋‹ค. requestAnimationFrame ํ•จ์ˆ˜๋Š” WebAPI์˜ ๋น„๋™๊ธฐ ํ•จ์ˆ˜์ด๋ฉฐ, CSS transition์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์–ด๋ ค์šด ์• ๋‹ˆ๋ฉ”

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

[CSS] text-overflow: ellipsis ๋‘์ค„ ์ด์ƒ ์ฒ˜๋ฆฌ

text ellipsis๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด ์ฐพ์•„๋ณธ์ ์ด ์ •๋ง ์—ฌ๋Ÿฌ๋ฒˆ์ธ๋ฐ ์ด์ œ๋Š” ๊ทธ๋งŒ ์ฐพ์•„๋ณด๊ณ  ์ฒ™์ฒ™ ์“ธ ๋•Œ๊ฐ€ ๋˜์ง€ ์•Š์•˜๋‚˜ ํ•ด์„œ ๊นŒ๋จน์ง€ ์•Š์œผ๋ ค๊ณ  ์ ์–ด๋‘”๋‹ค. ํ•œ์ค„์ผ๋•Œ > ์•ˆ๋…•ํ•˜์„ธ... width ๊ฐ’์„ ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค! https://developer.mozilla.org/

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

[TIL 220107] git init ์ทจ์†Œํ•˜๊ธฐ, git ์›๊ฒฉ ๋ธŒ๋žœ์น˜ ์‚ญ์ œ, package.json type ํ•„๋“œ

git init์„ ์‹ค์ˆ˜๋กœ ๋‹ค๋ฅธ ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—์„œ ํ•ด๋ฒ„๋ฆฌ๋Š” ์‹ค์ˆ˜๋ฅผ ํ–ˆ๋Š”๋ฐ, ์ด๋ฅผ ์ทจ์†Œํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ์™ธ์šฐ์ง€ ์•Š์•„ ๊นŒ๋จน์ง€ ์•Š์œผ๋ ค๊ณ  ์จ๋†“์œผ๋ ค๊ณ  ํ•œ๋‹ค.git init ๋ช…๋ น์–ด ์‹คํ–‰ ์‹œ ํ•ด๋‹น ํด๋”๊ฐ€ Git ๋กœ์ปฌ ์ €์žฅ์†Œ๋กœ ์ง€์ •๋œ๋‹ค. ์ด ๋•Œ ํ•ด๋‹น ๋””๋ ‰ํ† ๋ฆฌ์— ๊นƒ๊ด€๋ จ ์ •๋ณด๊ฐ€ ์ €์žฅ๋  .git

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

[HTML] ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ (Semantic Tag)๋ž€? ๐Ÿง

Semantic์€ '์˜๋ฏธ์˜', '์˜๋ฏธ๋ก ์ ์ธ'์ด๋ผ๋Š” ๋œป์„ ๊ฐ€์ง„ ํ˜•์šฉ์‚ฌ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ž€ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ๋งํ•œ๋‹ค.div๋‚˜ span๊ณผ ๊ฐ™์ด ์˜๋ฏธ๊ฐ€ ์—†๋Š” ํƒœ๊ทธ๋Š” ํƒœ๊ทธ ์ด๋ฆ„๋งŒ ๋ณด๊ณ ๋Š” ์–ด๋–ค ๋‚ด์šฉ์ธ์ง€ ์ „ํ˜€ ์œ ์ถ”ํ•  ์ˆ˜๊ฐ€ ์—†๋Š” ๋ฐ˜๋ฉด, form, table, article

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

[React] Image Lazy Loading ๊ตฌํ˜„ํ•˜๊ธฐ

Image Lazy Loading์ด๋ž€? ์ด๋ฏธ์ง€ lazy loading์€ ์•„์ง ํ™”๋ฉด์— ๋ณด์—ฌ์ง€์ง€ ์•Š์€ ์ด๋ฏธ์ง€๋“ค์€ ๋กœ๋”ฉ ์‹œ์ ์„ ๋’ค๋กœ ๋ฏธ๋ฃจ์–ด ์›น ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋‹ค. ์–ธ์ œ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„๊นŒ? ์œ„ ์ด๋ฏธ์ง€๋Š” ์•„์ดํ…œ ๋ฆฌ์ŠคํŠธ์ด๋ฉฐ, ๋ฌดํ•œ์Šคํฌ๋กค์„ ํ†ตํ•ด ์•„์ดํ…œ์„ 20๊ฐœ์”ฉ ํŽ˜์ด์ง€

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

[html] data-attributes ์‚ฌ์šฉํ•˜๊ธฐ

data-attributes data-* ์™€ ๊ฐ™์ด ์ƒ๊ธด html ์†์„ฑ์€ ํ‘œ์ค€, semantic HTML ์š”์†Œ์— ์ถ”๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ €์žฅํ•  ์ˆ˜์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด div์˜ size์ •๋ณด๋ฅผ ์ €์žฅํ•œ๋‹ค๊ณ  ํ•˜์ž. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ css์—์„œ data-* ๊ฐ’์„ ์†์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ

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

[์•Œ๊ณ ๋ฆฌ์ฆ˜] โœจ ์ด์ง„ ํƒ์ƒ‰

์ด์ง„ํƒ์ƒ‰์ด๋ž€? ์ •๋ ฌ๋œ ๋ฆฌ์ŠคํŠธ์—์„œ ํŠน์ •ํ•œ ๊ฐ’์˜ ์œ„์น˜๋ฅผ ์ฐพ๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋‚˜์š”? ํƒ์ƒ‰ ๋ฒ”์œ„๋ฅผ ์ ˆ๋ฐ˜์‹ ์ขํ˜€๊ฐ€๋ฉฐ ๋ฐ์ดํ„ฐ๋ฅผ ํƒ์ƒ‰ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์‹œ๊ฐ„๋ณต์žก๋„๋Š” O(logN) ๋ฐฐ์—ด์˜ ์ค‘๊ฐ„์— ์žˆ๋Š” ์ž„์˜์˜ ๊ฐ’์„ ์„ ํƒํ•˜์—ฌ ์ฐพ๊ณ ์ž ํ•˜๋Š” ๊ฐ’ X์™€ ๋น„๊ตํ•œ๋‹ค. X๊ฐ€ ์ค‘๊ฐ„ ๊ฐ’๋ณด๋‹ค ์ž‘

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

[Next.js] ๊ธฐ๋ณธ ๊ฐœ๋… : Next.js ๋ž€? Next.js๋ฅผ ์™œ ์‚ฌ์šฉํ• ๊นŒ? Next.js์˜ ์žฅ์ ์€?

๋ณธ ๊ฒŒ์‹œ๊ธ€์€ nextjs learn course์™€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋“ค์–ด๊ฐ€๋ฉฐ ํšŒ์‚ฌ์—์„œ Next.js๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋กœ๋•์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์œผ๋ฉด์„œ๋„, ๊ฐœ๋…์— ๋Œ€ํ•ด ๋‘๋ฃจ๋ญ‰์ˆ ํ•˜๊ฒŒ๋งŒ ์•Œ๊ณ ์žˆ์–ด์„œ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๋ฌผ์–ด๋ณด๊ฑฐ๋‚˜ ์„ธ๋ถ€ ๊ธฐ๋Šฅ์„ ๋ฌผ์–ด๋ณด๋ฉด ์„ ๋œป ๋ช…ํ™•ํžˆ

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

[React] Reconciliation์ด๋ž€? (+ virtual DOM, ๋ฆฌ์•กํŠธ๋Š” ์„ ์–ธ์ )

๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ prop์ด๋‚˜ state๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ, ์ง์ „์— ๋ Œ๋”๋ง๋œ ์š”์†Œ(element)์™€ ์ƒˆ๋กœ ๋ฐ˜ํ™˜๋œ ์š”์†Œ๋ฅผ ๋น„๊ตํ•˜์—ฌ ์‹ค์ œ DOM์„ ์—…๋ฐ์ดํŠธ ํ• ์ง€ ๋ง์ง€ ๊ฒฐ์ •ํ•ด์•ผ ํ•œ๋‹ค. ์ด๋•Œ ๋‘ element๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด ๋ฆฌ์•กํŠธ๋Š” ์ƒˆ๋กœ์šด ์š”์†Œ๋กœ DOM์„ ์—…๋ฐ์ดํŠธ ํ•˜๋Š”๋ฐ,

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

[TIL 210826] yarn berry, Fail-fast principle, UnhandledPromiseRejection

1. Fail-fast principle ์˜ˆ๊ธฐ์น˜ ์•Š์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ฆ‰์‹œ ํ˜„์žฌ ์ž‘์—…์„ ์ค‘์ง€ํ•˜๋Š” ๊ฒƒ. ์ฆ‰ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๊ฒฝ์šฐ๋ฅผ ๋จผ์ € ์ฒ˜๋ฆฌํ•ด์คŒ์œผ๋กœ์จ ์ฝ”๋“œ๋ฅผ ๋” ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ํ•ด์ค€๋‹ค. (๋ฐ˜๋Œ€๋Š” try catch๋ฌธ๊ณผ ๊ฐ™์€ Fail-silently) 2. yarn berry

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

[TIL 210825] ์ค‘๋ณต ๋˜๋Š” element ์ฝ”๋“œ ๋ฆฌํŒฉํ„ฐ๋ง, ๋””ํดํŠธ ๊ฐ’์˜ ์˜๋ฏธ ๊ตฌ๋ถ„, css margin collapsing ๋“ฑ

Clean Code ๐Ÿงผ 1. ์ค‘๋ณต๋˜๋Š” element ๋ถ€๋ถ„ ๋ Œ๋”ํ•จ์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋‹ค์Œ์€ ํ—ค๋” ์ปดํฌ๋„ŒํŠธ์˜ ๋ฆฌํ„ด ๋ถ€๋ถ„์ด๋‹ค. LeftExtras์™€ RightExtras๋Š” ๋’ค๋กœ๊ฐ€๊ธฐ, ๊ฒ€์ƒ‰๋ฒ„ํŠผ, ๋‹ซ๊ธฐ๋ฒ„ํŠผ ๋“ฑ ํ—ค๋”์— ์ถ”๊ฐ€์ ์œผ๋กœ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ReactNode ํƒ€์ž…์˜ prop์ธ

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