분류 전체보기
![[JS] DeepDive(42) 비동기 프로그래밍](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcJ6OTj%2FbtsvkTpe62w%2FaRNxs0RGqkNTA9YUmXby2K%2Fimg.png)
[JS] DeepDive(42) 비동기 프로그래밍
동기 처리와 비동기 처리 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 즉 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. const foo = () => {}; const bar = () => {}; foo(); bar(); 위처럼 JS 엔진은 함수의 실행순서를 스택으로 관리한다. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉 함수를 실행할 수 있는 창구가 하나이며 동시에 2개 이상의 함수를 실행할 수 없다. JS 엔진이 싱글 스레드 방식으로 동작하기 때문에 시간이 걸리는 태스크를 실행하면 블로킹이 발생한다. 아래 sleep 함수를 구현해본 예제를 보자 // sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를..
![[JS] DeepDive(41) 타이머](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcQrxWR%2FbtsvkQsteCt%2Fy0RwvkGK2uWaewnVTZN93K%2Fimg.png)
[JS] DeepDive(41) 타이머
호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수를 명시적으로 호출하지 않고 일정시간 이후에 실행되도록 하려면 타이머 함수를 활용한다. 이를 호출 스케줄링이라 한다. JS는 setTimeout,setInterval,clearTimeout,clearInterval을 제공한다. 이 함수들은 ECMAScript 사양에 정의된 빌트인 함수는 아니지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로 타이머 함수를 제공한다. JS 엔진은 단하나의 실행 컨텍스트 스택을 갖는다. 즉 JS엔진은 싱글스레드인데 이러한 이유때문에 setTimeout과 setInterval은 비동기로 작동하게 된다. 타이머 함수 setTimeout / clearTimeout setTimeout 함수는 두..
![[JS] DeepDive(40) 이벤트(2) - 이벤트 전파](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4xWZY%2FbtsuG9Hvpg0%2FU8E7PB7HSllMgfpFeujUjK%2Fimg.png)
[JS] DeepDive(40) 이벤트(2) - 이벤트 전파
이벤트 전파 DOM 트리 상에 존재하는 DOM 요소에서 발생한 이벤트는 DOM 트리를 통해서 전파된다. Apple Banana Orange li요소를 클릭하면 클릭 이벤트가 발생하며 이벤트 전파 과정은 3단계로 구분할 수 있다. ul요소에 이벤트 핸들러를 바인딩한 예제를 통해서 이해해보자. Apple Banana Orange 1. 캡처링 : 클릭이벤트가 발생하여 window에서 시작하여 이벤트 객체가 이벤트 타깃방향으로 전파되는 것 2. 타깃 : 이벤트 객체가 이벤트를 발생시킨 이벤트 타깃에 도달한다. 3. 버블링 : 이벤트 타깃에서 시작해서 window방향으로 전파하는 것 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캡처할 수 있으며 addEve..
![[JS] DeepDive(40) 이벤트 (1) - event객체](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnkGEx%2FbtsuCHx557k%2FnK16gbBJIQasDJ18TPf1Kk%2Fimg.png)
[JS] DeepDive(40) 이벤트 (1) - event객체
이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.예를들어 클릭 , 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생 했을 때 호출될 함수를 이벤트 핸들러라고 하고 이벤트가 발생 했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 브라우저는 사용자의 버튼 클릭을 감지해 클릭 이벤트를 발생시킬 수 있다. Click me! 위와 같이 이벤트와 그에 대응하는 함수를 통해 사용자와 애플리케이션이 상호작용하며 이런 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라고 한다. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. https://devel..
[JS] DeepDive(39) DOM (3) - 어트리뷰트
어트리뷰트 노드와 attributes 프로퍼티 HTML 문서의 구성 요소인 HTML 요소는 여러개의 어트리뷰트를 가질 수 있다. 어트리뷰트 역시 모든 HTML요소에서 공통적으로 사용할 수 있는 어트리뷰트와 특정 HTML요소에서만 한정적으로 사용할 수 있는 어트리뷰트로 나누어져 있다. attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티이며 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다. HTML 어트리뷰트 조작 attributes 프로퍼티는 읽기 전용 접근자 프로퍼티이므로 HTML 어트리뷰트 값을 취득할 수 있지만 변경할 수는 없다. Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attr..
![[JS] DeepDive(39) DOM(2) - DOM 조작](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkpxOW%2FbtsuIzrVdJK%2FnksZsahbOetpwhps0XRGs0%2Fimg.png)
[JS] DeepDive(39) DOM(2) - DOM 조작
노드 탐색 요소 노드를 취득한 다음, 취득한 요소를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제 , 자식 노드등을 탐색해야할때가 있다. Apple Banana Orange ul#fruits 요소는 3개의 자식 요소를 가진다 따라서 ul#fruits 요소 노드를 취득한 다음 자식노드를 탐색하거나 자식중 하나를 탐색할 수 있다 이와같이 DOM 트리상 노드를 탐색할 수 있도록 Node,Element 인터페이스는 트리 탐색 프로퍼티를 제공해준다. parentNode,previousSibling,firstChild,childNodes 프로퍼티는 Node.prototype이 제공하고 프로퍼티 키에 Element가 포함된 previousElementSibling,nextElementSibling 과 chi..