전체 글27 [JS] Event Bubbling과 Capturing 웹페이지에서 가장 중요한 것 중 하나를 뽑자면 사용자와의 인터렉션을 꼽을 수 있습니다. 인터렉션은 브라우저 이벤트로 구현할 수 있고, 주로 DOM 이벤트를 이용합니다. 이벤트에는 마우스, 키보드, 폼(form) 관련 기본적인 사용자 인터렉션뿐만 아니라, 네트워크나 리소스 등 렌더링 관련 이벤트까지 다양한 종류가 있습니다. [목차] 1. 이벤트 등록 2. 이벤트 객체 3. 이벤트 흐름(Event Flow) 4. 이벤트 버블링(Event Bubbling) 5. 이벤트 캡처링(Event Capturing) 6. 이벤트 흐름 중단하기 1. 이벤트 등록 1 - 1. addEventListener() 웹페이지에서 이벤트를 구현하기 위해서는 먼저 DOM 요소에 이벤트를 등록해야 합니다. 이렇게 DOM 요소가 이벤트를.. 2022. 1. 6. [JS] var, let, const와 hoisting ES6가 나오기 전까지 JS에서 변수를 선언하기 위해서는 var를 사용했습니다. var는 다음과 같은 특징을 갖고 있는데, 이 특징들로 예상치 못한 issue가 생기기도 합니다. 함수 레벨 scope(Function-level scope) var 키워드 생략 가능 전역 객체 property 생성 중복 선언 가능 hoisting ES6에서 let과 const가 도입되면서 var을 사용하면서 생기는 문제점들을 보완했습니다. [목차] 1. var 2. let과 const 3. Hoisting 1. var 1 - 1. 함수 레벨 scope 함수 안에서 var을 사용해 변수를 선언하면 그 변수는 선언된 함수 안에서만 사용가능합니다. 함수 밖에서 var을 사용한다면, 선언된 변수는 global scope를 갖습니다.. 2021. 10. 24. [JS] 실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context, EC)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, JS의 동적 언어로서의 성격을 잘 드러내는 개념입니다. 이름에서 유추할 수 있는 것처럼 코드가 실행되기 위해 필요한 환경이라고 생각할 수도 있습니다. 실행 컨텍스트에 대해 잘 이해한다면 scope, hoisting, this, closure 같은 JS의 필수적인 개념들을 이해하는데 도움이 됩니다. [목차] 1. 실행 컨텍스트(Execution Context) 2. 실행 컨텍스트 스택(Execution Context Stack) 3. 실행 컨텍스트의 구성 4. 실행 컨텍스트의 생성 과정 5. Hoisting 1. 실행 컨텍스트(Execution Context) JS 코드를 실행하기 위해서 자바스크.. 2021. 10. 23. 이전 1 2 3 다음
