Now or Never

간단한 전역 객체를 만들다가 들었던 생각을 공유해 봅니다.javascript에서 모듈안에 생성된 객체/배열은 다른 모듈에서 import할 때 새 인스턴스가 생기지 않는다.예를들어 module.js라는 공유되는 모듈이 있고module.jsexport const arr = []; A.js 모듈에서 arr를 import한 뒤 숫자 1을 push 하는 코드가 있다.import { arr } from "./module"; arr.push(1); B.js 모듈에서 arr를 콘솔에 찍어보면 push된 값이 반영된 걸 확인할 수 있다.// B.jsimport { arr } from "./module";console.log("B.js에서 arr:", arr); // [1] (A.js에서 변경한 값이 반영됨) 참조의 공유..

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

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 'lod..

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는 내부적으로 이터레이터를 생성하고 그 값을 가져오기 때문에, 단순 배열 ..