전체 글

Generator 함수(function*)와 Generator는 ES6에서 소개되었습니다. 이들을 이용해 함수 실행 도중 멈추고, 다시 멈췄던 부분 이후부터 실행되도록 할 수 있습니다. 이 특징을 이용해, async / await 을 Generator로 구현할 수 있습니다! 구현에 대한 내용은 이 글을 참고해주세요. Generator를 사용한 라이브러리로는 Generator로 쉽게 non-blocking 코드를 작성할 수 있게 해주는 라이브러리인 co, Node.js의 프레임워크 중 하나인 Koa, 비동기 처리를 위한 리덕스 미들웨어인 redux-saga 등이 있습니다. Generator 함수 Generator 함수의 기본형태는 다음과 같습니다. // Generator Function function* ..

IIFE란? IIFE(Immediately Invoked Function Expression: 'Iffy'로 발음)는 간단히 설명하자면 "정의와 동시에 즉시 실행되는 함수"를 말합니다. IIFE에 대해서 제대로 이해하기 위해서는 2개의 사전지식이 필요합니다. 함수 선언과 함수 표현식의 차이 클로져 클로져에 대해서는 글이 길어지므로, 다른 블로그나 MDN에서 먼저 보고 오시는 것을 추천드립니다. 함수 선언(Declaration)과 함수 표현식(Expression) IIFE에 대해서 더 명확히 이해하기 위해서, 함수 선언과 함수 표현식의 차이를 인지하고 있어야합니다. // 함수 선언 (익명함수 사용 불가능) function myFunc() { // do something... } // 함수 표현식 (익명함수..

DOM이란? DOM은 (Document Object Model)의 약자로, HTML, XML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스입니다. DOM은 문서를 nodes와 objects로 표현하며, 웹 페이지를 자바스크립트와 같은 프로그래밍 언어들을 통해 사용될 수 있게 연결시켜주는 역할을 담당합니다. DOM은 개발자 도구 > Elements(요소) 탭에서 쉽게 확인할 수 있습니다. 확인해보면, HTML 문서의 tag들이 node와 같이 계층구조로 표현되어 있는 것을 볼 수 있습니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성됩니다. 예를 들어 document object 는 HTML d..

React 18에 추가된 Hook 총 정리 1. useTransition useTransition은 UI Interaction을 차단하지 않고 state를 업데이트할 수 있는 React Hook입니다. 기존에는 useState의 set함수로 인한 state 업데이트 중 UI 인터랙션이 발생하면, 렌더링이 끝난 이후에 인터랙션들이 한 번에 처리되어 사용자 경험이 다소 떨어지는 문제가 있었습니다. 이는 사실 React의 문제가 아니라, 자바스크립트가 싱글 스레드기반 언어이기 때문에 여러 작업을 동시에 처리하지 못하는 것에서 비롯된 문제입니다. 이러한 문제를 개선하기 위해 React 18에서는 동시성(Concurrent Mode)을 지원하는 Hook들을 만들었습니다. useTransition은 그 중 하나입니..