◆ ESSAY
ECMAScript (ES2015, ES) 모듈이란 자바스크립트에서 각 코드를 하나의 청크로 구성할 수 있게 해주는 방법을 제공한다. 먼저, 자바스크립트의 값을 외부로 노출을 시킨다.
export const sum = (a, b) => a + b
그리고 이 값(함수)을 필요로 하는 곳에서 아래와 같이 사용한다.
import {sum} from './test'
sum(1, 2)
대부분의 경우에는 위의 예제 처럼 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다.
const sum = await import('./test')
await import는 프로미스를 리턴하고 이 때부터 동적으로 모듈을 불러오기 시작한다. 그리고 모듈을 성공적으로 불러오면, promise는 모듈을 resolve하거나 실패할 경우 reject 하게 된다.
그리고 import내의 구문은 모듈의 위치를 가리키는 string이면 되기 때문에, 함수 외부에서 인수로 받거나 계산된 string을 받는 것들도 가능하다.
export const sum = (a, b) => a + b
async function calc(a, b) {
const {sum} = await import('./test')
sum(a, b)
}
calc(1, 2) // 3
이제 default 의 경우를 살펴보자.
const sum = (a, b) = > a + b
export default sum
이 경우에는 default 키워드를 사용하면 된다.
async function calc() {
const {default: sum} = await import('./test')
sum(1, 2)
}
한가지 유의 할 것은,
const sum = await import('./test')
이렇게는 안된다는 것이다.
default와 그 외의 것들이 섞여있는 경우라면 아래와 같이 처리하면 된다.
const sum = (a, b) => a + b
export const sum1 = (a, b) => a + b
export const sum2 = (a, b) => a + b
export default sum
const {default: sum, sum1, sum2} = await import('./test')
Next.js 16 turbopack 프로덕션 빌드에서 모듈 스코프 싱글톤이 런타임에 두 개가 됐다. 같은 동기 구간에서 조건 판정이 뒤집히고, 응답이 도착해도 타임아웃이 나는 증상을 번들 산출물로 추적한 기록. scope hoisting의 부분 병합, 순환 import, 이미 고쳐져 있던 upstream 버그, 그리고 뒤늦게 돌린 단일 변수 실험까지.
number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.
집필 중인 Node.js Deep Dive의 5.2장(vm 모듈의 함정) 일부를 미리 공개합니다.
많관부22