개발/JavaScript
[JavaScript] addEventListener과 onclick의 차이
JavaScript를 이용해 HTML 요소에 click 이벤트를 등록하는 경우를 생각해보자. HTML 요소를 찾은 뒤 addEventListener를 이용하는 방법이 있고 HTML 요소에 직접 onclick을 이용하는 방법이 있다. 두 방법 다 특정 이벤트가 발생하면 정해진 함수를 실행하도록 할 수 있다. 겉보기에 같은 기능을 하는 두 방법이 왜 별도로 존재하는 것일까? 1. 표현 방식 비교 click click (위의 두 코드의 실행 결과는 같다) 2. 차이점 위애서 handleClick 함수는 콜백함수이다. 이벤트가 발생되었을 때 실행되는 함수라고 생각하면 된다. 2-1. 여러개의 콜백 onclick에서는 여러개의 콜백함수를 지정할 수 없다. 가장 마지막에 등록된 콜백함수만 실행될 것이다. 반대로, ..
[NodeJS] 싱글 스레드와 이벤트 루프
NodeJS의 주요 특징은 다음과 같다. 싱글 스레드 Event Driven Non-blocking I/O NodeJS는 싱글 스레드 기반으로 작동하는데 어떻게 Non-blocking이 가능한 것일까? 1️⃣ NodeJS의 구조 NodeJS의 공식문서에 따라 NodeJS의 구조를 그림으로 나타내면 다음과 같다. NodeJS는 JS엔진(V8)과 함께 다양한 기능들이 함께 존재하는 것을 볼 수 있다. 여기서 싱글 스레드 기반의 NodeJS에서 비동기 처리가 가능하게 해주는 역할을 담당하는 것이 libuv이다. JS엔진(V8)은 구글에 의해 개발된 JS엔진으로 메모리 할당, 콜 스택 실행, GC 등의 기능을 수행한다. libuv는 비동기 I/O를 지원하는 C언어 기반의 라이브러리로 커널의 비동기 API로 할 ..
[JavaScript] 싱글 스레드와 비동기
function test1() { console.log(1); } function test2() { console.log(2); } function test3() { console.log(3); } function test4() { console.log(4); } test1() Promise.resolve().then(test2); setTimeout(test3, 0); test4() 위 코드의 실행 결과는 어떻게 될까? setTimeout에서 타이머가 0이니까 1, 2, 3, 4로 출력될까? 1️⃣ 싱글 스레드 JS는 한 번에 하나의 작업만 실행할 수 있다. 다시 말해 단 하나의 실행 컨텍스트 스택을 갖는다. 이러한 JS의 특징은 JS가 "싱글 스레드" 방식이라는 것이다. 한 함수의 처리에 시간이 오래..
[JavaScript] 함수
console.log(add(5, 2)); console.log(sub(5, 2)); // 함수 선언문 function add(x, y) { return x + y; } // 함수 표현식 const sub = function (x, y) { return x - y; } 함수를 각각 함수 선언문, 함수 표현식으로 나타내고 있다. 함수가 선언되기 전에 각 함수들을 호출하고 있다. 결과는 어떻게 될까? 1️⃣ 함수 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 이때, 함수 내부로 입력을 전달받는 변수를 매개변수라 부르고 입력과 출력은 각각 인수, 반환값이라 부른다. 함수를 사용하는 이유 유지보수의 편의성 코드의 신뢰성 코드의 가독성 2️⃣ 함..