import와 import(): 두 가지 모듈 가져오기 방식의 차이점 (정적 임포트, 동적임포트)자바스크립트에서 모듈을 불러오는 두 가지 방법, 코드가 실행되기 전에 처리되는 '정적 import'와 필요할 때만 불러오는 '동적 import'에 대해 알아보자. 정적 임포트(Static import)ES6(ECMAScript 2015)에서 도입된 모듈 시스템으로 일반적인 모듈 가져오기 방식이다.import와 export 키워드를 사용하며, 코드의 파일 최상단에만 위치해야하며 조건문이나 함수 내에서 사용할 수 없다.한번 불러온 모듈은 메모리에 캐시되어 다시 import해도 코드가 중복 실행되지 않는 싱클톤 방식이다.import { name } from 'module'; import * as name from..
레이아웃 스로틀링(Throttling)과 디바운싱(Debouncing)스로틀링(Throttling)과 디바운싱(Debouncing)은 웹 성능을 최적화하기 위한 핵심 기술이다.두 기법은 사용자 이벤트가 빈번하게 발생할때, 불필요하게 무거운 함수가 반복 호출되어 브라우저에 과부하가 걸리는 것을 막아준다. 브라우저에서 창 크기 조절 이벤트(resize)나 스크롤(scroll) 이벤트는 한번의 동작을 수행하는 동안 초당 수십 번 이상 발생할 수 있는데, 이러한 이벤트에 연결된 콜백 함수가 돔 조작이나 레이아웃 재계산(reflow) 등의 무거운 작업을 포함하고 있다면 브라우저가 버벅이는 등의 사용자 경험을 해칠 수 있다. 창 크기 조절 이벤트 실행 중에는 레이아웃 재계산이 필요치 않고, 스크롤 하는 동안에도 사..
하이드레이션 (Hydration), 하이드레이션 에러 (Hydration Error)하이드레이션 개념은 주로 SSR(Server-Side-Rendering) 프레임워크인 Next.js, Nuxt.js, SvelteKit 등에서 사용된다.서버 사이드 렌더링(SSR)은 서버에서 미리 정적인 HTML을 생성하여 클라이언트(브라우저)로 보내주기 때문에 사용자는 자바스크립트가 완전히 로드되기 전에도 페이지를 볼 수 있다.서버에서 생성되는 HTML은 단순히 텍스트와 이미지로 이루어진 정적인 페이지일 뿐이며 상호작용이 불가능한데, 이때 하이드레이션이 이 정적인 HTML을 동적인 웹 페이지로 바꿔주는 역할을 한다. 하이드레이션 (Hydration)하이드레이션은 물을 공급하여(하이드로) 건조한 상태를 활성화 시키는 것처..
React의 flushSyncReact 18에 도입된 react-dom 패키지의 함수로, 상태 업데이트를 강제로 즉시 동기적으로 처리하도록 만드는 역할을한다. 리액트는 불필요한 리렌더링을 줄여 애플리케이션의 성능 최적화를 위해, 기본적으로 상태 업데이트를 비동기적으로 처리하고 여러 업데이트를 하나로 묶어(batching) 한번에 렌더링 하는 핵심적인 메커니즘으로 동작한다.이때 자동 배치가 하나로 묶이는 기준은 아래와 같다.동일한 이벤트 핸들러 내부의 모든 상태 업데이트인 경우상태 업데이트가 아닌경우, 예를들어 API 호출이나 로컬 변수 변경, DOM 조작등은 배칭의 대상이 아니다. 이 경우에는 코드가 위치한 순서대로 실행된다.비동기 이벤트 핸들러 및 프로미스 내부 코드 블록 (React 18+)만약, 한..