๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

 (72)
[โš›๏ธ React Conf 2024] ๋ฆฌ์•กํŠธ 19์—์„œ ์ƒˆ๋กœ์›Œ์ง„ ๊ฒƒ๋“ค (What's new in React 19 | Lydia Hallie) What's new in React 19 | Lydia Hallie์•ฝ 2 ๋‹ฌ ์ „์— REACT CONF 2024๊ฐ€ ์—ด๋ ธ๋‹ค.์—ฌ๋Ÿฌ ํ† ํฌ๋“ค์ด ์ง„ํ–‰๋˜์—ˆ์—ˆ๋Š”๋ฐ, ๊ทธ์ค‘ ๋”ฐ๋ˆ ๋”ฐ๊ทผ(?)ํ•œ React 19์˜ ์ƒˆ ์†Œ์‹๋“ค์„ ์‚ดํŽด๋ณด๊ณ ์ž ํ•œ๋‹ค.canary ๋ฒ„์ „์˜ ๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๊ณ  ์žˆ์—ˆ๋‹ค๋ฉด ์†Œ๊ฐœํ•  ๋‚ด์šฉ๋“ค์ด ์ด๋ฏธ ์ต์ˆ™ํ•œ ๊ฒƒ๋“ค์ผ ์ˆ˜ ์žˆ์ง€๋งŒ,์•ˆ์ •ํ™”๋œ ๋ฒ„์ „์„ ๊ธฐ๋‹ค๋ฆฐ ๋‚˜์™€ ๊ฐ™์€ ์‚ฌ๋žŒ๋“ค์€ ํ•ด๋‹น ํ† ํฌ์—์„œ ๋ฐ˜๊ฐ€์šด ์†Œ์‹๋“ค์„ ์ „ํ•ด ๋“ค์„ ์ˆ˜ ์žˆ์„ ๊ฑฐ ๊ฐ™๋‹ค.์ด๋ฒˆ์—๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ์–ด๋–ค ๊ฒƒ๋“ค์ด ๋‹ฌ๋ผ์กŒ๋‚˜ ์‚ดํŽด๋ณด๊ณ , ์‹ค์ œ๋กœ ์†Œ๊ฐœ๋œ 19 ๋ฒ„์ „์˜ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•ด ๋ณด๊ณ ์ž ํ•œ๋‹ค.๐Ÿ‘‡ ๋‹ค๋ฃฌ ์ฃผ์ œ ๋ชฉ์ฐจ๋กœ ์‚ดํŽด๋ณด๊ธฐ๋”๋ณด๊ธฐ1. Asynchoronous transitions: startTransition์— async ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ2. Actions:  transition์„ ํŠธ๋ฆฌ๊ฑฐ..
๊ฒธ์†ํ•œ ์ž์„ธ์™€ resilience ์˜ค๋Š˜์€ ๊ฐœ๋ฐœ์ด ์•„๋‹Œ ๋‹ค๋ฅธ ์ด์•ผ๊ธฐ์— ๋Œ€ํ•ด ๋‹ค๋ฃฐ ์˜ˆ์ •์ด๋‹ค.๋‚ด ์ƒ๊ฐ๊ณผ ๋Š๋‚Œ์„ ๋ˆ„๊ตฌ๋ผ๋„ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์— ๋‚จ๊ธฐ๋Š” ๊ฒŒ ์–ด์ƒ‰ํ•˜์ง€๋งŒ, ์กฐ๊ธˆ์”ฉ ๋‚ด comfort zone์—์„œ ๋ฒ—์–ด๋‚˜๋Š” ์ผํƒˆ(?)์„ ํ•ด๋ณผ๊นŒ ์‹ถ๋‹ค. ๊ธ€์„ ์ ์œผ๋ฉด์„œ ์ƒ๊ฐ ์ •๋ฆฌ๋„ ํ•  ๊ฒธ, ๋‚˜์ค‘์— ๊ฐ™์€ ์‹ฌ๋ž€ํ•จ์„ ๋Š๊ปด๋„ '๊ทธ๋•Œ๋„ ์ด๋Ÿฐ ๋งˆ์Œ์ด์—ˆ๊ตฌ๋‚˜'ํ•˜๊ณ  ํ„ธ์–ด๋ฒ„๋ฆฌ๊ณ , ๋” ์ข‹์€ ๋ฐฉํ–ฅ์œผ๋กœ ๋‚˜์•„๊ฐ€๊ธฐ ์œ„ํ•ด ๋„์ ์—ฌ ๋ณธ๋‹ค. '๋‚ด๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ์˜์‹ฌ'๊ณผ '๋‚ด๊ฐ€ ํ‹€๋ฆด ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒธ์†'์˜ ์ฐจ์ด๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒŒ ๋ญ˜๊นŒ. ๋Œ€ํ•™ ์žฌํ•™ ์‹œ์ ˆ ์‹ฌ๋ฆฌํ•™ ์ „๊ณต ์ˆ˜์—… ์ค‘, ํ•œ ํ•™์ƒ์ด ๊ต์ˆ˜๋‹˜๊ป˜ ์–ด๋–ค ์ฃผ์ œ์— ๋Œ€ํ•ด ์—ฌ์ญค๋ดค์—ˆ๋‹ค.๊ต์ˆ˜๋ผ๋Š” ์ง์—… ํŠน์„ฑ์ƒ, ๋ฐ•ํ•™ํ•˜๊ฒŒ ํ•ด๋‹น ์ฃผ์ œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํ•ด์ค„ ๊ฑฐ๋ผ๋Š” ๊ธฐ๋Œ€์™€๋Š” ๋‹ฌ๋ฆฌ๋‹น์‹ ๊ป˜์„œ๋Š” ํ•ด๋‹น ๋ถ„์•ผ๊ฐ€ ์ „๋ฌธ์€ ์•„๋‹ˆ๋ผ ์ง์ ‘์ ์ธ ๋Œ€๋‹ต์€ ํ•˜๊ธฐ ์–ด๋ ค์šฐ๋‚˜, ๋‹น์‹ ์˜ ๋ถ„์•ผ์—์„œ๋Š” ์ด๋Ÿฐ ..
[โš›๏ธ react] synthetic event (ft. +17 ๋น„ํฌ&์• ํ”„ํ„ฐ) [์ด์ „ ๊ธ€]2024.08.16 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [ํ† ์Šค] Transpiler, “์‚ฌ์šฉ”๋ง๊ณ  “ํ™œ์šฉ”ํ•˜๊ธฐ [ํ† ์Šค] Transpiler, “์‚ฌ์šฉ”๋ง๊ณ  “ํ™œ์šฉ”ํ•˜๊ธฐ๐Ÿ—ฃ๏ธ ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์บก์ณ๋ง์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ๊ณ„์‹œ๋‚˜์š”?๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ๋‹ค์ด๋ธŒ์—์„œ ๋ดค์—ˆ๋Š”๋ฐ;;๋ฒ„๋ธ”๋ง์€ ๋ฒ„๋ธ” ์ •๋ ฌ์ฒ˜๋Ÿผ bubble up์ด๋ผ๋Š” ๋ง์—์„œ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ์–ด๋–ค ์ด๋ฒคํŠธ๊ฐ€ ์•„๋ž˜์—์„œ ์œ„pyotato-dev.tistory.com์ด๋ฒคํŠธ ์œ„์ž„+ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋ฅผ ํ†ตํ•ด์„œ ๋กœ๊น…์„ ์ฝ”๋“œ์— ์ฃผ์ž…ํ•˜๋Š” ํ† ์Šค์˜ ์ด์šฉ ์‚ฌ๋ก€๋ฅผ ์‚ดํŽด๋ดค์—ˆ๋‹ค.์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง ๋Œ€์‹  ์บก์ฒ˜๋ฅผ ์‚ฌ์šฉํ•œ ์ด์œ ์— ๋Œ€ํ•œ ์งˆ๋ฌธ์ด ์žˆ์—ˆ๋Š”๋ฐ, ์™œ ๊ทธ๋žฌ์„๊นŒ ๋‚˜๋ฆ„๋Œ€๋กœ ์ด์œ ๋ฅผ ์ฐพ๋‹ค๊ฐ€,๋ฆฌ์•กํŠธ์—์„œ ์ด๋ฒคํŠธ ์ „ํŒŒ ๋ฐฉ์‹์ด dom๊ณผ๋Š” ์‚ด์ง ๋‹ค๋ฅด๋‹ค๋Š” ๊ธ€๋“ค์„ ์ฝ๊ฒŒ ๋˜์–ด ๋” ์ž์„ธํžˆ ํŒŒ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.Legacy reac..
[ํ† ์Šค] Transpiler, “์‚ฌ์šฉ”๋ง๊ณ  “ํ™œ์šฉ”ํ•˜๊ธฐ ๐Ÿ—ฃ๏ธ ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์บก์ณ๋ง์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ๊ณ„์‹œ๋‚˜์š”?๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ๋‹ค์ด๋ธŒ์—์„œ ๋ดค์—ˆ๋Š”๋ฐ;;๋ฒ„๋ธ”๋ง์€ ๋ฒ„๋ธ” ์ •๋ ฌ์ฒ˜๋Ÿผ bubble up์ด๋ผ๋Š” ๋ง์—์„œ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ์–ด๋–ค ์ด๋ฒคํŠธ๊ฐ€ ์•„๋ž˜์—์„œ ์œ„๋กœ ์ „์ด๋˜๋Š” ๊ฑฐ๊ณ , ์บก์ณ๋ง์€ ๋ฐ˜๋Œ€๋กœ ์œ„์—์„œ ์•„๋ž˜๋กœ ์ „์ด๋˜๋Š” ๊ฑฐ ์•„๋‹ˆ์—ˆ๋‚˜?๊ฐœ๋…์€ ์–ด๋Š ์ •๋„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์‹ค์ œ ์ ์šฉ์„ ํ•˜๋Š” ๊ฒฝ์šฐ๋กœ๋Š” ์—ฐ๊ฒฐ์ด ๋˜์ง€ ์•Š์•˜์—ˆ๋‹ค.์ด๋ฒˆ ๊ธฐํšŒ์— ์‹ค์ œ๋กœ ์บก์ณ๋ง์„ ํ™œ์šฉํ•œ ํ† ์Šค์˜ 'Transpiler, “์‚ฌ์šฉ”๋ง๊ณ  “ํ™œ์šฉ”ํ•˜๊ธฐ'๊ฐ€ ์ข‹์€ ์˜ˆ์‹œ์ธ ๊ฑฐ ๊ฐ™์•„์„œ ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค.๋ฒ•์  ์˜์—ญ์„ ์ž˜ ๋ชจ๋ฅด๋Š” ์ž…์žฅ์—์„œ ์‚ฌ์šฉ์ž์˜ ์ผ๊ฑฐ์ˆ˜์ผํˆฌ์กฑ์„ ๋กœ๊น…ํ•˜๋Š” ๊ฑด ๋™์˜ํ•˜์—๋งŒ ๊ฐ€๋Šฅํ•  ๊ฑฐ ๊ฐ™๊ธฐ ๋•Œ๋ฌธ์— ์ ์šฉํ•ด ๋ณผ ๊ธฐํšŒ๊ฐ€ ์žˆ์„์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ์‹ค์ œ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์•Œ์•„์•ผ ๊ธฐ์–ต์— ๋” ๋‚จ์„ ๊ฑฐ ๊ฐ™์•„์„œ,  ์–ด๋–ค ์‹์œผ๋กœ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ์™€ ์ด๋ฒคํŠธ ์บก์ณ๋ง..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(7) Sentry ์„ค์ • 2024.08.10 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(6)  [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(6)[์ด์ „๊ธ€] 2024.08.09 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(5) react router ์„ค์ • [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(5) react routerpyotato-dev.tistory.comsentry can't fix this ์œ ํŠœ๋ธŒ ๊ด‘๊ณ ๋กœ ์ข…์ข… ๋ดค๋˜ sentry! ์˜ค๋Š˜์€ sentry ์ ์šฉ์— ๋Œ€ํ•ด ์ •๋ฆฌ๋ฅผ ํ•˜..
[Nextjs Image] The request resource XX has type "image/svg+xml" but dangerouslyAllowSVG is disabled ์ด๋ฏธ์ง€ placeholder๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด https://placehold.co/์—์„œ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ–ˆ์œผ๋‚˜, ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.next ๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด๋‹ˆ ํ•ด๊ฒฐ๋ฐฉ์•ˆ์€ dangerouslyallowsvg์„ค์ •์„ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. ํ•˜์ง€๋งŒ ๋””ํดํŠธ ๋กœ๋”๊ฐ€ SVG ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋ฌธ๊ตฌ์™€ ํ•จ๊ป˜, ๊ทธ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๋Š”๋ฐ, ์ฒซ์งธ๋Š” SVG๋Š” vector ํฌ๋ฉง์œผ๋กœ ์ด๋ฃจ์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— resize ํ•„์š”์„ฑ์ด ์—†๊ณ , ๋‘ ๋ฒˆ์งธ๋กœ๋Š” HTML/CSS ์™€ ๊ฐ™์€ ํŠน์„ฑ ๋•Œ๋ฌธ์— ์ ์ ˆํ•œ CSP ํ—ค๋” ์—†์ด๋Š” ์ทจ์•ฝ์„ฑ์œผ๋กœ ์ด์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ src prop์ด SVG์ธ ๊ฒƒ์„ ์•Œ๋ฉด ์ตœ์ ํ™”ํ•˜์ง€ ์•Š์€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•˜๋‹ค๊ณ  ํ•œ๋‹ค.๊ทธ๋ฆฌ๊ณ  contentSecurityPolicy์™€  contentDispositionType์„..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(6) tanstack query ์„ค์ • [์ด์ „๊ธ€] 2024.08.09 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(5) react router ์„ค์ • [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(5) react router ์„ค์ •[์ด์ „๊ธ€] 2024.08.08 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(4) eslint + prettier + commitlint ์„ค์ • (+husky) [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„pyotato-dev.tistory.com์ด์ „ ํฌ์ŠคํŒ…์—๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(5) react router ์„ค์ • [์ด์ „๊ธ€] 2024.08.08 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(4) eslint + prettier + commitlint ์„ค์ • (+husky) [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(4) eslint + prettier + commitlint ์„ค์ • (+hu2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(3) ์ค€๋น„๋ฌผ: authorization์„ ๋‹ด๋‹นํ•  ์„œ๋ฒ„ ์ฝ”๋“œ [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ pyotato-dev...

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”