데이터 바인딩(Data Binding)과 MVVM (Vue, React)UI(View)와 데이터(Model)를 자동으로 연결해주는 기술즉, 데이터가 바뀌면 UI도 자동으로 바뀌고 UI가 바뀌면 데이터도 자동으로 바뀌는 연결 구조 종류타입설명예시단방향 바인딩(One-way)데이터 -> UI만 반영React 기본 방식 (Props)양방향 바인딩 (Two-way)데이터 UI 상호 반영Vuew의 v-model, Angular의 {(ngModel)} MVVM (Model-View-ViewModel) 패턴데이터 바인딩을 체계적으로 적용하기 위한 아키텍쳐 패턴구성요소역할Model실제 데이터 또는 상태 (API 응답, 사용자 정보 등)View화면(UI) - 사용자에게 보여지는 부분ViewModelView와 Mo..
자바스크립트 쓰로틀링(Throttling), 디바운싱(Debouncing) 성능 최적화
자바스크립트 쓰로틀링(Throttling), 디바운싱(Debouncing) 성능 최적화자바스크립트 쓰로틀링(Throttling)과 디바운싱(Debouncing)은 성능 최적화를 위한 핵심 기법이다.고빈도 이벤트(스크롤, 리사이즈, 입력 등)에서 과도한 호출을 방지하고 성능을 높이는데 유용하다. 쓰로틀링 (Throttling)일정 시간 간격으로 함수를 강제로 실행하게 제한한다. 즉, N초에 한번만 실행되게 만든다는게 핵심이다.사용자의 행동이 빈번하지만 일정 간격으로만 반응하면 충분한 경우에 사용된다. (주기적으로 처리)스크롤 위치 저장윈도우 리사이즈 예시사용자가 아무리 스크롤을 해도, 200ms에 한번만 로그 출력window.addEventListener('scroll', throttle(() => ..
이벤트 위임(Event Delegation)과 성능 최적화
이벤트 위임(Event Delegation)과 성능 최적화 이벤트 위임 (Event Delegation)하위 요소에 개별적으로 이벤트 리스너를 추가하는 대신에 상위 요소에서 하나의 이벤트 리스너를 통해 이벤트를 감지하여 하위요소들의 이벤트를 처리하는 기법이다.자바스크립트의 이벤트 버블링(Event Bubbling)을 이용하여 이벤트가 부모 요소까지 전파하는 특성을 활용했으며, 이벤트가 발생한 하위요소에서 직접 핸들러를 실행하는 것이 아니라 부모요소에서 이벤트를 감지하여 실행하는 방식이다. 예제// 개별 이벤트 리스너document.querySelectorAll('.btn').forEach((button) => { button.addEventListener('click', () => { cons..
프로토타입과 프로토타입 체인
프로토타입과 프로토타입 체인 프로토타입 (Prototype)자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반의 객체 지향 언어이다.여기서 객체 지향 언어라는건 === 객체지향 프로그래밍(OOP, Object-Oriented Programming)으로 데이터(속성)과 행동(메서드)을 하나의 객체(Object)로 묶어 프로그래밍하는 방법이다. 객체속성 (Property) - 객체의 상태를 나타냄 (ex: 이름, 나이, 색상등..)메서드 (Method) - 객체가 수행할 수 있는 동작 (ex: 걷다, 뛰다, 날다등..) 모든 객체는 자신의 부모 역할을 하는 객체인 프로토타입(Prototype)을 참조한다.모든 객체는 프로토타입 링크 [[Prototype]] (또는 __proto__)라는 숨겨진 링크를..