WhatISYourName?

[※ 주의 ※] 아래를 이해하지 않고 이 글을 볼 경우, 이해가 되지 않는 부분이 있을 수 있습니다. 1. 2023.01.08 - [Javascript] - [JS / ECMAScript] 비동기 처리를 조금 더 효율적으로 해보자. 2. 2023.01.26 - [모두보기] - 동시성과 이벤트 처리 문제에 대한 탐구. - 0. GIL vs Proactor/Reactor JavaScript는 기본적으로 싱글 쓰레드 언어이다. 즉, 쓰레드를 여러 개 열 수 없고 동시에 여러 개의 일을 처리하려면 새로운 런타임을 생성해야한다는 암시를 가진다. 그러나, Node.js는 I/O 작업이나 커널에 접근해야 하는 작업이 생긴다면 이를 비동기로 처리가 가능하다. 생각해보면 JS는 싱글 쓰레드인데 어떻게 서버로 괜찮은 성능..

Node.js와 그에 파생된 여러 프레임워크를 사용하다 보면, 패키지 설치와 의존성 관리를 담당하는 패키지 매니저를 자주 볼 수 있다. (package.json으로부터 비롯된 매니징 툴 npm, yarn, pnpm 등등...) 다만, 이러한 라이브러리 패키지 매니징과 node_modules 폴더에 대한 깊은 고찰을 한 적은 없어서 이번 글을 통해 해보려 한다. 이번 글에서는 npm, yarn의 역사와 의존성, 패키지 관리에 대하여 살펴보자. 1. import, require는 Node.js에서 어떤 원리로 동작하는가? 현대 JS에서 사용하고 있는 모듈 불러오기 문법은 두 가지가 있다. Import 문과 Require 문이 그 둘이다. 두 문법에는 여러 작은 차이가 있지만, 이번 글의 목적은 두 문구의 비..

최근 React를 활용한 웹사이트를 만드는 데, 급격한 스크롤을 할 시 성능이 급격하게 내려간 현상을 발견할 수 있었다. 마우스 관련 이벤트에 쓰로틀을 걸어도, 디바운스를 활용해도 성능이 개선되지 않았으나, useMemo를 활용하여 성능을 개선시킬 수 있었다. 그 컴포넌트는 무거운 연산을 하는데 컴포넌트가 다시 렌더링될때마다 다시 무거운 연산을 하기 때문이었던걸로 문제가 발생했기 때문이다. useMemo을 활용한 성능 차이를 알아보자. 1. useMemo useMemo는 React에서 공식적으로 제공하는 hook의 일종으로, 컴포넌트에서 이미 계산된 값을 재사용할 시 활용가능한 함수이다. 즉, 만약 어떠한 이벤트 때문에 React가 컴포넌트를 리렌더링해야 하는 경우 useMemo를 활용하여 자원이 많이 ..

JS의 쓰임새 중 많은 부분을 차지하고 있는 부분은 "비동기 처리"이다. JS에서는 비동기 처리 방식을 크게 3가지로 구분짓는다. 첫 번째는 콜백 함수, 두 번째는 프로미스, 세 번째는 async/await이다. 이 중 가독성과 편의성을 위해서 보통 두 번째 방법과 세 번째 방법을 섞어서 사용하는 방법을 위주로 현대에선 사용한다. 여러 JS 앱들을 만들었을 경우, 반드시 한 번 쯤은 비동기 처리 관련 코드를 작성해봤을 것이고, JS의 비동기 처리 3가지를 안다고 해서 비동기 처리 관련 코드를 만드는 것과 효율적인 비동기 처리 관련 코드를 만드는 것은 다른 의미를 지니고 있다고 생각한다. 일단, 비동기 처리에 대한 기본 지식(콜백 함수, 프로미스, async/await)에 대한 지식을 가지고 있다는 전제 ..

사실, JS는 "적당히" 코드를 컴퓨터에 던져주면, "적당히" 실행시켜주고, 어느정도 사용자가 기대하는 만큼 작동하는 언어이다. 따라서, JS 진영은 다른 언어 진영에 비해 JS에 대한 탐구를 깊게 하는 경우를 보지 못하였고, 특히 호이스팅과 같이 JS 관련 여러 개념은 알고 있지만, 이에 대한 탐구는 깊게 하는 사용자들이 그렇게 많아 보이지 않았다. 이번 글에서는 프로그래밍의 가장 근간이 되지만, 가장 알기 어렵고 헷갈리기 쉬운 변수에 대하여 알아보고, 이에 대한 생명 주기를 알아보자. (You don't know JS를 기반으로 작성되었습니다!) 1.변수는 언제 사용 가능한가? 자명한 답변이지만, 어느 언어에서나 변수는 언제 사용가능한가라고 물어보면 선언된 이후라 할 수 있다. 다음과 같은 예제를 보..

얼마전 팀원들끼리 스프린트로 DOM visualizer를 하기로 하였는데, 나는 이 주제를 2주 안에 구현하는데 실패하였다...(진짜로 시간이 없었다. 진짜로...) 이에 대한 참회의 의미로 DOM에 관련된 글을 작성하기로 하였고, 나는 DOM 관련 주제로 DOMParser API에 대하여 간단하게 설명하고자 한다. 가보자 가보자! 1. DOMParser API DOMParser API는 HTML 혹은 XML 소스 코드를 DOM으로 분석하고 파싱할 수 있는 API의 묶음이다. 다른 말로, DOMParser를 이용하면 문자열 꼴로 이루어진 XML, HTML 소스코드를 DOM 구조로 변환할 수 있다는 이야기이다. 반대로 DOM tree를 XML이나 HTML로 바꾸려면 XMLSerializer를 활용하면 된다..