개발일기

✨ 2편: imperative(명령형) vs declarative(선언형) ― React와 Vue로 이해하기✅ 선언형 vs 명령형, 한 줄 요약 명령형 (Imperative)“어떻게 할지” 직접 지시“불 켜! → 스위치 찾아! → 눌러!”선언형 (Declarative)“무엇을 하고 싶은지”만 말함“불을 켜줘” (방법은 시스템이 알아서) 📦 코드로 비교하면?🟥 명령형 예제 (Vanilla JS)const button = document.querySelector('#btn'); button.textContent = '클릭!'; button.style.backgroundColor = 'red'; 직접 DOM을 찾고, 바꾸고, 조작함로직이 길고, 흐름이 개발자 중심이다.예전 jQuery 스타일을 생각하면 좋..

✨ 1편: Virtual DOM, memo, useCallback ― React의 렌더링 최적화 핵심✅ 1. Virtual DOM이란?React에서 JSX는 결국 JS 객체(트리)로 파싱됩니다. 실제 DOM을 직접 건드리지 않고, 메모리 상에 가상의 DOM 트리를 만들어 저장한다. 상태가 바뀌면 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교한다. 바뀐 부분만 실제 DOM에 적용한다. 강의를 통해서 알게 된 내용이 있다. Jason Miller 라는 사람이 Preact를 만들었다. jsx없이 템플릿 리터럴로 html을 작성할 수 있는 일종의 html 파서 라이브러리를 만들었다. 그 라이브러리가 표현하는 바와 같이 오브젝트 형태의 virtual DOM을 가지고 새로운 DOM과 비교한다...

컨셉기존의 프레임워크 구조는 유지하되,내부적으로 성능 개선이 가능한 요소를 리팩토링 하여 성능 최적화를 진행.소스 상태동일한 페이지에서 파라미터만 동적으로 받아와서 같은 페이지를 사용이전에 저장된 캐시가 없는 최초의 상태동일한 조건에서, 파라미터를 변경하면서 크롬 개발자도구 > Lighthouse > Performance 지표 확인최초 로드 이후에 발생하는 이벤트 발생, 데이터 변경 등의 통합적인 성능점수가 아닌, 페이지를 최초로 로드할 때의 최적화 점수를 확인concept기존의 프레임워크 구조는 유지하되, 내부적으로 성능 개선이 가능한 요소를 리팩토링 하여 성능 최적화를 진행.report condition동일한 페이지(reservation.html)동일한 골프장코드(세라지오, 사우스링스)캐시, 메모리 ..