전체 글

최근 개발 환경에서 아래와 같은 에러를 마주했습니다. No QueryClient set, useQueryClientProvider to set one 에러 정보를 기반으로 추론했을 때 useSuspenseQuery를 호출하려 하는데 루트에 QueryProvider가 없어서 발생하는 에러인 것 같습니다. 그런데 이상합니다. 분명 루트에는 QueryProvider가 감싸져 있습니다. 그런데도 계속 에러가 발생하는 것을 보고 packages 관련 문제라는 것을 직감했습니다. 빠르게 방향을 잡을 수 있었던 이유는 과거에 모노레포 환경에서 node_modules packages hoisting 문제를 겪고 해결한 경험이 있었기 때문입니다. 그때는 yarn v1을 패키지 매니저로 사용했었고 현재는 pnpm을 사용하..

브라우저에서 HTML parsing 하는 도중에 script(synchronous script)를 만나면 parsing을 멈추고 script 처리하는 것을 기다리게 됩니다. DOM은 초기 페이지 렌더링에 필수적인 리소스(critical resource)이므로 parsing이 완료될 때까지 페이지는 렌더링 되지 않습니다. 유저는 늦게 페이지 콘텐츠를 확인하게 되겠죠. async, defer script를 활용하면 이 문제를 해결할 수 있다는 것을 잘 아실 겁니다. 그런데 defer script를 실행하기 위해 CSSOM이 생성될 때까지 기다리며 DOMContentLoaded 이벤트를 지연시키고 script 순서에 영향받는 것을 알고 계셨나요? 이번 포스팅에선 async, defer script에 대해 좀 ..

최근 서비스에서 메모리 누수가 발생하고 있는 것을 발견했습니다. 아무리 개발 환경이지만 JavaScript VM 힙 메모리에 1GB 가량 할당되어 있었죠. 그러다보니 시간이 지나면 앱이 너무 느려져 프로세스를 끄고 다시 실행하곤 했습니다. 크롬 메모리 패널 메모리 누수가 발생하는 곳을 찾기 위해선 먼저 메모리 패널을 어떻게 사용해야 하는지 알아야했습니다. 1. Heap snapshot 현재 JavaScript VM에 할당된 객체와 DOM에 대한 정보를 볼 수 있습니다. 2. Allocation instrumentation on timeline. 시간에 따라 메모리 할당과 해제되는 것을 보고 싶으면 이 기능을 사용하면 됩니다. 메모리 누수를 찾을 때 이 기능을 활용하면 쉽게 확인할 수 있습니다. 메모리 누..

자바스크립트에서 number, string 타입을 생각 없이 사용하다 최근에 V8 엔진에서 어떻게 처리되고 있는지가 궁금해졌습니다. 이번 포스팅에서는 각각의 타입이 메모리에서 어떻게 할당되고 처리되는지 알아보겠습니다. Number number 타입은 내부적으로 SMI(Small Integer), Heap number 2가지 나뉩니다. 1. SMI: 31 bits 범위에 속하는 정수를 의미합니다. 이 범위의 데이터는 Heap이 아닌 Stack 메모리에 저장됩니다. Smi represents integer Numbers that can be stored in 31 bits. Smis are immediate which means they are NOT allocated in the heap. https://..