JS

TypedArray에 대하여

서론 1년 전 Node.js contribution을 하던 중 array를 TypedArray로 변경하여 100% 이상의 성능 향상을 가져온 PR 두 개를 본 적이 있다. 이에 TypedArray와 ArrayBuffer에 대해 자세히 알아보고자 한다.Preliminaries: ArrayBuffer와 일반 배열의 메모리 구조 TypedArray를 이해하기 전에, 먼저 ArrayBuffer에 대해 알아보자. ArrayBuffer는 JavaScript에서 고정 크기의 연속 메모리 블록을 나타내는 객체다. 이는 바이너리 데이터를 효율적으로 저장하고 계산하는 자료 구조로 TypedArray나 DataView 같은 view를 통해 접근할 수 있다. ArrayBuffer 자체는 단순한 메모리 버퍼로, 생성 시 크기가..

브라우저에게 양보하기

Intro 브라우저의 main thread를 막으면 안 되는 이유에 대해서 다들 알고 있을 것이다. 브라우저 main thread를 막게 되면 브라우저는 freeze되어 user interaction을 처리 할수도, paint 작업을 할 수 없게 되어 사용자에게 높은 응답성을 제공할 수 없게 된다. 그러나 웹사이트를 만들다 보면 실행하는데 시간이 오래 걸리는 작업이 발생할 수밖에 없다. 이럴 때 어떻게 하면 사용자에게 높은 응답성을 제공할 수 있는지에 대해 말하고자 한다.Preliminaries 먼저 브라우저에게 양보하는 방법에 대해 알기 위해서는 event loop에 대한 명확한 이해가 필요하다. event loop란 자바스크립트가 실행되는 동안 main thread에서 수행할 작업을 관리하고 순차적으..

[JS] Javascript에서의 Closures

1. 클로저란 클로저는 외부 함수에서 선언된 변수를 참조하는 내부 함수에서만 발생하는 현상이다. 클로저의 정의에 대해선 매체마다 저자마다 다르다. MDN에선 클로저를 "함수와 그 함수가 선언된 Lexical Environment의 조합"라 정의한다. 내가 생각하는 클로저의 제일 정확한 정의는 'A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).'이다.Lexical Environment는 함수가 선언될 당시의 모든 지역 변수를 포함한다. 선언된 당시의 Lexical Environment이란 실행 컨텍스트의 구성 ..

debounce와 throttle의 차이점

서론프론트엔드 개발을 하다 보면 스크롤 이벤트, 입력 처리, 윈도우 리사이즈 등 짧은 시간 내에 반복적으로 발생하는 이벤트를 효율적으로 제어할 필요가 생긴다. 이럴 때 가장 많이 사용하는 도구 중 하나가 lodash에서 제공하는 debounce와 throttle 함수이다. 프로젝트를 진행하며 성능 최적화를 위해 정확히 어떤 조건에서 실행되는지 궁금해졌고, 결국 실제 lodash 소스를 분석해보게 되었다. 이번 글에서는 그 분석을 바탕으로 두 함수의 동작 원리와 차이점을 정리해본다.Debounce 분석 lodash의 debounce와 throttle은 내부적으로 모두 debounce 함수를 기반으로 구성되어 있다. 따라서 먼저 debounce 함수의 흐름을 분석해보았다. function debounce(f..

ES2021에서 추가된 신기능 5가지

서론 JavaScript는 지속적으로 발전하는 언어로, 새로운 기능이 정기적으로 추가된다. ES2021에서는 보다 직관적이고 효율적인 코드를 작성할 수 있도록 다섯 가지 주요 기능이 도입되었다. 이번 글에서는 ES2021에서 추가된 기능들을 하나씩 살펴보고, 어떻게 활용할 수 있는지 알아본다.추가된 기능1. 논리 할당 연산자 (&&=, ||=, ??=) 기존에는 변수를 조건에 따라 할당할 때 if 문이나 삼항 연산자를 사용해야 했다. ES2021에서는 논리 연산자와 할당 연산자를 결합한 &&=, ||=, ??=가 추가되어, 보다 간결한 코드를 작성할 수 있다.&&= : 기존 값이 true일 때만 새로운 값을 할당한다.||= : 기존 값이 false일 때만 새로운 값을 할당한다.??= : 기존 값이 nul..

JavaScript 이벤트 루프 동작방식: Microtask Queue, Macrotask Queue

console.log(1);setTimeout(() => console.log(2));Promise.resolve().then(() => console.log(3));Promise.resolve().then(() => setTimeout(() => console.log(4)));Promise.resolve().then(() => console.log(5));setTimeout(() => console.log(6));console.log(7);서론 JavaScript의 이벤트 루프는 비동기 작업을 관리하며 프로그램 실행의 중심 역할을 한다. JavaScript 코드가 실행되면 객체와 기본형 변수는 메모리의 힙과 메모리 스택에 로드된다. 이후 함수 호출과 비동기 작업은 콜 스택, 콜백 큐, 마이크로태스크 큐..

[JS] Promise와 Async/Await의 이해

1. 서론 JavaScript에서 비동기 프로그래밍은 중요한 주제 중 하나이다. 비동기 작업은 코드의 흐름을 방해하지 않고, 동시에 여러 작업을 처리할 수 있게 해준다. 이러한 비동기 작업을 효율적으로 처리하기 위해 Promise와 Async/Await라는 두 가지 주요 도구가 있다. 이 글에서는 Promise가 무엇인지, 그리고 Async/Await와의 차이점이 무엇인지에 대해 좀 더 깊이 있게 다루고자 한다.2. PromiseJavaScript는 기본적으로 단일 스레드로 동작하기 때문에, 코드가 순차적으로 실행된다. 그러나 웹 애플리케이션에서는 네트워크 요청, 파일 입출력, 타이머 등 시간이 걸리는 작업을 처리해야 하는 경우가 많다. Promise는 비동기 작업이 완료되었을 때 결과를 사용할 수 있게..

[JS] Javascript에서 동기함수와 비동기함수의 차이

Introduce 자바스크립트에서 동기와 비동기를 이해하는 것은 다른 프로그래밍 언어보다 중요하다. 왜냐하면 자바스크립트는 메일 스레드 하나만을 사용하는 단일 스레드 방식으로 설계되어 있으며 메인 스레드에서 뷰가 렌더링되고 사용자와의 상호작용이 많기 때문이다. 브라우저에서 메인 스레드가 blocking되면 웹페이지가 멈추는 프리징 현상이 발생하기에 사용자 경험에 문제가 생길 수 있다. 따라서 이 글에서는 동기와 비동기의 차이를 알아보고, 브라우저에서 이 두 방식이 어떻게 동작하는지 살펴보고자 한다. PreliminariesCall stackCall stack은 자바스크립트 엔진이 현재 실행 중인 함수와 그 함수들이 호출한 다른 함수들을 추적하는 자료 구조다. 이는 LIFO(Last In, First Ou..