Now or Never

useScrollRestoration Hook을 구현하면서 발생한 문제 기록 useScrollRestoration훅은 특정 페이지에서 스크롤 이벤트가 발생할 때마다 scrollY값을 sessionStorage에 저장한다.무한스크롤로 구현된 목록 페이지에서 상세페이지로 이동한뒤 다시 목록에 돌아왔을 때 scrollY값을 유지함으로써 좋은 탐색 UX를 위해 자주 사용되는 기능이다. 이 훅을 구현하면서 발생한 이슈가 있었는데 useEffect vs useLayoutEffect 관점에서 기록해보려고 한다. useScrollRestoration훅 초기 버전import { useEffect, useLayoutEffect } from 'react'import { useRouter } from 'next/router'..

es-toolkit의 PR을 구경하다가bench: remove import overhead 라는 PR을 보게 됐다. 해당 PR에는 아래와 같은 수정이 있는데 이게 import의 overhead를 어떻게 줄일 수 있지라는 궁금증이 생겼다.그리고 gpt에게 물어봤다.첫 번째 질문1번에서 2번으로 코드를 수정했는데 import overhead가 줄었어 어떤 차이야?1번import { after as afterToolkit } from 'es-toolkit';import { after as afterLodash } from 'lodash';2번import { after as afterToolkit_ } from 'es-toolkit';import { after as afterLodash_ } from 'loda..

javaScript에서 for...of와 일반적인 for 루프의 성능 차이는 사용하는 용도에 따라 다르지만 보통 for의 성능이 좋다1. for동작 방식: for 루프는 인덱스를 기반으로 배열이나 반복 가능한 객체에 직접 접근한다.성능: 배열의 길이가 크고 단순히 인덱스를 사용해 값을 순회할 때, 최적화가 잘 되어 있기 때문에 성능 면에서 이점이 있다.const arr = [1, 2, 3, 4]; for (let i = 0; i 2. for...of동작 방식: for...of는 반복 가능한 객체(iterable)에서 값 자체를 순회한다. 배열 외에도 Map, Set 같은 다른 이터러블 객체에도 사용할 수 있다.성능: for...of는 내부적으로 이터레이터를 생성하고 그 값을 가져오기 때문에, 단순 배열 ..

프론트엔드에서 렌더링은 범용적인 용어이다, 브라우저에서도 리액트에서도 렌더링이 발생한다. 리액트에서 렌더링은 무엇일까? TL;DR 렌더링이란?브라우저 DOM을 직접적으로 수정하는 비용을 줄이기 위해 React에서 수행하는 작업이며 브라우저 DOM을 업데이트할 범위를 결정하고 반영하는 과정. Trigger, Render, Commit리엑트는 "렌더링과정"을 통해 브라우저 DOM을 업데이트할 범위를 결정하고 반영한다. 여기서 렌더링과정은 "Trigger", "Render", "Commit" 단계로 나뉜다.  Trigger렌더링을 유발하는 단계로 두 가지 상황이 있다.1. 앱 시작 초기(initial render)initial render는 target DOM node(root)와 함께 createRoot를 ..