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

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

nc example.com 80 nc (netcat) 명령어를 터미널에 입력하면 간단하게 TCP 연결을 생성할 수 있다. GET / HTTP/1.0Host: example.com 그 다음 GET 요청을 작성한 뒤 엔터를 누르면 response를 받을 수 있다.   터미널에서 명령어를 통해 간단하게 TCP 연결 및 HTTP 요청을 수행했다! HTTP 요청과 응답을 하나씩 뜯어보면 request header 분석GET / HTTP/1.0GET: HTTP method를 의미/: 요청 urlHTTP/1.0: HTTP 버전 Host: example.com: 요청 도메인 이름 response header 분석HTTP/1.0 200 OKHTTP/1.0: HTTP 버전200 OK: 응답 상태 코드 그 외 key:va..