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

2024/02/24

[Next.js] Optimistic UI ๊ตฌํ˜„ (์ข‹์•„์š”, ๋ถ๋งˆํฌ ๊ธฐ๋Šฅ ๊ฐœ์„ )
Computer Programming/Next 2024. 2. 24. [Next.js] Optimistic UI ๊ตฌํ˜„ (์ข‹์•„์š”, ๋ถ๋งˆํฌ ๊ธฐ๋Šฅ ๊ฐœ์„ ) Optimistic UI๋Š” API์— ์š”์ฒญ์„ ๋ณด๋‚ธ ํ›„ UI๋ฅผ ๊ทธ๋ ค๋‚ด๋Š” ๊ณผ์ •์—์„œ ๋ชจ๋“  ๊ฒƒ์„ ๋‚™๊ด€์ ์œผ๋กœ ๋ณด๊ณ  UI๋ฅผ ๋จผ์ € ๊ทธ๋ฆฌ๋Š” ๋ชจ๋ธ์ด๋‹ค. ๋‹ค์‹œ ์ •๋ฆฌํ•˜์ž๋ฉด, ์˜ตํ‹ฐ๋ฏธ์Šคํ‹ฑ UI๋Š” ๋ชจ๋“  API ํ†ต์‹ ์ด ์„ฑ๊ณตํ•  ๊ฒƒ์ด๋ผ ์—ฌ๊ธฐ๊ณ  ํ™”๋ฉด์— ๋จผ์ € ๊ฒฐ๊ณผ ๊ฐ’์„ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ์„ฑ๊ณตํ™•๋ฅ ์ด 99%์ •๋„ ๋˜๋Š” ์š”์ฒญ์—” ์ ์šฉํ•ด์ค˜๋„ ๋˜์ง€ ์•Š์„๊นŒ..? (์ข‹์•„์š”, ๋ถ๋งˆํฌ๋Š” ๋ฉ”์ธํŽ˜์ด์ง€ -> ์ƒ์„ธํŽ˜์ด์ง€์— ์ ‘๊ทผํ•œ ํ›„ ๊ฐ€๋Šฅํ•œ๋ฐ, ์ƒ์„ธ ํŽ˜์ด์ง€ ์œ ์ €๊ฐ€ ์ข‹์•„์š”๋‚˜ ๋ถ๋งˆํฌ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ onSubmit ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค. const onSubmitOption = async (type: string) => { try { const res = await fetch( `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/${..

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