- 발행일
[ZBF] 자바스크립트 이벤트 TAIL ASK
[ZBF] 자바스크립트 이벤트 TAIL ASK
이 글은 네이버 블로그에 2024년 5월 21일에 올렸던 것을 그대로 옮겨온 것입니다.
이벤트의 뜻은
대표적으로는,
"불특정의 사람들을 모아 놓고 개최하는 잔치"
"이벤트 사업"
하지만 우리는 아래의 이벤트들의 뜻으로 쓰일 듯하다.
"컴퓨터를 사용할 때 프로그램이 반응하도록 사용자가 생성하는 작업"
"컴퓨터 네트워크에서 데이터 전송을 위하여 주고 받는 연결 제어 명령이나 이에 대한 반응"
"데이터베이스 시스템에서 데이터베이스의 내용을 변경하는 일"
다시 말해,
브라우저는 처리해야할 특정 사건이 발생하면, 이를 감지하여 이벤트를 "발생" 시킨다.
이 때,
이벤트가 발생 했을때 호출될 함수를 이벤트 핸들러라 하고,
이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.
- 마우스 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 마우스 이벤트 | click | 사용자가 마우스를 클릭할 때 발생합니다. |
| dblclick | 사용자가 마우스를 더블 클릭할 때 발생합니다. | |
| mousedown | 사용자가 마우스 버튼을 누를 때 발생합니다. | |
| mouseup | 사용자가 마우스 버튼을 뗄 때 발생합니다. | |
| mousemove | 사용자가 마우스를 움직일 때 발생합니다. | |
| mouseover | 사용자가 요소 위로 마우스를 올릴 때 발생합니다. | |
| mouseout | 사용자가 요소에서 마우스를 뺄 때 발생합니다. | |
| mouseenter | 사용자가 요소로 마우스를 올릴 때 발생합니다 (버블링 없음). | |
| mouseleave | 사용자가 요소에서 마우스를 뺄 때 발생합니다 (버블링 없음). |
- 키보드 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 키보드 이벤트 | keydown | 사용자가 키를 누를 때 발생합니다. |
| keyup | 사용자가 키를 뗄 때 발생합니다. | |
| keypress | 사용자가 키를 누르고 있을 때 발생합니다 (입력 문자에만). |
- 포커스 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 포커스 이벤트 | focus | 요소가 포커스를 얻을 때 발생합니다. |
| blur | 요소가 포커스를 잃을 때 발생합니다. | |
| focusin | 요소가 포커스를 얻을 때 발생합니다 (버블링 있음). | |
| focusout | 요소가 포커스를 잃을 때 발생합니다 (버블링 있음). |
- 폼 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 폼 이벤트 | submit | 폼이 제출될 때 발생합니다. |
| reset | 폼이 리셋될 때 발생합니다. | |
| change | 폼 요소의 값이 변경될 때 발생합니다. | |
| input | 폼 요소에 입력이 있을 때 발생합니다. |
- 값 변경 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 값 변경 이벤트 | change | 입력 필드의 값이 변경될 때 발생합니다. |
| input | 사용자가 입력할 때마다 발생합니다. | |
| propertychange | 속성이 변경될 때 발생합니다 (일부 브라우저에서만). |
- DOM 뮤테이션 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| DOM 뮤테이션 이벤트 | DOMSubtreeModified | DOM의 하위 트리가 수정될 때 발생합니다. |
| DOMNodeInserted | 노드가 추가될 때 발생합니다. | |
| DOMNodeRemoved | 노드가 제거될 때 발생합니다. | |
| DOMAttrModified | 노드의 속성이 변경될 때 발생합니다. |
- 뷰 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 뷰 이벤트 | scroll | 사용자가 요소를 스크롤할 때 발생합니다. |
| resize | 창의 크기가 변경될 때 발생합니다. | |
| zoom | 문서가 확대/축소될 때 발생합니다. |
- 리소스 이벤트
| 이벤트 종류 | 이벤트 | 설명 |
|---|---|---|
| 리소스 이벤트 | load | 페이지나 리소스가 로드될 때 발생합니다. |
| error | 리소스가 로드되지 않을 때 발생합니다. | |
| abort | 리소스 로딩이 중단될 때 발생합니다. | |
| unload | 페이지가 언로드될 때 발생합니다. |
이벤트 핸들러는 이벤트가 발생 했을 때, 브라우저에 호출을 위임한 함수,
이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러
이벤트가 발생했을 때, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.
이벤트 핸들러 등록하는 방식은 다음과 같다. (3)
- 가. 이벤트 핸들러 어트리뷰트 방식
암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 아래로 표현
1. HTML 코드 작성: onclick 속성에 이벤트 핸들러 코드를 작성합니다.
2. 암묵적 함수 생성: 브라우저는 onclick 속성에 작성된 코드를 이벤트 핸들러 함수로 변환합니다.
3. 이벤트 발생: 버튼을 클릭하면 onclick 속성에 설정된 함수가 실행됩니다.
인라인 방식 (Inline Event Handlers)와 어트리뷰트 방식 (Attribute Event Handlers)
인라인 방식이라고도 부른다...
<!DOCTYPE html>
<html>
<head>
<title>인라인 방식</title>
</head>
<body>
<button onclick="alert('버튼 클릭!')">클릭하세요</button>
</body>
</html>
인라인 방식 (Inline Event Handlers): HTML 태그의 속성으로 이벤트 핸들러를 정의하는 방식입니다.
어트리뷰트 방식 (Attribute Event Handlers): 인라인 방식과 동일한 개념으로, HTML 태그의 속성(attribute)으로 이벤트 핸들러를 정의하는 방식입니다.
장점: 이해하기 쉽고, 작은 규모의 프로젝트에 적합합니다.
단점: 코드가 지저분해지고, 유지보수가 어렵습니다.
나. 이벤트 핸들러 프로퍼티 방식
이벤트 타깃, 이벤트 타입, 이벤트 핸들러 지정
이벤트 타깃 (Event Target)
- 이벤트 타깃은 이벤트가 발생하는 HTML 요소를 가리킵니다. 이 요소를 선택하여 변수에 할당해야 합니다. 이벤트 타깃은 document.getElementById, document.querySelector 등의 메서드를 사용하여 선택할 수 있습니다.
이벤트 타입 (Event Type)
- 이벤트 타입은 어떤 종류의 이벤트가 발생할지를 정의합니다. 예를 들어, 클릭 이벤트는 click, 마우스 오버 이벤트는 mouseover 등입니다. 이벤트 타입은 요소의 이벤트 핸들러 속성으로 설정됩니다.
이벤트 핸들러 (Event Handler)
- 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 핸들러는 이벤트가 발생했을 때 수행할 작업을 정의합니다.
한국어로는 속성 방식 이라고 함
프로퍼티와 인스턴스는 객체 지향 프로그래밍(OOP)
| 개념 | 설명 | 예시 |
|---|---|---|
| 인스턴스 | 클래스에서 생성된 개별 객체 | const myDog = new Dog('Rex', 'Golden Retriever'); |
| 프로퍼티 | 객체의 데이터를 저장하는 변수, 클래스의 필드 | this.name 또는 this.breed |
<!DOCTYPE html>
<html>
<head>
<title>속성 방식</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('버튼 클릭!');
};
</script>
</body>
</html>
장점: HTML과 JavaScript를 분리하여 관리할 수 있습니다.
단점: 여전히 요소별로 이벤트를 설정해야 해서 코드가 길어질 수 있습니다.
다. addEventListener 메서드 방식
<!DOCTYPE html>
<html>
<head>
<title>메서드 방식</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('버튼 클릭!');
});
</script>
</body>
</html>
- 장점: 여러 핸들러를 추가할 수 있고, 이벤트 제거가 쉽습니다. 코드가 더 깔끔하고 유지보수하기 좋습니다.
- 단점: 이해하기 어려울 수 있지만, 조금 익숙해지면 가장 강력한 방식입니다.
addEventListener 제거 방식
addEventListener로 추가한 이벤트 핸들러를 제거하려면 removeEventListener 메서드를 사용해야 합니다. 제거할 때는 반드시 동일한 함수 참조를 사용해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>이벤트 핸들러 제거</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<button id="removeButton">이벤트 제거</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function handleClick() {
alert('버튼 클릭!');
}
button.addEventListener('click', handleClick);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', handleClick);
alert('이벤트 핸들러가 제거되었습니다.');
});
</script>
</body>
</html>
위임이란?
- 어떤 일을 책임 지워 맡김. 또는 그 책임.
- 당사자 중 한쪽이 상대편에게 사무 처리를 맡기고 상대편은 이를 승낙함으로써 성립하는 계약.
이벤트 위임은 ?
이벤트 위임은 부모 요소에 하나의 이벤트 핸들러를 설정하여 자식 요소들에서 발생하는 이벤트를 처리하는 기법
많은 수의 자식 요소들에 각각 이벤트 핸들러를 설정하는 대신, 부모 요소에 이벤트 핸들러를 설정함으로써 성능을 최적화하고 코드 관리를 용이
이벤트 위임은 이벤트 버블링(Event Bubbling) 개념을 활용
이벤트 버블링이란, 웹 브라우저에서 이벤트가 발생할 때, 그 이벤트가 발생한 요소에서부터 시작하여 부모 요소들을 차례로 거쳐 가장 상위의 조상 요소(보통 document 객체)까지 전파되는 현상을 말합니다. 이는 웹 페이지에서 이벤트 처리를 더 쉽게 하고, 이벤트 위임(Event Delegation)과 같은 기법을 가능
중복감소
- 하위요소에서 발생하는 이벤트를 상위에서 한번에 처리
동적인 요소처리
- 페이지가 로드된 이후 상위 요소 이벤트 리스너라 이벤트 처리
메모리 사용 최적화
- 상위 요소에서 이벤트 리스너를 몇 개만 설정 가능
이벤트 관리의 단순화
- 이벤트의 흐름을 보다 쉽게 추적 및 관리 가
그러면 반대로?
이벤트 캡처링(Event Capturing)은 이벤트가 발생할 때, 가장 상위의 조상 요소에서부터 시작하여 이벤트가 실제로 발생한 요소까지 전파되는 현상입니다. 이는 이벤트 버블링과 반대 방향으로 전파됩니다.
| 특징 | 이벤트 버블링 | 이벤트 캡처링 |
|---|---|---|
| 전파 방향 | 하위 요소에서 상위 요소로 | 상위 요소에서 하위 요소로 |
| 기본 설정 | 대부분의 이벤트가 기본적으로 버블링 사용 | 캡처링을 사용하려면 addEventListener에 true 인자 필요 |
| 사용 빈도 | 일반적으로 더 많이 사용됨 | 상대적으로 덜 사용됨 |
캡쳐링이 자주 사용되지 않는 이유?
복잡성 증가
- 이벤트 캡쳐링과 버블링 단계를 모두 고려 해야함
불 필요한 사용 사례
- 대부분의 이벤트 처리는 이벤트 버블링만으로도 충분히 처리 가능
이벤트 흐름의 예측 가능성
- 이벤트의 흐름이 덜 직관적
특정 상황에 대한 이해
- 캡처링을 사용해야할 상황이 자주 발생하지 않음
이벤트 위임의 장점으로는,
장점
- 효율성: 다수의 이벤트 핸들러를 자식 요소 각각에 설정하는 대신, 하나의 이벤트 핸들러로 처리할 수 있어 성능이 향상됩니다.
- 유지보수: 코드가 간결해지고, 관리가 쉬워집니다. 특히 동적으로 추가되거나 제거되는 요소들이 많은 경우 유용합니다.
- 동적 요소 처리: DOM에 동적으로 추가된 요소들도 별도의 처리 없이 이벤트 핸들러가 적용됩니다.
이벤트 위임의 단점으로는,
적절한 타겟 식별 필요
- 이벤트 위임을 사용할 때는 event.target을 통해 실제로 이벤트가 발생한 요소를 식별해야 합니다. 이는 코드의 복잡성을 증가시킬 수 있으며, 실수로 잘못된 요소를 식별할 위험이 있습니다.
다양한 이벤트 타입 처리 어려움
- 모든 이벤트 타입이 버블링되는 것은 아닙니다. 예를 들어, focus나 blur 이벤트는 버블링되지 않기 때문에 이벤트 위임을 사용할 수 없습니다. 이런 경우에는 각 요소에 개별 이벤트 핸들러를 설정해야 합니다.
성능 문제
- 이벤트 위임을 사용할 때, 부모 요소의 이벤트 핸들러는 자식 요소 중 어느 하나에서 이벤트가 발생할 때마다 호출됩니다. 자식 요소가 많아질수록 이벤트 핸들러는 더 자주 호출되며, 이는 성능 저하로 이어질 수 있습니다.
DOM 구조 변화
- DOM 구조가 동적으로 변할 때, 특히 자식 요소가 빈번하게 추가되거나 제거되는 경우, 이벤트 핸들러가 의도하지 않은 요소에 적용될 수 있습니다. 이를 방지하려면 DOM 변화를 정확히 관리해야 합니다.
잠재적인 메모리 누수
- 잘못된 이벤트 핸들러 관리는 메모리 누수로 이어질 수 있습니다. 부모 요소에 이벤트 핸들러를 설정한 후, 자식 요소가 동적으로 제거되거나 추가될 때 적절히 관리하지 않으면 메모리 누수가 발생할 수 있습니다.
주의 사항
- 적절한 이벤트 타겟 확인: 이벤트 위임을 사용할 때는 event.target을 통해 실제 클릭된 요소를 확인하는 과정이 필요합니다. 이를 통해 불필요한 요소에서 발생한 이벤트를 처리하지 않도록 합니다.
- 이벤트 버블링 방지: 특정 상황에서 이벤트 버블링을 방지하고 싶다면, event.stopPropagation()을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>이벤트 위임</title>
</head>
<body>
<ul id="parentList">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<script src="script.js"></script>
</body>
</html>
document.getElementById('parentList').addEventListener('click', function(event) {
// 이벤트 타겟이 li 요소인지 확인
if (event.target.tagName === 'LI') {
alert(event.target.innerText + ' 클릭됨!');
}
});
그러면, 이벤트 위임에서 event.target과 event.currentTarget의 차이는 ?
event.target
- 설명: event.target은 이벤트가 실제로 발생한 요소를 가리킵니다.
- 예시: 사용자가 클릭한 버튼, 입력한 텍스트 필드 등 실제로 사용자가 상호작용한 요소.
- 용도: 이벤트 위임에서 특정 자식 요소에 대해 이벤트를 처리할 때 사용됩니다.
event.currentTarget
- 설명: event.currentTarget은 이벤트 핸들러가 부착된 요소를 가리킵니다.
- 예시: 이벤트 위임에서 이벤트 핸들러가 부착된 부모 요소.
- 용도: 이벤트 핸들러가 부착된 요소를 참조할 때 사용됩니다. 이는 이벤트 위임 상황에서 부모 요소를 가리키게 됩니다.
이벤트 전파란,
생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 이벤트 핸들러는 이벤트가 발생했을 때, 트리를 통해 전파된다.
계속해서 나오고 있는 DOM 은 무엇인가?
1. DOM (Document Object Model)
DOM은 HTML과 XML 문서의 프로그래밍 인터페이스입니다. 웹 브라우저가 HTML 문서를 로드하면, 해당 문서는 브라우저에 의해 파싱되어 DOM이라는 트리 구조로 변환됩니다. 이 트리 구조는 모든 요소, 속성, 텍스트 등을 노드로 포함하고 있습니다. DOM을 통해 자바스크립트와 같은 스크립팅 언어를 사용하여 HTML 요소와 속성을 동적으로 읽고, 수정하고, 삭제할 수 있습니다.
예를 들어, JavaScript를 사용하여 DOM의 특정 요소의 색상을 변경하거나 새로운 요소를 추가할 수 있습니다.
주요 특징:
- 트리 구조: HTML 문서의 각 요소는 트리 구조의 노드로 표현됩니다.
- 실시간 업데이트: DOM 조작을 통해 웹 페이지의 내용을 실시간으로 업데이트할 수 있습니다.
- 언어 독립적: DOM은 언어 독립적인 API입니다. 다양한 프로그래밍 언어에서 사용할 수 있지만, 일반적으로 JavaScript와 함께 사용됩니다.
DOM에서 트리와 노드
트리 구조 (Tree Structure)
DOM 트리는 HTML 문서의 계층 구조를 트리 형태로 표현합니다. 트리 구조는 노드(Node)들로 구성되며, 각 노드는 문서의 일부(예: 요소, 속성, 텍스트)를 나타냅니다. 트리 구조는 루트(root) 노드, 부모(parent) 노드, 자식(child) 노드, 형제(sibling) 노드로 이루어집니다.
노드 (Node)
DOM 트리의 각 항목을 노드(Node)라고 합니다. 노드는 여러 종류가 있으며, 각 노드는 문서의 특정 부분을 나타냅니다.
노드의 종류:
요소 노드 (Element Node): HTML 요소를 나타냅니다. 예:
\<div>,\<p>.텍스트 노드 (Text Node): 요소 내의 텍스트를 나타냅니다. 예: "Hello, World!".
속성 노드 (Attribute Node): 요소의 속성을 나타냅니다. 예:
id="header".주석 노드 (Comment Node): 주석을 나타냅니다. 예:
\<!-- 주석 -->.문서 노드 (Document Node): 문서 자체를 나타냅니다.
DOM API를 사용한 트리 및 노드 조작
DOM API는 JavaScript를 사용하여 트리 구조를 탐색하고 노드를 조작할 수 있는 다양한 메서드를 제공합니다.
트리 구조: DOM은 문서를 트리 형태로 표현하며, 루트 노드에서 시작해 부모, 자식, 형제 노드로 구성됩니다.
노드: DOM 트리의 각 항목을 노드라고 하며, 요소 노드, 텍스트 노드, 속성 노드, 주석 노드 등이 있습니다.
노드 조작: DOM API를 사용하여 트리 구조를 탐색하고, 노드를 선택, 탐색, 조작할 수 있습니다.
2. Virtual DOM
Virtual DOM은 DOM의 가벼운 복사본입니다. React와 같은 일부 자바스크립트 라이브러리에서 사용되며, DOM을 직접 변경하는 것보다 효율적인 변경을 가능하게 합니다. Virtual DOM을 사용하는 주된 이유는 실제 DOM을 조작하는 것이 비용이 많이 들기 때문입니다. 실제 DOM을 조작하면 브라우저가 웹 페이지의 일부 또는 전체를 다시 렌더링해야 할 수 있습니다.
Virtual DOM은 다음과 같이 작동합니다:
- 사용자 인터페이스의 변화가 일어나면, 전체 UI를 Virtual DOM에 다시 렌더링합니다.
- 변경된 Virtual DOM과 원본 DOM을 비교합니다.
- 변경 사항만을 실제 DOM에 적용합니다. 이 과정을 'diffing'이라고 하며, 최소한의 DOM 조작으로 뷰를 업데이트할 수 있습니다.
주요 특징:
- 효율성: 가상 DOM은 변경 사항을 메모리에서 계산하고, 실제 DOM에는 필요한 최소한의 변경만 적용하므로 성능이 향상됩니다.
- 재렌더링 최적화: 변경된 부분만을 업데이트하여 불필요한 재렌더링을 방지합니다.
- 프레임워크 사용: 주로 React와 같은 프레임워크에서 사용됩니다.
DOM과 가상 DOM의 차이점
| 특징 | DOM | 가상 DOM |
|---|---|---|
| 구조 | 트리 구조로 문서의 요소들을 나타냄 | 실제 DOM의 가벼운 사본을 메모리에 유지 |
| 성능 | 직접 조작 시 많은 재렌더링과 성능 저하가 발생할 수 있음 | 변경 사항을 메모리에서 계산 후 최소한의 변경만 실제 DOM에 적용하여 성능 최적화 |
| 업데이트 | 직접 DOM 요소를 선택하고 변경 | 상태 변경 시 자동으로 가상 DOM이 업데이트되고, 차이점을 계산하여 실제 DOM에 반영 |
| 주요 사용 사례 | 전통적인 웹 페이지 조작 | React, Vue.js 등 최신 프레임워크와 라이브러리 |
이벤트에서의 this/ window 는 무엇인가?
| 특징 | this | window |
|---|---|---|
| 정의 | 문맥에 따라 달라지며, 일반적으로 이벤트가 발생한 요소를 참조 | 브라우저의 전역 객체 |
| 참조 대상 | 이벤트 핸들러 내에서는 핸들러가 부착된 요소 | 브라우저 창 또는 탭 자체 |
| 스코프 | 함수 호출 시의 문맥에 따라 결정됨 | 전역 스코프에서 항상 접근 가능 |
| 예제 | this.innerText - 클릭된 요소의 텍스트 참조 | window.innerWidth - 브라우저 창의 너비 참조 |
- this: 이벤트 핸들러 내에서는 이벤트가 발생한 요소를 참조합니다. 일반 함수에서는 핸들러가 부착된 요소를 가리키지만, 화살표 함수에서는 상위 스코프의 this를 상속받습니다.
- window: 브라우저 환경에서 전역 객체로, 모든 전역 변수와 함수는 window 객체의 속성입니다. 브라우저 창 또는 탭을 의미하며, 전역 스코프에서 항상 접근 가능합니다.
THIS에 대해서?
- this 키워드
this는 함수가 실행될 때 함수 내부에서 자신이 속한 객체나 실행 컨텍스트를 참조하는 변수입니다. this의 값은 함수를 호출하는 방식에 따라 달라집니다.
- 글로벌 컨텍스트: 브라우저에서는 window 객체를, Node.js에서는 global 객체를 가리킵니다.
- 함수 호출: 일반 함수에서 this는 기본적으로 글로벌 객체를 가리킵니다. 엄격 모드('use strict')에서는 undefined가 됩니다.
- 메소드 호출: 메소드가 호출될 때, this는 메소드를 호출한 객체를 가리킵니다.
- 생성자 함수: 새 객체를 생성할 때 this는 새로 생성된 객체를 가리킵니다.
- 화살표 함수: 화살표 함수에서 this는 외부 함수의 this를 상속받습니다.
- call과 apply 메서드
call과 apply는 함수를 호출하면서 명시적으로 this 값을 설정할 수 있게 하는 함수 메서드입니다. 이 메서드들을 사용하면 함수의 this 값을 유연하게 변경할 수 있어, 객체 지향 프로그래밍에서 특히 유용
- call 메서드: call 메서드는 첫 번째 인자로 this로 사용할 값과, 그 뒤에 함수에 전달할 인자들을 쉼표로 구분하여 전달합니다.
- apply 메서드: apply 메서드는 call 메서드와 유사하지만, 함수 인자를 배열의 형태로 받습니다.
- 용도와 차이점
- 용도: call과 apply는 주로 상속 구현과 같은 고급 자바스크립트 작업에 사용됩니다. 또한, 함수를 호출할 때 추가적인 매개변수를 전달하면서 this의 컨텍스트를 제어할 필요가 있을 때 유용합니다.
- 차이점: call은 인자를 개별적으로, apply는 인자를 배열로 받습니다. 사용 상황에 따라 선택할 수 있습니다.
이벤트를 막는 방법은 총 3가지 종류가 있습니다.
- event.preventDefault()
이 메서드는 이벤트의 기본 동작을 방지합니다. 예를 들어, 링크 클릭 시 페이지 이동을 막거나, 폼 제출 시 페이지 리로드를 막을 수 있습니다.
- event.stopPropagation()
이 메서드는 이벤트가 더 이상 상위 요소로 전파되지 않도록 합니다. 즉, 이벤트 버블링을 중지합니다.
- event.stopImmediatePropagation()
이 메서드는 같은 요소에 등록된 다른 이벤트 핸들러의 실행도 중지시킵니다. 즉, 현재 요소에 등록된 모든 이벤트 핸들러의 실행을 막습니다.
요약
- event.preventDefault(): 이벤트의 기본 동작을 방지합니다. 예: 링크 클릭 시 페이지 이동 방지, 폼 제출 시 페이지 리로드 방지.
- event.stopPropagation(): 이벤트 버블링을 중지하여 상위 요소로의 이벤트 전파를 방지합니다.
- event.stopImmediatePropagation(): 현재 요소에 등록된 다른 이벤트 핸들러의 실행을 모두 중지합니다.
이벤트 전파 방지
- DOM 이벤트 발생시 현재 요소에서 상위 요소로 전파되는 것을 방지
- 이벤트 버블링 및 캡쳐링을 중단
- 하위 요소에서 이벤트 발생 시 상위 요소의 이벤트 리스너에 영향을 주고 싶지 않을때
- 하위 요소에서 이벤트 발생시 상위 요소의 이벤트 리스너에 영향을 주고 싶지 않을때
- 상위 요소에서 이벤트 리스너가 실행되지 않으므로 영향을 충분히 고려
- preventDefault처럼 이벤트 기본 동작을 중단하지 않음
이벤트 기본 동작 방지
- 웹 브라우저는 많은 HTML 요소들에 대해 기본적인 동작을 가지고 있는데, 이 메서드를 사용하면 이러한 기본 동작을 취소
- submit 태그를 누르면 새로고침이 되는데 새로고침 방지
- 이벤트 전파를 중단하지는 않음
- 사용자가 기대하는 기본 동작을 변경하거나 새로운 동작을 추가할 때 유용
이벤트 루프 (Event Loop)
이벤트 루프는 자바스크립트 런타임의 핵심 구성 요소로, 호출 스택과 이벤트 큐를 모니터링하여 비동기 작업을 관리합니다.
동작 방법?
- 호출 스택(Call Stack)에 작업이 쌓임
자바스크립트 코드가 실행되면 각 함수 호출이 호출 스택에 쌓입니다.
호출 스택은 LIFO(Last In, First Out) 구조로, 가장 최근에 추가된 함수부터 실행합니다.
setTimeout실행 시 콜백 함수는 백그라운드로 이동
setTimeout함수가 호출되면, 지정된 시간이 경과할 때까지 콜백 함수는 백그라운드(브라우저 또는 Node.js 환경의 타이머 API)로 이동합니다.백그라운드에서는 타이머가 설정되어 지정된 시간이 경과될 때까지 대기합니다.
- 정해진 시간이 지나면 콜백 함수는 태스크 큐(Task Queue)로 이동
타이머가 만료되면, 백그라운드는 콜백 함수를 태스크 큐에 추가합니다.
태스크 큐는 FIFO(First In, First Out) 구조로, 가장 먼저 추가된 작업부터 처리됩니다.
- 이벤트 루프(Event Loop) 작동
이벤트 루프는 호출 스택이 비어 있는지 계속 확인합니다.
호출 스택이 비어 있을 때만 태스크 큐에서 콜백 함수를 호출 스택으로 이동시켜 실행합니다.
- 콜백 함수가 호출 스택으로 이동하고 실행
이벤트 루프가 태스크 큐에서 콜백 함수를 호출 스택으로 이동시킵니다.
호출 스택에 추가된 콜백 함수는 실행되고, 실행이 완료되면 호출 스택에서 제거됩니다.
싱글 스레드
자바스크립트는 싱글스레드(single-threaded) 언어입니다. 이는 한 번에 하나의 작업만 수행할 수 있다는 것을 의미합니다. 자바스크립트는 하나의 호출 스택(call stack)을 사용하여 코드의 실행을 관리합니다.
참고사항
한번에 하나의 작업만 수행할 수 있는 프로그래밍 언어
단일 스레드 언어, 콜 스택이 하나
단일 실행 흐름을 사용
콜스택이 한개 이기 때문에 코드는 동기적으로 실행
콜스택은 LIFO 방식
프로그램의 흐름을 이해하고 디버깅이 용이
반응성 저하 가능
호출 스택 (Call Stack)
호출 스택은 함수 호출을 추적하는 LIFO(Last In, First Out) 구조입니다. 자바스크립트 엔진은 호출 스택의 맨 위에 있는 함수부터 실행합니다.
- 참고사항
블로킹 ? 콜 스택에 현재 느리게 동작하는 작업이 남아 있는 것
이에 따라, 이 작업 때문에 웹 브라우저는 렌더링을 하지 못하고 다른 코드도 실행하지 못하는 경우가 생김 ==> 비동기 콜백으로 해결
비동기 (Asynchronous)
자바스크립트는 비동기적으로 작업을 처리할 수 있습니다. 비동기 작업은 호출 스택에 직접적으로 영향을 주지 않으며, 이벤트 큐(Event Queue)와 이벤트 루프(Event Loop)를 통해 관리됩니다. 비동기 작업은 주로 I/O 작업, 타이머, 네트워크 요청 등을 포함합니다.
콜백 (Callback)
콜백 함수는 다른 함수의 인자로 전달되어 특정 이벤트나 작업이 완료된 후 호출되는 함수입니다. 비동기 작업이 완료되면 해당 콜백 함수가 호출됩니다.
- 다른 함수의 인자로 이용되는 함수
- 어떤 이벤트에 의해 호출 되는 함수
- 메인스레드 === 이벤트 루프 > 싱글 스레
싱글 스레드에서 비동기가 가능한 이유
자바스크립트가 싱글 스레드 환경에서 비동기 작업을 처리할 수 있는 이유는 비동기 작업을 관리하는 메커니즘인 이벤트 루프와 관련된 런타임 환경 덕분입니다.
참고사항
자바스크립트 런타임
web API : 웹 브라우저가 제공하는 API <DOM, AJAX, TIMEOUT>
콜백 큐 : 비동기 함수들을 보관
이벤트 루프 : 콜스택과 콜백큐 상태를 감사하면서, 콜백큐가 비면 콜백 큐에서 기다리고 있는 콜백들을 콜 스택
1. 싱글 스레드 (Single-Threaded)
자바스크립트는 싱글 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 이는 호출 스택(call stack)에서 한 번에 하나의 함수만 실행할 수 있다는 것을 의미합니다. 호출 스택은 LIFO(Last In, First Out) 구조로, 함수 호출이 완료될 때까지 다른 작업을 실행하지 않습니다.
2. 비동기 작업의 필요성
웹 브라우저나 서버 환경에서 네트워크 요청, 파일 읽기/쓰기, 타이머 등의 작업은 시간이 오래 걸릴 수 있습니다. 이러한 작업이 호출 스택을 블로킹하지 않고 처리되도록 하는 것이 중요합니다. 여기서 비동기 프로그래밍이 필요합니다.
3. 이벤트 루프 (Event Loop)
이벤트 루프는 자바스크립트 런타임 환경에서 비동기 작업을 관리하는 핵심 메커니즘입니다. 이벤트 루프는 호출 스택과 이벤트 큐를 모니터링하여 비동기 작업을 처리합니다.
이벤트 루프의 동작 방식:
호출 스택이 비어 있는지 확인합니다.
호출 스택이 비어 있다면, 이벤트 큐에서 대기 중인 작업을 호출 스택으로 이동시켜 실행합니다.
이 과정이 반복되어 비동기 작업을 처리합니다.
4. 이벤트 큐 (Event Queue)
이벤트 큐는 비동기 작업의 콜백 함수를 저장하는 대기열입니다. 타이머, 네트워크 요청, 사용자 입력 등의 비동기 작업이 완료되면 해당 콜백 함수가 이벤트 큐에 추가됩니다.
5. 비동기 API
자바스크립트 런타임 환경(예: 브라우저, Node.js)은 비동기 API를 제공합니다. 이러한 API는 자바스크립트 엔진 외부에서 비동기 작업을 처리하고, 작업이 완료되면 콜백 함수를 이벤트 큐에 추가합니다.
주요 비동기 API:
- 타이머 API (setTimeout, setInterval)
- 네트워크 API (XMLHttpRequest, fetch)
- 파일 시스템 API (Node.js의 fs 모듈)
- 이벤트 리스너 (사용자 입력 이벤트)
6. 콜백 함수 (Callback Function)
비동기 작업이 완료되면 해당 콜백 함수가 이벤트 큐에 추가됩니다. 이벤트 루프는 호출 스택이 비어 있을 때 이벤트 큐에서 콜백 함수를 호출 스택으로 이동시켜 실행합니다.
이벤트 루프: 호출 스택과 이벤트 큐를 모니터링하여 비동기 작업을 관리합니다.
이벤트 큐: 비동기 작업의 콜백 함수를 대기시켜 호출 스택이 비어 있을 때 실행합니다.
비동기 API: 자바스크립트 런타임 환경에서 제공하는 API를 통해 비동기 작업을 처리하고 콜백을 이벤트 큐에 추가합니다.
콜백 함수: 비동기 작업이 완료되면 콜백 함수가 실행되어 블로킹 없이 작업을 처리합니다.
이벤트 루프는 비동기 작업을 처리하는 데 매우 중요한 역할
- 호출 스택의 유휴 상태 관리: 이벤트 루프는 호출 스택이 비어 있을 때 비동기 작업을 처리합니다.
- 비동기 작업 지연: 비동기 작업을 지연시켜 블로킹을 방지합니다.
- 이벤트 큐와 콜백 함수 관리: 이벤트 큐에서 대기 중인 콜백 함수를 순차적으로 실행합니다.
- 비동기 I/O 작업 처리: 비동기 I/O 작업을 효율적으로 처리하여 블로킹 없이 작업을 수행할 수 있습니다.