자바스크립트 비동기(promise, async/await) 코드의 내부 동작Promise와 async/await은 비동기 작업을 다루는 문법이며, 두 문법의 동작에는 차이가 없으며 단순히 Promise의 복잡한 문법을 async/await이 더 직관적으로 작성하게 해주는 가독성의 차이이다.따라서 async/await을 '문법적 설탕'이라고 부른다. Promisefunction fetchUserDataWithPromises() { fetch('https://api.example.com/user/123') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } ..
자바스크립트 힙 (Heap)자바스크립트에서 동적 메모리 할당이 필요한 값들이 저장되는 메모리 영역으로 객체, 배열, 함수등이 여기에 저장된다.즉, 개발자가 직접 만들거나 생성한 데이터들이 저장되는 큰 저장 공간이다.크기가 커질 수 있고, 위치가 정해져 있지 않다. 느리지만 유연한 점이 특징이다. 스택(Stack)과 힙(Heap)구분StackHeap위치고정적, 작음동적, 큼용도함수 호출, 지역 변수객체, 배열, 함수 등 참조값속도빠름느림관리컴파일러가 자동 관리JS 엔진(GC)이 자동 관리 (Garbage Collection) function test() { const a = 1; // 스택 (고정 크기, 기본 타입) const b = { value: 2 }; ..
데이터 바인딩(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(() => ..