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) 등의 무거운 작업을 포함하고 있다면 브라우저가 버벅이는 등의 사용자 경험을 해칠 수 있다. 창 크기 조절 이벤트 실행 중에는 레이아웃 재계산이 필요치 않고, 스크롤 하는 동안에도 사..
자바스크립트 호이스팅(Hosting)자바스크립트 호이스팅은 변수와 함수 선언이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말한다.코드를 실행하기 전에 자바스크립트 엔진이 해당 스코프(함수나 블록) 전체를 스캔하여 변수와 함수 선언을 먼저 처리하기때문에 이런 현상이 발생한다. 호이스팅은 마치 코드를 실제 작성한 위치와 상관없이 선언이 맨 위로 이동하는 것처럼 보인다. 변수 호이스팅varvar 키워드는 선언과 초기화가 동시에 호이스팅 된다. 이때 초기화란 값을 할당하는 작업이 아닌 메모리 공간을 확보하고 자동으로 undefined를 할당하는 과정이다.따라서 name 변수를 실제로 선언한 상단에서 호출했음에도 에러가 나지 않고 undefined를 출력한다.console.log(name); // u..
자바스크립트 스레드(Thread)자바스크립트에서 스레드란, 하나의 프로그램안에서 코드를 실행하는 흐름의 단위를 말한다. 일반적으로 자바스크립트는 싱글 스레드 언어이며, 이것은 자바스크립트 코드가 한번에 하나의 작업만 순차적으로 처리한다는 의미이다.싱글 스레드는 시간이 오래 걸리는 작업이 발생하게되면 그 작업이 끝날때까지 다른 작업을 모두 멈춰버리는 블로킹 현상이 발생할 수 있는데, 현대의 자바스크립트 환경(브라우저, Node.js)은 이러한 한계를 극복하기 위해 비동기처리 혹은 웹 워커 등의 보조 기술을 통해 효율적으로 처리할 수 있다. 비동기 처리는 setTimeout, fetch, Promise와 같은 비동기 API를 사용하게 하며, 이들은 백그라운드에서 작업을 처리하고 작업이 끝나면 콜백 함수를 실..