Tools for Maneuvering JavaScript's Event Loop Tools for Maneuvering JavaScript's Event Loop Depending on the task, it's helpful to be able to schedule work throughout various parts of the event loop's lifecycle. Let's explore some of the tools available for doing it. www.macarthur.me - 원문입니다. (원문에는 더 많은 예시가 있습니다!) TL;DR setTimeout(() => {}, 0) 메인 스레드의 다른 모든 작업이 처리되지 않도록 우선 순위가 높은 작업을 여러 이벤트 루프 턴..
ECMAScript 언어 타입에는 Undefined, Null, Boolean, String, Number, Object가있다. 타입이란 자바스 크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합 이다. 거의 모든 자바스크립트 프로그램에서 강제변환이 일어나므로 타입을 확실하게 인지하고 사용하는 것이 중요하다. 강제변환은 다양한 방식으로 일어난다. 내장 타입 null ( falsy, object ) undefined boolean number string object symbol function object의 하위 타입 함수에 선언된 인자 개수는 함수 객체의 length 프로퍼티로 알 수 있다. 배열 숫자 인덱스를 가지며, length 프로퍼티가 자 동으로 관리되..
Server / Client 컴포넌트 분리 Server component 초기에 서버측에서 렌더링되는 컴포넌트 서버 컴포넌트를 사용하면 초기 페이지 로딩 속도가 빨라지며, 클라이언트 측 자바스크립트 번들 크기가 줄어든다. Client component 클라이언트 측 상호 작용을 추가할 수 있다. Next.js에서는 서버에서 미리 렌더링되고 클라이언트에서 하이드레이션된다. 파일의 맨 위에 'use client'; 를 명시해주어야 한다. Hierarchy page.js : 해당 페이지(경로)에 대한 메인 컴포넌트 error.js : React Error Boundary 이며, 자동으로 생성되며 래핑된다. loading.js : React Suspense 이며, 자동으로 생성되며 래핑된다. not-found...
프론트엔드는 서버 기반의 여러 템플릿 프레임워크 에서, 클라이언트 사이드 렌더링으로 갔다가, 일부는 SSR로 다시 돌아가고 있습니다. 대표적으로 Next.js, Remix가 있고, Fresh, astro, Qwik 같은 친구들도 있습니다. 우리는 무엇을 써야할까요 😞? Islands Architecture 🗣️ 클라이언트의 자바스크립트 최소화하자. 서버에서 HTML 페이지를 렌더링하고, 동적으로 상호작용 해야 하는 위젯에 슬롯을 삽입한다. 위젯의 슬롯에는 서버에서 렌더링된 HTML이 포함되고, 이 HTML을 재사용하여 hydrated할 수 있다. 페이지의 부분이 개별적으로 초기화될 수 있다. 상호작용이 필요한 컴포넌트의 자바스크립트만 서버에서 클라이언트로 전달된다. Fresh, astro, Marko, ..
