πŸ’‘ μ–΄λ–»κ²Œ 이 아이디어가 λ‚˜μ™”λŠ”κ°€

ν”„λ¦¬μ½”μŠ€ λ™μ•ˆ μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ μ—¬λŸ¬ κΈ°λŠ₯을 κ΅¬ν˜„ν•˜μ˜€λŠ”λ°, μ‹€μ œλ‘œ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ μ΅œμ’…μ μœΌλ‘œ κ΅¬ν˜„ν•˜λŠ” 것은 λΈŒλΌμš°μ € 화면이닀.

ν•˜μ§€λ§Œ μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ κΈ°λŠ₯이 잘 λ™μž‘ν•˜λŠ”μ§€λ§Œ 신경을 썼고, κ·Έ μ½”λ“œκ°€ λΈŒλΌμš°μ € λ‚΄λΆ€μ—μ„œ μ–΄λ–»κ²Œ λ Œλ”λ§λ˜κ³ , μ„±λŠ₯에 μ–΄λ–€ 영ν–₯을 μ£ΌλŠ”μ§€λŠ” 깊이 μƒκ°ν•˜μ§€ μ•Šμ•˜λ‹€. 예λ₯Ό λ“€μ–΄ μ™œ ReactλŠ” Virtual DOM을 μ‚¬μš©ν•˜λŠ”κ°€λΌλŠ” μ§ˆλ¬Έμ— λͺ…ν™•νžˆ λŒ€λ‹΅ν•  수 μ—†μ—ˆλ‹€.

λ”°λΌμ„œ λ‚΄κ°€ μ§  μ½”λ“œκ°€ ν™”λ©΄μ—μ„œ μ‹€μ œλ‘œ μ–΄λ–€ 과정을 거쳐 κ·Έλ €μ§ˆκΉŒλΌλŠ” ꢁ금증이 생겼고, ν˜„μž¬ μ‹€λ¬΄μ—μ„œ UX만큼 μ€‘μš”ν•œ μš”μ†Œκ°€ μ΅œμ ν™”λΌκ³  생각을 ν•˜κΈ° λ•Œλ¬Έμ— μ΅œμ ν™”μ— λŒ€ν•΄ 깊이 곡뢀λ₯Ό 해보고, 직접 μ‹€ν—˜ν•΄λ³΄μžλŠ” μ•„μ΄λ””μ–΄λ‘œ ν•΄λ‹Ή 주제λ₯Ό μ„ νƒν•˜μ˜€λ‹€.

🎯 이번 λ―Έμ…˜μ„ 톡해 μ–»κ³  싢은 것

μžλ°”μŠ€ν¬λ¦½νŠΈ 둜직이 λ‹¨μˆœμ΄ 계산을 μˆ˜ν–‰ν•˜λŠ” μˆ˜μ€€μ„ λ„˜μ–΄μ„œ, λΈŒλΌμš°μ €μ™€μ˜ μƒν˜Έμž‘μš© ꡬ쑰λ₯Ό μ΄ν•΄ν•˜κ³  μ‹Άλ‹€. 특히 documentFragment, requestAnimationFrameκ³Ό 같은 기술이 μ™œ μ„±λŠ₯ μ΅œμ ν™”μ— νš¨κ³Όμ μΈμ§€λ₯Ό 직접 눈으둜 ν™•μΈν•˜λ©° μ²΄κ°ν•˜λŠ” 것이 λͺ©ν‘œλ‹€. λ˜ν•œ, μ΄λŸ¬ν•œ κ³Όμ •μ—μ„œ React의 Virtual DOM처럼 ν˜„λŒ€ ν”„λ‘ νŠΈμ—”λ“œ ν”„λ ˆμž„μ›Œν¬κ°€ μ„±λŠ₯을 κ°œμ„ ν•˜λŠ” 원리λ₯Ό 바닐라 JS μˆ˜μ€€μ—μ„œ μ΄ν•΄ν•˜κ³  μ‹Άλ‹€.

🧠 λ‚˜μ—κ²Œ 이 λ―Έμ…˜μ΄ κ°€μ§€λŠ” 의미

이 ν”„λ‘œμ νŠΈλŠ” λ‹¨μˆœνžˆ μ½”λ“œλ₯Ό 더 잘 짜기 μœ„ν•œ 게 μ•„λ‹ˆλΌ, μ½”λ“œκ°€ λΈŒλΌμš°μ €μ—μ„œ μ–΄λ–»κ²Œ μ‚΄μ•„ μ›€μ§μ΄λŠ”μ§€λ₯Ό μ΄ν•΄ν•˜λŠ” 과정이닀. κ·Έλ™μ•ˆμ€ 결과물이 잘 λ‚˜μ˜€λ©΄ λ§Œμ‘±ν–ˆμ§€λ§Œ, μ΄μ œλŠ” κ·Έ κ²°κ³Όκ°€ λ‚˜μ˜€κΈ°κΉŒμ§€μ˜ 과정을 탐ꡬ할 것이닀. 즉, 이번 λ―Έμ…˜μ€ λ‚΄κ°€ λΈŒλΌμš°μ €λ₯Ό μ΄ν•΄ν•˜κ³  μ œμ–΄ν•  쀄 μ•„λŠ” 개발자둜 μ„±μž₯ν•˜κΈ° μœ„ν•œ μ²«κ±ΈμŒμ΄λ‹€.