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

์ „์ฒด ๊ธ€

 (73)
โš›๏ธ Error boundary ๐Ÿ˜ฑ ์•ฑ ๊ฐœ๋ฐœ ๋„์ค‘ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋จธ๋ฆฌ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์œ ์ €์—๊ฒŒ ๋ณด์—ฌ์ค„ ํ™”๋ฉด๋„ ์ƒˆํ•˜์–—๊ฒŒ ๋ณ€ํ•  ๊ฑฐ ๊ฐ™๋‹ค.๐Ÿค” ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์—๋Ÿฌ์ฒ˜๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด์ค„ ์ˆ˜ ์žˆ์„๊นŒ?๋ฆฌ์•กํŠธ์˜ Error boundary (legacy)๊ฐœ๋ฐœ ๋ฌธ์„œ์— ์˜ํ•˜๋ฉด ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฆฌ์•กํŠธ๋Š” ๋ Œ๋”๋ง ๋„์ค‘์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด UI๋ฅผ ํ™”๋ฉด์—์„œ ์ œ๊ฑฐํ•œ๋‹ค.์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ•ด๋‹น UI๋ฅผ Error boundary๋กœ ๊ฐ์‹ธ์ค„ ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, Error boundary๋Š” ์—๋Ÿฌ๊ฐ€ ๋‚˜์„œ ์ œ๊ฑฐ๋œ UI๋Œ€์‹ ์— ํ™”๋ฉด์— fallback UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ํŠน์ˆ˜ํ•œ ์ปดํฌ๋„ŒํŠธ๋‹ค. Error boundary๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” static getDerivedStateFromError๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค.static getDerivedStateFromError๋ฅผ ์ œ๊ณตํ•ด์•ผ ์—๋Ÿฌ..
โš›๏ธ <Suspense> ํ™œ์šฉ ์ด์ „ ๊ธ€: 2024.06.15 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - โš›๏ธ ๋ž€? ์—์„œ๋Š” ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์˜ Suspense props์— ๋Œ€ํ•ด ์•Œ์•„๋ดค๋‹ค. ๋ž€?" data-og-description="๐Ÿ—ฃ๏ธ 'Suspense'๋ฅผ ์จ๋ณด์‹  ์  ์žˆ๋‚˜์š”? ์žˆ๋‹ค๋ฉด ์–ธ์ œ, ์™œ ์“ฐ์‹œ๋‚˜์š”? ์•ˆ์“ฐ๋ฉด ์–ด๋–ค ์ ์ด ๋ถˆํŽธํ•˜๋‚˜์š”? ์“ฐ๊ธด ์“ฐ๋Š”๋ฐ..๋กœ๋”ฉ ์ค‘์— ๋Œ€์‹  ๋ณด์—ฌ์ค„ UI๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ ์•„๋‹Œ๊ฐ€?  ๋ฆฌ์•กํŠธ์˜ ๊ณต์‹๋ฌธ์„œ์— ์˜ํ•˜๋ฉด " data-og-host="pyotato-dev.tistory.com" data-og-source-url="https://pyotato-dev.tistory.com/9" data-og-url="https://pyotato-dev.tistory.com/9" data-og-image="https://scrap.kakao..
โš›๏ธ <Suspense>๋ž€? ๐Ÿ—ฃ๏ธ 'Suspense'๋ฅผ ์จ๋ณด์‹  ์  ์žˆ๋‚˜์š”? ์žˆ๋‹ค๋ฉด ์–ธ์ œ, ์™œ ์“ฐ์‹œ๋‚˜์š”? ์•ˆ ์“ฐ๋ฉด ์–ด๋–ค ์ ์ด ๋ถˆํŽธํ•˜๋‚˜์š”? ์“ฐ๊ธด ์“ฐ๋Š”๋ฐ..๋กœ๋”ฉ ์ค‘์— ๋Œ€์‹  ๋ณด์—ฌ์ค„ UI๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ ์•„๋‹Œ๊ฐ€?  ๋ฆฌ์•กํŠธ์˜ ๊ณต์‹๋ฌธ์„œ์— ์˜ํ•˜๋ฉด ๋Š” children์ด ๋กœ๋”ฉ ์ „๊นŒ์ง€ ๋ณด์—ฌ์ค„ fallback ์š”์†Œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ํ•œ๋‹ค.๋ฆฌ์•กํŠธ์˜ ์— ๋Œ€ํ•ด์„œ ๋” ์ž์„ธํžˆ ๋‹ค๋ฃจ๊ธฐ ์ „์—,Suspend๋ผ๋Š” ๋‹จ์–ด์˜ ๋œป์„ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๊ณ  ๊ฐ€๋ฉด ๋ฅผ ์™œ ์“ฐ๊ณ , ์–ธ์ œ ์“ฐ๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  ์—ญํ• ์ด ๋ฌด์—‡์ธ์ง€ ์ดํ•ดํ•˜๊ธฐ๊ฐ€ ์‰ฝ๋‹ค. Suspend๋Š” ์ผ์‹œ์ ์œผ๋กœ ์–ด๋–ค ๋™์ž‘์ด ๋ฐœ์ƒํ•˜๊ฑฐ๋‚˜ ์ผ์–ด๋‚˜๋Š” ๊ฒƒ์„ ๋ฉˆ์ถ”๋Š” ๊ฒƒ (temporarily prevent from continuing or being in force or effect)์ด๋‹ค. ๊ทธ๋Ÿผ ๋ฆฌ์•กํŠธ์˜ ๋Š” ์–ด๋–ค ๋™์ž‘์„ ์–ธ์ œ ์ž ์‹œ ๋ฉˆ์ถฐ์ฃผ๋Š” ๊ฑธ..
์„ ์–ธ์ ์ธ ์ฝ”๋“œ ์ž‘์„ฑํ•˜๊ธฐ ๐Ÿ—ฃ๏ธ '์„ ์–ธ์ ์ธ ์ฝ”๋“œ'์— ๋Œ€ํ•ด์„œ ๋“ค์–ด๋ณด์…จ๋‚˜์š”? ๋“ค์–ด๋Š” ๋ดค๋Š”๋ฐ.. ๋ญ์ง€? ํ† ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์ฑ•ํ„ฐ์—์„œ๋Š” ์„ ์–ธ์ ์ธ ์ฝ”๋“œ (Declarative Code)๋ฅผ ์ถ”์ƒํ™” ๋ ˆ๋ฒจ์ด ๋†’์•„์ง„ ์ฝ”๋“œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. ์ถ”์ƒํ™” ๋ ˆ๋ฒจ์ด ๋†’์•„์ง„ ์ฝ”๋“œ๋ž€?  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฐฐ์—ด์˜ ํ•ฉ์„ ๊ตฌํ•˜๋Š” ํ•จ์ˆ˜ sum์„ ์‚ดํŽด๋ณด์ž. sum([1,2,3]);// sum ํ•จ์ˆ˜์˜ ๊ตฌํ˜„ function sum(nums: number[]) { let result = 0; for (const num of nums) { result += num; } return result;} sum ํ•จ์ˆ˜์˜ ์ดˆ๊ธฐ๊ฐ’์€ 0์ด๊ณ , for๋ฌธ์„ ๋Œ๋ฉด์„œ ๋ฐฐ์—ด์˜ ๊ฐ ์ˆ˜๋ฅผ ๋”ํ•˜๊ณ ,๋”ํ•ด์ง„ ๊ฒฐ๊ด๊ฐ’์„ ๋ฆฌํ„ดํ•ด์ค€๋‹ค. ์ด ์ž‘์—…์ด ์ถ”์ƒํ™”๋˜์–ด,  sum ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ์€ ๋‚ด๋ถ€์˜ ๋ณต์žกํ•œ ์ œ..
TMI. 1์žฅ์—์„œ ์‹œ์ž‘ํ•˜์ง€ ์•Š์€ ํฌ์ŠคํŒ… https://github.com/Pyotato/fe_study/tree/main/modern_react_deep_dive  ์—์„œ ์ด์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค.๐Ÿš›๐Ÿ’จ๐Ÿšš๐Ÿ’จ fe_study/modern_react_deep_dive at main · Pyotato/fe_study๐Ÿ“• ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ ๋„์ ์ด๋Š” ์ด๊ฒƒ ์ €๊ฒƒ. Contribute to Pyotato/fe_study development by creating an account on GitHub.github.com ์ด์ „ ๋ชจ๋˜ ๋ฆฌ์•กํŠธ ๋”ฅ๋‹ค์ด๋ธŒ๋ฅผ ์ฝ์œผ๋ฉด์„œ ์ •๋ฆฌํ–ˆ๋˜ ๊ธ€์€ ๊นƒํ—ˆ๋ธŒ์— ์ž‘์„ฑ๋˜์–ด ์žˆ์ง€๋งŒ,๋„์ค‘์— ๋‹ค์‹œ ๊ธ€์„ ์ •๋ฆฌํ•˜๊ธฐ๋งŒ์„ ์œ„ํ•ด ์ฒซ ์žฅ์œผ๋กœ ๋Œ์•„๊ฐˆ ์ˆ˜ ์—†๋‹ค๊ณ  ํŒ๋‹จํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š”, 1. 1ํšŒ๋…์œผ๋กœ ๋ชจ๋“  ๊ฑธ ์™„๋ฒฝํ•˜๊ฒŒ ์ฝ์—ˆ๋‹ค๊ณ  ๋ณด๊ธฐ ์–ด๋ ค์šด ์ฑ… ๊ฐ™๋‹ค.2. ..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(3) ์ค€๋น„๋ฌผ: authorization์„ ๋‹ด๋‹นํ•  ์„œ๋ฒ„ ์ฝ”๋“œ 2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(2) ์ค€๋น„๋ฌผ: authorization์„ ๋‹ด๋‹นํ•  ์„œ๋ฒ„์— ์ด์–ด์„œ [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(2) ์ค€๋น„๋ฌผ: authorization์„ ๋‹ด๋‹นํ•  ์„œ2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(1) ์ค€๋น„๋ฌผ:spotify dev ๊ณ„์ •, application ์— ์ด์–ด์„œ.. [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„pyotato-dev.tistory.com ์ด์ œ ๋ฐฐํฌํ•  ์ค€๋น„๋ฅผ..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(2) ์ค€๋น„๋ฌผ: authorization์„ ๋‹ด๋‹นํ•  ์„œ๋ฒ„ 2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(1) ์ค€๋น„๋ฌผ:spotify dev ๊ณ„์ •, application ์— ์ด์–ด์„œ.. [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(1) ์ค€๋น„๋ฌผ:spotify dev ๊ณ„์ •, application2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ ์— ์ด์–ด์„œ [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ๊นƒํ—ˆ๋ธŒ ๋ ˆํฌ GitHupyotato-dev.tistory.com ์ด๋ฒˆ์—๋Š” autho..
[spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ(1) ์ค€๋น„๋ฌผ:spotify dev ๊ณ„์ •, application 2024.06.12 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ ์— ์ด์–ด์„œ [spotify-api] VINYLIFY : ์Šคํฌํ‹ฐํŒŒ์ด apiํ™œ์šฉํ•œ ๊ฒ€์ƒ‰ + ์žฌ์ƒ ํ”„๋กœ์ ํŠธ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ๊นƒํ—ˆ๋ธŒ ๋ ˆํฌ GitHub - f-lab-edu/vinlyify: ๐ŸŽถ search, listen to music via spotify api๐ŸŽถ search, listen to music via spotify api. Contribute to f-lab-edu/vinlyify development by creating an account on GitHub.github.com ๐Ÿค” ์ง„ํ–‰pyotato-dev.tistory.com๐Ÿ›๏ธ ์ค€๋น„๋ฌผ๋ณธ๊ฒฉ์ ์œผ๋กœ ์Šคํฌ..

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