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

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev

 (34)
puppeteer aws lambda์— ๋ฐฐํฌํ•˜๊ธฐ puppeteer๋Š” ํฌ๋กฌ์ด๋‚˜ ํŒŒ์ด์–ดํญ์Šค์—์„œ ๋™์ž‘์„ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.์˜ค๋Š˜์€ ์ด puppeteer๋ฅผ ํ†ตํ•ด ์›น์Šคํฌ๋ž˜ํ•‘์„ ํ•˜์—ฌ ์žฅ์†Œ ์ •๋ณด๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ณ ์ž ํ•œ๋‹ค.๊ทธ๋ฆฌ๊ณ  aws ๋žŒ๋‹ค๋ฅผ ํ†ตํ•ด ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์„ ๋‹ด์€ ํŠœํ† ๋ฆฌ์–ผ์„ ์ฐจ๊ทผํžˆ ๋”ฐ๋ผ๊ฐ€๋ฉด์„œ ์ž‘์—…ํ•œ ์‚ฌํ•ญ์„ ๊ธฐ๋กํ•˜๊ณ ์ž ํ•œ๋‹ค.๊ตฌ๊ธ€ place api๋ฅผ ์‚ฌ์šฉํ•˜๋Š๋ผ 30๋งŒ ์›์–ด์น˜ ์ด์ƒ์˜ ๋น„์šฉ์ด ๋ฐœ์ƒํ•ด์„œ, ์ฐจ์„ ํƒ์œผ๋กœ ์›น์Šคํฌ๋ž˜ํ•‘ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์™€์„œ ์จ๋ณด๋Š” ๋ฐฉํ–ฅ์„ ์„ ํƒํ•ด ๋ดค๋‹ค.๋ฌผ๋ก  api์— ๋น„ํ•ด์„œ ์‘๋‹ต ์†๋„ ๋“ฑ์ด ๋Š๋ ค์งˆ ๋ถ€๋ถ„์ด ์—ผ๋ ค๋˜์ง€๋งŒ ๊ธˆ์•ก์ ์œผ๋กœ ์ตœ์„ ์ธ ๊ฑฐ ๊ฐ™๊ณ ,ํ‰์†Œ์— ๋“ค์–ด๋ณด๊ธฐ๋งŒ ํ–ˆ๋˜ lambda์™€ docker๋ฅผ ๊ฒฝํ—˜ํ•ด ๋ณผ ์ข‹์€ ๊ฒฝํ—˜ ๊ฐ™์•„์„œ ๊ณต๋ถ€ ์‚ผ์•„ํ•ด ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค. ์ค€๋น„๋ฌผ- aws ๊ณ„์ • : lambda์— ๋ฐฐํฌ   - aws sam CLI (์„ค์น˜ ๋ง..
[โš›๏ธ React conf 2024] ๋‘ ๋Œ€์˜ ์ปดํ“จํ„ฐ๋กœ ๋Œ์•„๊ฐ€๋Š” ๋ฆฌ์•กํŠธ (React for Two Computers | Dan Abramov) 2024.09.24 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [โš›๏ธ React Conf 2024] ๋ฆฌ์•กํŠธ 19์—์„œ ์ƒˆ๋กœ์›Œ์ง„ ๊ฒƒ๋“ค (What's new in React 19 | Lydia Hallie) [โš›๏ธ 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 ๋ฒ„์ „์˜ ๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๊ณ  ์žˆ์—ˆ๋‹ค๋ฉดpyotato-dev.tistory.com์ด์ „ ๊ธ€์€ ๋ฆฌ์•กํŠธ 19์—์„œ ์ƒˆ๋กœ์›Œ์ง„ ๊ธฐ๋Šฅ๋“ค์ด๋‚˜ ๊ฐœ์„ ๋œ ์‚ฌํ•ญ์— ๋Œ€ํ•ด ์‚ดํŽด๋ดค์—ˆ๋‹ค.์˜ค๋Š˜..
[TOSS] useFunnel ๋งŒ๋“ค์–ด๋ณด๊ธฐ 2024.07.05 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - ํ† ์Šคใ…ฃSLASH 23 - ํผ๋„ : ์Ÿ์•„์ง€๋Š” ํŽ˜์ด์ง€ ํ•œ ๋ฐฉ์— ๊ด€๋ฆฌํ•˜๊ธฐ (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once) ํ† ์Šคใ…ฃSLASH 23 - ํผ๋„ : ์Ÿ์•„์ง€๋Š” ํŽ˜์ด์ง€ ํ•œ ๋ฐฉ์— ๊ด€๋ฆฌํ•˜๊ธฐ (TOSH | SLASH 23 - Funnel Pattern : Organizing an ovโš ๏ธ ์ €์ž‘๊ถŒ ๋ณดํ˜ธ๋ฅผ ์œ„ํ•ด ์ž๋ฃŒ ๋ฐ ์˜ˆ์‹œ๊ฐ€ ๋Œ€์ฒด๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ๋Š” Reactโš›๏ธ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.๐Ÿซจ ํ†ต์‹ ์‚ฌ ๊ฐ€์ž…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ธด ํผ๊ณผ ์•ฝ์ •์ด ํฌํ•จ๋œ ํŽ˜์ด์ง€๋ฅผ ๋งˆ์ฃผ์น˜๊ฒŒ ๋  ๋•Œpyotato-dev.tistory.com์ด์ „ ํ† ์Šค SLASH23์— ์†Œ๊ฐœ๋œ useFunnel์— ๋Œ€ํ•ด ์‚ด..
[โš›๏ธ 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์„ ํŠธ๋ฆฌ๊ฑฐ..
[โš›๏ธ 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์„..

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