Javascript7 [JavaScript] lodash의 debounce: cancel / flush 프론트엔드 개발자로서 실무를 하다 보면 수많은 상태를 관리하고, 사용자 입력에 실시간으로 반응해야 하는 상황을 마주합니다.특히 검색어 입력, 무한 스크롤, 윈도우 리사이즈와 같은 이벤트들은 순간에도 수십, 수백 번의 함수 호출을 발생시키곤 합니다.이런 성능 저하를 해결하기 위해 보통 디바운스(Debounce)를 도입합니다.하지만 무분별한 디바운스 사용이나 제어되지 않은 설정은 오히려 의도치 않은 버그나 UX 저하를 불러오기도 합니다. "분명 디바운스를 걸었는데 왜 데이터가 꼬이지?" "API가 호출 타이밍이 왜 이상하지" 이런 상황에 마주한다면, 디바운스를 제대로 '제어'해야 할 때라고 생각합니다.오늘은 lodash의 debounce를 더욱 정교하게 만들어주는 cancel과 flush 메서드를 통해,성능.. 2026. 3. 31. [Vue.js] Vue 시작하기 (설치, 개발환경 설정) Vue.js 란? Vue.js는 프론트엔드 웹 개발을 쉽게 만드는 JavaScript 프레임워크로, 선언적 렌더링, 반응형 데이터 바인딩 기능과, 컴포넌트 기반 아키텍처와 가상 DOM을 활용하여 성능을 최적화합니다. ( + 재사용 가능하고 확장 가능한 UI 컴포넌트의 생성) 또한 Vue.js는 라우팅, 상태 관리, 템플릿, JSX와 같은 다양한 기능을 지원하여 웹 애플리케이션 개발의 효율성을 높여줍니다. 공식사이트 : https://v2.ko.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org ⭐️ Vue 의 특징 선언적 렌더링: Vue.js는 HTML 템플릿을 사용하여 사용자 인터페이스를 정의하는 선언적 렌더링을 지원 컴포넌트 기반 아키텍처:.. 2023. 10. 24. [Javascript] 자바스크립트 메서드 (Method) Javascript Method 자바스크립트에서 메서드(Method)는 객체(Object)에 속한 함수를 나타내며, 객체는 프로퍼티(속성)과 메서드로 이루어져 있고, 메서드는 객체가 수행할 수 있는 동작이나 기능을 정의합니다. join Array.prototype.join() 배열의 모든 요소를 하나의 문자열로 연결 (병합) /* 배열 -> 문자열(한문장 묶어준다); */ let frontlangs = ['html', 'css','javascript']; let frontlangs2 = frontlangs.join(','); console.log(frontlangs2); https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objec.. 2023. 10. 18. [Javascript] 객체 Object, 배열 Array 객체(Object)와 배열(Array) JavaScript에서 객체(Object)와 배열(Array)은 둘 다 데이터를 저장하고 다루는 데 사용되는 자료구조입니다. 그러나 두 자료구조는 목적과 사용법에서 몇 가지 중요한 차이가 있습니다. 객체 (Object) 객체는 이름이 지정된 속성의 집합. 이러한 속성들은 객체의 특성이나 특징을 나타냅니다. → 객체는 중괄호({})를 사용하며, 속성들은 쉼표로 구분되어 정의됨. → 객체 속성에 접근시, 속성 이름을 사용 let 사람 = { 이름: '홍길동', 나이: 30, 성별: '남성' }; //객체 속성에 접근시, 속성 이름을 사용 /* 객체(object) = 변수(property) + 함수(method); 새 객체를 생성 var 객체명 = {} //빈 객체를 생.. 2023. 10. 18. 이전 1 2 다음
