이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. 이벤트 위임을 이해하기 위해서는 이벤트 캡처링과 이벤트 버블링을 이해해야한다. 특히 버블링을 유심히 살펴보자. 이벤트 전파 ul 태그의 두번째 li에 클릭 이벤트가 발생했다. 이벤트가 발생한 DOM 요소를 이벤트 타겟이라고 부른다. 이벤트가 발생하면 DOM 트리를 타고 이벤트 타겟까지 캡쳐링된다.📸 이벤트가 어디서 발생했지? 하면서 DOM 트리를 타고 내려오는 것이다. 그런 다음, 이벤트가 발생한 타겟을 찾았으면 다시 상위 DOM 요소로 이벤트가 올라가는데 이 과정을 버블링이라고 한다.💦 정리하면 이벤트 전파는 캡쳐링 ➡ 타겟 ➡ 버블링의 과정을 거친다. 🚀..

AjaxAjax는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. 왜 Ajax를 배울까? 그것은 웹페이지 동작방식이 Ajax 전과 후에 큰 차이가 존재하기 때문이다.과거 전통적인 웹페이지의 생명주기이다.클라이언트가 서버로부터 요청을 보내면 서버는 HTML,CSS,Javascript 파일을 보내준다.이 때 내가 로그인 페이지로 이동을 한다고 하자.로그인 페이지와 이전 페이지의 다른점은 로그인 창의 유무밖에 없다.하지만 서버는 다시 HTML,CSS,Javascript 파일을 보낸다. 이러한 방식은 다음과 같은 단점이 존재한다.변경할 필요가 없는 부분까지 다시 HTML파일을 받기 때문에 불필요..

const x = 1; function outer() { const x = 10; const inner = function () { console.log(x); }; return inner; } const innerFunc = outer(); innerFunc(); 맨 처음 전역 실행 컨텍스트가 콜스택에 푸쉬되고, outer함수가 호출되면서 outer함수 실행 컨텍스트 역시 콜스택에 푸쉬된다. 그리고 outer함수는 inner함수를 리턴하기 때문에 innerFunc는 inner함수를 가리키게된다. inner함수를 리턴한 후에 outer함수는 콜스택에서 팝되어 사라지게된다. 그리고 innerFunc를 실행시켰을 때 어떤값이 찍히게 될까? 결과는 outer함수에 정의된 x값 10이 로그에 찍히게 된다. 이미..

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역이다. 그렇다면 어떤 환경을 제공하고, 어떻게 실행 결과를 관리할까? 우선 소스 코드는 평가와 실행의 과정을 거친다. 코드를 실행하기 이전에 어떤 변수가 있는지, 어떤 함수가 존재하는지 등 평가의 과정을 거친 후에 그 정보들로 실행 컨텍스트를 구성하고, 런타임에 코드가 실행된다. const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); } bar(); } foo(); 실행 컨텍스트가 생성되고 콜 스택에 의해 관리되면서 코드의 제어권이 바뀌는 과정에 대해서는 생략한다. 복습할 때 스스로 다시 한 번..