์ ์ฒด ๊ธ85 React v19 โ useActionState: ReactDOM.useFormState → ์ด๋ฆ ๋ณ๊ฒฝ + ๊ธฐ๋ฅ ๊ฐํuseActionState๋ ์๋ฒ ์ก์ (server actions)์ ์ฒ๋ฆฌํ ์ ์๋๋ก ์ค๊ณ๋ ํ ์ ๋๋ค.์๋๋ ReactDOM.useFormState๋ผ๋ ์ด๋ฆ์ด์์ผ๋ React v19์์ useActionState๋ก ๋ณ๊ฒฝ๋์์ต๋๋ค.tsx๋ณต์ฌํธ์งconst [state, formAction] = useActionState(myAction, initialState); ์ด ํ ์ ํด๋ผ์ด์ธํธ์์ ํผ ์ก์ ์ ์ฒ๋ฆฌํ ๋, ์๋ฒ์์ ์ธํฐ๋์ ์ํ(๋ก๋ฉ, ์ฑ๊ณต, ์คํจ ๋ฑ)๋ฅผ ๊ด๋ฆฌํด์ฃผ๋ ์ญํ ์ ํฉ๋๋ค. ์ค์ํ ์ ์ action์ด ์ฑ๊ณตํ๋ฉด ํผ์ ์๋์ผ๋ก resetํ๋ค๋ ๊ฒ์ ๋๋ค. ๋ ์ด์ e.preventDefault() → f.. 2025. 4. 16. ๐ง ๋ฌดํ ์คํฌ๋กค, ๊ฐ์ ๋ฆฌ์คํธ, ๊ทธ๋ฆฌ๊ณ Lazy Rendering ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ๋ฆฌ์คํธ ๋ ๋๋ง ๊ด๋ จ ๊ณ ๋ฏผ์ ๋ ๋น ์ง์ง ์์ฃ . ํนํ "๋ง์ ๋ฐ์ดํฐ๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ฒ, ๋ถ๋๋ฝ๊ฒ ๋ณด์ฌ์ค ๊ฒ์ธ๊ฐ?"๋ ๋ชจ๋ ์๋น์ค์์ ์ค์ํ ๋ฌธ์ ์ ๋๋ค.์ต๊ทผ ์ ๋ ๊ตฌ์ฑ์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๋ ํ ์ด๋ธ UI๋ฅผ ๋ฆฌ๋ด์ผํ๋ฉด์ ์ด ๋ฌธ์ ๋ฅผ ์ง์ ๊ฒช์๊ณ , ๊ทธ ํด๊ฒฐ์ ์ํด IntersectionObserver ๊ธฐ๋ฐ Lazy Rendering์ ์ ํํ์ต๋๋ค. ์ค๋์ ๊ทธ ์ฌ์ ๊ณผ ์ค๋ฌด ์ ์ฉ ํฌ์ธํธ๋ฅผ ๊ณต์ ํด๋ณด๋ ค ํฉ๋๋ค.๐งฉ ๊ธฐ์กด ๊ตฌ์กฐ์ ํ๊ณ: ํ์ด์ง๋ค์ด์ ์์ ๋ฌดํ ์คํฌ๋กค๋ก๊ธฐ์กด ๊ตฌ์ฑ์ ์ ๋ณด ํ์ด์ง๋ ํ์ด์ง๋ค์ด์ ๊ธฐ๋ฐ์ด์์ต๋๋ค. ์ฌ์ฉ์๋ 1ํ์ด์ง, 2ํ์ด์ง๋ฅผ ๋๊ธฐ๋ฉฐ ๋ฐ์ดํฐ๋ฅผ ๋ด์ผ ํ๊ณ , UX ์ธก๋ฉด์์ ๊ฝค ๋ถํธํ์ต๋๋ค. ์ด์ ๋ฐ๋ผ:โ ๋ ์์ฐ์ค๋ฝ๊ฒ ๋ฐ์ดํฐ๋ฅผ ํ์ํ ์ ์๋ ๋ฌดํ ์คํฌ๋กค๋ก ๋ณ๊ฒฝโ ํ์ง๋ง ๋ฌด.. 2025. 4. 8. ํจ์ํ์ ์ ํจ์์งํฅํ์ด ์๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ด๋ผ๊ณ ํ ๊น? ํจ์ํ ํ๋ก๊ทธ๋๋ฐ, ์ 'ํจ์์งํฅํ'์ด ์๋๊น?๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ 'Object-Oriented Programming'์ ๋ฒ์ญ์ด๋ค. ์ฌ๊ธฐ์ 'Oriented'๊ฐ '์งํฅ'์ผ๋ก ๋ฒ์ญ๋์ด ์ฐ๋ฆฌ๋ '๊ฐ์ฒด์งํฅ'์ด๋ผ ๋ถ๋ฅธ๋ค. ๊ทธ๋ฐ๋ฐ 'Functional Programming'์ ์ 'ํจ์์งํฅํ'์ด ์๋ 'ํจ์ํ'์ผ๊น?๊ฐ์๊ธฐ ๋ ์๋ฌธ์ธ๋ฐ, ์ฒ์์๋ ๋จ์ํ ๋ฒ์ญ์ ์ฐจ์ด๋ผ๊ณ ์๊ฐํ๋ค. ํ์ง๋ง ์ด๋ฅผ ์ฐพ์๋ณด๋ฉด์ ํฅ๋ฏธ๋ก์ด ๋ด์ฉ๋ค์ ๋ฐ๊ฒฌํ ์ ์์๋ค.์ฐจ์ด์ '์งํฅ'์ ์๋ฏธ'์งํฅ(ๆๅ)'์ "์ด๋ค ๋ชฉํ๋ก ๋ป์ด๋ ๋ฐฉํฅ์ ํฅํจ"์ ์๋ฏธํ๋ค.๊ฐ์ฒด์งํฅ์ ํ๋ก๊ทธ๋๋ฐ์ ์ค์ฌ์ '๊ฐ์ฒด'์ ๋๊ณ , ์ด๋ฅผ ํฅํด ๋์๊ฐ๋ ๋ฐฉ๋ฒ๋ก ์ด๋ค.'ํ'์ ์๋ฏธ'ํ(ๅ)'์ "์๊น์๋ ๋ชจ์"์ ์๋ฏธํ๋ค.ํจ์ํ์ ์ํ์ ํจ์๋ฅผ ๋ฐํ์ผ๋ก ํ ํ๋ก๊ทธ๋๋ฐ์ ํ 'ํํ'๋ฅผ.. 2024. 7. 2. Ref๋ฅผ ์ข ๋ ์ ์จ๋ณผ๊น? (forwardRef์ useImperativeHandle) ๋ค์ด๊ฐ๋ฉฐ: React์ Ref ์ ๋ฌ ๋ฌธ์ React์ ์ปดํฌ๋ํธ์์ ref๋ฅผ ์ ๋ฌํ๋ ค๊ณ ํ๋ฉด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.// ๐จ ๋์ํ์ง ์๋ ์ฝ๋const Input = (props) => { return ;};// ๋ถ๋ชจ ์ปดํฌ๋ํธconst Parent = () => { const inputRef = useRef(null); return ; // ref๊ฐ ์ ๋ฌ๋์ง ์์};์ด๋ React๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ref๋ฅผ ์ผ๋ฐ prop์ผ๋ก ์ ๋ฌํ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ฐ ์ ํ์ด ์๋ ์ด์ ๋:1. ์บก์ํ ์ ์ง: ๋ด๋ถ ๊ตฌํ ์ธ๋ถ์ฌํญ์ ๋ณดํธ2. ์์ธก ๊ฐ๋ฅํ ๋ฐ์ดํฐ ํ๋ฆ ๋ณด์ฅ3. ๋ถํ์ํ ๋ ธ์ถ ๋ฐฉ์ง forwardRef: React์ ๊ณต์์ ์ธ ref ์ ๋ฌ ๋ฉ์ปค๋์ฆReact ๊ณต์ ๋ฌธ์์ ๋ฐ๋ฅด๋ฉด, `forwardRef`๋ ๋ค์๊ณผ ๊ฐ์ .. 2024. 6. 28. scale up๊ณผ scale out ๐TL; DR ์ค์ผ์ผ ์ ๊ณผ ์ค์ผ์ผ ์์์ ์ฐจ์ด ์ธ์ฆ์๋ฒ๋ฅผ ์ค์ผ์ผ ์์ํ๋ค๊ณ ํ๋ ์ด์ ๋ ๋ฌด์์ผ๊น ์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๋์ ๋ก๊ทธ์ธ์ ์๊ตฌํ ๋, ์ค์ผ์ผ ์์์ผ๋ก ์ฒ๋ฆฌํ๋ ๊ฒ ์ ํฉ ์ค๋ง์ผ๊ฒ์ดํธ ๋ฐ๋ธ์บ ํ๋ฅผ ํ๋ฉด์ ๋ง์ด ๋ฃ๊ณ , ํ๋ ์๊ธฐ ์ค์ ํ๋๊ฐ scale out ๊ณผ scale up์ด๋ค. ์ด์ ์๋ ๋ง์ด ๋ค์์ง๋ง, ์ฌ์ค ๊ทธ๋ฅ ๋๋ค ํ์ฅํ๋ค๋ ๋ง๋ก ๋ฐ์๋ค์ด๊ณ ๋ณ ์๊ฐ์ด ์์๋ ๊ฒ ๊ฐ๋ค. ํ์ง๋ง, ์ด๋ฒ์ ๋ฐํ ์ค๋น๋ฅผ ํ๋ฉด์ ์ธ์ฆ์ ๋ด๋นํ๋ ์๋ฒ ๊ฐ๋ฐ์๊ฐ '์ธ์ฆ ์๋ฒ์ ์ ์ ์๋ฒ๋ฅผ ๋ถ๋ฆฌํ ์ง'์ ๋ํ ๊ณ ๋ฏผ์ ๋ง์ด ํ๋ค. ์ด ๊ณ ๋ฏผ์ ๋ง์ด ๋ฃ๊ณ , ๊ฒฐ๋ก ์ ๋ด๋ฆฌ๊ธธ -> '์ธ์ฆ์๋ฒ์ ์ ์ ์๋ฒ๋ฅผ ๋ถ๋ฆฌํ๊ณ , ์ดํ์ ์ธ์ฆ ์๋ฒ๋ฅผ scale out ํ ์ ์๋๋ก ์ค๊ณํ๋ค' ์๋ค. ๋ณ ์๊ฐ ์๋ค๊ฐ ์ด๋ ์ scale up์ด ์๋๋ผ scal.. 2024. 1. 16. ๋ setTimeout, setInterval ๋ก ์๊ฐ ๋ณด์ฅํ๋ค๊ณ ํ ์ ์์ด? ์ด๋ป๊ฒ? ํ์ด๋จธ๋ฅผ ๊ตฌํํ๋ค๊ฐ ๋ฌธ๋ ๊ทธ๋ฐ ์๊ฐ์ด ๋ค์๋ค. ์๋ฌด ์๊ฐ ์์ด setTimeout ๊ณผ setInterval์ ์ฌ์ฉํ๋ฉด์ ์๋ค๋ ์ด๋ป๊ฒ ๋์๊ฐ๋๊ฑฐ์ง? ์๋ค๋ฅผ ๋ฏฟ๊ณ ์จ๋๋๋๊ฑด๊ฐ? ๊ณผ์ฐ setTimeout๊ณผ setInterval์ด ์๊ฐ์ ๋ณด์ฅํด์ฃผ๋ ๊ฒ ๋ง๋? ๊ทธ๋์ ๊ณต๋ถํ๊ฒ ๋๋ค. ๐TL; DR setTimeout, setInterval์ ์ฐจ์ด์ ์ง์ฐ ๊ฐ๊ฒฉ์ด ๋ณด์ฅ๋๋? ์๊ฐ์ ์ธก์ ํด์ผ๋๋ ํ์ด๋จธ๋ผ๋ฉด Date๊ฐ ํด๊ฒฐ์ฑ ์ด ๋ ์๋..? setTimeout ์ง์ ํด์ค ์๊ฐ์ด ์ง๋ ํ์ 1ํ ํน์ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ ๋น๋๊ธฐ ํจ์ setTimeout์ด ๋น๋๊ธฐ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ ์ด์ ๋ JS์์ง์ด ์๋๋ผ WebAPI์์ ์ฒ๋ฆฌ๋ฅผ ํ๋ค. ์ด๋ฅผ ํตํด์ ์ฑ๊ธ์ค๋ ๋์ธ JS์์ ๋น๋๊ธฐ์ ์ธ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๊ฒ ๋๋ค. setInterval ์ง์ ํด.. 2024. 1. 16. ์ด์ 1 2 3 4 ยทยทยท 15 ๋ค์ ๋ฐ์ํ