JS9 [JS] 디바운싱과 쓰로틀링 디바운싱 Debouncing 연속으로 호출되는 함수 중 마지막에 호출되는 함수만 실행되도록 하는 것 (입력이 끝났을 시) 다음 코드와 같이 ajax 요청이 있을 경우 사용된다. var timer; document.querySelector('#input').addEventListener('input', function(e) { if(timer) { clearTimeout(timer); } timer = setTimeout(function() { // 실행 코드 내용 }, 1000); }); 이벤트가 발생할 때마다 이전 내용을 clear 하고 새로운 타이머 설정한다 설정해둔 시간(1초) 내에 이벤트가 발생하지 않으면 코드를 실행한다 쓰로틀링 Throttling 마지막 함수가 호출된 후 일정 시간이 지나기 전.. 2022. 4. 27. [JS] 자바스크립트 동기(synchronous)/비동기(Asynchronous) 동기식(synchronous) - 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것 - 즉, 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 작업이 끝나면 새로운 작업을 시작하는 것 - 분기문, 반복문, 함수 호출 등이 동기적으로 실행 - 코드의 흐름과 실제 제어 흐름이 동일 - 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면 프로그램 정지 비동기식(Asynchronous) - 시작된 작업의 완료 여부와 상관없이 새로운 작업을 시작하는 방식 자바스크립트는 다른 멀티스레드 프로그래밍 언어(자바, C++)와 다른 방식으로 비동기 동작을 처리한다. 자바스크립트의 비동기 - 자바스크립트 엔진은 비동기 처리를 제공하지 않는다. - 비동기 코드는 정해진 함수를 제공하여.. 2022. 4. 26. [JS] 자바스크립트 내장 객체 자바스크립트 내장 객체 자바스크립트는 여러 용도에 활용하는 객체를 내장 숫자, 문자, 날짜, JSON 객체 등을 다루는 유용한 객체 제공 globalThis - 전역 객체 지칭하는 변수 - 전역 객체는 환경에 따라 다름 - 브라우저는 window, node환경은 global 객체 지칭 - globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리킴 window - DOM document를 포함하는 창을 나타내는 객체 - 전역 스코프에 선언된 변수는 모두 window의 property - 현재 창의 정보를 얻거나 조작 - globalThis는 브라우저 환경에서 window 객체와 같음 document function documentInfo(){ console.log("문서 UR.. 2022. 4. 22. [JS] 자바스크립트 Hoisting 코드 실행 시 변수 처리 - 자바스크립트 엔진이 코드 읽으면 생성 단계에서 실행 컨텍스트 생성 - 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장 - var 변수는 저장 시 undefined로 초기화 - let, const는 초기화 X Hoisting console.log(call()) //undefined var x = 1; console.log(call()) //1 function call(){ return x } - 변수가 선언된 시점보다 앞에서 사용되는 현상 - var 변수는 생성 단계에서 undefined로 초기화 - 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출 가능 console.log(call()) // ReferenceError : Cannot acce.. 2022. 4. 22. [JS] 자바스크립트 변수 정의 과정 자바스크립트 엔진 - 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램 - 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱 되고 실행 - 크롬 브라우저 경우 V8 엔진 사용 - node.js는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램 - node.js는 여러 프로그램으로 구성, 자바스크립트 코드를 읽는 프로그램으로 V8 사용 - 브라우저와 node.js 환경은 같은 자바스크립트 코드를 작성해도 다르게 동작 가능 자바스크립트 코드 실행 - 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트 생성 * 실행 컨텍스트는 두 단계를 통해 생성 생성 단계 - 자바 스크립트 엔진 : 변수 선언 읽기 실행 단계 - 자바 스크립트 엔진 : 변수 값 할당 렉시컬 환경 Lexical E.. 2022. 4. 22. [JS] 이벤트와 이벤트 핸들러 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 - 자바스크립트는 발생한 이벤트에 반응하여 특정 동작 수행 이벤트 타입 - 발생한 이벤트의 종류 - 폼, 키보드, 마우스, HTML DOM, Window 객체 등 이벤트 설명 click 마우스 클릭 시 dbclick 마우스 더블 클릭 시 mouseenter 마우스를 요소 위에 올리면 mouseover 마우스를 요소 위에 올리면 (자식 노드도 영향) mouseout 마우스가 요소 밖으로 벗어날 때 mousedown 마우스로 요소를 눌렀을 때 focus 요소에 포커스가 이동되었을 때 keypress 키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생 keydown 키를 누를 때 keyup 키를 눌렀다가 떼는 순간 lo.. 2022. 4. 14. 이전 1 2 다음