React를 사용하다 보면 가장 자주 마주치는 훅 중 하나가 useEffect이다. 하지만 가끔은 React 문서나 커뮤니티에서 useLayoutEffect를 함께 언급하는 것을 볼 수 있다. 두 훅은 모두 “렌더링 이후”에 실행된다는 공통점이 있지만, 실행 타이밍과 용도가 완전히 다르다. ⚡ 1. useEffect — ...

자바스크립트에서 호이스팅(hoisting)은 변수나 함수 선언이 코드 상의 위치와 관계없이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말한다. 많은 개발자들이 처음 접할 때 혼란을 느끼지만, 이 동작은 자바스크립트 엔진의 내부 처리 과정에서 매우 자연스럽게 발생한다. 호이스팅이 일어나는 이유: 두 단계의 실행 과정 자바스...

리액트에서 리스트 렌더링 시 key는 컴포넌트의 식별자 역할을 한다. 적절한 key를 사용하면 리렌더링 효율이 높아지고, 불필요한 상태 초기화나 예기치 않은 UI 버그를 방지할 수 있다. 이 글에서는 왜 고유한 key가 필요한지, 그리고 key로 사용할 고유 값을 생성하는 다양한 방법을 정리해보았다. 왜 고유한 key가 필요할까? 리액트는 리스...

웹에서 사용자의 입력이나 스크롤 이벤트는 매우 빠르게, 때로는 초당 수십~수백 번씩 발생한다. 이런 이벤트를 매번 처리한다면 성능 저하와 불필요한 네트워크 요청으로 이어지게 된다. 이를 방지하기 위해 대표적으로 사용하는 최적화 기법이 디바운스(debounce) 와 쓰로틀(throttle) 이다. ⚡ 디바운스(Debounce) — 이벤...

웹 서비스를 만들다 보면 “아… 왜 이렇게 느리지?” 싶은 순간이 온다. 사실 요즘 프론트엔드 환경은 점점 복잡해지고 있고, 번들 크기, 이미지 용량, 불필요한 스크립트 같은 요소들이 로딩 속도를 잡아먹기 때문이다. 본 글에서는 웹 성능을 향상시키기 위해 널리 사용되는 주요 기법들을 정리해보고자 한다. 👉 코드 스플리팅(Code Splitt...

이벤트 전파(Event Propagation) DOM(Document Object Model) 내에서 특정 요소에 이벤트가 발생했을 때, 그 이벤트가 어떤 경로를 따라 전달되는지를 설명하는 개념이다. 이는 이벤트가 발생한 시점부터 상위 요소로 전달되는 전체 흐름을 이해하기 위한 핵심적인 메커니즘으로, 캡처링(Capturing) → 타깃(Target)...

자바스크립트에서 모듈을 관리하고 불러오는 방식에는 CommonJS와 ES Module(ESM)이 존재한다. 두 방식은 모두 코드의 구조화와 재사용성을 높이기 위한 목적을 가지고 있으나, 로딩 방식과 적용 환경에서 뚜렷한 차이를 보인다. CommonJS CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, 동기적 로딩(sync...

<script> 태그의 async와 defer 속성은 스크립트를 비동기적으로 로드하여 페이지 로딩 속도를 향상시키는 데 사용된다. 하지만 두 속성은 실행 시점에서 중요한 차이를 가집니다. async 속성 async는 스크립트를 비동기적으로 다운로드하며, 다운로드가 완료되는 즉시 실행된다. <script src="example....

자바스크립트 함수에 대해서 아는대로 설명해주세요 ! 1. 함수는 일급 객체 (First-class Object) 자바스크립트에서 함수는 값처럼 취급됩니다. 즉, 변수에 담을 수 있고, 함수의 인자로 넘길 수도 있으며, 다른 함수의 반환값으로도 사용할 수 있습니다. const sayHello = function() { return 'Hello'; ...

자바스크립트의 배열(Array) 은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있다. 배열은 제로 인덱스(0부터 시작) 기반으로 각 요소에 인덱스를 통해 접근할 수 있다. 📌 배열 선언과 접근 배열은 대괄호([])를 사용하여 선언하며, 다양한 타입의 데이터를 함께 저장할 수 있다. const array = [1,...