김신건의 로그 - 위키 / javascript

[Javascript] BigInt

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

BigInt 는 임의 정밀도 정수. Number.MAX_SAFE_INTEGER (2^53 - 1) 를 넘어가는 정수를 정확히 표현. ES2020 도입.

const big = 12345678901234567890n;   // 끝에 'n'
const fromCtor = BigInt('12345678901234567890');
typeof big      // 'bigint'

사용 상황

상황	권장 타입
64-bit 정수 ID (DB의 BIGINT 컬럼)	`BigInt` 또는 `string`
금융 계산 (cent 단위 정수)	`BigInt`
암호화 (RSA, ECC 큰 소수 연산)	`BigInt`
비트 연산 (64-bit 이상)	`BigInt`
일반 정수 연산 (2^53 미만)	`Number`
JSON 인터페이스 경계	`string`
부동소수점 계산	`Number`

왜 필요한가

9007199254740992 + 1               // 9007199254740992 ❌ (정확도 손실)
9007199254740992n + 1n             // 9007199254740993n ✓

큰 ID, 암호화, 정밀 산술, 통화 (cent 기반 정수) 에 안전.

사용

const a = 10n;
const b = 20n;
a + b              // 30n
a * b              // 200n
a / b              // 0n (정수 나눗셈)
a ** 3n            // 1000n
a < b              // true
a === b - 10n      // true

함정: number 와 혼합 금지

1n + 1             // ❌ TypeError: Cannot mix BigInt and other types
1n + 1n            // 2n
1n + BigInt(1)     // 2n
Number(1n) + 1     // 2

같은 타입끼리만 산술 가능. 명시적 변환 필요.

비교는 가능

1n == 1            // true (== 는 변환 허용)
1n === 1           // false (=== 는 엄격)
1n < 2             // true (관계 연산자는 OK)

BigInt → Number

Number(123n)           // 123
Number(12345678901234567890n)   // 12345678901234568000 (정확도 손실!)

작은 BigInt 만 Number 변환 안전.

JSON 호환성

JSON.stringify({ id: 1n })       // ❌ TypeError
JSON.stringify({ id: '1' })      // 우회: string 으로

JSON 표준은 BigInt 미지원. 직렬화는 문자열로.

// BigInt → JSON (string)
JSON.stringify({ id: 1234n }, (k, v) =>
    typeof v === 'bigint' ? v.toString() : v)
// '{"id":"1234"}'

// JSON → BigInt (reviver)
JSON.parse(text, (k, v) =>
    k === 'id' ? BigInt(v) : v)

자주 쓰는 사례

1. 큰 ID 처리

const userId = BigInt('9223372036854775807');   // 64-bit max

DB 의 BIGINT 컬럼 (PostgreSQL bigserial 등) 매칭.

2. 정밀 계산

// 통화: cent 단위로 정수 처리
const balance = 100_00n;          // $100.00 = 10000 cent
const transfer = 50_00n;
const remaining = balance - transfer;

3. 비트 연산 (큰 정수)

const flags = 0n;
const FLAG_ADMIN = 1n << 63n;     // 64-bit 비트 위치
flags | FLAG_ADMIN

4. 암호화 모듈러 거듭제곱

// RSA 등에서 사용하는 모듈러 거듭제곱
function modPow(base, exp, mod) {
  let result = 1n;
  base = base % mod;
  while (exp > 0n) {
    if (exp % 2n === 1n) result = (result * base) % mod;
    exp = exp / 2n;
    base = (base * base) % mod;
  }
  return result;
}
modPow(2n, 10n, 1000n);  // 24n

Math 함수와 호환 안 됨

Math.abs(-5n)       // ❌ TypeError
// 직접 처리
const abs = (x) => x < 0n ? -x : x;
abs(-5n)             // 5n

Math.* 함수는 BigInt 미지원.

Number vs BigInt 선택

flowchart TD
    Q["정수가 2의 53승 - 1을 넘을 수 있는가?"]
    Q -->|"yes"| B1["BigInt 사용"]
    Q -->|"no"| N1["Number 충분"]
    B1 --> J["JSON 직렬화 필요?"]
    J -->|"yes"| S["string 으로 변환 후 저장"]
    J -->|"no"| BI2["BigInt 그대로 사용"]
    N1 --> F["부동소수점 필요?"]
    F -->|"yes"| NUM["Number float64"]
    F -->|"no"| NUM2["Number 정수 범위 내"]

시나리오	권장
일반 정수 (< 2^53)	Number
큰 ID	BigInt 또는 string
정밀 산술 (통화)	BigInt (정수 단위)
부동소수점	Number
비트 연산 (64-bit+)	BigInt
JSON 인터페이스	string

BigInt 와 TypeScript

TypeScript 는 bigint 타입을 기본 지원.

const id: bigint = 123n;
const huge: bigint = BigInt('9007199254740993');

// 함수 시그니처
function factorial(n: bigint): bigint {
  return n <= 1n ? 1n : n * factorial(n - 1n);
}

// JSON 경계에서는 string 으로
type SafeId = bigint | string;

bigint 와 number 는 TypeScript 에서도 자동 변환이 안 된다. 명시적 Number(big) / BigInt(num) 필요.

성능 고려사항

BigInt 연산은 Number 보다 느리다. 특히 곱셈, 나눗셈에서 차이가 크다.

// 루프 카운터에 BigInt 사용하면 불필요한 오버헤드
for (let i = 0n; i < 1000n; i++) { /* 느림 */ }
for (let i = 0; i < 1000; i++) { /* 빠름 */ }

BigInt 는 Number 보다 3-10배 느린 연산 속도 (엔진에 따라 차이)
암호화나 임의 정밀도 연산이 아니라면 Number 범위 내에서 처리
BigInt 를 Number 범위 내 값에 쓰는 것은 불필요한 타입 복잡도

함정

1. 리터럴 표기

1n              // ✓
0o10n           // ✓ (8진 BigInt)
0x10n           // ✓ (16진)
1_000_000n      // ✓ (separator)
1.5n            // ❌ SyntaxError (BigInt 는 정수만)

2. Math.pow

2n ** 100n       // BigInt 거듭제곱 (정확)
Math.pow(2, 100) // 1.2676506002282294e+30 (Number, 정확도 손실)

3. Array, Set 의 키

new Set([1n, 1])      // {1n, 1}  (다른 키로 취급)

4. 조건문에서 0n 은 falsy

Boolean(0n)   // false
Boolean(1n)   // true
if (0n) { /* 실행 안 됨 */ }

Number 의 0 과 동일하게 falsy. 혼합 비교 시 주의.

[Javascript] boolean / null / undefined

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

JavaScript 의 3 가지 primitive.

boolean : true, false
null : 의도적인 “없음”
undefined : 자동으로 부여된 “없음” (초기화 안 됨)

사용 상황

상황	권장 값 / 패턴
함수가 값을 반환하지 않을 때	`undefined` (자동)
의도적으로 비어있음을 표현	`null`
조건 분기	`boolean`
null/undefined 모두 fallback	`??` (nullish coalescing)
null 만 fallback	`=== null` 명시적 검사
객체 속성 존재 여부	`in` 연산자 또는 `?.` optional chaining

boolean

const a = true;
const b = false;

// 연산자
true && false      // false
true || false      // true
!true               // false

falsy / truthy

JavaScript 가 boolean 으로 강제 변환할 때 false 가 되는 값들 (falsy):

Boolean(false)        // false
Boolean(0)            // false
Boolean(-0)           // false
Boolean(0n)           // false (BigInt zero)
Boolean('')           // false
Boolean(null)         // false
Boolean(undefined)    // false
Boolean(NaN)          // false

// 나머지 모두 truthy
Boolean([])           // true (빈 배열도!)
Boolean({})           // true (빈 객체도!)
Boolean('false')      // true (문자열 'false' 는 truthy)

[!CAUTION] 빈 배열 [] 과 빈 객체 {} 는 truthy. 다른 언어와 다르다. 명시적 검사 (arr.length === 0) 필요.

falsy 값 시각화

flowchart LR
    V["값 v"]
    V --> F1["false"]
    V --> F2["0 또는 -0"]
    V --> F3["0n (BigInt zero)"]
    V --> F4["빈 문자열"]
    V --> F5["null"]
    V --> F6["undefined"]
    V --> F7["NaN"]
    V --> T["그 외 모두 truthy"]
    F1 --> R["Boolean = false"]
    F2 --> R
    F3 --> R
    F4 --> R
    F5 --> R
    F6 --> R
    F7 --> R
    T --> RT["Boolean = true"]

null vs undefined

특성	null	undefined
의미	의도적 비어있음	미초기화
자동 부여	✗ (직접 할당)	✓
`typeof`	`'object'` (역사적 버그)	`'undefined'`
`JSON.stringify`	`null`	키 자체 제외
기본 함수 매개변수	적용 안 됨	적용됨

function foo(x = 10) {
    return x;
}
foo();              // 10 (undefined → default)
foo(undefined);     // 10
foo(null);          // null (default 적용 안 됨)

== 와 === 의 차이

null == undefined    // true (특수 케이스)
null === undefined   // false

null == 0            // false
null < 1             // true (관계 연산자는 강제 변환)
null > 0             // false
null >= 0            // true (모순처럼 보임)

이런 함정 때문에 항상 === 권장.

비어있음 검사 idiom

// 안 좋은 패턴
if (x == null) { ... }       // null 과 undefined 모두 매치 (의도라면 OK)

// 명시적 검사
if (x === null) { ... }
if (x === undefined) { ... }
if (x == null) { ... }       // 둘 다 (== 는 강제 변환)

// nullish coalescing
const value = x ?? 'default';   // null/undefined 만 default

// optional chaining
obj?.prop?.subprop

Nullish Coalescing 과 Optional Chaining 패턴

?? 와 ?. 는 null/undefined 를 안전하게 다루는 현대적 패턴.

// ?? vs ||
const a = 0 || 'default';    // 'default' (0 은 falsy)
const b = 0 ?? 'default';    // 0 (null/undefined 만 fallback)

const c = '' || 'default';   // 'default' ('' 은 falsy)
const d = '' ?? 'default';   // '' (null/undefined 만 fallback)

?? 는 0, '', false 같은 유효한 falsy 값을 보존한다. || 는 모든 falsy 를 fallback 으로 처리.

// optional chaining 체이닝
const city = user?.address?.city ?? '알 수 없음';

// 메서드 호출
const len = str?.length ?? 0;
const result = arr?.find(x => x > 0) ?? -1;

// 함수 호출
callback?.();

void 연산자

void 0           // undefined
void 'anything'  // undefined

undefined 를 안전하게 얻는 옛 idiom (옛 JS 에서 undefined 는 재할당 가능했음). 모던에선 불필요.

명시적 boolean 변환

Boolean(x)        // 권장
!!x                // 같음 (NOT NOT)

타입 강제 변환 전체 표

값	`Boolean()`	`Number()`	`String()`
`true`	`true`	`1`	`'true'`
`false`	`false`	`0`	`'false'`
`null`	`false`	`0`	`'null'`
`undefined`	`false`	`NaN`	`'undefined'`
`0`	`false`	`0`	`'0'`
`''`	`false`	`0`	`''`
`[]`	`true`	`0`	`''`
`{}`	`true`	`NaN`	`'[object Object]'`

[[js-type-coercion|JS 타입 변환]] 에서 전체 강제 변환 규칙 참고.

함정

1. typeof null

typeof null      // 'object'  (역사적 버그)
typeof undefined // 'undefined'

null 검사는 === null 사용.

2. NaN 의 truthy

Boolean(NaN)     // false
NaN == NaN       // false
NaN === NaN      // false
Number.isNaN(NaN)  // true

3. 빈 문자열의 비교

'' == false      // true
'' === false     // false
'' < 1           // true ('' → 0)

4. 객체의 truthy

const obj = {};
if (obj) { ... }    // 항상 true (객체 = truthy)
if (Object.keys(obj).length === 0) { ... }   // 진짜 empty 검사

5. null 과 관계 연산자의 모순

null > 0    // false
null == 0   // false
null >= 0   // true  (모순처럼 보임)

>= 는 null 을 0 으로 변환해 비교하지만, == 는 특수 케이스로 null == 0 을 false 로 처리. 이 불일치가 버그를 만든다.

모범 사례

=== 와 !== 만 사용
?? (nullish coalescing) 으로 null/undefined 만 fallback
명시적 boolean 검사, === null, Array.isArray, obj.length === 0 등
Boolean() 또는 !! 로 명시적 변환
?. 로 깊은 속성 접근 시 null 안전하게 처리

[Javascript] function

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

function 은 JavaScript 에서 함수를 만드는 가장 기본적인 키워드. 호이스팅, this 동적 바인딩, arguments 객체, new 호출 등 [[arrow function]] 과 구분되는 고유한 특성을 가진다.

함수가 값 으로 다뤄지는 [[일급 함수]] 의 성질은 모든 형태에 공통.

사용 상황

상황	권장 형태
객체 메서드 (`this` 가 객체를 가리켜야 함)	`function` 선언/표현식
생성자 (`new` 와 함께)	`function` 선언/표현식
prototype 메서드 추가	`function` 표현식
재귀 함수	이름 있는 함수 표현식 또는 선언문
콜백, 이벤트 핸들러 (this 불필요)	화살표 함수 권장
짧은 단방향 변환	화살표 함수 권장
호이스팅이 필요한 유틸 함수	함수 선언문

두 가지 모양

함수 선언 (Function Declaration)

function greet(name) {
  return `Hello, ${name}`;
}

호이스팅 됨 (선언 전 호출 가능)
자기 이름 greet 으로 자신을 참조 가능 (재귀)

함수 표현식 (Function Expression)

const greet = function (name) {
  return `Hello, ${name}`;
};

// 이름 있는 함수 표현식 (named function expression)
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

호이스팅 안 됨 (변수 선언만 호이스팅, 값은 평가 시점에 할당)
익명 또는 이름 있음, 이름은 내부에서만 보임

호이스팅의 차이

greet('A'); // 'Hello, A', 함수 선언은 호이스팅
function greet(name) {
  return `Hello, ${name}`;
}

sayHi('B'); // TypeError: sayHi is not a function
const sayHi = function (name) {
  return `Hi, ${name}`;
};

함수 선언은 함수 자체 가 스코프 최상단으로 끌어올려진다. 표현식은 const/let/var 가 호이스팅되는 규칙을 따른다.

호이스팅 동작 시각화

JavaScript 엔진은 실행 전 코드를 두 단계로 처리한다.

flowchart TD
    A["소스 코드 파싱"]
    A --> B["1단계: 선언 수집"]
    B --> C["function 선언 전체를 스코프 최상단 등록"]
    B --> D["var 선언은 이름만 등록, 값 = undefined"]
    B --> E["let, const 는 TDZ 에 등록"]
    A --> F["2단계: 실행"]
    F --> G["라인 순서대로 값 할당 및 실행"]
    C --> H["어디서든 호출 가능"]
    D --> I["선언 전 접근 시 undefined"]
    E --> J["선언 전 접근 시 ReferenceError"]

function 선언은 1단계에서 함수 객체 전체 가 등록되므로 어디서든 호출 가능. [[js-hoisting|호이스팅]] 참고.

this 동적 바인딩

일반 함수의 가장 큰 특징. 호출 방식에 따라 this 가 결정된다.

호출 방식	`this`
일반 호출 `fn()`	`undefined` (strict) 또는 전역 객체
메서드 호출 `obj.fn()`	`obj`
`fn.call(ctx)`, `fn.apply(ctx)`	`ctx`
`fn.bind(ctx)()`	`ctx`
`new fn()`	새 인스턴스
DOM 이벤트 리스너	이벤트 타겟 (보통)

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name); // 'Alice'
  },
};

const fn = obj.greet;
fn(); // undefined, this 가 obj 가 아니다

이 “this 가 호출 시 결정” 특성이 [[arrow function]] 과 가장 큰 차이.

flowchart TD
    Call["함수 호출"]
    Call -->|"new fn()"| New["this = 새 인스턴스"]
    Call -->|"fn.call(ctx)"| Bind["this = ctx"]
    Call -->|"fn.bind(ctx)()"| Bind
    Call -->|"obj.fn()"| Method["this = obj"]
    Call -->|"fn() 직접 호출"| Direct["strict mode 여부"]
    Direct -->|"strict"| Undef["this = undefined"]
    Direct -->|"non-strict"| Global["this = 전역 객체"]

arguments 객체

일반 함수 안에는 arguments 라는 유사 배열 객체가 자동으로 존재.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(1, 2, 3); // 6

모던 코드에서는 ...rest 매개변수를 권장. arguments 는 배열이 아니라 유사 배열이라 .map 등이 안 통한다.

new 호출

생성자로 사용 가능. this 는 새 인스턴스를 가리킨다.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const p = new Person('Alice');
p.greet(); // 'Hello, Alice'

ES2015 class 문법이 이를 깔끔하게 대체. 그래도 내부적으로는 같은 메커니즘.

프로토타입 체인

일반 함수는 prototype 속성을 가진다 (생성자로 쓰일 수 있어서).

function Animal() {}
Animal.prototype.eat = function () { /* ... */ };

const dog = new Animal();
dog.eat(); // 프로토타입 체인을 따라 찾음

[[arrow function]] 은 prototype 이 없어 new 호출 불가.

일반 함수 vs 화살표 함수 비교

특성	`function`	`() => {}`
`this`	호출 시 결정 (동적)	정의 시 결정 (lexical)
`arguments`	✓	✗ (rest 사용)
`new` 호출	✓ (생성자 가능)	✗ (TypeError)
`prototype`	✓	✗
호이스팅 (선언문)	✓	✗ (표현식만 가능)
짧은 문법	△	✓
메서드로 적합	✓	△ (this 가 lexical 이라서)

자세한 화살표 함수 동작은 [[arrow function]] 참고.

고급 패턴

IIFE (즉시 실행 함수)

(function () {
  // 즉시 실행, 전역 스코프 오염 방지
  const secret = 'hidden';
  console.log(secret);
})();

모듈 시스템이 없던 시절 스코프를 격리하는 패턴. 현재는 ES Modules 가 대체.

커링 (Currying)

function multiply(a) {
  return function (b) {
    return a * b;
  };
}
const double = multiply(2);
double(5);  // 10
double(10); // 20

인자를 하나씩 받는 함수 연쇄. [[js-closure|클로저]] 로 a 를 기억한다.

메모이제이션

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const fib = memoize(function (n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
});

언제 일반 함수를 쓰는가

객체의 메서드, this 가 객체를 가리켜야 함
생성자, new 와 함께
prototype 메서드, 클래스 메서드
재귀 함수 (이름 있는 표현식 또는 선언문)

함정

1. 메서드를 변수에 꺼내면 this 잃음

const timer = {
  tick: 0,
  increment() {
    this.tick++;
  },
};

const inc = timer.increment;
inc();              // this = undefined (strict) 또는 전역
inc.call(timer);    // this = timer (해결)

// 또는 bind 로 고정
const boundInc = timer.increment.bind(timer);
boundInc();         // 항상 timer

2. var 호이스팅과 함수 선언이 같은 이름

console.log(typeof foo);   // 'function'
var foo = 'bar';
function foo() {}
// 함수 선언이 var 보다 우선 (호이스팅 순서)

3. arguments 는 배열이 아님

function f() {
  arguments.map(x => x * 2);      // TypeError: arguments.map is not a function
  [...arguments].map(x => x * 2); // ✓ 배열로 변환
}

// 권장: rest 파라미터 사용
function g(...args) {
  args.map(x => x * 2); // ✓
}

4. 화살표 함수를 메서드로 쓰면 this 가 전역

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name); // undefined (lexical this = 전역)
  },
};
obj.greet(); // 의도와 다름

[Javascript] String

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

JavaScript 의 string 은 UTF-16 코드 유닛의 불변 시퀀스. 작은따옴표, 큰따옴표, 백틱 (template literal) 으로 작성.

const a = 'single';
const b = "double";
const c = `template`;
typeof a   // 'string'

사용 상황

상황	권장 패턴
변수 삽입, 멀티라인	template literal (백틱)
단순 고정 문자열	작은따옴표 또는 큰따옴표
SQL, HTML, GraphQL 빌더	tagged template
정규식 매칭/치환	`.match()`, `.replace()`, `.replaceAll()`
국제화, 로케일 정렬	`Intl.Collator`, `.localeCompare()`
이모지/다국어 글자 수	`Intl.Segmenter`

Template Literal

const name = 'Alice';
const age = 30;
const s = `My name is ${name} and I am ${age}`;

// 멀티라인
const multi = `line 1
line 2
line 3`;

// 표현식
const result = `2 + 2 = ${2 + 2}`;

tagged template

function tag(strings, ...values) {
    return strings.reduce((acc, str, i) =>
        acc + str + (values[i] ?? ''), '');
}

const x = tag`Hello, ${name}!`;

SQL, GraphQL, HTML 라이브러리에서 자주 사용 (예: sql 태그 함수로 안전한 쿼리 빌더).

자주 쓰는 메서드

메서드	의미
`.length`	글자 수 (UTF-16 단위)
`.charAt(i)`, `s[i]`	i 번째 글자
`.indexOf(s)`, `.lastIndexOf(s)`	위치
`.includes(s)`	포함 여부
`.startsWith(s)`, `.endsWith(s)`	시작/끝 검사
`.slice(start, end)`, `.substring(start, end)`	부분
`.split(sep)`	분할
`.replace(pat, repl)`, `.replaceAll(pat, repl)`	치환
`.match(regex)`, `.matchAll(regex)`	정규식 매칭
`.search(regex)`	정규식 위치
`.toLowerCase()`, `.toUpperCase()`	대소문자
`.trim()`, `.trimStart()`, `.trimEnd()`	공백 제거
`.padStart(n, ch)`, `.padEnd(n, ch)`	패딩
`.repeat(n)`	반복
`.normalize('NFC')`	유니코드 정규화
`.at(i)`	i 번째 (음수 인덱스)

'Hello'.length              // 5
'Hello'[0]                   // 'H'
'Hello'.slice(1, 4)          // 'ell'
'Hello'.split('l')           // ['He', '', 'o']
'a-b-c'.split('-')           // ['a', 'b', 'c']
'aaa'.replace('a', 'b')      // 'baa' (첫 번째만)
'aaa'.replaceAll('a', 'b')   // 'bbb'
'   hi   '.trim()            // 'hi'
'5'.padStart(3, '0')         // '005'
'-'.repeat(5)                 // '-----'

메서드 분류 시각화

flowchart LR
    M["String 메서드"]
    M --> S["검색 / 위치"]
    M --> T["변환"]
    M --> E["추출"]
    M --> F["포맷"]
    S --> S1["indexOf, includes"]
    S --> S2["startsWith, endsWith"]
    S --> S3["match, search"]
    T --> T1["toLowerCase, toUpperCase"]
    T --> T2["trim, trimStart, trimEnd"]
    T --> T3["replace, replaceAll"]
    E --> E1["slice, substring"]
    E --> E2["split"]
    E --> E3["at, charAt"]
    F --> F1["padStart, padEnd"]
    F --> F2["repeat"]
    F --> F3["normalize"]

immutable

const s = 'hello';
s[0] = 'H';            // 무시 (sloppy) 또는 TypeError (strict)
console.log(s);         // 'hello'

s = s.toUpperCase();    // 새 문자열 할당 (s 가 const 면 ❌)
let t = s.toUpperCase();  // ✓

모든 변환 메서드는 새 문자열 반환.

유니코드 함정

'😀'.length              // 2 (surrogate pair)
'😀'.charAt(0)            // '\uD83D' (의미 없음)
[...'😀']                 // ['😀'] (iterator 가 코드 포인트 단위)

'😀'.codePointAt(0)        // 128512 (정확한 코드 포인트)
String.fromCodePoint(128512)   // '😀'

이모지, 한자 일부, 글자 결합 (다이크리틱) 등이 1 글자가 아닐 수 있다. 정확한 grapheme 카운트는 Intl.Segmenter 또는 외부 라이브러리.

String vs string

'hello'                  // primitive
new String('hello')      // String 객체 (사용 X)

typeof 'hello'           // 'string'
typeof new String('hi')  // 'object'

'hello'.length           // 5 (자동 boxing)

primitive 가 표준. new String 은 사용하지 말 것.

정규식과 함께

const str = 'foo bar baz';

// 매칭
str.match(/\w+/g);           // ['foo', 'bar', 'baz']
str.matchAll(/(\w+)/g);      // Iterator (각 매치 + 캡처 그룹)

// 치환
str.replace(/\s+/g, '-');    // 'foo-bar-baz'
str.replaceAll('a', 'A');    // 'foo bAr bAz'

// 검색
str.search(/bar/);           // 4 (인덱스)

// 분할
'a1b2c3'.split(/\d/);        // ['a', 'b', 'c', '']

[[js-regex|정규식]] 참고.

비교

'apple' < 'banana'       // true (사전순, char code)
'B' < 'a'                 // true ('B' = 66, 'a' = 97)
'한' < '글'                // 유니코드 코드 포인트 비교
'한'.localeCompare('글', 'ko-KR')  // 로케일 기반 (음수/0/양수)

한글, 다른 언어 정렬은 localeCompare 또는 Intl.Collator 권장.

국제화와 로케일

// 로케일 기반 정렬
const words = ['바나나', '사과', '딸기'];
words.sort((a, b) => a.localeCompare(b, 'ko-KR'));

// Intl.Collator (반복 정렬 시 성능 우수)
const collator = new Intl.Collator('ko-KR');
words.sort(collator.compare);

// 정확한 grapheme 수 (이모지 포함)
const segmenter = new Intl.Segmenter('ko-KR', { granularity: 'grapheme' });
const graphemes = [...segmenter.segment('안녕😀')];
graphemes.length;  // 3 (안, 녕, 😀)

// 대소문자 변환 (로케일 의존)
'istanbul'.toLocaleUpperCase('tr-TR');  // 'İSTANBUL' (터키어 i)

함정

1. 숫자 + 문자열

'5' + 3        // '53' (string concatenation)
'5' - 3        // 2 (number)
'5' * 3        // 15
+'5'           // 5 (string → number)

2. == 의 형변환

'5' == 5       // true (강제 변환)
'5' === 5      // false

항상 === 권장.

3. 정규식 replace 의 special $

'abc'.replace('b', '$&')         // 'abbc' ($& = matched)
'abc'.replaceAll('b', '$$')      // 'a$c' ($$ = literal $)

literal $ 를 넣으려면 escape.

4. slice vs substring 의 음수 인덱스

'hello'.slice(-3)        // 'llo' (뒤에서 3번째부터)
'hello'.substring(-3)    // 'hello' (음수 → 0 으로 처리)

음수 인덱스가 필요하면 slice 또는 .at() 사용.

5. split 의 빈 문자열

'abc'.split('')    // ['a', 'b', 'c']
'😀'.split('')     // ['\uD83D', '\uDE00'] (surrogate pair 분리!)
[...'😀']          // ['😀'] (코드 포인트 단위, 안전)

[Javascript] 스코프 체인

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

스코프 체인 (Scope Chain) 은 변수 식별자를 해결할 때 따라가는 중첩된 [[Lexical Environment]] 의 연결 구조. 안쪽 스코프에서 찾지 못한 변수를 바깥 스코프로 차례로 검색.

시각화

flowchart LR
    inner["inner 스코프"]
    outer["outer 스코프"]
    global["global 스코프"]
    inner -->|"변수 없으면 위로"| outer
    outer -->|"변수 없으면 위로"| global
    global --> result["발견 / ReferenceError"]

global scope
└─ outer function scope
    └─ inner function scope
        └─ block scope { let x = 1 }

변수 lookup 은 inner → outer → global 순서. 가장 가까운 스코프에서 발견하면 즉시 반환.

기본 예

const a = 'global';

function outer() {
    const b = 'outer';

    function inner() {
        const c = 'inner';
        console.log(a, b, c);   // 'global outer inner'
    }
    inner();
}
outer();

inner 에서 a 를 찾을 때:

inner 스코프 → 없음
outer 스코프 → 없음
global 스코프 → ‘global’ 발견

정적 (Lexical) 스코프

JavaScript 는 lexical scope, 즉 함수가 정의된 위치 가 스코프를 결정. 호출 위치는 무관.

const x = 'global';

function foo() {
    console.log(x);    // 'global' (정의 위치 기준)
}

function bar() {
    const x = 'local';
    foo();             // 'global' (호출 위치 무관)
}
bar();

자세히는 [[Lexical Environment]] 참고.

블록 스코프 (ES6)

function foo() {
    const x = 1;
    if (true) {
        const x = 2;    // 새 블록 스코프
        console.log(x); // 2
    }
    console.log(x);     // 1
}

let/const 는 블록 단위, var 는 함수 단위.

클로저와의 관계

함수가 자기 정의 위치의 [[Lexical Environment]] 를 들고 다니는 것이 [[클로저]].

function makeCounter() {
    let count = 0;
    return () => ++count;
}

const counter = makeCounter();
counter();    // 1
counter();    // 2
counter();    // 3

내부 화살표 함수가 makeCounter 의 LE 를 참조 → count 살아있음.

scope chain 의 lookup 순서

let x = 1;
function foo() {
    let x = 2;
    function bar() {
        let x = 3;
        console.log(x);     // 3 (가장 가까운 정의)
    }
    bar();
}
foo();

가장 가까운 스코프부터 검색, 발견하면 즉시 사용 (shadowing).

global vs module 스코프

환경	최상위 스코프
브라우저 ES module	module 스코프
브라우저 일반 script	global 스코프
Node.js CommonJS	module 스코프
Node.js ES module	module 스코프

// ES module
const x = 1;     // module 스코프
// window.x → undefined (global 에 attach 안 됨)

IIFE 패턴

즉시 실행 함수 표현식. 새 스코프를 만들어 전역 오염을 방지.

(function () {
  const privateVar = 'inside';
  // privateVar 는 이 스코프 안에만 존재
})();
// privateVar → ReferenceError (바깥 접근 불가)

ES Modules 이전, 전역 네임스페이스 오염 방지의 표준 패턴. 현재는 ES module 로 대체됨.

// IIFE 로 private 상태 만들기
const counter = (function () {
  let count = 0;
  return {
    inc: () => ++count,
    get: () => count,
  };
})();

TDZ (Temporal Dead Zone) 와 스코프 체인

let/const 는 선언 전에 접근하면 ReferenceError (TDZ).
스코프 체인 탐색 결과 안쪽 스코프에서 선언이 있으면 바깥 값이 아니라 TDZ 에 걸린다.

let x = 1;
function foo() {
    console.log(x);   // ReferenceError (TDZ, 바깥 x 무시)
    let x = 2;
}
foo();

안쪽 let x 가 호이스팅으로 foo 스코프 상단으로 끌어올려지고, 초기화 전 접근 → TDZ.
바깥 x = 1 을 가려버리고 (shadow) TDZ 에 진입.

스코프 체인 vs 프로토타입 체인

	스코프 체인	프로토타입 체인
탐색 대상	변수 / 식별자	객체의 프로퍼티
방향	정의 위치 기반 (정적)	객체의 `__proto__` 링크 (동적)
언어 메커니즘	Lexical Environment	객체 상속
끝	global scope → undefined	`Object.prototype` → null

// 프로토타입 체인 예
const parent = { greet() { return 'hello'; } };
const child = Object.create(parent);
child.greet(); // 'hello' (child 에 없어서 parent 에서 찾음)

with 와 eval (피해야 할 것들)

with (obj) { ... }    // 스코프 체인에 동적으로 obj 삽입
eval('var x = 1;')    // 호출 스코프에 변수 삽입 (strict 모드 외)

둘 다 스코프 체인을 예측 불가능하게 만들어 최적화 방해. 사용 금지.

함정

1. 변수 호이스팅 + 스코프

let x = 1;
function foo() {
    console.log(x);   // ReferenceError (x 의 호이스팅된 TDZ)
    let x = 2;
}
foo();

안쪽 let x 가 호이스팅되어 바깥 x 를 가림.

2. 클로저의 성능

모든 함수가 자기 LE 를 참조. 너무 많은 변수를 closure 로 가두면 메모리 압박. 진짜 불필요한 변수는 외부로.

3. global 오염

// 실수로 var 빼먹기 (sloppy 모드)
function foo() {
    x = 1;   // var/let/const 없이 → global 에 추가됨!
}

strict 모드에서는 ReferenceError. 항상 'use strict' 또는 ES module 사용.

4. 동적 스코프와 혼동

JavaScript 는 동적 스코프가 아님. this 는 동적으로 결정되지만, 변수 참조는 정적 (lexical).

function f() {
  console.log(msg); // 정의 위치 기준 탐색
}
// f 를 어디서 호출하든 msg 참조 위치는 f 정의 당시 스코프

참고

[[Lexical Environment]]
[[클로저]]
[[JS var / let / const]]
[[JS 호이스팅]]
[[js-prototype-chain]]

[Javascript] 클로저

koa (김신건) — Fri, 17 Jul 2026 00:00:00 GMT

정의

클로저 (Closure): 함수가 자신이 정의된 시점의 외부 변수들을 계속 참조할 수 있는 성질.

함수가 일급 객체 ([[일급 함수]]) 인 언어의 자연스러운 결과. 메커니즘은 [[Lexical Environment]] + 함수 객체의 [[Environment]] 내부 슬롯.

자세한 메커니즘은 [[함수는 끝났는데 변수가 살아있다, Lexical Environment와 클로저의 메커니즘]] 글 참고.

시각화: 클로저 메커니즘

flowchart TD
    ROOT["const a (Root)"]
    FN["반환된 화살표 함수"]
    LE["makeCounter LE (힙)"]
    ENV["count: N"]
    ROOT --> FN
    FN -->|"Environment 슬롯"| LE
    LE --> ENV

makeCounter 의 실행 컨텍스트가 콜 스택에서 사라져도 LE 는 힙에 남음.
const a 가 반환된 함수를 참조하는 한, 이 사슬은 끊어지지 않는다.

핵심 특성

측면	동작
참조 시점	정의 위치 (Lexical), 호출 위치가 아님
수명	클로저 함수가 살아있는 한 외부 변수도 살아있음
격리	호출마다 새 LE → 독립된 상태
메모리 위치	힙 (heap), 콜 스택이 아님

가장 단순한 예

function makeCounter() {
  let count = 0; // 외부 변수
  return () => ++count; // 안쪽 함수가 count 를 "닫아서 들고 다님"
}

const a = makeCounter();
const b = makeCounter();

a(); // 1
a(); // 2
b(); // 1, b 의 count 는 독립

makeCounter() 가 반환된 뒤에도 count 가 살아남는다. 안쪽 함수가 count 를 참조하기 때문.

왜 GC 되지 않는가

makeCounter 의 실행 컨텍스트는 콜 스택에서 사라졌지만, 변수가 실제로 사는 [[Lexical Environment]] 는 힙에 있는 객체. 누군가 (= 반환된 함수) 가 참조하는 한 살아남는다.

참조 사슬:

const a (Root)
  |
반환된 화살표 함수
  | Environment 슬롯
makeCounter 의 LE
  | Environment Record
count: N

이 사슬이 끊어져야 GC 회수.

사용 패턴

1. 사적 상태 (Private State)

ES Modules 이전부터 정통 패턴.

const counter = (function () {
  let count = 0; // 외부에서 절대 접근 불가
  return {
    inc: () => ++count,
    get: () => count,
    reset: () => (count = 0),
  };
})();

counter.inc(); // 1
counter.count; // undefined, 직접 접근 X

2. 콜백이 외부 컨텍스트 기억

function attachLogger(label) {
  return (event) => console.log(`[${label}]`, event);
}

const log = attachLogger('user');
button.onclick = log; // log 는 호출 시 label='user' 를 기억

3. 이터레이터 / 제너레이터의 상태 보존

function naturals() {
  let n = 1;
  return { next: () => ({ value: n++, done: false }) };
}

const it = naturals();
it.next().value; // 1
it.next().value; // 2

4. 부분 적용 (Partial Application) / 커링

const multiply = (a) => (b) => a * b;
const double = multiply(2);
double(5); // 10

디바운스 구현

클로저로 타이머 핸들 을 닫아두는 전형적 패턴.

function debounce(fn, delay) {
  let timer = null; // 클로저로 timer 상태 보존
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const onSearch = debounce((query) => fetchResults(query), 300);
input.addEventListener('input', (e) => onSearch(e.target.value));

반환된 함수가 timer 를 클로저로 들고 다니므로 호출 간 상태 유지.

React 에서의 클로저: Stale Closure

React hooks 와 클로저의 가장 흔한 함정.

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // count 가 항상 0! stale closure
    }, 1000);
    return () => clearInterval(id);
  }, []); // 의존성 배열 비어있음 → count 가 0 인 클로저를 계속 사용
}

해결: 함수형 업데이트 또는 useRef 사용.

useEffect(() => {
  const id = setInterval(() => {
    setCount((prev) => prev + 1); // prev = 최신 값
  }, 1000);
  return () => clearInterval(id);
}, []);

useCallback, useMemo 의 의존성 배열도 동일 원리. 클로저가 오래된 값을 “닫아두는” 문제.

클로저 vs 클래스

// 클로저 방식
function makeStack() {
  const items = [];
  return {
    push: (x) => items.push(x),
    pop: () => items.pop(),
    size: () => items.length,
  };
}

// 클래스 방식
class Stack {
  #items = [];
  push(x) { this.#items.push(x); }
  pop()    { return this.#items.pop(); }
  size()   { return this.#items.length; }
}

측면	클로저	클래스
상태 은닉	자연스럽게 은닉	`#private` 필드 필요
프로토타입 체인	없음 (메서드 복사)	있음 (메서드 공유)
메모리	인스턴스마다 함수 복사	프로토타입 공유
가독성	함수형 스타일	OOP 스타일

수백~수천 인스턴스 생성 시 클래스가 메모리 효율적. 단순 상태 캡슐화는 클로저로 충분.

함정

for + var + 클로저

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => console.log(i));
}
fns[0](); // 3
fns[1](); // 3
fns[2](); // 3

var i 는 함수 스코프 → LE 가 루프 전체에 하나만. 세 콜백 모두 같은 i 를 본다.

let 으로 해결:

for (let i = 0; i < 3; i++) {
  fns.push(() => console.log(i));
}
// 0, 1, 2

스펙상 for + let 은 매 iteration 마다 별도 LE 를 만든다 (ECMA-262 §14.7.4.3).

메모리 누수

이벤트 핸들러나 setTimeout 콜백에 클로저를 넣을 때 큰 객체를 무의식 중에 보존할 수 있다.

function attachHandler() {
  const hugeData = new Array(1_000_000).fill('x');
  document.getElementById('btn').addEventListener('click', () => {
    console.log('clicked'); // hugeData 안 씀
  });
  // 모던 엔진(V8)은 escape analysis 로 hugeData 회수,
  // 그러나 eval/new Function 가능성이 있으면 LE 통째로 보존
}

큰 데이터는 명시적으로 해제 (data = null).

클로저 vs 익명 함수

흔한 오해. 익명 함수, 화살표 함수, 일반 함수 모두 클로저가 될 수 있고, 안 될 수도 있다.

클로저는 함수 + 그 함수가 정의된 시점의 외부 변수들 의 묶음.

외부 변수를 참조하지 않으면 단순한 함수일 뿐.

참고

[[Lexical Environment]]
[[일급 함수]]
[[고차 함수]]
[[js-scope-chain]]
[[함수는 끝났는데 변수가 살아있다, Lexical Environment와 클로저의 메커니즘]]

[JavaScript] fetch API: 현대 HTTP 클라이언트

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

fetch 는 Promise 기반의 표준 HTTP 클라이언트 Web API. ES2015 이후 XMLHttpRequest (XHR) 를 실질적으로 대체했다. 브라우저와 Node.js 18+ 에서 기본 지원.

언제 쓰나

상황	선택
REST API 호출	`fetch` 기본
JSON POST	`fetch` + `JSON.stringify`
요청 취소 / 타임아웃	`AbortController` / `AbortSignal.timeout`
스트리밍 응답	`res.body` (ReadableStream)
복잡한 인터셉터/재시도	axios / ky 등 래퍼 라이브러리

요청/응답 흐름

sequenceDiagram
    participant App as "앱 코드"
    participant Fetch as "fetch()"
    participant Net as "네트워크"
    participant Server as "서버"

    App->>Fetch: "fetch(url, options)"
    Fetch->>Net: "HTTP 요청 전송"
    Net->>Server: "패킷 전달"
    Server-->>Net: "HTTP 응답"
    Net-->>Fetch: "Response 객체 생성"
    Fetch-->>App: "Promise<Response> resolve"
    App->>Fetch: "res.json() 또는 res.text()"
    Fetch-->>App: "Promise<데이터> resolve"

[!IMPORTANT] fetch 는 네트워크 오류 (DNS 실패, 연결 거부 등) 만 reject 한다. HTTP 4xx / 5xx 는 정상 resolve 이므로 반드시 res.ok 로 확인해야 한다.

기본 사용

// GET 요청
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

options 객체

fetch(url, {
    method: 'POST',              // 기본값: 'GET'
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ name: 'Alice' }),

    // CORS 관련
    mode: 'cors',                // 'cors' | 'no-cors' | 'same-origin'
    credentials: 'include',      // 'omit' | 'same-origin' | 'include'

    // 캐싱
    cache: 'no-cache',           // 'default' | 'no-store' | 'reload' | 'force-cache'

    // 리다이렉트
    redirect: 'follow',          // 'follow' | 'error' | 'manual'

    // 취소 신호
    signal: controller.signal,
});

method / headers / body

// POST + JSON
await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Alice', age: 30 }),
});

// PUT 업데이트
await fetch(`/api/users/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Bob' }),
});

// DELETE
await fetch(`/api/users/${id}`, { method: 'DELETE' });

// 폼 데이터
const form = new FormData();
form.append('file', fileInput.files[0]);
await fetch('/api/upload', { method: 'POST', body: form });
// Content-Type: multipart/form-data 헤더는 자동 설정됨

mode / credentials

// 크로스 오리진 요청에 쿠키 포함
fetch('https://api.example.com/data', {
    mode: 'cors',
    credentials: 'include',   // 쿠키, Authorization 헤더 전송
});

// 동일 오리진에서만 쿠키 포함 (기본값)
fetch('/api/data', {
    credentials: 'same-origin',
});

Response 객체

const res = await fetch('/api/data');

// 상태 정보
res.status;          // 200, 404, 500 ...
res.ok;              // true if 200-299
res.statusText;      // 'OK', 'Not Found' ...
res.headers.get('Content-Type');   // 'application/json'
res.url;             // 최종 URL (리다이렉트 후)
res.redirected;      // 리다이렉트 여부

// Body 소비 메서드 (한 번만 호출 가능)
await res.json();        // JSON 파싱
await res.text();        // 문자열
await res.blob();        // Blob (이미지 등)
await res.arrayBuffer(); // ArrayBuffer (바이너리)
await res.formData();    // FormData

Body 스트리밍

const res = await fetch('/api/large-file');
const reader = res.body.getReader();

while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // value: Uint8Array 청크
    process(value);
}

Request 객체

URL 과 옵션을 미리 구성해 재사용하거나 미들웨어에 전달할 때.

const req = new Request('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Alice' }),
});

// 복제해서 수정
const reqWithAuth = new Request(req, {
    headers: { ...req.headers, 'Authorization': `Bearer ${token}` },
});

const res = await fetch(reqWithAuth);

에러 처리

async function apiFetch(url, options) {
    let res;
    try {
        res = await fetch(url, options);
    } catch (networkErr) {
        // DNS 실패, 연결 거부, CORS 차단 등
        throw new Error(`네트워크 오류: ${networkErr.message}`);
    }

    if (!res.ok) {
        const body = await res.text().catch(() => '');
        throw new Error(`HTTP ${res.status}: ${body}`);
    }

    return res.json();
}

HTTP 상태 코드별 처리

async function fetchWithStatusHandling(url) {
    const res = await fetch(url);

    switch (true) {
        case res.status === 401:
            throw new Error('인증 필요: 로그인 하세요');
        case res.status === 403:
            throw new Error('권한 없음');
        case res.status === 404:
            return null;
        case res.status >= 500:
            throw new Error(`서버 오류: ${res.status}`);
        case !res.ok:
            throw new Error(`요청 실패: ${res.status}`);
        default:
            return res.json();
    }
}

취소

// AbortController 로 수동 취소
const ctl = new AbortController();

const promise = fetch(url, { signal: ctl.signal });

// 5초 후 취소
setTimeout(() => ctl.abort(), 5000);

try {
    const res = await promise;
} catch (err) {
    if (err.name === 'AbortError') {
        console.log('요청이 취소됐습니다');
    }
}

타임아웃

// AbortSignal.timeout (ES2022, 가장 간단)
const res = await fetch(url, {
    signal: AbortSignal.timeout(5000),
});

// 직접 구성 (지원 안 하는 환경)
async function fetchWithTimeout(url, ms = 5000) {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), ms);
    try {
        return await fetch(url, { signal: controller.signal });
    } finally {
        clearTimeout(timer);
    }
}

실전 예시

공통 API 클라이언트

const API_BASE = 'https://api.example.com';

async function apiRequest(path, options = {}) {
    const url = `${API_BASE}${path}`;
    const defaults = {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getToken()}`,
        },
        credentials: 'include',
        signal: AbortSignal.timeout(10_000),
    };

    const res = await fetch(url, { ...defaults, ...options });
    if (!res.ok) {
        const err = await res.json().catch(() => ({ message: res.statusText }));
        throw Object.assign(new Error(err.message), { status: res.status });
    }
    if (res.status === 204) return null;   // No Content
    return res.json();
}

재시도 로직

async function fetchWithRetry(url, options = {}, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            const res = await fetch(url, options);
            if (res.ok) return res;
            if (res.status < 500) throw new Error(`HTTP ${res.status}`);  // 4xx: 재시도 의미 없음
        } catch (err) {
            if (i === retries - 1) throw err;
            await new Promise(r => setTimeout(r, 300 * 2 ** i));   // exponential backoff
        }
    }
}

Blob 이미지 다운로드

async function downloadImage(url) {
    const res = await fetch(url);
    const blob = await res.blob();
    const objectUrl = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = objectUrl;
    a.download = 'image.jpg';
    a.click();
    URL.revokeObjectURL(objectUrl);
}

함정

4xx/5xx 는 reject 안 함

// ❌ 이렇게 쓰면 오류를 감지 못 함
const res = await fetch('/api/missing');
const data = await res.json();   // 404 응답의 body를 파싱하게 됨

// ✅ res.ok 확인 필수
if (!res.ok) throw new Error(`HTTP ${res.status}`);

Body 는 한 번만 소비 가능

const res = await fetch(url);

// ❌ 두 번 소비하면 TypeError
const json = await res.json();
const text = await res.text();   // TypeError: body already consumed

// ✅ clone 후 각각 소비
const clone = res.clone();
const json = await res.json();
const text = await clone.text();

[!WARNING] Response.body 는 ReadableStream 이며 한 번만 읽을 수 있다. 두 번 파싱이 필요하면 반드시 res.clone() 을 먼저 호출한다.

credentials 기본값

// 기본값 'same-origin': 크로스 오리진 요청에는 쿠키가 전송되지 않음
fetch('https://other.com/api');                         // 쿠키 없음

// 크로스 오리진에서 쿠키 보내려면 명시
fetch('https://other.com/api', { credentials: 'include' });
// 서버도 CORS 헤더에 Access-Control-Allow-Credentials: true 필요

[Javascript] Lexical Environment

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

Lexical Environment (어휘적 환경) 는 ECMAScript 명세 (§9.1) 가 정의한 내부 객체. 함수가 호출될 때마다 새로 만들어지며, 이 호출의 변수들이 어디 살고, 바깥 스코프가 어디인지 를 기록한다.

자세한 메커니즘과 시각화는 [[함수는 끝났는데 변수가 살아있다, Lexical Environment와 클로저의 메커니즘]] 글 참고.

사용 상황

LE 를 직접 다루는 경우는 없지만, 다음 상황에서 LE 개념을 이해해야 한다.

[[클로저]] 가 어떻게 외부 변수를 기억하는지
for + var vs for + let 의 클로저 동작 차이
모듈 스코프에서의 변수 격리
메모리 누수: 클로저가 거대한 객체를 의도치 않게 잡아두는 경우

핵심 구조

LE 는 단 두 개의 필드 를 가진다.

필드	역할
Environment Record	이 스코프에서 선언된 식별자 (`let`, `const`, `var`, 함수 선언) 의 실제 binding 저장소
외부 Environment 참조 (Outer)	자기를 감싸는 바깥 LE 에 대한 참조. 없으면 `null`

이 단순한 구조가 스코프 체인 그 자체다. LE 들이 outer 포인터로 연결되어 사슬을 이루고, 변수 조회는 안쪽 LE 부터 시작해 outer 를 따라 바깥으로 진행한다.

LE 체인 시각화

flowchart TD
    INN["inner() LE<br/>Environment Record: 비어있음"]
    OUT["outer() LE<br/>Environment Record: x = 100"]
    GLO["전역 LE<br/>Environment Record: x = 1, console = ..."]
    NULL[null]
    INN -->|Outer 참조| OUT
    OUT -->|Outer 참조| GLO
    GLO -->|"Outer = null"| NULL

변수 x 를 inner() 에서 조회하면: inner LE 에 없음 → outer LE 에 없음 → 전역 LE 에서 x = 1 발견.

변수 조회 알고리즘

flowchart LR
    S[변수 x 참조] --> A[현재 LE 검색]
    A --> B{바인딩 있음?}
    B -->|있음| C[해당 값 반환]
    B -->|없음| D[Outer LE 로 이동]
    D --> E{Outer 가 null?}
    E -->|아님| A
    E -->|null| F[ReferenceError]

가장 가까운 binding 이 이긴다 (lexical shadowing). 못 찾으면 ReferenceError.

function ResolveBinding(name, lexEnv):
  while lexEnv != null:
    record = lexEnv.EnvironmentRecord
    if record has binding for name:
      return record.GetBindingValue(name)
    lexEnv = lexEnv.OuterEnv
  throw ReferenceError

Environment Record 의 5 가지 종류

ECMAScript 는 Environment Record 를 다섯 가지로 분류한다.

종류	어디에 산다?
Declarative	일반 함수 스코프, 블록 스코프. `let` / `const` / 함수 선언이 여기
Function	Declarative 의 특수화. `this`, `super`, `new.target` 추가
Object	`with` 문 같은 곳에서 객체를 스코프로 쓸 때
Global	가장 바깥. `globalThis`, `console`, `Math` 등
Module	모듈 최상위. `import` 바인딩이 여기

Lexical 인 이유

“Lexical” 은 정의 시점의 위치 를 뜻한다. 호출 시점이 아니다.

let x = 1;

function outer() {
  let x = 100;
  return inner; // inner 의 외부 LE 는 정의 위치인 outer
}

function inner() {
  return x; // 어느 x?
}

const fn = outer();
fn(); // 1, 100 이 아니다!

inner 는 outer 안에서 호출되는 게 아니라 전역에서 정의 되었기 때문에 외부 LE 가 전역 LE 다. 그래서 x = 1 을 본다.

만약 JavaScript 가 dynamic scope 였다면 fn() 의 결과가 호출 시점의 LE (outer 의 LE) 를 따라 100 이 되었을 것이다.

함수 객체의 `[[Environment]]` 슬롯

LE 와 함수 객체의 관계는 이렇다.

함수 객체는 내부 슬롯 [[Environment]] 를 가진다. 이 슬롯은 그 함수가 정의된 시점의 LE 를 가리킨다.

함수가 어디서 어떻게 호출되든, 호출 시 만들어지는 새 LE 의 outer 참조 는 항상 이 박제된 [[Environment]] 슬롯이 된다.

이게 [[클로저]] 의 진짜 정체다. 함수가 끝나도 변수가 살아있는 이유:

변수는 콜 스택이 아니라 힙에 있는 LE 객체 에 산다
함수 객체의 [[Environment]] 가 그 LE 를 참조한다
함수 객체가 살아있는 한 LE 도 살아있다 (GC 가 회수 못함)

let 과 var 의 LE 차이

for + var + 클로저 의 악명 높은 함정이 LE 메커니즘으로 정확히 설명된다.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => console.log(i));
}
fns[0](); fns[1](); fns[2](); // 3, 3, 3

var i 는 함수 스코프 → LE 가 루프 전체에 단 하나. 세 콜백 모두 같은 LE 를 outer 로 가진다.

for (let i = 0; i < 3; i++) {
  fns.push(() => console.log(i));
}
fns[0](); fns[1](); fns[2](); // 0, 1, 2

스펙 (ECMA-262 §14.7.4.3) 상 for + let 은 매 iteration 마다 별도 LE 를 만든다. 그래서 세 콜백의 outer 가 셋 다 다른 LE 다.

호출마다 새 LE

function makeCounter() {
  let count = 0;
  return () => ++count;
}

const a = makeCounter();
const b = makeCounter();
a(); // 1
a(); // 2
b(); // 1, b 의 count 는 별개

makeCounter() 를 두 번 호출하면 두 개의 독립된 LE 가 힙에 만들어진다. 반환된 두 함수의 [[Environment]] 는 서로 다른 LE 를 가리키므로 count 도 독립적이다.

블록 스코프 LE

let / const 는 {} 블록마다 새 Declarative Environment Record 를 만든다.

{
  let a = 1;
  {
    let a = 2;  // 내부 블록의 별도 LE
    console.log(a); // 2
  }
  console.log(a);   // 1
}

이 블록 LE 도 outer 포인터를 가지고 체인을 이룬다.

모듈 LE

ES module 의 최상위 선언은 Module Environment Record 에 저장된다.

// module-a.mjs
export let shared = 1;  // Module LE 에 binding

// module-b.mjs

// import binding 은 live binding: module-a 의 LE 를 직접 참조

모듈 최상위 var 도 전역이 아닌 Module LE 에 간다. 모듈은 자동으로 strict mode.

클로저 메모리 주의

function createClosure() {
  const bigArray = new Array(1_000_000).fill(0);

  return function inner() {
    return bigArray.length; // bigArray 를 참조
  };
}

const fn = createClosure();
// fn 이 살아있는 한 bigArray 도 GC 불가

[!WARNING] 클로저가 거대한 객체를 참조하면 메모리 누수가 발생한다. 더 이상 필요 없는 클로저는 참조를 해제하거나, 필요한 데이터만 추출해서 클로저에 전달.

함정

동적 스코프 착각: LE 는 정의 위치 기준. 호출 위치가 어디든 [[Environment]] 슬롯이 결정한다.
var + 루프: 루프 내 var 는 LE 하나 공유 → 클로저 버그. let 으로 해결.
클로저 메모리 누수: 필요 없는 클로저를 오래 유지하면 LE 체인이 살아남아 GC 불가.
호이스팅과 TDZ: let / const 도 호이스팅 되지만 Declarative ER 에 “uninitialized” 상태. TDZ 에서 접근 시 ReferenceError.

실전 활용: 팩토리와 모듈 패턴

LE 를 의식해서 설계하면 Private State 가 가능해진다.

// 팩토리 패턴: 각 호출마다 독립 LE
function createStore(initial) {
  let state = initial;           // LE 에 저장

  return {
    getState: () => state,
    setState: (val) => { state = val; },
  };
}

const storeA = createStore(0);
const storeB = createStore(100);
storeA.setState(42);
console.log(storeA.getState()); // 42
console.log(storeB.getState()); // 100 (독립)

// IIFE 모듈 패턴 (ES module 이전 방식)
const counter = (() => {
  let count = 0;                 // 외부 접근 불가

  return {
    inc: () => ++count,
    dec: () => --count,
    get: () => count,
  };
})();

counter.inc(); counter.inc();
console.log(counter.get()); // 2
console.log(counter.count); // undefined (외부 접근 불가)

[Javascript] Microtask Queue

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

Microtask Queue (마이크로태스크 큐) 는 [[js-event-loop|이벤트 루프]] 가 매 틱마다 완전히 비울 때까지 처리하는 우선순위 큐다. 매크로태스크 큐보다 항상 먼저 처리된다.

ECMAScript 명세는 이를 “PromiseJobs” 라는 Job 큐로 정의한다 (§9.5). WHATWG HTML 명세는 별도의 “microtask queue” 로 통합해 관리한다 (§8.1.4).

언제 쓰나

목적	도구
Promise `.then` / `.catch` / `.finally`	자동으로 마이크로태스크
`await` 이후 코드 재개	자동으로 마이크로태스크
현재 동기 코드 직후, 다음 매크로 전에 실행	`queueMicrotask(fn)`
렌더링 전에 DOM 상태 일괄 갱신	`queueMicrotask`
렌더링 이후 실행 필요	`requestAnimationFrame` 또는 `setTimeout`

이벤트 루프 틱 안에서의 순서

flowchart TD
    A["이벤트 루프 틱 시작"] --> B{"매크로태스크 큐에\n작업 있음?"}
    B -->|"Yes"| C["태스크 1개 꺼내 실행"]
    B -->|"No"| G["대기"]
    C --> D{"마이크로태스크 큐\n비었나?"}
    D -->|"No"| E["마이크로태스크 전부 실행\n(새로 추가되는 것 포함)"]
    E --> D
    D -->|"Yes"| F["렌더링 필요하면 Paint"]
    F --> A

핵심: 매크로태스크 1개 실행 후, 마이크로태스크 큐가 완전히 빌 때까지 계속 실행한 뒤 렌더링으로 넘어간다.

핵심 특성

측면	동작
처리량	한 틱에 큐가 빌 때까지 전부
우선순위	매크로태스크보다 항상 먼저
추가 허용	마이크로태스크 처리 중 등록된 것도 같은 틱 에 처리
렌더링 블로킹	마이크로태스크 비우는 동안 화면 업데이트 없음

들어가는 콜백

출처	예시
Promise	`.then`, `.catch`, `.finally` 콜백
async/await	`await` 이후 함수 재개
직접 등록	`queueMicrotask(fn)`
DOM 변경 관찰	`MutationObserver` 콜백
Node.js	`queueMicrotask`, `process.nextTick` (더 높은 우선순위)

매크로태스크와의 실행 순서

console.log('start');

setTimeout(() => console.log('macro'), 0);           // 매크로태스크
Promise.resolve().then(() => console.log('micro'));   // 마이크로태스크
queueMicrotask(() => console.log('microtask'));       // 마이크로태스크

console.log('end');

// 출력: start, end, micro, microtask, macro

실행 순서:

동기 코드 (start, end) 즉시 실행
마이크로태스크 큐 비우기 (micro, microtask)
매크로태스크 큐에서 1개 (macro)

queueMicrotask: 직접 등록

ES2020 에 표준화. Promise 객체 생성 없이 마이크로태스크를 직접 등록한다.

queueMicrotask(() => {
    console.log('동기 코드가 끝난 직후, 렌더링 전에 실행');
});

Promise.resolve().then(fn) 과 실행 타이밍이 동일하지만:

의도가 명확 (스케줄링이 목적임을 코드에서 표현)
Promise 인스턴스 생성 비용 없음
에러가 unhandledRejection 으로 튀지 않음 (Promise.then 와 다름)

언제 쓰나

// 라이브러리 내부: "이 작업 끝나면 옵저버에게 알리고 싶은데,
// 동기로 바로 호출하면 호출자 콜 스택을 오염시킴"
function notifyObservers(data) {
    queueMicrotask(() => {
        for (const observer of observers) {
            observer.update(data);
        }
    });
}

await 도 마이크로태스크

await 는 함수를 일시정지하고, 재개(resume) 를 마이크로태스크 큐에 등록한다.

async function f() {
    console.log('1: async 함수 시작');
    await Promise.resolve();
    console.log('3: await 이후 (마이크로태스크로 재개)');
}

console.log('start');
f();
console.log('2: f() 호출 직후 (동기)');

// 출력: start, 1: async 함수 시작, 2: f() 호출 직후 (동기), 3: await 이후 (마이크로태스크로 재개)

await Promise.resolve() 가 이미 정착된 Promise 를 기다려도, 재개는 반드시 다음 마이크로태스크 에 일어난다.

복수 await 의 마이크로태스크 소비

async function slow() {
    await null;   // 마이크로태스크 1개 소비
    await null;   // 마이크로태스크 1개 소비
    return 'done';
}

// async function 을 여러 개 await 할 때 순서
async function main() {
    const p1 = slow();
    const p2 = slow();

    // p1 과 p2 는 교대로 마이크로태스크 큐에 재개를 등록
    const [r1, r2] = await Promise.all([p1, p2]);
}

실전 예시

DOM 배치 갱신 (배치 업데이트 패턴)

let pending = false;
const updates = [];

function scheduleUpdate(data) {
    updates.push(data);
    if (!pending) {
        pending = true;
        queueMicrotask(flushUpdates);   // 다음 마이크로태스크에 일괄 처리
    }
}

function flushUpdates() {
    pending = false;
    const batch = updates.splice(0);
    // batch 를 한 번에 DOM 에 반영
    render(batch);
}

// 동기 코드에서 여러 번 호출해도 렌더링은 1번
scheduleUpdate({ id: 1 });
scheduleUpdate({ id: 2 });
scheduleUpdate({ id: 3 });
// flushUpdates 는 세 호출 후 단 1번 실행

반응성 시스템의 effect 큐잉

React, Vue, Solid 같은 프레임워크 내부에서 state 변경을 마이크로태스크로 배치 처리하는 패턴.

const effectQueue = new Set();
let isFlushing = false;

function scheduleEffect(fn) {
    effectQueue.add(fn);
    if (!isFlushing) {
        isFlushing = true;
        queueMicrotask(() => {
            effectQueue.forEach(effect => effect());
            effectQueue.clear();
            isFlushing = false;
        });
    }
}

옵저버 패턴에서 동기 안전성 보장

class EventEmitter {
    emit(event, data) {
        const handlers = this.listeners.get(event) ?? [];
        // 동기로 호출하면 emit 호출자의 상태가 아직 업데이트 안 됐을 수 있음
        queueMicrotask(() => {
            handlers.forEach(h => h(data));
        });
    }
}

함정

마이크로태스크 무한 등록 (페이지 freeze)

function loop() {
    Promise.resolve().then(loop);
}
loop();
// setTimeout 콜백, 렌더링, 사용자 이벤트 모두 영원히 실행 불가

마이크로태스크 큐는 “비어있을 때까지” 처리한다. 처리 중 새로 등록한 마이크로태스크도 같은 틱 안에 처리되므로, 무한 등록하면 큐가 영원히 비지 않는다.

[!CAUTION] Promise.resolve().then(loop) 무한 재귀는 setTimeout(loop, 0) 과 달리 렌더링과 I/O 를 완전히 차단한다. 잘게 쪼개야 하는 작업은 매크로태스크 (setTimeout) 로, 즉시 양보해야 하는 작업은 마이크로태스크 로 구분하자.

catch 하지 않은 마이크로태스크 에러

queueMicrotask(() => {
    throw new Error('microtask 에러');
});
// 브라우저에서는 window.onerror / unhandledrejection 으로 전파
// Promise 와 달리 try/catch 로 감쌀 수 없음

// ✅ 내부에서 처리
queueMicrotask(() => {
    try {
        riskyOp();
    } catch (err) {
        handleError(err);
    }
});

Promise.then vs queueMicrotask 에러 버블링

// ❌ Promise.then 에서 던진 에러: unhandledRejection 이벤트
Promise.resolve().then(() => { throw new Error('oops'); });

// ✅ queueMicrotask 에서 던진 에러: 일반 uncaught 에러 (window.onerror)
queueMicrotask(() => { throw new Error('oops'); });

Node.js: process.nextTick 의 위치

Node.js 는 마이크로태스크보다 더 높은 우선순위 의 process.nextTick 큐를 따로 관리한다.

setImmediate(() => console.log('setImmediate'));       // 매크로태스크
setTimeout(() => console.log('setTimeout'), 0);        // 매크로태스크
Promise.resolve().then(() => console.log('promise')); // 마이크로태스크
process.nextTick(() => console.log('nextTick'));       // nextTick (최우선)

// 출력: nextTick, promise, setTimeout 또는 setImmediate (순서 다를 수 있음)

[!CAUTION] process.nextTick 도 재귀 등록 시 I/O 와 타이머를 영원히 차단한다. 외부에 노출되는 라이브러리 API 는 queueMicrotask 또는 setImmediate 가 더 안전하다.

[Javascript] setInterval

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

setInterval(callback, delay, ...args) 은 호스트 환경이 제공하는 반복 타이머 API. 매 delay 밀리초마다 callback 을 매크로태스크 큐에 등록한다.

전체 메커니즘은 [[이벤트 루프]] 와 [[비동기와 타이밍, 콜백부터 async/await까지의 발전사]] 참고.

사용 상황

상황	setInterval	대안
고정 간격 UI 업데이트 (시계 등)	✅	-
WebSocket heartbeat / keep-alive	✅	-
애니메이션 프레임 갱신	❌	[[requestAnimationFrame]]
비동기 작업 반복 (fetch polling)	주의	setTimeout 재호출 패턴
단발 지연 실행	❌	[[setTimeout]]

이벤트 루프 내 동작

flowchart TD
    A["setInterval(fn, 1000)"] --> B[타이머 등록]
    B --> C["1000ms 경과"]
    C --> D["fn 을 매크로태스크 큐에 추가"]
    D --> E{콜 스택 비어있음?}
    E -->|아님| F[대기]
    F --> E
    E -->|비어있음| G["fn() 실행"]
    G --> H{clearInterval 호출?}
    H -->|아님| C
    H -->|호출됨| I[반복 종료]

delay 는 최소 간격. 콜 스택이 바쁘면 큐에서 대기하고 지연 실행된다.

문법

const id = setInterval(callback, delay, arg1, arg2, ...);
clearInterval(id); // 중지

인자	의미
`callback`	매 주기마다 호출될 함수
`delay`	최소 반복 간격 (밀리초). 기본 0 (브라우저는 보통 4~10ms 로 강제)
`arg1, arg2, ...`	`callback` 에 전달할 추가 인자

clearInterval(id) 로 중지.

기본 사용

let count = 0;
const id = setInterval(() => {
  console.log(`tick ${++count}`);
  if (count === 3) clearInterval(id);
}, 1000);
// 1초마다 tick 1, tick 2, tick 3 출력 후 중지

핵심 함정

1. 콜백 실행 시간이 interval 보다 길어지면 큐가 쌓인다

가장 흔한 버그.

setInterval(() => {
  // 1.5초 걸리는 작업
  const start = Date.now();
  while (Date.now() - start < 1500) {}
  console.log('done');
}, 1000);
// 1초마다 큐에 등록되는데 한 번 실행에 1.5초
// 큐가 무한히 쌓이거나, 브라우저가 자동으로 누락

[!CAUTION] 비동기 작업 (예: setInterval(async () => await fetch(...), 1000)) 도 같은 문제. 응답이 1초보다 늦으면 요청이 중첩된다.

2. 정확한 주기가 보장되지 않는다

setTimeout 과 마찬가지로 최소 간격. 콜 스택이 비지 않으면 늦게 실행되고, 늦은 만큼 다음 호출이 당겨지지 않는다 (만회하지 않음).

3. 백그라운드 탭에서 throttle

브라우저는 백그라운드 탭의 setInterval 을 1Hz 로 강제 (Chrome, Firefox). 시계 같은 UI 는 다른 방법 필요.

4. React useEffect 에서 cleanup 누락

// 잘못된 예: interval 이 누적됨
useEffect(() => {
  setInterval(() => setCount(c => c + 1), 1000);
}, []);

// 올바른 예
useEffect(() => {
  const id = setInterval(() => setCount(c => c + 1), 1000);
  return () => clearInterval(id);  // cleanup
}, []);

[!WARNING] React 의 StrictMode 는 개발 환경에서 Effect 를 두 번 실행한다. cleanup 이 없으면 interval 이 두 개 등록된다.

5. this 바인딩 문제

class Timer {
  constructor() {
    this.count = 0;
  }

  start() {
    // 잘못: this 가 undefined (strict) 또는 window
    setInterval(function() {
      console.log(this.count);
    }, 1000);

    // 올바름: arrow function 은 외부 this 캡처
    setInterval(() => {
      console.log(this.count);
    }, 1000);
  }
}

더 안전한 대안, setTimeout 재호출

콜백 실행이 끝난 뒤 다음 호출을 예약하면 적체가 없다.

function poll() {
  doWork();
  setTimeout(poll, 1000); // 작업 끝난 뒤 1초
}
poll();

또는 async/await 와 함께:

async function poll() {
  while (true) {
    await doWork();
    await new Promise(r => setTimeout(r, 1000));
  }
}
poll();

[!TIP] 실무에서 setInterval 보다 setTimeout 재호출 패턴이 안전. 비동기 작업이나 가변 길이 작업을 반복할 때 특히.

requestAnimationFrame 과의 비교 (애니메이션)

화면을 매 프레임마다 갱신해야 한다면 setInterval 대신 [[requestAnimationFrame]] 사용.

항목	`setInterval(fn, 16)`	`requestAnimationFrame(fn)`
호출 시점	16ms 마다 (큐가 비어있을 때)	다음 paint 직전
백그라운드 탭	1Hz 로 throttle	호출 안 됨 (배터리 절약)
모니터 주사율	무시	적응 (60Hz, 120Hz 등)
프레임 누락	자주	드묾

clearInterval

const id = setInterval(tick, 1000);
clearInterval(id);
// 다음 tick 부터 실행 안 됨

이미 큐에 들어간 콜백은 취소되지 않는다.

Node.js 에서의 차이

Node.js 에서는 브라우저보다 delay 가 정확하고 최소값 강제가 없다. 그러나 블로킹 코드가 있으면 마찬가지로 delay 가 발생한다.

// Node.js 전용: setInterval 반환값이 Timeout 객체
const timer = setInterval(fn, 1000);
timer.unref();   // 이 타이머만 남았을 때 프로세스 종료 허용
timer.ref();     // 다시 프로세스 유지

자주 쓰이는 패턴

타이머 / 카운트다운

function countdown(seconds, onTick, onDone) {
  let remaining = seconds;
  const id = setInterval(() => {
    onTick(remaining);
    if (--remaining < 0) {
      clearInterval(id);
      onDone();
    }
  }, 1000);
  return id;
}

Heartbeat / Keep-alive

WebSocket 같은 연결에서 ping 전송.

const id = setInterval(() => {
  if (ws.readyState === WebSocket.OPEN) ws.send('ping');
}, 30000);

AbortController 연계 (취소 가능 폴링)

function startPolling(url, interval, signal) {
  const id = setInterval(async () => {
    if (signal.aborted) {
      clearInterval(id);
      return;
    }
    const res = await fetch(url, { signal });
    console.log(await res.json());
  }, interval);

  signal.addEventListener('abort', () => clearInterval(id));
  return id;
}

const controller = new AbortController();
startPolling('/api/status', 5000, controller.signal);
// 취소
controller.abort();

[Javascript] strict mode

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

'use strict' 디렉티브로 활성화되는 엄격 실행 모드. ES5 도입. 위험한 문법을 에러로 만들어 코드 안전성 향상.

ES module 과 class 본문은 자동으로 strict mode.

사용 상황

상황	strict 관련
ES module (Vite, webpack, bundler)	자동 strict
`class` 내부	자동 strict
Node.js `.mjs` 파일	자동 strict
레거시 `<script>` 태그	명시적 `'use strict'` 필요
라이브러리 배포 코드	반드시 strict

현대 개발 환경에서는 번들러가 ES module 을 사용하므로 별도 선언 없이도 strict mode 가 적용된다.

strict mode 활성화 흐름

flowchart TD
    A[JavaScript 파일 파싱] --> B{파일 타입?}
    B -->|"ES module (.mjs, type=module)"| C[자동 strict mode]
    B -->|일반 script 파일| D{"'use strict' 선언?"}
    D -->|파일 최상단| C
    D -->|함수 내부| E["해당 함수만 strict mode"]
    D -->|없음| F["sloppy mode (기본값)"]
    A --> G{"class 본문?"}
    G -->|해당 블록| C

사용

// 파일 최상단
'use strict';

// 또는 함수 내부
function foo() {
    'use strict';
    // ...
}

strict mode 의 효과

1. 선언 안 한 변수에 할당 시 ReferenceError

// sloppy
function foo() {
    x = 1;     // 실수로 var 빼먹음 → global 변수 생성!
}

// strict
function foo() {
    'use strict';
    x = 1;     // ❌ ReferenceError
}

global 오염 방지.

2. 중복 매개변수 금지

function foo(a, a) { }      // sloppy 에서는 동작
// 'use strict'; → SyntaxError

3. 8 진수 리터럴 금지

const x = 010;          // sloppy: 8 (8진수 8)
'use strict';
const x = 010;          // ❌ SyntaxError
const y = 0o10;         // ES6 표준 8진수 표기

4. delete 의 제한

'use strict';
delete Object.prototype;     // ❌ TypeError (변경 불가)

var x = 1;
delete x;                     // ❌ SyntaxError (변수 삭제 불가)

5. this 의 변화

function foo() {
    console.log(this);
}

foo();                  // sloppy: window/global
'use strict';
foo();                  // strict: undefined

명시적으로 this 를 지정하지 않은 호출에서 더 안전.

6. with 금지

'use strict';
with (obj) { }     // ❌ SyntaxError

7. arguments 의 immutable

function foo(a) {
    'use strict';
    a = 99;
    console.log(arguments[0]);    // 호출 시 전달된 원본 값
}

sloppy 모드에서는 a 변경이 arguments[0] 에 반영. strict 는 분리.

8. eval 의 격리

'use strict';
eval('var x = 1;');
console.log(x);     // ❌ ReferenceError (eval 내부 스코프)

sloppy 모드에서는 eval 안의 변수가 호출 스코프에 누설.

9. 미래 예약어 보호

implements, interface, let, package, private, protected, public, static, yield 가 식별자 금지.

전체 제한 목록

제한	sloppy	strict
선언 없는 변수 할당	전역 생성	ReferenceError
중복 파라미터	허용	SyntaxError
8진수 리터럴 `0NNN`	허용	SyntaxError
`with` 문	허용	SyntaxError
`delete` 변수/함수	무시	SyntaxError
`delete` non-configurable	무시	TypeError
`this` (일반 함수 호출)	window/global	undefined
`arguments` 와 파라미터 동기화	동기화 됨	분리
`eval` 변수 누설	누설 됨	격리
미래 예약어 사용	허용	SyntaxError

언제 자동으로 strict 인가

flowchart LR
    A[코드 실행] --> B{strict mode?}
    B -->|아님| C[위험한 코드 허용]
    B -->|strict| D[위험한 코드 차단]
    C --> E[선언 없는 변수, 전역 생성]
    C --> F[with 문 허용]
    D --> G[ReferenceError 발생]
    D --> H[SyntaxError 발생]

ES module (.mjs, <script type="module">, modern build tools)
class 본문
export / import 사용 파일

따라서 현대 코드는 보통 자연스럽게 strict.

TypeScript 와의 관계

TypeScript 는 항상 strict mode 로 컴파일된다. TS 에서 'use strict' 를 명시적으로 쓸 필요 없다.

tsconfig.json 의 "strict": true 는 TypeScript 타입 엄격 모드로, JS 'use strict' 와는 별개 개념이지만 함께 동작한다.

레거시 코드 마이그레이션 전략

// 1단계: 파일 단위로 strict 추가 후 에러 수집
'use strict';
// ... 기존 코드 ...

// 2단계: ReferenceError, TypeError, SyntaxError 목록 확인
// - 미선언 변수 → var/let/const 추가
// - delete 오용 → 로직 수정
// - with 문 → 객체 구조 분해로 교체

// 3단계: 테스트 통과 확인 후 진행

[!IMPORTANT] 레거시 스크립트 파일 전체에 한 번에 'use strict' 를 추가하면 예상치 못한 에러가 발생할 수 있다. 파일 단위로 점진적으로 적용하고, 테스트를 충분히 작성한 후 진행.

모범 사례

항상 'use strict' (또는 ES module 사용)
함수 단위 strict 는 옛 스타일, 파일 단위 권장
라이브러리 코드는 반드시 strict
ESLint 'strict': 'error' 규칙으로 강제

호환성

모든 브라우저 + Node.js 가 지원. legacy IE5 같은 환경 외에는 문제 없음.

sloppy mode 의 함정 (왜 strict 가 필요한가)

// 1. global 오염
foo = 1;
function setup() {
    foo = 99;     // 의도와 다르게 global foo 변경
}

// 2. NaN 비교
NaN === NaN;     // false (이건 strict 무관)

// 3. with 의 스코프 폭주
with (obj) {
    a = 1;        // obj.a 인지 외부 a 인지 모호
}

strict 가 이런 함정의 상당수를 컴파일 / 런타임 에러로 잡아준다.

Node.js 에서의 strict mode

Node.js 의 .mjs 파일과 type: "module" 을 설정한 .js 파일은 자동 strict. CommonJS (.cjs 또는 기본 .js) 는 명시적으로 선언 필요.

// CommonJS: 명시 필요
'use strict';
const x = 1;

// ES module (.mjs 또는 package.json type: module): 자동 strict
export const x = 1;

Node.js 18+ 에서는 최상위 await 를 위해서도 ES module 이 필요하고, 이때 strict 도 함께 자동 적용된다.

[JavaScript] String: 메서드, 정규식, 템플릿 리터럴

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

JavaScript 문자열은 불변 (immutable) UTF-16 시퀀스. 메서드는 항상 새 문자열을 반환하며, 원본을 수정하지 않는다. 문자열에서 원하는 위치/패턴을 찾거나, 교체하거나, 추출하는 작업이 프론트엔드와 백엔드 모두에서 빈번하다.

언제 쓰나

상황	권장 도구
단순 포함 여부	`includes` / `startsWith` / `endsWith`
위치 숫자 반환	`indexOf` / `lastIndexOf`
복잡한 패턴 매칭	정규식 (RegExp)
교체	`replace` / `replaceAll`
분리	`split`
추출	`slice` / `at`

탐색 메서드 분류

flowchart TD
    A["문자열 탐색 목표"] --> B{"위치 숫자 필요?"}
    B -->|"Yes"| C["indexOf / lastIndexOf"]
    B -->|"No"| D{"불리언이면 충분?"}
    D -->|"Yes"| E["includes / startsWith / endsWith"]
    D -->|"No"| F{"복잡한 패턴?"}
    F -->|"단순"| G["includes + toLowerCase"]
    F -->|"복잡"| H["match / search / exec (RegExp)"]

기본 탐색 메서드

includes / startsWith / endsWith

ES2015+. 존재 여부만 알면 될 때 가장 의도가 명확하다.

const s = 'Hello, World!';

s.includes('World');          // true
s.includes('world');          // false (대소문자 구분)
s.startsWith('Hello');        // true
s.startsWith('World', 7);     // true (7번 인덱스부터 검사)
s.endsWith('!');              // true
s.endsWith('World', 12);      // true (처음 12자 안에서)

indexOf / lastIndexOf

위치(숫자)가 필요하거나, 같은 패턴이 여러 개 있을 때.

const s = 'abcabc';

s.indexOf('b');               // 1
s.lastIndexOf('b');           // 4
s.indexOf('b', 2);            // 4 (인덱스 2 이후 탐색)
s.indexOf('z');               // -1 (없으면 -1)

// 존재 여부 확인 (includes 가 더 가독성 높음)
s.indexOf('a') !== -1;        // true (구식)
s.includes('a');              // true (ES2015, 권장)

추출 메서드

const s = 'Hello, World!';

s.slice(7, 12);               // 'World'
s.slice(-6);                  // 'orld!'   (음수: 끝에서부터)
s.slice(-6, -1);              // 'orld'
s.substring(7, 12);           // 'World'   (음수 지원 안 함, 0으로 처리)
s.at(0);                      // 'H'
s.at(-1);                     // '!'       (ES2022, 음수 인덱스)

[!TIP] slice 는 음수 인덱스를 지원하고, substring 은 지원하지 않는다. 현대 코드에서는 slice 와 at 을 사용하자.

변환/조작 메서드

const s = '  Hello, World!  ';

s.trim();                     // 'Hello, World!'
s.trimStart();                // 'Hello, World!  '
s.trimEnd();                  // '  Hello, World!'
s.toLowerCase();              // '  hello, world!  '
s.toUpperCase();              // '  HELLO, WORLD!  '

'abc'.repeat(3);              // 'abcabcabc'
'5'.padStart(4, '0');         // '0005'
'5'.padEnd(4, '0');           // '5000'
'a,b,c'.split(',');           // ['a', 'b', 'c']
['a', 'b', 'c'].join('-');    // 'a-b-c'

replace / replaceAll

const s = 'Hello World World';

// 첫 번째만 교체
s.replace('World', 'JS');           // 'Hello JS World'

// 전체 교체
s.replaceAll('World', 'JS');        // 'Hello JS JS'

// 정규식 g 플래그로 전체 교체
s.replace(/World/g, 'JS');          // 'Hello JS JS'

// 교체 함수 (동적 치환)
'abc123'.replace(/\d+/, (match) => `[${match}]`);   // 'abc[123]'

// 캡처 그룹 참조 (역참조)
'2026-07-16'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');  // '16/07/2026'

// 이름 캡처 그룹 참조
'2026-07-16'.replace(
    /(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/,
    '$<d>/$<m>/$<y>'
);  // '16/07/2026'

[!IMPORTANT] replace 에 문자열 패턴을 넘기면 첫 번째 매칭만 교체한다. 전체 교체는 replaceAll 또는 정규식 /pattern/g.

정규식 (RegExp)

생성 방법

// 리터럴: 컴파일 타임, 패턴 고정
const re1 = /hello/i;

// 생성자: 런타임, 동적 패턴 구성 가능
const keyword = 'hello';
const re2 = new RegExp(keyword, 'i');

// 생성자에서 특수문자 이스케이프 주의
const dot = '.';
const escaped = new RegExp(dot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));

자주 쓰는 패턴

// 이메일 추출
const emailRe = /[\w.-]+@[\w.-]+\.\w{2,}/g;
'foo@bar.com, baz@qux.org'.match(emailRe);
// ['foo@bar.com', 'baz@qux.org']

// 숫자만 추출
'abc123def456'.match(/\d+/g);   // ['123', '456']

// 이름 캡처 그룹
const m = '2026-07-16'.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
m.groups;   // { year: '2026', month: '07', day: '16' }

// 선행 단언 (lookbehind)
'$100 €200'.match(/(?<=\$)\d+/g);   // ['100']

exec 반복 탐색

const re = /(\w+)=(\w+)/g;
const s = 'a=1 b=2 c=3';
let m;
while ((m = re.exec(s)) !== null) {
    console.log(`key=${m[1]}, val=${m[2]}`);
}
// key=a, val=1
// key=b, val=2
// key=c, val=3

matchAll (ES2020)

exec 반복 대신 더 깔끔한 방법.

const matches = [...'a=1 b=2'.matchAll(/(\w+)=(\w+)/g)];
matches.map(m => ({ key: m[1], val: m[2] }));
// [{ key: 'a', val: '1' }, { key: 'b', val: '2' }]

String 메서드 vs RegExp 메서드

메서드	소속	반환
`str.match(re)`	String	배열 또는 null
`str.matchAll(re)`	String	RegExpStringIterator
`str.search(re)`	String	첫 매칭 인덱스 (없으면 -1)
`str.replace(re, fn)`	String	새 문자열
`re.test(str)`	RegExp	boolean
`re.exec(str)`	RegExp	배열 또는 null

템플릿 리터럴

기본 보간

const name = 'World';
const n = 42;

`Hello, ${name}!`;                        // 'Hello, World!'
`result: ${n * 2}`;                       // 'result: 84'
`3 > 2 is ${3 > 2}`;                     // '3 > 2 is true'

// 여러 줄 (개행 그대로)
const multi = `line 1
line 2`;

// 중첩 표현식
const items = [1, 2, 3];
`total: ${items.reduce((a, b) => a + b, 0)}`;   // 'total: 6'

태그드 템플릿 리터럴

함수가 템플릿을 직접 가공하는 고급 문법. styled-components, gql, sql 태그 등 라이브러리에서 활발히 사용한다.

function highlight(strings, ...values) {
    return strings.raw.reduce((result, str, i) => {
        const val = values[i - 1];
        return result + (val !== undefined ? `<em>${val}</em>` : '') + str;
    });
}

const name = 'Alice';
const age = 30;
highlight`이름: ${name}, 나이: ${age}`;
// '이름: <em>Alice</em>, 나이: <em>30</em>'

strings.raw 를 쓰면 이스케이프 시퀀스(\n, \t)를 처리하지 않은 원본 문자열을 받는다.

실전 예시

URL 슬러그 생성

function toSlug(text) {
    return text
        .toLowerCase()
        .trim()
        .replace(/[\s_]+/g, '-')
        .replace(/[^\w-]/g, '')
        .replace(/--+/g, '-');
}

toSlug('Hello  World!!');    // 'hello-world'
toSlug('Café au Lait');      // 'caf-au-lait'

민감 정보 마스킹

function maskEmail(email) {
    return email.replace(
        /^(.)(.*)(@.*)$/,
        (_, first, middle, domain) => first + '*'.repeat(middle.length) + domain
    );
}

maskEmail('alice@example.com');    // 'a****@example.com'

파일 확장자 추출

function getExt(filename) {
    return filename.match(/\.([^.]+)$/)?.[1] ?? '';
}

getExt('photo.jpg');       // 'jpg'
getExt('archive.tar.gz'); // 'gz'
getExt('noext');          // ''

한국어 포함 여부 확인

function hasKorean(text) {
    return /[\uAC00-\uD7A3\u1100-\u11FF\u3130-\u318F]/.test(text);
}

hasKorean('Hello 안녕');   // true
hasKorean('Hello World');  // false

함정

대소문자 구분

includes / indexOf 는 대소문자를 구분한다. 대소문자 무관 탐색은 toLowerCase() 후 비교하거나 /pattern/i 플래그.

const s = 'Hello World';

s.includes('hello');             // false
s.toLowerCase().includes('hello'); // true
/hello/i.test(s);                // true

replaceAll 에 정규식 쓸 때 g 플래그 필수

// ❌ g 플래그 없으면 TypeError
'aaa'.replaceAll(/a/, 'b');

// ✅ g 플래그 필수
'aaa'.replaceAll(/a/g, 'b');    // 'bbb'

[!WARNING] replaceAll 에 정규식을 넘길 때 g 플래그가 없으면 TypeError. 문자열 패턴이면 문제없다.

이모지/유니코드와 length

const s = '🎉';
s.length;              // 2 (UTF-16 surrogate pair)
[...s].length;         // 1 (코드 포인트 기준)

// 이모지 포함 문자열 반전
s.split('').reverse().join('');   // ❌ 깨짐
[...s].reverse().join('');        // ✅ 스프레드 활용

RegExp 인스턴스의 lastIndex 공유

const re = /\d+/g;

'abc123'.test(re);    // true  (lastIndex = 6)
'def456'.test(re);    // false (lastIndex 가 6 에서 계속 탐색, 즉시 실패)
re.lastIndex = 0;     // 수동 초기화 필요
'def456'.test(re);    // true

g 또는 y 플래그가 있는 정규식 인스턴스를 재사용하면 lastIndex 가 누적된다.

[Javascript] TDZ (Temporal Dead Zone)

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

TDZ (Temporal Dead Zone, 일시적 사각지대) 는 let / const / class 선언이 호이스팅된 시점부터 선언문이 실행되기 직전까지 의 구간으로, 이 구간에서 해당 변수에 접근하면 ReferenceError 가 발생한다.

{
    // ↓ 블록 진입: TDZ 시작 (x 호이스팅됐지만 미초기화)
    console.log(x);     // ❌ ReferenceError: Cannot access 'x' before initialization
    let x = 1;          // ← TDZ 종료, 초기화
    console.log(x);     // ✓ 1
}

이름이 Temporal (시간적) 인 이유: 코드 위치가 아닌 실행 시점 기준이기 때문이다. 물리적으로 선언 아래에 있는 코드라도 실행 순서가 선언 전이면 TDZ 에 걸린다.

언제 발생하나

선언 종류	호이스팅	TDZ	접근 시
`var`	선언 + `undefined` 초기화	없음	`undefined`
`let`	선언만 (미초기화)	있음	`ReferenceError`
`const`	선언만 (미초기화)	있음	`ReferenceError`
`function` 선언	선언 + 정의 전체	없음	정상 호출
`class`	선언만 (미초기화)	있음	`ReferenceError`

var 와의 비교

flowchart TD
    A["블록 / 스코프 진입"] --> B["var 선언"]
    A --> C["let / const 선언"]
    B --> D["자동 undefined 초기화"]
    C --> E["TDZ 시작 (미초기화 상태)"]
    D --> F["선언 이전 접근: undefined 반환"]
    E --> G["선언 이전 접근: ReferenceError"]
    F --> H["할당문 실행: 실제 값"]
    G --> I["선언문 실행: TDZ 종료, 초기화"]
    I --> J["정상 접근 가능"]

코드로 비교:

console.log(a);      // undefined (var 는 TDZ 없음)
var a = 1;

console.log(b);      // ❌ ReferenceError
let b = 1;

엔진 내부에서 var a; 는 스코프 생성 시점에 undefined 로 초기화된다. 반면 let b 는 “선언 등록” 은 되지만 초기화는 선언문 실행 때까지 미뤄진다.

TDZ 의 시간적 특성

TDZ 는 코드 위치가 아닌 실행 순서 기준이다.

function foo() {
    return x;   // 이 시점에 x 가 TDZ 에 있는지가 결정적
}

// 아직 x 선언 전: foo() 가 x 의 TDZ 안에서 실행됨
foo();      // ❌ ReferenceError

let x = 1;

// 이제 x 초기화됨: foo() 실행 시점에 TDZ 아님
foo();      // ✓ 1

함수 foo 의 코드 위치가 let x 보다 위에 있어도, 호출 시점이 선언 이후라면 문제없다.

class 도 TDZ

class 선언도 let/const 와 동일한 TDZ 를 가진다.

new Foo();          // ❌ ReferenceError: Cannot access 'Foo' before initialization
class Foo {}

// 선언 이후에는 정상
const f = new Foo();   // ✓

class Foo {} 는 사실 let Foo = class Foo {} 와 거의 동일하게 동작한다.

함수 매개변수 default 의 TDZ

매개변수 기본값은 왼쪽부터 오른쪽으로 평가 된다. 뒤에 있는 매개변수는 앞 매개변수의 기본값 표현식 안에서 TDZ 에 있다.

function foo(a = b, b = 1) {
    return a + b;
}
foo();   // ❌ ReferenceError: b가 a의 default 평가 시점에 TDZ

// 순서를 바꾸면 OK
function bar(b = 1, a = b) {
    return a + b;
}
bar();   // ✓ 2

실전 예시

조건부 초기화 패턴

// ❌ var 의 함정: if(false) 안의 선언도 호이스팅됨
function withVar() {
    if (false) {
        var config = { debug: true };
    }
    console.log(config);   // undefined (ReferenceError 아님)
}

// ✅ let/const: 블록 스코프 + TDZ로 의도하지 않은 접근 차단
function withLet() {
    if (false) {
        let config = { debug: true };
    }
    console.log(config);   // ❌ ReferenceError (더 명확한 에러)
}

클로저와 TDZ

// var: 모든 클로저가 같은 변수 공유 (루프 함정)
const fns1 = [];
for (var i = 0; i < 3; i++) {
    fns1.push(() => i);
}
fns1.map(f => f());   // [3, 3, 3]

// let: 매 반복마다 새 바인딩, TDZ 안전
const fns2 = [];
for (let i = 0; i < 3; i++) {
    fns2.push(() => i);
}
fns2.map(f => f());   // [0, 1, 2]

import 문과 TDZ

// ES 모듈의 import 는 호이스팅되어 최상단에서 바인딩 등록
// 단, 순환 참조가 있을 때 상대 모듈의 export 가 TDZ 에 있을 수 있음

// a.mjs

export const a = b + 1;   // 순환 참조 시 b 가 TDZ

// b.mjs

export const b = a + 1;   // 순환 참조 시 a 가 TDZ

함정

1. typeof 가 TDZ 에서도 에러

typeof 는 일반적으로 선언 안 된 변수에 'undefined' 를 반환한다. 그러나 TDZ 안의 변수에는 예외적으로 ReferenceError 를 던진다.

console.log(typeof undeclared);    // 'undefined' (선언 자체가 없는 경우, 안전)
console.log(typeof x);             // ❌ ReferenceError (TDZ 안의 let)
let x = 1;

[!WARNING] TDZ 안에서는 typeof 도 ReferenceError 를 던진다. 변수 존재 여부 확인에 typeof 가 항상 안전하다는 가정이 TDZ 에서는 성립하지 않는다.

2. 같은 스코프에서 내부 let 이 외부 변수를 가림

let x = 1;

{
    console.log(x);    // ❌ ReferenceError
    // 내부의 let x 가 호이스팅되어 외부 x 를 가림
    // 그 결과 내부 x 의 TDZ 가 적용됨
    let x = 2;
    console.log(x);    // ✓ 2
}

내부 블록에서 let x 가 호이스팅되면 외부의 x = 1 이 아닌 내부의 TDZ x 가 바인딩된다.

3. 선언을 스코프 하단에 놓는 패턴

// ❌ 읽기 어렵고 TDZ 실수 가능성
function setup() {
    init(config);   // config 가 TDZ 에 있음

    const config = { debug: true };   // 실제 선언은 하단
}

// ✅ 사용 직전 또는 최상단에 선언
function setup() {
    const config = { debug: true };
    init(config);   // 안전
}

[!CAUTION] TDZ 에러는 런타임에만 발생하므로 정적 분석 도구 없이는 놓치기 쉽다. 선언을 사용 직전에 두는 습관이 가장 확실한 예방책이다.

4. 구조 분해와 TDZ

// ❌ 구조 분해 default 에서 같은 패턴 변수 참조
const { a = b, b = 1 } = {};   // ReferenceError: b is not defined
// (정확히는 객체 프로퍼티 기본값 평가 순서 문제)

// ✅ 독립적인 default 값 사용
const { a = 1, b = 1 } = {};

모범 사례

선언을 사용 직전에 배치 (TDZ 구간 최소화)
const 우선, let 필요 시, var 지양
ESLint no-use-before-define 규칙 활성화해 정적 감지
순환 의존 주의: ES 모듈 순환 참조 시 TDZ 에러 발생 가능

[Javascript] var / let / const

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

JavaScript 의 3 가지 변수 선언 키워드.

키워드	스코프	재할당	재선언	호이스팅
`var`	function	✓	✓	undefined 로 초기화
`let`	block	✓	✗	TDZ
`const`	block	✗	✗	TDZ

ES6 이후 let/const 가 표준. var 는 레거시 / 특수 케이스만.

사용 상황

상황	권장 키워드
값이 변하지 않는 변수	`const`
반복문 카운터, 누산 등 재할당 필요	`let`
레거시 코드 / 함수 스코프가 명시적으로 필요한 경우	`var` (드묾)

실무 규칙: 기본 const, 재할당 필요하면 let, var 는 사용 안 함.

스코프와 호이스팅 비교

flowchart TD
    A[코드 실행 시작] --> B[호이스팅 단계]
    B --> C["var: undefined 로 초기화"]
    B --> D["let, const: TDZ 진입"]
    C --> E["선언 전 접근 가능 (undefined 반환)"]
    D --> F["선언 전 접근 불가 (ReferenceError)"]
    E --> G[할당문 실행]
    F --> H[선언문 도달]
    G --> I[정상 값 접근]
    H --> J["TDZ 종료, 정상 접근"]

flowchart LR
    A[변수 선언] --> B{키워드?}
    B -->|var| C[함수 스코프 등록]
    B -->|let| D[블록 스코프 등록]
    B -->|const| E[블록 스코프 등록]
    C --> F["함수 어디서든 접근"]
    D --> G["해당 블록 {} 내에서만 접근"]
    E --> G

var 의 문제

function foo() {
    if (true) {
        var x = 1;
    }
    console.log(x);   // 1 (블록 밖에서도 접근)
}

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 (var 가 함수 스코프라 클로저가 같은 i 공유)

전역 오염

브라우저 환경에서 var 는 전역 스코프에서 선언되면 window 객체에 추가된다.

var x = 1;
window.x;       // 1 (전역 객체에 attach)

let y = 1;
window.y;       // undefined

let / const 의 해결

function foo() {
    if (true) {
        let x = 1;
    }
    console.log(x);   // ReferenceError (블록 스코프)
}

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// 0, 1, 2 (let 이 매 반복마다 새 binding)

let 은 [[JS 호이스팅|호이스팅]] 되지만 초기화 전에는 [[JS TDZ|TDZ]] 에 있어 접근 불가.

const 의 의미

const 는 재할당 금지, 객체 내부 변경은 허용.

const arr = [1, 2, 3];
arr.push(4);              // ✓ 객체 내부는 변경 가능
arr = [];                  // ❌ TypeError (재할당 금지)

const obj = { a: 1 };
obj.a = 2;                 // ✓
obj = {};                  // ❌

객체를 진짜 불변으로 하려면 Object.freeze() 또는 immutable library 사용.

const config = Object.freeze({ host: "localhost", port: 3000 });
config.host = "remote";   // 무시됨 (strict mode 에서는 TypeError)

호이스팅 차이

console.log(x);       // undefined (var 는 선언이 끌어올려짐)
var x = 1;

console.log(y);       // ReferenceError (TDZ)
let y = 1;

자세히는 [[JS 호이스팅]], [[JS TDZ]] 참고.

TDZ 상세

let / const 는 선언문에 도달하기 전까지 Temporal Dead Zone 에 있다. 블록 진입 시점부터 선언문 실행 시점 사이.

{
    // TDZ 시작 (블록 진입)
    console.log(x);   // ReferenceError: Cannot access 'x' before initialization
    let x = 10;       // TDZ 종료
    console.log(x);   // 10
}

typeof 도 TDZ 에서는 예외를 던진다.

typeof x;     // ReferenceError (TDZ)
let x;

typeof y;     // "undefined" (선언 없는 변수는 undefined)

자세히는 [[JS TDZ]] 참고.

모범 사례

기본은 const. 재할당 필요하면 let.
var 는 사용 안 함. 레거시 코드 마이그레이션 외.
반복문은 let. 클로저 안전.
사용 직전 선언. 함수 상위에 한 번에 선언하는 구식 스타일 지양.

자주 만나는 함정

1. for-loop 클로저

const funcs = [];
for (var i = 0; i < 3; i++) {
    funcs.push(() => i);
}
funcs.map(f => f());     // [3, 3, 3]

// let 사용
const funcs2 = [];
for (let i = 0; i < 3; i++) {
    funcs2.push(() => i);
}
funcs2.map(f => f());    // [0, 1, 2]

var 는 루프 전체에 단 하나의 binding. let 은 매 iteration 마다 새 binding 생성.

2. const 객체의 immutability 오해

const arr = [1];
arr.push(2);     // 동작함 → const 가 immutable 아닌가?
// const 는 binding 만 immutable, 내용은 mutable

3. var 의 전역 오염

// 브라우저 콘솔
var x = 1;
window.x;       // 1 (전역 객체에 attach)

let y = 1;
window.y;       // undefined

4. switch 문의 블록 스코프

switch (action) {
    case 'A':
        let result = 1;   // SyntaxError: Identifier 'result' has already been declared
        break;
    case 'B':
        let result = 2;   // 동일 블록에서 재선언
        break;
}

// 해결: 각 case 를 {} 로 감싸기
switch (action) {
    case 'A': {
        let result = 1;
        break;
    }
    case 'B': {
        let result = 2;
        break;
    }
}

TypeScript 관점

TypeScript 에서는 var 사용을 ESLint (no-var 규칙) 또는 tslint 로 막는다. const / let 만 허용하는 것이 관례.

// tsconfig.json 기반 타입 추론도 const 에서 더 정밀
const x = 1;          // 타입: 1 (literal type)
let y = 1;             // 타입: number
var z = 1;             // 타입: number

const 선언된 primitive 는 literal type 으로 좁혀지므로 타입 안전성도 높아진다.

[Javascript] 호이스팅 (Hoisting)

koa (김신건) — Thu, 16 Jul 2026 00:00:00 GMT

정의

호이스팅 (Hoisting) 은 JavaScript 엔진이 코드를 실행하기 전 바인딩 생성 단계 에서 스코프 내의 선언을 파악하고 등록하는 메커니즘이다. 마치 선언이 스코프 최상단으로 끌어올려진 것처럼 동작해서 “호이스팅” 이라고 부른다.

단, 선언 종류마다 동작이 다르다:

var: 선언 + undefined 초기화 (TDZ 없음)
function 선언문: 선언 + 정의 전체 (호출 가능)
let / const / class: 선언만 (TDZ 발생)

언제 만나나

상황	발생 이유
선언 전에 `var` 에 접근하면 `undefined`	var 호이스팅
선언 전에 `function` 호출 가능	함수 선언문 전체 호이스팅
선언 전에 `let`/`const` 접근 시 `ReferenceError`	TDZ
`var bar = function(){}` 를 선언 전 호출 시 `TypeError`	var 는 호이스팅되지만 값(함수)은 아님

선언 종류별 호이스팅 비교

flowchart TD
    A["코드 파싱 및 바인딩 생성"] --> B["var"]
    A --> C["function 선언문"]
    A --> D["let / const"]
    A --> E["class"]
    B --> F["undefined 로 초기화"]
    C --> G["함수 전체 (선언+정의) 등록"]
    D --> H["미초기화 상태, TDZ 시작"]
    E --> I["미초기화 상태, TDZ 시작"]
    F --> J["선언 이전 접근: undefined"]
    G --> K["선언 이전 호출: 정상 동작"]
    H --> L["선언 이전 접근: ReferenceError"]
    I --> L

var 의 호이스팅

console.log(x);     // undefined (에러 없음)
var x = 5;
console.log(x);     // 5

엔진이 실제로 처리하는 방식:

var x;              // 선언만 끌어올려짐, undefined 로 초기화
console.log(x);     // undefined
x = 5;              // 할당은 원래 위치에
console.log(x);     // 5

var 는 함수 스코프 다. 블록 {} 을 무시하고 가장 가까운 함수(또는 전역)가 스코프가 된다.

function foo() {
    if (true) {
        var x = 1;   // 블록 안이지만 foo 스코프로 호이스팅
    }
    console.log(x);  // 1 (블록 밖에서도 접근 가능)
}

function 선언문의 호이스팅

함수 선언문은 선언과 정의가 함께 호이스팅된다. 선언 전에도 정상 호출 가능.

foo();              // ✓ 'hello' 출력
function foo() {
    console.log('hello');
}

// 엔진이 실제로 처리하는 방식
function foo() { console.log('hello'); }   // 최상단으로 이동
foo();

여러 이름이 충돌하면 마지막 선언이 승리 한다.

function greet() { return 'hi'; }
function greet() { return 'hello'; }

greet();   // 'hello' (마지막 정의)

function expression 은 var 호이스팅만

함수 표현식은 변수 선언만 호이스팅된다. 함수 자체는 할당문 실행 전까지 없다.

bar();              // ❌ TypeError: bar is not a function
var bar = function() {
    console.log('bar');
};

엔진이 처리하는 방식:

var bar;            // undefined 로 호이스팅
bar();              // undefined() → TypeError
bar = function() { console.log('bar'); };

[!WARNING] var bar = function(){} 에서 bar 를 선언 전에 호출하면 ReferenceError 가 아닌 TypeError 가 난다. bar 는 undefined 로 초기화됐고, undefined 를 함수처럼 호출했기 때문이다.

let / const 의 호이스팅 (TDZ)

let / const 도 호이스팅은 된다. 단, 초기화 없이 “선언 등록” 만 되어 [[js-tdz|TDZ (Temporal Dead Zone)]] 에 들어간다.

console.log(y);     // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 5;

“호이스팅 안 됐다” 가 아니라 “TDZ 진입” 이 정확한 설명이다. 아래 예시가 이를 증명한다.

let x = 'outer';
{
    console.log(x);   // ❌ ReferenceError (TDZ)
    // 만약 호이스팅이 안 됐다면 outer 를 출력해야 하는데,
    // 내부 let x 가 호이스팅되어 outer x 를 가리고 TDZ 에 있음
    let x = 'inner';
}

class 의 호이스팅

class 도 let / const 와 동일하게 TDZ 를 가진다.

new Foo();          // ❌ ReferenceError: Cannot access 'Foo' before initialization
class Foo {}

Arrow function 은 변수에 할당되므로 해당 변수의 선언 방식(var/let/const)을 따른다.

호이스팅 우선순위

같은 이름이 var 와 function 선언으로 충돌하면 함수 선언이 우선 한다.

console.log(typeof x);   // 'function' (함수가 우선)
var x = 1;
function x() {}
console.log(typeof x);   // 'number' (할당 후)

엔진 처리 순서:

function x() {} 가 먼저 호이스팅 (선언 + 정의)
var x 는 이미 x 가 있으니 초기화 무시
실행: x = 1 할당으로 함수가 숫자로 덮임

실전 예시

의도하지 않은 var 접근

function processItems(items) {
    for (var i = 0; i < items.length; i++) {
        setTimeout(() => {
            console.log(items[i]);   // ❌ 항상 items[items.length] (undefined)
        }, i * 100);
    }
}

// var i 는 함수 스코프, 루프 종료 후 i = items.length
// 클로저가 모두 같은 i 를 참조

// ✅ let 사용: 매 반복 새 바인딩
function processItems(items) {
    for (let i = 0; i < items.length; i++) {
        setTimeout(() => {
            console.log(items[i]);   // 의도한 순서대로 출력
        }, i * 100);
    }
}

if 블록 안 var 함정

function setup(debug) {
    if (debug) {
        var logLevel = 'verbose';
    }
    // var 이므로 블록 무관하게 함수 스코프
    console.log(logLevel);   // debug=false 면 undefined, ReferenceError 아님
}

// ✅ let 으로 의도 명확화
function setup(debug) {
    if (debug) {
        const logLevel = 'verbose';
        console.log(logLevel);
    }
    // 블록 밖에서는 logLevel 없음 (ReferenceError 로 명확히 실패)
}

함수 선언 vs 표현식 선택

// 함수 선언문: 호이스팅, 순서에 덜 민감
function helper() { return 'ok'; }

// 함수 표현식 (const): 선언 전 사용 불가, 더 명확한 의도
const helper = () => 'ok';

// 권장: 팀 컨벤션에 따르되, const + arrow function 이 현대 코드베이스 표준

조건부 함수 정의 (var 함정)

// ❌ 브라우저마다 동작이 다른 위험한 패턴
if (condition) {
    function f() { return 'A'; }
} else {
    function f() { return 'B'; }
}

// ✅ 변수에 할당
let f;
if (condition) {
    f = () => 'A';
} else {
    f = () => 'B';
}

함정

1. var 의 전역 의도하지 않은 undefined

function foo() {
    if (false) {
        var x = 1;    // 실행 안 되지만 선언은 호이스팅됨
    }
    console.log(x);   // undefined (ReferenceError 가 아님)
}

2. 함수 이름 충돌: 마지막 정의가 승리

function x() { return 'first'; }
function x() { return 'second'; }
x();   // 'second'

3. let 의 호이스팅 오해

console.log(x);   // ReferenceError (호이스팅 됐지만 TDZ)
let x = 1;
// "호이스팅 안 됐다" 가 아니라 "TDZ" 가 정확한 설명

4. function expression TypeError vs function 선언 ReferenceError

// var 에 함수 표현식
bar();    // TypeError: bar is not a function (bar는 undefined)
var bar = function() {};

// let 에 함수 표현식
baz();    // ReferenceError: Cannot access 'baz' before initialization
let baz = function() {};

[!WARNING] var 에 함수 표현식을 담으면 선언 전 호출 시 undefined() 를 시도해 TypeError, let/const 는 TDZ 로 ReferenceError. 에러 종류가 달라서 혼란스러울 수 있다.

모범 사례

var 지양, let/const 사용으로 호이스팅 함정 자동 회피
선언을 사용 직전에 배치, 호이스팅에 의존한 코드 금지
함수는 사용하는 곳 위에 선언, 읽기 순서와 실행 순서를 일치시킴
ESLint no-use-before-define 규칙 활성화로 정적 감지

[JavaScript] AbortController

koa (김신건) — Wed, 15 Jul 2026 00:00:00 GMT

정의

AbortController 는 비동기 작업 (fetch, event listener, 커스텀 Promise 등) 을 취소 하기 위한 표준 Web API 인터페이스.

인터페이스	역할
`AbortController`	취소 신호를 발송하는 쪽 (컨트롤러)
`AbortSignal`	취소 신호를 수신하는 쪽 (읽기 전용 신호 객체)

controller.signal 을 비동기 API 에 전달하고, controller.abort() 를 호출하면 해당 작업이 취소된다.

사용 상황

HTTP 요청 취소: 사용자가 페이지를 떠나거나, 검색어를 바꾸거나, 중복 요청 방지
이벤트 리스너 일괄 해제: removeEventListener 없이 한 번에 정리
React 컴포넌트 언마운트: useEffect cleanup 에서 진행 중인 fetch 취소
타임아웃: 일정 시간 초과 시 자동 취소
사용자 취소 + 타임아웃 조합: 둘 중 먼저 발동하는 쪽으로 취소

시각화

sequenceDiagram
    participant 앱
    participant AbortController
    participant fetch

    앱->>AbortController: "new AbortController()"
    앱->>fetch: "fetch(url, { signal: controller.signal })"
    fetch-->>앱: "Promise 반환 (pending)"
    Note over 앱: 사용자가 취소 클릭
    앱->>AbortController: "controller.abort()"
    AbortController->>fetch: "AbortSignal 발신"
    fetch-->>앱: "reject (AbortError)"

AbortSignal 의 상태 전이:

flowchart LR
    A["not aborted\n(aborted: false)"] -->|"controller.abort()"| B["aborted\n(aborted: true)"]
    B --> C["abort 이벤트 발생"]
    C --> D["signal 구독자에게 전파"]

    style A fill:#2ecc71,color:#fff
    style B fill:#e74c3c,color:#fff

기본 사용법

const controller = new AbortController();

fetch('/api/slow', { signal: controller.signal })
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('요청이 취소됨');
    } else {
      throw err;
    }
  });

// 5초 후 취소
setTimeout(() => controller.abort(), 5000);

async/await 방식

async function fetchData(url, timeoutMs = 5000) {
  const controller = new AbortController();
  const timerId = setTimeout(() => controller.abort(), timeoutMs);

  try {
    const res = await fetch(url, { signal: controller.signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('타임아웃으로 취소됨');
      return null;
    }
    throw err;
  } finally {
    clearTimeout(timerId);  // 성공 시 타이머 정리
  }
}

이벤트 리스너 취소

같은 signal 을 여러 리스너에 공유해 한 번에 정리:

const controller = new AbortController();
const { signal } = controller;

// 여러 이벤트를 한 signal 로 묶음
window.addEventListener('scroll',  onScroll,  { signal });
window.addEventListener('resize',  onResize,  { signal });
window.addEventListener('keydown', onKeyDown, { signal });
document.addEventListener('click', onClick,   { signal });

// 정리: 위 4개 리스너가 모두 한 번에 해제됨
controller.abort();

removeEventListener 를 4번 호출하는 것보다 훨씬 간결하다.

AbortSignal.timeout (ES2022+)

타이머 + AbortController 를 한 줄로:

// 5000ms 후 자동 취소
fetch('/api/data', { signal: AbortSignal.timeout(5000) });

내부적으로 setTimeout + controller.abort() 를 대신 처리한다. Node.js 18+ 에서도 지원.

AbortSignal.any (ES2024+)

여러 signal 중 하나라도 abort 되면 취소:

const userController = new AbortController();      // 사용자 취소
const timeoutSignal  = AbortSignal.timeout(5000);  // 5초 타임아웃

// 둘 중 먼저 발동하는 쪽이 이김
const signal = AbortSignal.any([
  userController.signal,
  timeoutSignal,
]);

fetch('/api/data', { signal });

실전 예시

React useEffect cleanup

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => setUser(data))
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error('Fetch 실패:', err);
        }
        // AbortError 는 정상 취소이므로 무시
      });

    // userId 가 바뀌거나 컴포넌트가 언마운트되면 이전 fetch 취소
    return () => controller.abort();
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

검색 디바운스 + 취소

let searchController = null;

async function search(query) {
  // 이전 요청 취소
  if (searchController) {
    searchController.abort();
  }
  searchController = new AbortController();

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
      signal: searchController.signal,
    });
    const results = await res.json();
    renderResults(results);
  } catch (err) {
    if (err.name !== 'AbortError') {
      showError(err);
    }
    // AbortError 는 무시 (이전 요청이 취소된 것)
  }
}

// 입력마다 호출 (디바운스와 함께 사용)
searchInput.addEventListener('input', (e) => search(e.target.value));

커스텀 Promise 에 abort 지원 추가

function delay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, ms);

    // signal 이 이미 abort 된 경우 즉시 거부
    if (signal?.aborted) {
      clearTimeout(timer);
      return reject(new DOMException('delay aborted', 'AbortError'));
    }

    signal?.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new DOMException('delay aborted', 'AbortError'));
    }, { once: true });
  });
}

const controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

await delay(5000, controller.signal);  // 1초 후 AbortError

사용자 취소 + 타임아웃 조합

async function fetchWithBothCancels(url, timeoutMs) {
  const userController = new AbortController();
  const signal = AbortSignal.any([
    userController.signal,
    AbortSignal.timeout(timeoutMs),
  ]);

  // UI 버튼으로 사용자 취소 가능
  const cancelBtn = document.getElementById('cancel');
  cancelBtn.onclick = () => userController.abort();

  try {
    const res = await fetch(url, { signal });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      if (signal.reason instanceof DOMException &&
          signal.reason.name === 'TimeoutError') {
        throw new Error(`${timeoutMs}ms 타임아웃`);
      }
      throw new Error('사용자 취소');
    }
    throw err;
  }
}

abort 이유 (reason) 전달

const controller = new AbortController();

// 이유를 담아 abort
controller.abort(new Error('사용자가 페이지를 이탈함'));

// signal.reason 으로 이유 확인
fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('취소 이유:', controller.signal.reason);
      // Error: 사용자가 페이지를 이탈함
    }
  });

브라우저 / 런타임 지원

기능	Chrome	Firefox	Safari	Node.js
`AbortController`	66+	57+	11.1+	15+
`AbortSignal.timeout`	103+	100+	15.4+	18+
`AbortSignal.any`	116+	124+	17.4+	20+
`signal.reason`	98+	97+	15.4+	17.3+

함정

[!WARNING] 한 번 abort 된 controller 는 재사용 불가. 새 요청마다 새 AbortController 를 생성해야 한다.

// ❌ 잘못된 패턴: 재사용 시도
const controller = new AbortController();
controller.abort();

fetch('/api/data', { signal: controller.signal });
// 즉시 AbortError 로 reject (이미 aborted 상태)

// ✅ 올바른 패턴: 매번 새로 생성
async function request(url) {
  const controller = new AbortController();
  return fetch(url, { signal: controller.signal });
}

[!WARNING] AbortError 를 무조건 무시하지 말 것: err.name === 'AbortError' 일 때도 의도하지 않은 취소 (버그) 일 수 있다. 로깅은 남기는 편이 디버깅에 유리하다.

.catch(err => {
  if (err.name === 'AbortError') {
    // 개발 환경에서는 로깅
    if (process.env.NODE_ENV === 'development') {
      console.debug('요청 취소됨:', err);
    }
    return null;
  }
  throw err;
});

[!CAUTION] fetch 외 API 에서는 signal 지원 여부 확인 필요: fetch 는 기본 지원하지만, 커스텀 라이브러리나 오래된 API 는 signal 을 무시할 수 있다. 이 경우 signal.addEventListener('abort', ...) 로 직접 처리해야 한다.

[Javascript] 콜백

koa (김신건) — Wed, 15 Jul 2026 00:00:00 GMT

정의

콜백 (callback): 다른 함수의 인자로 넘겨져, 받은 쪽(caller)이 적절한 시점에 호출하는 함수.

[[일급 함수]] 특성이 있어야 가능한 패턴이다. JavaScript 에서는 함수를 값으로 넘길 수 있으므로 콜백이 자연스럽다.

function greet(name, callback) {
  const message = `안녕, ${name}!`;
  callback(message);  // 받은 함수를 적절한 시점에 호출
}

greet('철수', (msg) => console.log(msg));
// 안녕, 철수!

사용 상황

이벤트 처리: addEventListener('click', fn)
타이머: setTimeout(fn, 1000), setInterval(fn, 500)
비동기 I/O: fs.readFile(path, fn) (Node.js)
배열 변환: map(fn), filter(fn), sort(fn) (동기 콜백)
제어 흐름 역전 (Inversion of Control): 라이브러리가 호출 시점 결정

시각화

동기 콜백과 비동기 콜백의 실행 시점 차이:

sequenceDiagram
    participant 호출자
    participant 고차함수
    participant 콜백

    호출자->>고차함수: "fn(callback)"
    rect rgb(200, 230, 255)
        Note over 고차함수,콜백: 동기 콜백 - 즉시 호출
        고차함수->>콜백: "callback() 호출"
        콜백-->>고차함수: 반환
    end
    고차함수-->>호출자: 반환

    Note over 호출자,콜백: 비동기 콜백 - 나중에 호출
    호출자->>고차함수: "setTimeout(callback, 1000)"
    고차함수-->>호출자: "즉시 반환 (등록만)"
    Note over 호출자: 호출자 계속 실행
    고차함수->>콜백: "1000ms 후 callback() 호출"

기본 사용법

동기 콜백

배열 메서드의 콜백은 동기적으로 즉시 실행된다.

const numbers = [1, 2, 3];

// map 의 콜백: 배열 순회 중 즉시 호출
const doubled = numbers.map(x => {
  console.log(`처리 중: ${x}`);
  return x * 2;
});
// 처리 중: 1
// 처리 중: 2
// 처리 중: 3
console.log('map 완료');
// map 완료
// doubled = [2, 4, 6]

비동기 콜백

타이머나 I/O 콜백은 나중에 호출된다.

console.log('시작');

setTimeout(() => {
  console.log('타이머 콜백');  // 나중에 실행
}, 1000);

console.log('끝');
// 시작
// 끝
// (1초 후) 타이머 콜백

setTimeout 은 콜백을 등록만 하고 즉시 반환한다. 콜백은 [[js-event-loop|이벤트 루프]]가 처리한다.

에러 우선 콜백 (Error-First Callback)

Node.js 가 정착시킨 관행: 첫 인자는 에러 (없으면 null), 두 번째 인자는 결과.

const fs = require('fs');

fs.readFile('config.json', 'utf8', (err, data) => {
  if (err) {
    console.error('읽기 실패:', err.message);
    return;  // 반드시 return 으로 이후 코드 실행 방지
  }
  const config = JSON.parse(data);
  console.log(config);
});

에러 체크를 빠뜨리면 data 가 undefined 인 채로 진행되어 조용히 실패한다.

this 바인딩 문제

콜백에서 this 는 호출하는 쪽의 컨텍스트가 되어 예상과 다르게 동작할 수 있다.

문제

class Timer {
  constructor() {
    this.count = 0;
  }

  start() {
    // ❌ function 콜백: this 가 Timer 인스턴스가 아님
    setInterval(function() {
      this.count++;        // this 는 globalThis 또는 undefined (strict)
      console.log(this.count);  // NaN 또는 TypeError
    }, 1000);
  }
}

해결 1: 화살표 함수

class Timer {
  constructor() {
    this.count = 0;
  }

  start() {
    // ✅ 화살표 함수: this 를 외부(Timer 인스턴스)에서 lexical 로 캡처
    setInterval(() => {
      this.count++;
      console.log(this.count);  // 1, 2, 3, ...
    }, 1000);
  }
}

const timer = new Timer();
timer.start();

해결 2: bind

class Timer {
  constructor() {
    this.count = 0;
    this.tick = this.tick.bind(this);  // 생성자에서 미리 바인딩
  }

  tick() {
    this.count++;
    console.log(this.count);
  }

  start() {
    setInterval(this.tick, 1000);
  }
}

해결 3: 클로저로 this 저장 (구식)

class Timer {
  constructor() {
    this.count = 0;
  }

  start() {
    const self = this;  // this 를 변수에 저장
    setInterval(function() {
      self.count++;
      console.log(self.count);
    }, 1000);
  }
}

화살표 함수가 도입된 이후로는 self = this 패턴은 거의 쓰지 않는다.

실전 예시

커스텀 이벤트 시스템

class EventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    (this.listeners[event] ??= []).push(callback);
    return this;  // 메서드 체이닝 지원
  }

  emit(event, ...args) {
    (this.listeners[event] ?? []).forEach(cb => cb(...args));
  }

  off(event, callback) {
    this.listeners[event] = (this.listeners[event] ?? [])
      .filter(cb => cb !== callback);
  }
}

const emitter = new EventEmitter();

const onData = (data) => console.log('받음:', data);
emitter.on('data', onData);
emitter.on('data', (data) => console.log('로깅:', data));

emitter.emit('data', { id: 1 });
// 받음: { id: 1 }
// 로깅: { id: 1 }

emitter.off('data', onData);
emitter.emit('data', { id: 2 });
// 로깅: { id: 2 }

병렬 콜백 수집 (Promise 이전 패턴)

여러 비동기 콜백 결과를 모을 때의 고전 패턴:

function parallel(tasks, done) {
  const results = [];
  let remaining = tasks.length;

  if (remaining === 0) return done(null, []);

  tasks.forEach((task, i) => {
    task((err, result) => {
      if (err) return done(err);
      results[i] = result;
      if (--remaining === 0) done(null, results);
    });
  });
}

// 사용
parallel(
  [
    cb => setTimeout(() => cb(null, 'A'), 100),
    cb => setTimeout(() => cb(null, 'B'), 200),
    cb => setTimeout(() => cb(null, 'C'), 50),
  ],
  (err, results) => {
    if (err) return console.error(err);
    console.log(results);  // ['A', 'B', 'C'] (순서 보장)
  }
);

오늘날에는 Promise.all 이 이 역할을 대신한다.

콜백을 Promise 로 변환 (promisify)

function promisify(fn) {
  return (...args) => new Promise((resolve, reject) => {
    fn(...args, (err, result) => {
      if (err) reject(err);
      else resolve(result);
    });
  });
}

// Node.js 의 콜백 스타일 API 를 Promise 로
const readFile = promisify(require('fs').readFile);

const data = await readFile('config.json', 'utf8');
console.log(data);

Node.js 는 util.promisify 와 fs/promises 모듈로 표준 제공한다.

동기 vs 비동기 콜백 비교

구분	동기 콜백	비동기 콜백
호출 시점	즉시 (함수 내부에서)	나중에 (이벤트 루프)
예시	`map`, `filter`, `sort`	`setTimeout`, `fetch`, `fs.readFile`
try/catch	가능	불가 (콜 스택 사라짐)
반환값 활용	가능	불가 (콜백으로만 전달)

함정

[!WARNING] Inversion of Control: 콜백을 외부 라이브러리에 넘기면 호출 시점, 횟수, 에러 처리 방식이 모두 상대방 책임이 된다. 콜백이 여러 번 호출될 수도, 아예 호출 안 될 수도 있다.

[!WARNING] 에러 전파 불가: 비동기 콜백이 호출되는 시점에는 원래 콜 스택이 이미 사라졌으므로 try/catch 로 잡을 수 없다.

// ❌ 작동 안 함
try {
  setTimeout(() => {
    throw new Error('콜백 내부 에러');
  }, 100);
} catch (err) {
  console.error(err);  // 잡히지 않음
}

// ✅ 콜백 내부에서 직접 처리
setTimeout(() => {
  try {
    riskyOperation();
  } catch (err) {
    handleError(err);
  }
}, 100);

[!WARNING] 콜백 지옥: 순차 의존 비동기 작업을 콜백으로 연결하면 들여쓰기가 오른쪽 끝까지 깊어진다. ([[콜백 지옥]] 참고)

// 콜백 지옥의 시작
loadUser(42, (err, user) => {
  loadPosts(user.id, (err, posts) => {
    loadComments(posts[0].id, (err, comments) => {
      // 점점 깊어짐...
    });
  });
});

이 문제들을 풀기 위해 [[Promise]] 가 도입되었다.

[Javascript] 콜백 지옥

koa (김신건) — Wed, 15 Jul 2026 00:00:00 GMT

정의

콜백 지옥 (callback hell) 또는 둠 피라미드 (pyramid of doom): 순차 의존이 있는 비동기 작업을 [[콜백]]으로 연결할 때 들여쓰기가 오른쪽으로 점점 깊어지는 현상.

겉으로는 가독성 문제지만, 실제로 더 심각한 것은 에러 처리다.

매 단계마다 if (err) return 을 빠뜨리면 오류가 그냥 무시됨
try/catch 가 비동기 콜백 내부의 오류를 잡지 못함
에러가 어느 단계에서 발생했는지 추적이 어려움
중간 값을 다음 단계에서 참조하기 위해 외부 변수가 필요

사용 상황

콜백 지옥이 발생하는 전형적인 시나리오:

서버에서 사용자 정보를 가져온 후
그 사용자의 게시물 목록을 가져오고
첫 번째 게시물의 댓글을 가져오고
첫 번째 댓글 작성자 프로필을 가져오는 순차 비동기 체인

각 단계가 이전 단계의 결과에 의존하므로 병렬화가 불가능하다.

시각화

순차 의존 비동기 체인의 구조:

flowchart TD
    A["loadUser(42, cb)"] --> B["loadPosts(user.id, cb)"]
    B --> C["loadComments(posts0.id, cb)"]
    C --> D["loadProfile(comments0.authorId, cb)"]
    D --> E["renderPage(profile)"]

    style A fill:#e74c3c,color:#fff
    style B fill:#e67e22,color:#fff
    style C fill:#f1c40f,color:#000
    style D fill:#2ecc71,color:#fff
    style E fill:#3498db,color:#fff

들여쓰기 피라미드 구조 (코드 모양):

flowchart LR
    L1["loadUser"] --> L2["  loadPosts"]
    L2 --> L3["    loadComments"]
    L3 --> L4["      loadProfile"]
    L4 --> L5["        renderPage"]

    style L1 fill:#e74c3c,color:#fff
    style L2 fill:#e67e22,color:#fff
    style L3 fill:#f1c40f,color:#000
    style L4 fill:#2ecc71,color:#fff
    style L5 fill:#3498db,color:#fff

기본 예시: 콜백 지옥

// 콜백 지옥의 전형: 각 단계가 안쪽으로 중첩
loadUser(42, (err, user) => {
  if (err) return console.error(err);

  loadPosts(user.id, (err, posts) => {
    if (err) return console.error(err);

    loadComments(posts[0].id, (err, comments) => {
      if (err) return console.error(err);

      loadProfile(comments[0].authorId, (err, profile) => {
        if (err) return console.error(err);

        // 실제 로직은 여기...
        console.log(profile.name);

        // 한 단계 더 들어가면?
        loadAvatar(profile.id, (err, avatar) => {
          if (err) return console.error(err);
          renderPage(user, posts, comments, profile, avatar);
        });
      });
    });
  });
});

에러 처리 (if (err) return) 를 빠뜨리면 아무 일도 없었던 듯 진행된다.

단계별 리팩토링

1단계: 콜백을 이름 있는 함수로 분리

구조는 같지만 가독성을 조금 높이는 임시 방편.

function handleAvatar(err, avatar) {
  if (err) return console.error(err);
  renderPage(user, posts, comments, profile, avatar);
}

function handleProfile(err, profile) {
  if (err) return console.error(err);
  loadAvatar(profile.id, handleAvatar);
}

function handleComments(err, comments) {
  if (err) return console.error(err);
  loadProfile(comments[0].authorId, handleProfile);
}

function handlePosts(err, posts) {
  if (err) return console.error(err);
  loadComments(posts[0].id, handleComments);
}

loadUser(42, (err, user) => {
  if (err) return console.error(err);
  loadPosts(user.id, handlePosts);
});

들여쓰기는 줄었지만 흐름을 역으로 읽어야 하는 문제가 남는다.

2단계: Promise 체이닝

// 콜백 API 를 Promise 로 wrapping
const loadUserP     = (id) => new Promise((res, rej) =>
  loadUser(id, (e, v) => e ? rej(e) : res(v)));
const loadPostsP    = (id) => new Promise((res, rej) =>
  loadPosts(id, (e, v) => e ? rej(e) : res(v)));
const loadCommentsP = (id) => new Promise((res, rej) =>
  loadComments(id, (e, v) => e ? rej(e) : res(v)));
const loadProfileP  = (id) => new Promise((res, rej) =>
  loadProfile(id, (e, v) => e ? rej(e) : res(v)));

// Promise 체이닝: 평탄한 흐름
let savedUser, savedPosts;

loadUserP(42)
  .then(user => {
    savedUser = user;
    return loadPostsP(user.id);
  })
  .then(posts => {
    savedPosts = posts;
    return loadCommentsP(posts[0].id);
  })
  .then(comments => loadProfileP(comments[0].authorId))
  .then(profile => {
    console.log(profile.name);
  })
  .catch(err => console.error(err));  // 에러 처리 한 곳으로

에러 처리가 .catch 한 곳으로 모인다. 하지만 중간 값을 다음 단계에서 참조하려면 외부 변수가 필요하다.

3단계: async/await (최종)

async function loadUserProfile(userId) {
  try {
    const user     = await loadUserP(userId);
    const posts    = await loadPostsP(user.id);
    const comments = await loadCommentsP(posts[0].id);
    const profile  = await loadProfileP(comments[0].authorId);

    console.log(profile.name);
    return { user, posts, comments, profile };
  } catch (err) {
    console.error('로드 실패:', err);
    throw err;
  }
}

const result = await loadUserProfile(42);

동기 코드처럼 읽히고, try/catch 로 모든 에러를 한 곳에서 처리한다. 중간 값도 같은 스코프에서 자유롭게 참조할 수 있다.

실전: 독립 작업의 병렬화

순차로 하면 느린 작업을 Promise.all 로 묶어 병렬 실행:

async function loadDashboard(userId) {
  // ❌ 순차 실행: 합산 시간 소요
  // const user    = await fetchUser(userId);    // 300ms
  // const posts   = await fetchPosts(userId);   // 200ms
  // const friends = await fetchFriends(userId); // 150ms
  // 총 650ms

  // ✅ 병렬 실행: 가장 느린 것만큼만 소요
  const [user, posts, friends] = await Promise.all([
    fetchUser(userId),    // 300ms
    fetchPosts(userId),   // 200ms
    fetchFriends(userId), // 150ms
  ]);
  // 총 300ms

  return { user, posts, friends };
}

의존관계 없는 작업은 항상 병렬로 처리한다.

안티패턴: Promise 지옥

Promise 를 쓰더라도 중첩하면 콜백 지옥과 똑같아진다.

// ❌ Promise 지옥: then 안에서 또 then 중첩
loadUserP(42)
  .then(user =>
    loadPostsP(user.id)
      .then(posts =>
        loadCommentsP(posts[0].id)
          .then(comments =>
            loadProfileP(comments[0].authorId)
              .then(profile => console.log(profile.name))
          )
      )
  );

// ✅ 평탄하게 체이닝
loadUserP(42)
  .then(user => loadPostsP(user.id))
  .then(posts => loadCommentsP(posts[0].id))
  .then(comments => loadProfileP(comments[0].authorId))
  .then(profile => console.log(profile.name))
  .catch(console.error);

실전 리팩토링: 파일 처리 파이프라인

// Before: 콜백 지옥
function processFile(path, done) {
  fs.readFile(path, 'utf8', (err, raw) => {
    if (err) return done(err);
    parseJSON(raw, (err, data) => {
      if (err) return done(err);
      validate(data, (err, valid) => {
        if (err) return done(err);
        saveToDb(valid, (err, result) => {
          if (err) return done(err);
          done(null, result);
        });
      });
    });
  });
}

// After: async/await
async function processFile(path) {
  const raw   = await fs.promises.readFile(path, 'utf8');
  const data  = await parseJSONAsync(raw);
  const valid = await validateAsync(data);
  return saveToDbAsync(valid);
}

함정

[!WARNING] 에러 처리 실수: 콜백 지옥에서는 if (err) return 을 빠뜨리면 에러가 무시된다. Promise 에서는 .catch 없이 rejected 된 Promise 는 Node.js 에서 UnhandledPromiseRejection 경고 (또는 프로세스 종료) 가 발생한다.

// ❌ catch 없는 Promise
loadUserP(42)
  .then(user => loadPostsP(user.id))
  .then(profile => console.log(profile.name));
// rejection 발생 시 처리 안 된 Promise rejection 경고

// ✅
loadUserP(42)
  .then(user => loadPostsP(user.id))
  .then(profile => console.log(profile.name))
  .catch(err => console.error('처리:', err));

[!WARNING] 중간 값 참조 문제: Promise 체이닝에서 이전 단계의 값을 나중 단계에서 참조하려면 외부 변수가 필요하다. async/await 는 이 문제를 자연스럽게 해결한다.

// ❌ Promise 체이닝에서 중간 값 참조 어색함
let savedUser;
loadUserP(42)
  .then(user => { savedUser = user; return loadPostsP(user.id); })
  .then(posts => renderPage(savedUser, posts));  // savedUser 외부 변수 필요

// ✅ async/await 에서는 자연스럽게
async function render() {
  const user  = await loadUserP(42);
  const posts = await loadPostsP(user.id);
  renderPage(user, posts);  // 같은 스코프에서 참조
}

[!CAUTION] 취소 불가: 콜백 기반 API 는 취소 메커니즘이 없다. [[js-abort-controller|AbortController]] 를 지원하는 최신 API 로 전환하거나 직접 구현해야 한다.

고차 함수

koa (김신건) — Wed, 15 Jul 2026 00:00:00 GMT

정의

고차 함수 (Higher-Order Function, HOF): 다음 조건 중 하나 이상을 만족하는 함수.

함수를 인자로 받는다.
함수를 반환한다.

[[일급 함수]] 특성이 있어야만 가능한 패턴이다. 함수를 값처럼 다룰 수 있기 때문에 함수를 조립하거나 추상화하는 강력한 도구가 된다.

조건	예
함수를 인자로 받는다	`Array.prototype.map(fn)`
함수를 반환한다	`const multiply = x => y => x * y`
둘 다	`pipe(f, g)`

사용 상황

배열 변환: map, filter, reduce
함수 합성 (function composition): 여러 함수를 조립해 새 함수 생성
커링 (currying): 다중 인자 함수를 단일 인자 함수 체인으로 분해
데코레이터 패턴: 기존 함수에 캐싱, 로깅, 재시도 등을 덧씌움
추상화: 반복 로직을 HOF 로 분리해 DRY 원칙 실현

시각화

HOF 가 함수를 받아 새 함수 또는 결과를 내보내는 구조:

flowchart LR
    subgraph HOF["고차 함수 (Higher-Order Function)"]
        direction TB
        IN["함수 fn (인자)"] --> BODY["HOF 본체 (로직)"]
        BODY --> OUT["결과: 새 배열 / 새 함수"]
    end

    FN["x => x * 2"] --> IN
    OUT --> RES["변환된 값 또는 함수"]

함수 합성 (pipe) 흐름: 입력이 각 함수를 차례로 통과한다.

flowchart LR
    INPUT["입력"] --> F["trim(x)"]
    F --> G["toLower(x)"]
    G --> H["split(x)"]
    H --> OUTPUT["결과"]
    style F fill:#4a9eff,color:#fff
    style G fill:#4a9eff,color:#fff
    style H fill:#4a9eff,color:#fff

기본 사용법

map, filter, reduce

JavaScript 내장 배열 메서드가 가장 흔한 HOF 예시다.

const numbers = [1, 2, 3, 4, 5];

// map: 각 원소를 변환한 새 배열 반환
const doubled = numbers.map(x => x * 2);
// [2, 4, 6, 8, 10]

// filter: 조건에 맞는 원소만 새 배열로
const evens = numbers.filter(x => x % 2 === 0);
// [2, 4]

// reduce: 배열을 하나의 값으로 누적
const sum = numbers.reduce((acc, x) => acc + x, 0);
// 15

// 체이닝: filter -> map -> reduce
const result = numbers
  .filter(x => x % 2 !== 0)  // [1, 3, 5]
  .map(x => x ** 2)            // [1, 9, 25]
  .reduce((a, b) => a + b, 0); // 35

함수를 반환하는 패턴

// multiplier 는 숫자를 받아 함수를 반환하는 HOF
function multiplier(factor) {
  return (num) => num * factor;
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5));   // 10
console.log(triple(5));   // 15

// 배열 메서드와 함께
const numbers = [1, 2, 3];
console.log(numbers.map(double));  // [2, 4, 6]
console.log(numbers.map(triple));  // [3, 6, 9]

실전 예시

함수 합성: compose / pipe

// compose: 오른쪽 -> 왼쪽 순서로 적용
const compose = (...fns) => x =>
  fns.reduceRight((v, f) => f(v), x);

// pipe: 왼쪽 -> 오른쪽 순서로 적용 (compose 반대)
const pipe = (...fns) => x =>
  fns.reduce((v, f) => f(v), x);

const trim    = str => str.trim();
const toLower = str => str.toLowerCase();
const split   = str => str.split(' ');

const process = pipe(trim, toLower, split);
process('  Hello World  ');
// ['hello', 'world']

커링 (Currying)

// 2인자 함수를 커리드 버전으로
const add = a => b => a + b;

const add5 = add(5);
add5(3);   // 8
add5(10);  // 15

// 실용 예: 로거 생성기
const withPrefix = prefix => message =>
  `[${prefix}] ${message}`;

const logError = withPrefix('ERROR');
const logInfo  = withPrefix('INFO');

logError('서버 연결 실패');  // [ERROR] 서버 연결 실패
logInfo('서버 시작됨');      // [INFO] 서버 시작됨

메모이제이션 데코레이터

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function slowFib(n) {
  if (n <= 1) return n;
  return slowFib(n - 1) + slowFib(n - 2);
}

const fib = memoize(slowFib);
fib(40);  // 빠름 (중복 계산 없음)
fib(40);  // 즉시 반환 (캐시 히트)

재시도 HOF

function withRetry(fn, retries = 3, backoff = 300) {
  return async function (...args) {
    for (let attempt = 0; attempt < retries; attempt++) {
      try {
        return await fn(...args);
      } catch (err) {
        if (attempt === retries - 1) throw err;
        const delay = backoff * Math.pow(2, attempt);
        await new Promise(r => setTimeout(r, delay));
        console.warn(`재시도 ${attempt + 1}/${retries}`);
      }
    }
  };
}

const fetchWithRetry = withRetry(fetch, 3);
const res = await fetchWithRetry('/api/data');

reduce 로 pipeline 구성

const pipeline = (...fns) => data =>
  fns.reduce((value, fn) => fn(value), data);

const process = pipeline(
  data => data.filter(x => x > 0),
  data => data.map(x => x * 2),
  data => data.reduce((sum, x) => sum + x, 0),
);

process([-1, 2, 3, -4, 5]);
// 양수만 필터 [2, 3, 5] -> 2배 [4, 6, 10] -> 합산 20

고차 함수로 전략 주입

// 정렬 전략을 함수로 주입
function sortBy(arr, compareFn) {
  return [...arr].sort(compareFn);
}

const people = [
  { name: '홍길동', age: 30 },
  { name: '이순신', age: 45 },
  { name: '강감찬', age: 28 },
];

const byAge  = (a, b) => a.age - b.age;
const byName = (a, b) => a.name.localeCompare(b.name);

sortBy(people, byAge);   // 나이 순 정렬
sortBy(people, byName);  // 이름 순 정렬

클로저와의 관계

고차 함수가 함수를 반환할 때, 반환된 함수는 종종 외부 변수를 캡처하는 [[js-closure|클로저]]가 된다.

function counter(start = 0) {
  let count = start;  // 클로저로 캡처되는 변수
  return {
    increment: () => ++count,
    decrement: () => --count,
    value:     () => count,
  };
}

const c = counter(10);
c.increment();  // 11
c.increment();  // 12
c.decrement();  // 11
c.value();      // 11

counter 는 객체를 반환하는 HOF. 반환된 세 메서드가 count 를 클로저로 공유한다.

함정

[!WARNING] this 컨텍스트 손실: function 키워드 콜백에서는 this 가 호출 시 재결정된다. 메서드를 HOF 에 넘길 때 주의.

const obj = {
  multiplier: 3,
  values: [1, 2, 3],
  compute() {
    // ❌ function 콜백: this 가 undefined (strict mode)
    return this.values.map(function(v) {
      return v * this.multiplier;  // TypeError
    });
  },
  computeOk() {
    // ✅ 화살표 함수: this 를 lexical 로 캡처
    return this.values.map(v => v * this.multiplier);
  },
};

obj.computeOk();  // [3, 6, 9]

[!WARNING] reduce 의 빈 배열 + 초기값 미지정: TypeError 가 발생한다.

// ❌ 초기값 없으면 빈 배열에서 TypeError
[].reduce((a, b) => a + b);

// ✅ 항상 초기값 명시
[].reduce((a, b) => a + b, 0);  // 0

[!CAUTION] 과도한 커링: 커링 단계가 3단계를 넘으면 타입 추론이 어렵고 디버깅이 힘들어진다. 명시적 함수로 풀어쓰는 편이 낫다.

// ❌ 너무 많은 커링 단계
const f = a => b => c => d => a + b + c + d;

// ✅ 명시적 매개변수
const f = (a, b, c, d) => a + b + c + d;

일급 함수

koa (김신건) — Wed, 15 Jul 2026 00:00:00 GMT

정의

일급 함수 (First-Class Function): 함수를 숫자, 문자열, 객체처럼 값으로 다룰 수 있는 언어의 특성.

다음 세 가지가 모두 가능하면 그 언어의 함수는 일급이다.

조건	설명	예
변수에 할당	함수를 변수나 데이터 구조에 저장	`const fn = function() {}`
인자로 전달	다른 함수의 매개변수로 함수를 넘김	`arr.map(fn)`
반환값으로 사용	함수가 함수를 돌려줌	`const add = a => b => a + b`

일급 함수는 함수를 값처럼 다룰 수 있는 권한이고, [[고차 함수]] 는 그 권한을 이용해 다른 함수를 인자로 받거나 반환하는 함수다. (모든 고차 함수는 일급 함수를 기반으로 만들어진다.)

사용 상황

[[js-callback|콜백]] 패턴: 이벤트 핸들러, 타이머, 비동기 처리
[[고차 함수]]: map, filter, reduce, 커링, 데코레이터
함수 합성 (composition): 여러 작은 함수를 조립해 복잡한 로직 구성
의존성 주입: 테스트 가능한 코드 작성
모듈화: 전략 패턴, 플러그인 시스템

시각화

언어별 일급 함수 지원 여부:

flowchart TD
    FCF["일급 함수 (First-Class Function)"]

    FCF --> JS["JavaScript / TypeScript"]
    FCF --> PY["Python"]
    FCF --> RB["Ruby"]
    FCF --> GO["Go"]
    FCF --> JAVA["Java (Java 8+, 람다)"]

    JS --> JS1["변수 할당 O"]
    JS --> JS2["인자 전달 O"]
    JS --> JS3["반환값 O"]
    JAVA --> J1["변수 할당 (Functional Interface) O"]
    JAVA --> J2["람다 인자 전달 O"]
    JAVA --> J3["함수형 인터페이스 반환 O"]

기본 사용법

1. 변수에 함수 할당

// 함수 표현식: 함수를 값으로 변수에 저장
const greet = function(name) {
  return `안녕, ${name}!`;
};

// 화살표 함수도 동일
const greetArrow = name => `안녕, ${name}!`;

// 배열에 함수 저장
const operations = [
  (a, b) => a + b,
  (a, b) => a - b,
  (a, b) => a * b,
];

operations[0](3, 2);  // 5
operations[1](3, 2);  // 1
operations[2](3, 2);  // 6

// 객체 프로퍼티로 저장
const math = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
};
math.add(3, 4);  // 7

2. 함수를 인자로 전달

// 고차 함수: 함수를 매개변수로 받음
function applyTwice(fn, x) {
  return fn(fn(x));
}

const double = x => x * 2;
applyTwice(double, 3);  // 12 (3*2=6, 6*2=12)

// 배열 메서드: 콜백을 인자로 받음
[1, 2, 3].map(x => x * 2);        // [2, 4, 6]
[1, 2, 3].filter(x => x > 1);     // [2, 3]
[1, 2, 3].forEach(x => console.log(x));

// 이벤트 핸들러 등록
document.addEventListener('click', (e) => {
  console.log('클릭:', e.target);
});

// setTimeout
setTimeout(() => console.log('1초 후'), 1000);

3. 함수를 반환값으로 사용

// 함수를 반환하는 팩토리 함수
function makeAdder(n) {
  return function(x) {
    return x + n;
  };
}

const add10 = makeAdder(10);
const add20 = makeAdder(20);

add10(5);   // 15
add20(5);   // 25

// 커리드 화살표 함수
const multiply = a => b => a * b;
const double = multiply(2);
[1, 2, 3].map(double);  // [2, 4, 6]

실전 예시

전략 패턴 (Strategy Pattern)

// 정렬 전략을 함수로 주입
function sortBy(arr, compareFn) {
  return [...arr].sort(compareFn);
}

const people = [
  { name: '홍길동', age: 30 },
  { name: '이순신', age: 45 },
  { name: '강감찬', age: 28 },
];

const byAge  = (a, b) => a.age - b.age;
const byName = (a, b) => a.name.localeCompare(b.name);

sortBy(people, byAge);   // 나이 순
sortBy(people, byName);  // 이름 순

// 정렬 방향도 HOF 로 추상화
const descending = fn => (a, b) => fn(b, a);
sortBy(people, descending(byAge));  // 나이 역순

의존성 주입으로 테스트 가능한 코드

// fetcher 를 외부에서 주입 (테스트 시 Mock 으로 교체)
function createApiService(fetcher = fetch) {
  return {
    async getUser(id) {
      const res = await fetcher(`/users/${id}`);
      return res.json();
    },
    async createPost(data) {
      const res = await fetcher('/posts', {
        method: 'POST',
        body: JSON.stringify(data),
      });
      return res.json();
    },
  };
}

// 실제 사용
const api = createApiService();

// 테스트: fetch 를 Mock 으로 교체
const mockFetch = (url) => Promise.resolve({
  json: () => ({ id: 1, name: '테스트 유저' }),
});
const testApi = createApiService(mockFetch);

함수 합성으로 유효성 검사

const validators = [
  str => str.length >= 8 || '8자 이상이어야 합니다',
  str => /[A-Z]/.test(str) || '대문자가 포함되어야 합니다',
  str => /[0-9]/.test(str) || '숫자가 포함되어야 합니다',
];

function validate(value, rules) {
  return rules
    .map(rule => rule(value))
    .filter(result => typeof result === 'string');
}

validate('abc', validators);
// ['8자 이상이어야 합니다', '대문자가 포함되어야 합니다', '숫자가 포함되어야 합니다']
validate('Abc12345', validators);
// []

언어별 비교

언어	변수 할당	인자 전달	반환값	비고
JavaScript	O	O	O	함수 자체가 일급 객체
Python	O	O	O	`def` / `lambda` 모두 일급
Ruby	O	O	O	`Proc`, `lambda`, 블록
Go	O	O	O	함수형 프로그래밍 지원
Java (8+)	O	O	O	Functional Interface 필요
C (함수 포인터)	O	O	O	포인터 문법 필요, 클로저 없음

Python 비교

# 1. 변수에 함수 할당
double = lambda x: x * 2

# 2. 함수를 인자로 전달
result = list(map(double, [1, 2, 3]))  # [2, 4, 6]

# 3. 함수를 반환값으로 사용
def make_adder(n):
    return lambda x: x + n

add5 = make_adder(5)
add5(3)  # 8

Python 의 lambda 는 표현식만 허용. 여러 줄 함수는 def 후 반환해야 한다.

Java 비교

// Java 8+ 람다: Functional Interface 를 통해 일급 함수 흉내

// 1. 변수에 할당
Function<Integer, Integer> double_ = x -> x * 2;

// 2. 인자로 전달
List<Integer> result = List.of(1, 2, 3).stream()
    .map(double_)
    .collect(Collectors.toList());  // [2, 4, 6]

// 3. 함수를 반환
Function<Integer, Function<Integer, Integer>> add = a -> b -> a + b;
Function<Integer, Integer> add5 = add.apply(5);
add5.apply(3);  // 8

Java 는 함수가 일급 객체가 아니라 인터페이스 구현체다. 타입 명시가 장황해지는 단점이 있다.

함정

[!WARNING] function 선언문과 const fn = function 의 차이: 선언문은 호이스팅되어 정의 전에 호출 가능, 표현식은 TDZ 에 걸린다.

// ✅ 선언문: 호이스팅
console.log(add(2, 3));  // 5
function add(a, b) { return a + b; }

// ❌ 표현식: 정의 전 호출 불가
console.log(sub(2, 3));  // ReferenceError: Cannot access 'sub' before initialization
const sub = (a, b) => a - b;

[!WARNING] typeof class === 'function': 클래스도 함수처럼 취급되어 혼동 여지가 있다.

typeof function() {}  // 'function'
typeof (() => {})     // 'function'
typeof class Foo {}   // 'function'  (!)

클래스는 new 없이 호출하면 TypeError 가 발생하지만, typeof 는 구분하지 못한다.

[!CAUTION] 함수를 배열/객체에 저장할 때 this 손실: 메서드를 꺼내서 콜백으로 사용하면 this 가 사라진다.

const obj = {
  value: 42,
  getValue() { return this.value; },
};

const fn = obj.getValue;
fn();            // undefined (this 손실)
fn.call(obj);   // 42 (명시적 바인딩)

// 화살표 함수로 래핑
const safeFn = () => obj.getValue();
safeFn();        // 42

[Javascript] async/await

koa (김신건) — Tue, 14 Jul 2026 00:00:00 GMT

정의

async / await 는 [[Promise]] 기반 비동기 코드를 마치 동기 코드처럼 쓸 수 있게 해주는 ES2017 의 문법 설탕. 본질은 Promise 그 자체, 문법만 다르다.

전체 동작 메커니즘은 [[비동기와 타이밍, 콜백부터 async/await까지의 발전사]] 글 참조.

세 가지 규칙

async 함수는 항상 Promise 를 반환. return value 는 Promise.resolve(value) 와 같다.
await expr 은 expr 이 정착할 때까지 함수 실행을 일시정지. 함수 밖 동기 코드는 계속 진행.
에러는 try/catch 로. Promise 의 .catch 와 동등.

async function loadProfile(userId) {
  try {
    const userRes = await fetch(`/users/${userId}`);
    const user = await userRes.json();
    const postsRes = await fetch(`/posts?u=${user.id}`);
    return { user, posts: await postsRes.json() };
  } catch (err) {
    console.error(err);
    throw err;
  }
}

await 실행 흐름

sequenceDiagram
    participant C as 호출자
    participant F as async 함수
    participant MQ as Microtask Queue

    C->>F: 함수 호출
    F->>F: await 이전 동기 코드 실행
    F->>MQ: Promise 대기 등록
    F-->>C: 일시정지, 제어 반환
    Note over C: 동기 코드 계속 실행
    MQ->>F: Promise 정착 후 재개
    F-->>C: 반환값 Promise 에 담김

[!IMPORTANT] await 이후 코드는 항상 다음 마이크로태스크 틱에 실행. 동기 코드보다 늦고, setTimeout 보다 빠르다.

await 의 실제 동작

await 는 .then 의 문법 설탕이다.

// async/await
async function f() {
  const a = await loadA();
  return a + 1;
}

// 동치
function f() {
  return loadA().then((a) => a + 1);
}

엔진 내부 동작:

오른쪽 표현식을 평가, Promise 가 아니면 Promise.resolve 로 감쌈.
함수 상태를 [[Lexical Environment]] 에 저장.
Promise 정착 시 [[Microtask Queue]] 에 “함수 재개” 등록.
마이크로태스크 차례가 오면 함수 이어 실행.

Promise 체인과의 비교

두 방식은 동등하지만 async/await 가 가독성이 높습니다.

// Promise 체인
function loadUser(id) {
    return fetch(`/users/${id}`)
        .then(res => res.json())
        .then(user => fetch(`/posts?u=${user.id}`))
        .then(res => res.json())
        .catch(err => { console.error(err); throw err; });
}

// async/await: 동일한 로직, 읽기 쉬움
async function loadUser(id) {
    try {
        const user = await fetch(`/users/${id}`).then(r => r.json());
        return await fetch(`/posts?u=${user.id}`).then(r => r.json());
    } catch (err) {
        console.error(err);
        throw err;
    }
}

체인이 길어질수록, 중간 값을 여러 단계에서 참조해야 할수록 async/await 가 유리합니다.

에러 처리 전략

try/catch

async function fetchData(url) {
    try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
    } catch (err) {
        if (err instanceof TypeError) {
            console.error('네트워크 오류:', err.message);
        } else {
            console.error('서버 오류:', err.message);
        }
        throw err; // 상위로 전파
    }
}

결과와 에러를 함께 반환하는 패턴

// Go-style: [data, error] 튜플 반환
async function safe(promise) {
    try {
        return [await promise, null];
    } catch (err) {
        return [null, err];
    }
}

const [user, userErr] = await safe(fetchUser(id));
if (userErr) { /* 처리 */ }

에러 무시

// 에러를 무시하고 undefined 반환
const data = await fetchData(url).catch(() => undefined);

함정

순차 vs 병렬

// 순차 (총 2초)
const a = await fetch('/a'); // 1초
const b = await fetch('/b'); // 1초

// 병렬 (총 1초)
const [a, b] = await Promise.all([fetch('/a'), fetch('/b')]);

의존성 없는 작업은 Promise.all 로 묶자.

반복문 안의 await

// 순차 처리 (의도적이라면 OK)
for (const id of ids) {
  await process(id);
}

// 병렬 처리
await Promise.all(ids.map(process));

forEach 안의 await 는 동작 안 함

// ❌ forEach 는 async 콜백을 기다리지 않음
ids.forEach(async (id) => await process(id));
console.log('done'); // 아직 process 들이 도는 중에 출력

// ✅ for-of 또는 Promise.all
for (const id of ids) await process(id);
// 또는
await Promise.all(ids.map(process));

Top-level await

ES2022 부터 ES Module 최상위에서 await 가능.

// app.mjs
const config = await fetch('/config.json').then(r => r.json());
// 이후 코드는 config 가 로드된 후 실행

CommonJS 모듈에서는 불가.

실전 예시

재시도 (Retry with backoff)

async function withRetry(fn, { retries = 3, backoff = 300 } = {}) {
    for (let attempt = 0; attempt < retries; attempt++) {
        try {
            return await fn();
        } catch (err) {
            if (attempt === retries - 1) throw err;
            const delay = backoff * Math.pow(2, attempt);
            await new Promise(r => setTimeout(r, delay));
        }
    }
}

const data = await withRetry(() => fetch('/api/data').then(r => r.json()));

타임아웃

async function withTimeout(promise, ms) {
    const timeout = new Promise((_, reject) =>
        setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms)
    );
    return Promise.race([promise, timeout]);
}

const result = await withTimeout(fetchData('/slow'), 5000);

AbortController 로 취소 가능한 fetch

async function fetchWithAbort(url) {
    const controller = new AbortController();

    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
        const res = await fetch(url, { signal: controller.signal });
        return await res.json();
    } finally {
        clearTimeout(timeoutId);
    }
}

동시 실행 수 제한

async function pLimit(tasks, concurrency) {
    const results = [];
    const running = [];

    for (const task of tasks) {
        const p = Promise.resolve().then(task).then(r => {
            running.splice(running.indexOf(p), 1);
            return r;
        });
        running.push(p);
        results.push(p);

        if (running.length >= concurrency) {
            await Promise.race(running);
        }
    }

    return Promise.all(results);
}

성능 주의사항

// ❌ 불필요한 await - Promise 를 그냥 반환하면 됨
async function getData() {
    return await fetchData(); // 마이크로태스크 1개 추가
}

// ✅ await 불필요
async function getData() {
    return fetchData(); // Promise 그대로 반환
}

// ⚠️ 단, try/catch 안에서는 await 필요
async function getData() {
    try {
        return await fetchData(); // 에러를 catch 하려면 await 필요
    } catch (err) {
        handle(err);
    }
}

참고

[[Promise]]
[[js-promise-methods|Promise.all / race / any / allSettled]]
[[Microtask Queue]]
[[이벤트 루프]]
[[비동기와 타이밍, 콜백부터 async/await까지의 발전사]]
[[JS Error / try-catch]]

[Javascript] Date

koa (김신건) — Tue, 14 Jul 2026 00:00:00 GMT

정의

JS 의 Date 객체. 시간을 ms 단위로 (1970-01-01T00:00:00Z 기준) 저장. 매우 오래된 API 라 함정이 많다.

Date 의 설계 문제

Date 는 Brendan Eich 가 1995년 Java 의 java.util.Date 를 10일 만에 베껴 만들었습니다. Java 1.1 에서도 이 클래스는 대부분 deprecated 됐지만 JS Date 는 하위 호환 때문에 그대로 남아있습니다.

주요 문제:

월이 0-base (0=1월, 11=12월)
문자열 파싱 동작이 브라우저마다 다름
timezone 처리가 불편함
가변 객체 (모든 setter 가 원본 변경)
국제화 지원 부족

생성

new Date();                              // 현재 시각
new Date('2024-01-15');                  // ISO string
new Date('2024-01-15T09:00:00Z');        // UTC
new Date('2024-01-15T09:00:00+09:00');   // timezone
new Date(2024, 0, 15);                   // 년, 월(0-base!), 일
new Date(1705248000000);                 // unix ms
Date.now();                              // 현재 ms (Date 객체 X)

[!CAUTION] 월이 0-base (0=1월). 가장 흔한 함정.

가져오기

const d = new Date('2024-01-15T09:00:00');
d.getFullYear();        // 2024
d.getMonth();           // 0 (1월!)
d.getDate();            // 15 (일)
d.getDay();             // 1 (요일, 0=일요일)
d.getHours();           // 9
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
d.getTime();            // unix ms
d.getTimezoneOffset();  // 분 (UTC 기준)

// UTC 버전
d.getUTCFullYear();
d.getUTCHours();

출력

d.toISOString();         // '2024-01-15T00:00:00.000Z'
d.toJSON();              // 같음
d.toUTCString();         // 'Mon, 15 Jan 2024 00:00:00 GMT'
d.toString();            // 시스템 timezone 문자열
d.toLocaleString();      // '2024. 1. 15. 오전 9:00:00' (ko-KR)
d.toLocaleDateString();
d.toLocaleTimeString();

Intl.DateTimeFormat (권장)

const fmt = new Intl.DateTimeFormat('ko-KR', {
    year: 'numeric', month: 'long', day: 'numeric',
    weekday: 'short',
});
fmt.format(d);    // '2024년 1월 15일 (월)'

new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/New_York',
    dateStyle: 'full', timeStyle: 'short',
}).format(d);

Intl 이 모던 권장. timezone, locale 지원.

ISO 8601 과 Epoch

flowchart LR
    A["epoch 기준점\n1970-01-01T00:00:00Z"] --> B["ms 단위 정수로 저장"]
    B --> C["Date.now() = 현재 ms"]
    B --> D["new Date(ms) = 변환"]

    E["ISO 8601 형식"] --> F["YYYY-MM-DD"]
    E --> G["YYYY-MM-DDTHH:mm:ssZ"]
    E --> H["YYYY-MM-DDTHH:mm:ss+09:00"]

// epoch 관련 idiom
Date.now()                         // 현재 unix ms
Math.floor(Date.now() / 1000)      // unix timestamp (초)
new Date(0).toISOString()          // '1970-01-01T00:00:00.000Z'

// 성능 측정
const start = performance.now(); // 고해상도 (ms, 소수점)
doWork();
console.log(performance.now() - start + 'ms');

Timezone 이슈

문자열 파싱 시 timezone 추론 규칙이 복잡합니다.

flowchart TD
    A["문자열 입력"] --> B{"T 구분자 있음?"}
    B -->|없음| C["로컬 타임존 적용"]
    B -->|있음| D{"Z 또는 오프셋?"}
    D -->|"Z 명시"| E["UTC로 파싱"]
    D -->|"+09:00 등"| F["오프셋 변환 후 UTC"]
    D -->|"없음"| G["로컬 타임존 적용"]

// 같은 날짜, 다른 해석
new Date('2024-01-15')              // UTC 자정 (날짜만 있으면 UTC)
new Date('2024-01-15T09:00')        // 로컬 타임존 09:00
new Date('2024-01-15T09:00Z')       // UTC 09:00
new Date('2024-01-15T09:00+09:00')  // KST 09:00 = UTC 00:00

// 안전한 파싱 패턴
function parseDate(str) {
    // 날짜만 있는 경우 UTC 로 파싱
    if (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
        return new Date(str + 'T00:00:00Z');
    }
    return new Date(str);
}

[!WARNING] new Date('2024-01-15') 은 UTC 자정이지만 new Date('2024-01-15 09:00') 은 로컬 타임존입니다. 형식마다 다릅니다.

산술

const d = new Date();
d.setDate(d.getDate() + 7);          // 7 일 후

// 또는 ms 단위
const future = new Date(d.getTime() + 7 * 24 * 60 * 60 * 1000);

// 차이
const diff = (d2 - d1) / 1000 / 60 / 60 / 24;   // 일 단위

비교

d1 < d2                  // 비교 가능 (ms 변환)
d1.getTime() === d2.getTime()    // 같은 시각 검사
d1 === d2                // 객체 참조, 다르면 false

객체 동등성은 === 로 비교 안 됨. .getTime() 필요.

일반적인 함정

[!WARNING] 아래 함정들은 실제 서비스에서 자주 발생합니다.

1. 월의 0-base

new Date(2024, 1, 15)       // 2024년 2월 15일! (1월 아님)
new Date('2024-02-15')      // 2024년 2월 15일 (ISO 문자열은 1-base)

2. timezone 추론

new Date('2024-01-15')           // UTC 자정 (Z 가정)
new Date('2024-01-15 09:00')     // local timezone
new Date('2024-01-15T09:00')     // local
new Date('2024-01-15T09:00Z')    // UTC

명시적 ISO 8601 (T + Z 또는 +09:00) 권장.

3. Date 의 가변성

const d = new Date();
d.setDate(d.getDate() + 1);    // d 가 변경됨

// 불변 패턴
const tomorrow = new Date(d);
tomorrow.setDate(tomorrow.getDate() + 1);

4. Invalid Date

new Date('invalid')      // Invalid Date
isNaN(d.getTime())       // true

명시적 검사 필요.

5. 윤년 / 28-31일 차이

new Date(2024, 1, 30)      // 2024-02-30 → 자동으로 2024-03-01

월에 없는 날짜는 다음 월로 넘어감 (의도 아닐 가능성).

6. toISOString 은 항상 UTC

const d = new Date('2024-01-15T09:00:00+09:00');
d.toISOString()   // '2024-01-15T00:00:00.000Z' (UTC 로 변환됨)

Temporal API

ECMAScript Temporal 제안. Stage 3 (2024년 기준). 더 명확한 API.

// 미래에 표준 (현재는 polyfill 사용)

// 날짜만
const date = Temporal.PlainDate.from('2024-01-15');
date.year;   // 2024
date.month;  // 1 (1-base!)
date.day;    // 15

// timezone 포함
const zdt = Temporal.ZonedDateTime.from({
    timeZone: 'Asia/Seoul',
    year: 2024, month: 1, day: 15,
    hour: 9, minute: 0,
});

// 날짜 계산 (불변)
const nextWeek = date.add({ days: 7 });

// 현재 시각
Temporal.Now.instant();              // Instant (UTC)
Temporal.Now.plainDateISO();         // '2024-01-15'
Temporal.Now.zonedDateTimeISO();     // ZonedDateTime (로컬)

Temporal 의 핵심 개선:

월이 1-base
불변 객체 (모든 연산이 새 객체 반환)
PlainDate, PlainTime, ZonedDateTime 등 타입 분리
timezone 이 일급 시민

대안 라이브러리

Date 의 함정 때문에 외부 라이브러리가 흔히 쓰인다.

라이브러리	특징
date-fns	함수형, tree-shakable
dayjs	moment.js 호환, 가벼움 (2KB)
luxon	timezone / Intl 강화
Temporal (ES proposal)	차세대 표준, 곧 도입





dayjs.extend(utc);
dayjs.extend(timezone);

// date-fns
addDays(new Date(), 7);
format(new Date(), 'yyyy-MM-dd');
isValid(new Date('invalid'));  // false

// dayjs
dayjs().add(7, 'day').format('YYYY-MM-DD');
dayjs.tz('2024-01-15', 'Asia/Seoul').utc().toISOString();

자주 쓰는 idiom

// 오늘 자정
const today = new Date(); today.setHours(0, 0, 0, 0);

// 이 달 1일
const firstDay = new Date(d.getFullYear(), d.getMonth(), 1);

// 이 달 마지막 날
const lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0);

// unix timestamp
Math.floor(Date.now() / 1000);

// 날짜 포맷 (빠른 버전)
function formatDate(d) {
    return d.toISOString().slice(0, 10); // 'YYYY-MM-DD'
}

// 두 날짜 사이 일 수
function daysBetween(a, b) {
    const ms = Math.abs(b.getTime() - a.getTime());
    return Math.floor(ms / (1000 * 60 * 60 * 24));
}

// 요일 이름
const days = ['일', '월', '화', '수', '목', '금', '토'];
const dayName = days[new Date().getDay()];

[Javascript] Number

koa (김신건) — Tue, 14 Jul 2026 00:00:00 GMT

정의

JavaScript 의 number 는 IEEE 754 double-precision float (64-bit). 정수와 실수를 같은 타입으로 표현. 정수 안전 범위는 ±2^53 - 1.

typeof 42         // 'number'
typeof 3.14       // 'number'
typeof NaN        // 'number'
typeof Infinity   // 'number'

IEEE 754 구조

64비트를 세 구역으로 나눠 부동소수점을 표현합니다.

flowchart LR
    A["64비트 double"] --> B["부호 1비트"]
    A --> C["지수 11비트"]
    A --> D["가수 52비트"]
    B --> E["양수 0, 음수 1"]
    C --> F["지수 범위 -1022~1023"]
    D --> G["유효 자릿수 약 15-16자리"]

값은 (-1)^부호 × 2^지수 × (1 + 가수) 로 계산됩니다. 가수가 52비트이므로 정수는 2^53 까지만 정확히 표현 가능합니다.

flowchart LR
    H["정수 안전 범위"] --> I["MAX_SAFE_INTEGER = 2^53 - 1"]
    H --> J["MIN_SAFE_INTEGER = -(2^53 - 1)"]
    I --> K["9,007,199,254,740,991"]
    J --> L["-9,007,199,254,740,991"]

정수 안전 범위

Number.MAX_SAFE_INTEGER       // 9007199254740991 (2^53 - 1)
Number.MIN_SAFE_INTEGER       // -9007199254740991
Number.MAX_VALUE              // 1.7976931348623157e+308
Number.MIN_VALUE              // 5e-324

// 안전 범위 초과
9007199254740992 + 1          // 9007199254740992 (정확도 손실!)

큰 정수는 BigInt 사용.

부동소수점 함정

0.1 + 0.2 === 0.3            // ❌ false
0.1 + 0.2                     // 0.30000000000000004

이진 표현으로 0.1, 0.2 가 정확히 표현 안 됨. 통화 등은 정수 단위 (cent) 로 다룰 것.

Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON    // 비교 idiom

Number.EPSILON 은 2^-52 ≈ 2.22e-16. 두 수의 차이가 이 값보다 작으면 “같다”고 판단합니다.

왜 0.1 + 0.2 가 0.3 이 아닌가

0.1 의 이진 표현은 0.0001100110011... 의 무한 반복. 52비트에서 잘려 반올림됩니다. 이 오차가 연산 중에 누적됩니다.

// 통화 연산: 정수 단위로
const price = 0.1 * 100;      // cent 단위
const tax   = 0.2 * 100;
const total = (price + tax) / 100;   // 0.3 (정확)

특수 값

값	의미
`Infinity`	`1/0`, 너무 큰 수
`-Infinity`	`-1/0`
`NaN`	0/0, 의미 없는 수치 연산
`Number.EPSILON`	2^-52 ≈ 2.22e-16

NaN

NaN === NaN              // ❌ false
Number.isNaN(NaN)        // ✓ true
isNaN('hello')           // true (강제 변환 후)
Number.isNaN('hello')    // false (엄격)

Number.isNaN 권장 (변환 없이 검사).

// NaN 전파: 연산 결과로 퍼짐
NaN + 1     // NaN
NaN * 0     // NaN
Math.sqrt(-1)  // NaN

// 체크 패턴
function isValidNumber(n) {
    return typeof n === 'number' && !Number.isNaN(n) && isFinite(n);
}

BigInt

Number.MAX_SAFE_INTEGER 를 초과하는 정수에는 BigInt 를 사용합니다.

const big = 9007199254740991n;   // 리터럴: 숫자 뒤에 n
const big2 = BigInt('12345678901234567890');

big + 1n       // 9007199254740992n (정확!)
big * 2n       // 18014398509481982n

// BigInt 와 Number 는 섞을 수 없음
big + 1        // ❌ TypeError
Number(big)    // 변환 (정밀도 손실 가능)

자세히: [[JS BigInt]]

형변환

Number('42')              // 42
Number('42.5')            // 42.5
Number('')                // 0
Number(' ')               // 0
Number('hello')           // NaN
Number(null)              // 0
Number(undefined)         // NaN
Number(true)              // 1
Number(false)             // 0
Number([])                // 0
Number([1])               // 1
Number([1, 2])            // NaN

parseInt('42px')          // 42 (관대)
parseFloat('3.14em')      // 3.14
parseInt('hello')         // NaN
parseInt('10', 2)         // 2 (binary)

정수 검사

Number.isInteger(42)         // true
Number.isInteger(42.0)       // true (값이 정수면)
Number.isInteger(42.5)       // false
Number.isInteger('42')       // false (string)
Number.isSafeInteger(2**53)  // false (안전 범위 초과)

진법 변환

(255).toString(16)       // 'ff'
(255).toString(2)         // '11111111'
parseInt('ff', 16)        // 255
parseInt('11111111', 2)   // 255

0xff                      // 255 (16진 리터럴)
0b11111111                // 255 (2진)
0o777                     // 511 (8진, ES6)

포맷팅

(1234567.89).toLocaleString()                      // '1,234,567.89'
(1234567.89).toLocaleString('de-DE')               // '1.234.567,89'
(1234567.89).toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })
// '₩1,234,568'

(0.1234).toFixed(2)        // '0.12' (string)
(0.1234).toPrecision(3)    // '0.123'

Math

Math.PI                  // 3.141592...
Math.E                   // 2.718...
Math.abs(-5)             // 5
Math.round(0.5)          // 1
Math.floor(0.9)          // 0
Math.ceil(0.1)           // 1
Math.trunc(-1.9)         // -1 (정수부만)
Math.sign(-3)            // -1
Math.max(1, 2, 3)        // 3
Math.min(...arr)         // spread 활용
Math.random()            // 0 <= x < 1
Math.pow(2, 10)          // 1024 (또는 2**10)
Math.sqrt(16)            // 4
Math.log(Math.E)         // 1
Math.log2(8)             // 3
Math.log10(1000)         // 3

실전 패턴

범위 내 랜덤 정수

function randInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

안전한 파싱

function parseNumber(str, fallback = 0) {
    const n = Number(str);
    return isFinite(n) ? n : fallback;
}

parseNumber('3.14')     // 3.14
parseNumber('hello')    // 0 (fallback)
parseNumber('')         // 0 (fallback 아님, Number('') === 0)

반올림 정확도 확보

// toFixed 는 string 반환, 부동소수점 오차 있음
(1.005).toFixed(2)   // '1.00' (예상: '1.01')

// 더 정확한 반올림
function round(n, digits) {
    const factor = 10 ** digits;
    return Math.round(n * factor) / factor;
}

함정

[!WARNING] 다음 함정들은 실제 운영 환경에서 자주 발생합니다.

1. 0 의 양수/음수

0 === -0              // true
1 / 0                  // Infinity
1 / -0                 // -Infinity
Object.is(0, -0)       // false (구분)

2. parseInt 의 radix

parseInt('010')         // 10 (modern), 8 (legacy)
parseInt('010', 10)     // 10 (명시 권장)

3. 큰 정수의 손실

const id = 12345678901234567;
console.log(id);    // 12345678901234568 (마지막 자리 변형)
// 큰 ID 는 string 또는 BigInt 로

4. 암묵적 형변환

'5' - 3   // 2 (문자열이 숫자로 변환)
'5' + 3   // '53' (숫자가 문자열로 변환)
true + 1  // 2

타입 명시 변환 (Number(...), parseInt(...)) 을 권장합니다.

5. toFixed 는 문자열 반환

typeof (1.23).toFixed(2)   // 'string', '1.23'
// 연산에 쓰려면 Number 변환 필요
Number((1.23).toFixed(2))  // 1.23

[JavaScript] requestAnimationFrame: 브라우저 애니메이션 루프

koa (김신건) — Tue, 14 Jul 2026 00:00:00 GMT

정의

requestAnimationFrame (rAF) 은 브라우저에게 다음 리페인트 직전에 콜백을 실행해달라고 요청합니다. 60Hz 모니터 기준 약 16.67ms 주기.

브라우저 렌더 파이프라인

브라우저는 한 프레임을 아래 순서로 처리합니다. rAF 콜백은 Style/Layout 계산 직전 JavaScript 실행 단계에 위치합니다.

flowchart LR
    A["Input 이벤트"] --> B["JS + rAF 콜백"]
    B --> C["Style 계산"]
    C --> D["Layout 리플로우"]
    D --> E["Paint 레스터화"]
    E --> F["Composite 합성"]
    F --> G["VSync 화면 출력"]

이 위치 덕분에 rAF 콜백에서 DOM 을 조작하면 같은 프레임 안에서 렌더링 결과에 반영됩니다.

[!IMPORTANT] rAF 콜백 안에서 DOM 레이아웃을 읽은 뒤 쓰기 를 반복하면 강제 리플로우 (Forced Reflow) 가 발생합니다. 읽기를 먼저 모두 완료한 뒤 쓰기를 일괄 처리하세요.

VSync 와 주사율

VSync (수직 동기화) 신호에 맞춰 콜백이 호출됩니다. setTimeout(fn, 16) 은 고주사율 이점을 살리지 못하지만 rAF 는 모니터 주사율에 자동으로 맞춰집니다.

주사율	프레임 주기	용도
60Hz	~16.67ms	일반 모니터
90Hz	~11.11ms	VR 헤드셋
120Hz	~8.33ms	고급 폰, 모니터
144Hz	~6.94ms	게이밍 모니터

경과 시간 기반으로 계산해야 주사율이 달라져도 같은 속도를 유지합니다.

let prevTime = 0;

function animate(timestamp) {
    const delta = timestamp - prevTime; // ms 단위 경과
    prevTime = timestamp;

    position += speed * (delta / 1000); // px/s 단위로 계산
    el.style.transform = `translateX(${position}px)`;

    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

이벤트 루프 내 위치

setTimeout 콜백은 매크로태스크 큐로 들어가지만 rAF 콜백은 렌더링 단계 직전 별도 큐에서 처리됩니다.

flowchart TD
    A["이벤트 루프 틱 시작"] --> B["매크로태스크 하나 처리"]
    B --> C["마이크로태스크 큐 소진"]
    C --> D["렌더링 필요 여부 확인"]
    D --> E["rAF 큐 콜백 실행"]
    E --> F["Style, Layout, Paint, Composite"]
    F --> G["VSync 신호 대기"]
    G --> A

왜 setTimeout 이 아닌가

주사율에 자동 맞춤: 120Hz 화면에서는 8ms 주기, 절전 모드에서는 늦춰짐
탭 비활성 시 정지: 백그라운드 탭에서 안 돎, CPU 절약
동기화: 브라우저 렌더링 파이프라인과 정렬됨

setTimeout(fn, 16) 을 쓰면 렌더 사이클과 정렬이 안 되어 프레임 드랍이 생기고, 백그라운드 탭에서도 계속 실행됩니다.

기본 사용

let start;

function animate(timestamp) {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;

    ball.style.left = elapsed * 0.1 + 'px';

    if (elapsed < 3000) requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

콜백에 전달되는 timestamp 는 performance.now() 와 동일한 고해상도 타임스탬프 (ms, 소수점 포함).

취소

const handle = requestAnimationFrame(animate);
cancelAnimationFrame(handle);

컴포넌트 언마운트 시 또는 애니메이션 조건이 해제될 때 반드시 취소해야 합니다. 누락 시 메모리 누수와 불필요한 계산이 지속됩니다.

// React 예시
useEffect(() => {
    let rafId;
    const loop = (ts) => {
        update(ts);
        rafId = requestAnimationFrame(loop);
    };
    rafId = requestAnimationFrame(loop);

    return () => cancelAnimationFrame(rafId); // cleanup 필수
}, []);

실전 예시

Spring 애니메이션

물리 기반 스프링 효과. delta 기반으로 계산해 주사율 독립.

function createSpring({ stiffness = 0.1, damping = 0.8 } = {}) {
    let pos = 0, vel = 0, target = 0;
    let rafId, prevTime = performance.now();

    const tick = (now) => {
        const dt = Math.min((now - prevTime) / 1000, 0.05);
        prevTime = now;

        vel += (target - pos) * stiffness;
        vel *= damping;
        pos += vel;
        return pos;
    };

    return {
        setTarget(t) { target = t; },
        start(onUpdate) {
            const loop = (ts) => {
                onUpdate(tick(ts));
                rafId = requestAnimationFrame(loop);
            };
            rafId = requestAnimationFrame(loop);
        },
        stop() { cancelAnimationFrame(rafId); },
    };
}

게임 루프 (fixed timestep)

물리 업데이트는 고정 시간 단위, 렌더링은 매 프레임.

const FIXED_DT = 1000 / 60;
let accumulator = 0, lastTime = performance.now();

function gameLoop(timestamp) {
    const elapsed = Math.min(timestamp - lastTime, 100); // 스파이크 방지
    lastTime = timestamp;
    accumulator += elapsed;

    while (accumulator >= FIXED_DT) {
        updatePhysics(FIXED_DT / 1000); // 초 단위로 변환
        accumulator -= FIXED_DT;
    }

    const alpha = accumulator / FIXED_DT; // 보간 비율
    render(alpha);
    requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

부드러운 스크롤

function smoothScrollTo(target) {
    const start = window.scrollY;
    const dist = target - start;
    let startTime = null;
    const duration = 600;

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / duration, 1);
        const ease = 1 - Math.pow(1 - progress, 3); // ease-out cubic

        window.scrollTo(0, start + dist * ease);
        if (progress < 1) requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
}

requestIdleCallback 비교

API	실행 시점	용도
`requestAnimationFrame`	다음 리페인트 직전	시각적 업데이트, 애니메이션
`requestIdleCallback`	브라우저 유휴 시간	낮은 우선순위 백그라운드 작업

// rAF: 매 프레임 시각적 업데이트
requestAnimationFrame(() => {
    el.style.opacity = '1';
});

// rIC: 여유 시간에 분석, 캐싱 등
requestIdleCallback((deadline) => {
    while (deadline.timeRemaining() > 0 && tasks.length) {
        tasks.shift()();
    }
}, { timeout: 2000 });

성능 / 함정

강제 리플로우 (Layout Thrashing)

// ❌ 읽기/쓰기 교대 → 매번 Layout 재계산
elements.forEach(el => {
    const h = el.offsetHeight;        // Layout 유발
    el.style.height = h * 2 + 'px';  // 무효화, 다음 읽기에 재계산
});

// ✅ 읽기 먼저, 쓰기 나중에 일괄 처리
const heights = elements.map(el => el.offsetHeight); // 한 번만 Layout
elements.forEach((el, i) => {
    el.style.height = heights[i] * 2 + 'px';
});

CSS 애니메이션 vs rAF 선택 기준

transform, opacity 만 변경하는 경우: CSS 트랜지션이 Compositor Thread 에서 실행되어 메인 스레드 없이 60fps 보장.

.card {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform; /* GPU 레이어 미리 생성 */
}

rAF 는 물리 시뮬레이션, 값 보간처럼 프레임마다 동적으로 계산이 필요한 경우에 적합합니다.

함정 목록

콜백 내 무거운 연산 금지: 16ms 초과 시 프레임 드랍
첫 프레임 지연: 첫 rAF 콜백은 다음 프레임까지 대기 (수 ms)
탭 재활성 시 큰 delta: 탭이 돌아올 때 시간이 크게 튀므로 Math.min 으로 cap 필요
취소 누락: React/Vue 환경에서 cleanup 에서 cancelAnimationFrame 반드시 호출
CSS 애니메이션이 더 효율적: 순수 transform/opacity 는 CSS 로
setTimeout 이 필요한 경우: 정확한 인터벌이 필요할 때 (게임 서버 sync 등)

[Javascript] setTimeout

koa (김신건) — Tue, 14 Jul 2026 00:00:00 GMT

정의

setTimeout(callback, delay, ...args) 은 호스트 환경 (브라우저 또는 Node.js) 이 제공하는 타이머 API. 지정한 delay 밀리초가 지난 뒤 callback 을 [[이벤트 루프]] 의 매크로태스크 큐에 등록한다.

자세한 흐름과 함정은 [[비동기와 타이밍, 콜백부터 async/await까지의 발전사]] 글 참고.

이벤트 루프 내 위치

setTimeout 콜백은 매크로태스크 큐로 들어갑니다. 마이크로태스크보다 우선순위가 낮습니다.

flowchart TD
    A["이벤트 루프 틱"] --> B["매크로태스크 하나 실행"]
    B --> C["마이크로태스크 큐 모두 소진"]
    C --> D["렌더링 처리"]
    D --> E["다음 매크로태스크 대기"]
    E --> A

    F["setTimeout 콜백"] -->|"delay 경과 후"| G["매크로태스크 큐 추가"]
    G --> B

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 출력 순서: 1, 4, 3, 2
// 이유: 동기 → 마이크로태스크 → 매크로태스크

문법

const id = setTimeout(callback, delay, arg1, arg2, ...);
clearTimeout(id); // 취소

인자	의미
`callback`	시간이 지나면 호출될 함수
`delay`	최소 지연 시간 (밀리초). 기본 0
`arg1, arg2, ...`	`callback` 에 전달할 추가 인자

반환값은 타이머 ID (브라우저는 정수, Node.js 는 객체). clearTimeout(id) 로 취소.

기본 사용

console.log('A');
setTimeout(() => {
  console.log('B');
}, 1000);
console.log('C');
// 출력: A, C, (1초 뒤) B

setTimeout 호출은 즉시 반환되고 다음 줄로 진행한다. 콜백은 1초 후 큐에 등록되고, 콜 스택이 비어있을 때 실행된다.

핵심 함정

”최소” 지연이라는 의미

delay 는 정확한 시각이 아니라 최소 시간. 콜 스택이 무거우면 더 늦게 실행된다.

setTimeout(() => console.log('B'), 100);

const start = Date.now();
while (Date.now() - start < 500) {} // 0.5초 동안 콜 스택 점유

// → 100ms 가 지났어도 콜 스택이 비어야 B 가 실행된다 (>=500ms)

setTimeout(fn, 0) 은 즉시가 아니다

0 을 줘도 즉시 실행되지 않는다. 동기 코드와 마이크로태스크 큐가 먼저 비워진 뒤에야 실행된다.

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 출력: 1, 4, 3, 2

이유: setTimeout 콜백은 [[이벤트 루프]] 의 매크로태스크 큐로, Promise.then 콜백은 [[Microtask Queue]] 로 들어간다. 마이크로 큐가 먼저 비워진다.

4ms 최소 지연 (중첩 5회 이상)

HTML 명세 (§8.1.7.4) 는 중첩 5회 이상 의 setTimeout 에 대해 최소 4ms 지연을 강제한다. 모든 주류 브라우저가 따른다.

setTimeout(() => {
  setTimeout(() => {
    setTimeout(() => {
      setTimeout(() => {
        setTimeout(() => {
          // 이 콜백부터 최소 4ms 지연이 자동으로 깔린다
        }, 0);
      }, 0);
    }, 0);
  }, 0);
}, 0);

브라우저 탭이 백그라운드면 보통 최소 1초로 throttle.

드리프트와 setInterval 비교

flowchart LR
    A["setInterval 호출"] --> B["1000ms 후 콜백 실행"]
    B --> C["콜백 실행 시간 100ms"]
    C --> D["900ms 후 다음 콜백"]

    E["setTimeout 재호출"] --> F["1000ms 후 콜백 실행"]
    F --> G["콜백 실행 시간 100ms"]
    G --> H["콜백 끝난 뒤 1000ms 후"]

setInterval 은 콜백 실행 시간에 관계없이 고정 인터벌로 큐에 추가합니다. 콜백이 인터벌보다 오래 걸리면 드리프트가 발생합니다.

// setInterval 드리프트 발생
setInterval(() => {
    doHeavyWork(); // 인터벌보다 오래 걸리면 큐가 쌓임
}, 1000);

// setTimeout 재호출: 드리프트 없음
function poll() {
    doHeavyWork();
    setTimeout(poll, 1000); // 작업 끝난 뒤 다음 호출 예약
}
poll();

[!WARNING] setInterval 콜백이 인터벌보다 오래 걸리면 콜백이 큐에 누적됩니다. 긴 작업에는 setTimeout 재귀 호출이 안전합니다.

requestAnimationFrame 과 비교

특성	`setTimeout`	`requestAnimationFrame`
실행 시점	매크로태스크 큐	렌더 직전
주사율 맞춤	없음	자동
탭 비활성 시	계속 실행 (throttle 됨)	정지
용도	타이머, 지연 실행	애니메이션

// 애니메이션에 setTimeout 쓰면 안 되는 이유
let pos = 0;
setInterval(() => {
    pos += 5;
    el.style.left = pos + 'px';
}, 16); // 렌더와 동기화 안 됨 → 티어링

// rAF 로 렌더와 동기화
function animate(ts) {
    pos += 5;
    el.style.left = pos + 'px';
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

자주 쓰이는 패턴

1. UI 양보 (yielding)

무거운 동기 작업을 잘게 쪼개 렌더링과 사용자 입력에 양보.

function processInChunks(items, processor) {
  let i = 0;
  function next() {
    const start = Date.now();
    while (i < items.length && Date.now() - start < 50) {
      processor(items[i++]);
    }
    if (i < items.length) {
      setTimeout(next, 0); // 50ms 마다 양보
    }
  }
  next();
}

2. 디바운스

마지막 호출 후 일정 시간이 지나야 실행.

function debounce(fn, ms) {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
}

const onResize = debounce(() => render(), 200);
window.addEventListener('resize', onResize);

3. 폴링 (Polling)

setInterval 대신 setTimeout 재호출로 큐 적체 방지.

function poll() {
  doWork();
  setTimeout(poll, 1000); // 작업 끝난 뒤 다음 호출 예약
}
poll();

4. Node.js 의 Promise 기반 setTimeout

Node 16+ 부터 node:timers/promises 모듈로 await 가능.


await setTimeout(1000);
console.log('1초 뒤');

// AbortController 로 취소 가능
const controller = new AbortController();
setTimeout(5000, undefined, { signal: controller.signal });

5. 쓰로틀 (Throttle)

지정한 시간 동안 최대 한 번만 실행.

function throttle(fn, ms) {
    let pending = false;
    return (...args) => {
        if (pending) return;
        pending = true;
        fn(...args);
        setTimeout(() => { pending = false; }, ms);
    };
}

const onScroll = throttle(() => updateHeader(), 100);
window.addEventListener('scroll', onScroll);

clearTimeout

타이머가 만료되기 전에 취소.

const id = setTimeout(() => console.log('실행 안 됨'), 1000);
clearTimeout(id);
// → 콜백이 큐에 들어가지 않는다

이미 큐에 들어간 콜백은 취소되지 않는다 (브라우저 구현에 따라 다름).

성능 주의사항

// ❌ 클로저로 인한 메모리 누수
function leaky() {
    const bigData = new Array(1e6).fill('x');
    setTimeout(() => {
        console.log(bigData.length); // bigData 가 1초간 살아있음
    }, 1000);
}

// ✅ 필요한 값만 추출
function clean() {
    const bigData = new Array(1e6).fill('x');
    const len = bigData.length;
    setTimeout(() => console.log(len), 1000); // bigData 가비지 컬렉션 가능
}

참고

[[setInterval]]
[[이벤트 루프]]
[[Microtask Queue]]
[[js-request-animation-frame|requestAnimationFrame]]
[[비동기와 타이밍, 콜백부터 async/await까지의 발전사]]

[JavaScript] Bun (Runtime + Bundler)

koa (김신건) — Tue, 07 Jul 2026 00:00:00 GMT

정의

Bun 은 Jarred Sumner 가 2022년 발표한 JavaScript/TypeScript 런타임 + 번들러 + 패키지 매니저 + 테스트 러너 통합 도구입니다. Zig 로 작성되어 Node.js/npm 대비 압도적 성능.

한 줄 요약: Node + npm + Webpack + Jest 를 하나의 초고속 도구로.

구성 요소

Bun 은 여러 도구를 하나로:

bun 런타임: Node.js 대체
bun install: npm/yarn/pnpm 대체
bun run: node 실행
bun test: Jest 대체
bun build / Bun.build(): 번들러
bunx: npx 대체

왜 Zig 인가

Rust 보다 러닝커브 낮음
C 와 상호운용 우수
컴파일 시간 빠름
저수준 제어 (JavaScriptCore 통합)

Node 가 V8 + libuv + C++ 인 것과 대비되게, Bun 은 JavaScriptCore (Safari) + Zig 조합.

번들러 사용

CLI

bun build ./src/index.ts \
  --outdir=dist \
  --minify \
  --sourcemap \
  --target=browser

API

await Bun.build({
  entrypoints: ['./src/index.ts'],
  outdir: './dist',
  minify: true,
  sourcemap: 'external',
  target: 'browser',
  format: 'esm',
  external: ['react'],
  plugins: [/* ... */],
});

특징

TypeScript 네이티브

.ts 를 별도 설치 없이 실행/번들:

bun run src/main.ts   # 그냥 됨

esbuild/SWC 처럼 type check 는 X (bun tsc --noEmit 별도).

JSX 네이티브

.tsx, .jsx 즉시 지원. React/Preact/Solid 등.

CSS 지원

CSS import 기본 지원. PostCSS 는 plugin 필요.

Dead Code Elimination + Tree Shaking

ESM 기반, esbuild 급.

Import Attributes

패키지 매니저 (`bun install`)

node_modules 관리:

속도: npm 대비 20-30x, pnpm 대비 2-3x
호환: package.json 표준
Lockfile: bun.lock (텍스트 형식)
Workspace: 모노레포 지원

bun install
bun add react
bun add -d typescript
bun remove react

런타임

Node.js 호환

대부분 Node.js API 지원. 몇몇 예외 (worker_threads 부분 지원, 일부 native module).

Bun 자체 API

// HTTP 서버 (Express 없이)
Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response('Hello');
  },
});

// 파일 IO
const file = Bun.file('./data.json');
const json = await file.json();

// 파일 쓰기
await Bun.write('./out.txt', 'content');

// SQLite (bundled)

const db = new Database('mydb.sqlite');

성능

HTTP throughput: Node 대비 3-4x
Startup time: 매우 빠름
Memory usage: 낮음

번들러 vs esbuild

공통점:

ESM 기반 tree shaking
TypeScript/JSX 즉시
초고속

차이점:

Bun 은 통합 스택 (런타임 + 매니저 + 테스트 + 번들러)
esbuild 는 순수 번들러/트랜스파일러

사용 사례

1. Node.js 앱 대체

bun install
bun run src/server.ts

Node → Bun 전환. 대부분 앱 즉시 작동.

2. TypeScript 스크립트

bun run scripts/generate.ts   # tsx, ts-node 대체

3. 모노레포

// package.json
{
  "workspaces": ["packages/*"]
}

bun install 이 워크스페이스 링크 관리.

4. 라이브러리 빌드

{
  "scripts": {
    "build": "bun build ./src/index.ts --outdir=dist --format=esm --external=*"
  }
}

Rollup/tsup 대체.

5. 테스트

bun test

Jest 호환 API (일부).

프로덕션 사용

적합:

새 프로젝트
Node 앱 (서버, CLI, 스크립트)
모노레포
CI 스크립트

주의:

일부 Node.js API 미지원 (특히 legacy)
Native module (.node 파일) 호환성 이슈
아직 Node 만큼 배포 검증 축적 안 됨
Jest snapshot 등 일부 테스트 도구 이관 필요

함정

[!WARNING] Node 호환 100% 아님. 프로덕션 이관 전 앱 실행 검증 필수.

[!CAUTION] Type check 별도. bun run tsc --noEmit 을 CI 에.

[!WARNING] 일부 npm 패키지 호환 안 됨. 특히 native binding.

[!IMPORTANT] Bun lockfile 은 텍스트 (bun.lock, v1.1+) 이라 git diff 가능. 이전 바이너리 bun.lockb 는 마이그레이션.

[!CAUTION] AWS Lambda 등 서버리스. 공식 Bun runtime 지원 없으면 컨테이너 이미지 배포.

[JavaScript] Bundling (번들링 개요)

koa (김신건) — Tue, 07 Jul 2026 00:00:00 GMT

정의

JavaScript 번들링 (Bundling) 은 여러 소스 파일 (JS, CSS, 이미지, JSON 등) 을 브라우저나 런타임이 효율적으로 실행할 수 있는 최소한의 결과물 로 결합/변환하는 과정입니다.

왜 필요한가:

브라우저는 수천 개 JS 파일을 요청하면 느림 (HTTP 오버헤드)
CJS/ESM 모듈을 브라우저가 이해 못 하거나 (구형), 최적화 필요 (신형)
TypeScript, JSX, Sass 등 컴파일 필요
미사용 코드 제거 (tree shaking)
압축 (minification)

번들러의 역할

flowchart LR
  E[Entry: src/main.ts] --> P[Parse & Analyze]
  P --> DG[Dependency Graph]
  DG --> T[Transform<br/>TS/JSX/CSS]
  T --> TS[Tree Shake<br/>unused code]
  TS --> S[Split<br/>chunks]
  S --> M[Minify]
  M --> O[Output<br/>dist/*.js]

Entry 분석: main 파일부터 시작
Dependency Graph 구축: import/require 재귀 순회
Transform: TS/JSX/PostCSS 등 각 loader/plugin 실행
Tree Shake: 정적 분석으로 미사용 export 제거
Code Split: 큰 앱을 여러 chunk 로 (lazy loading)
Minify: 공백/변수명 축소
Output: dist/ 에 최종 파일

핵심 개념

Tree Shaking

정적 분석으로 import 되지 않은 코드 제거.

// utils.js
export function used() { }
export function unused() { }

// main.js

used();

// bundled: unused() 는 제거됨

전제:

ESM 문법 (import/export 는 top-level 정적)
Side-effect 없음 (package.json 의 sideEffects: false 힌트)

Code Splitting

큰 번들을 여러 조각 (chunk) 로.

// Dynamic import
const HeavyModule = await import('./heavy');

이는 별도 chunk 로 분리 → 사용자가 실제 필요할 때만 로드.

Vendor split: node_modules 를 별도 chunk (browser cache 활용).

Hot Module Replacement (HMR)

개발 중 파일 저장 시 페이지 새로고침 없이 변경된 모듈만 교체. 컴포넌트 상태 유지.

Vite, Webpack Dev Server, Turbopack 등.

Source Map

Bundled/minified 코드를 원본 소스와 매핑. 브라우저 dev tools 에서 원본 볼 수 있음.

//# sourceMappingURL=main.js.map

주의: 프로덕션 source map 배포 여부는 논쟁 (디버깅 편의 vs 소스 유출).

두 세대의 번들러

1세대 (2015-2021): “번들 우선” 시대

브라우저가 ESM 미지원 → 번들이 필수.

Webpack (2014): 방대한 생태계, 무거움
Rollup (2015): 라이브러리 특화, tree shaking 강함
Parcel (2017): Zero-config
Browserify (2010): CJS 브라우저화 (legacy)

이 시대의 관용: 개발 시에도 번들 (webpack-dev-server 등).

2세대 (2021+): “Native ESM 개발” 시대

브라우저가 ESM 지원 (all evergreen). 개발 서버는 번들 없이 브라우저에게 native ESM 직접 전달. 프로덕션 빌드만 번들.

Vite (2021): ESM dev server + Rollup 프로덕션 빌드
esbuild (2020): Go, 초고속
Turbopack (2022): Rust, Next.js 특화
Rspack (2023): Rust, Webpack 호환 API
Rolldown (2024, beta): Rust, Rollup 호환 (Vite 6+ 프로덕션 백엔드)
Bun bundler (2023): Bun 런타임 통합

성능 축

번들러 성능은 세 축.

1. Cold start (dev server 시작)

Vite: ESM 직접 서빙 → 즉시
esbuild: 매우 빠름
Webpack: 대규모 앱은 초 단위 ~ 분 단위

2. HMR (파일 저장 → 브라우저 갱신)

Vite: 밀리초
Turbopack: 밀리초 (대규모 앱에서 특히 빠름)
Webpack: 대규모 앱은 초 단위

3. 프로덕션 빌드

esbuild: 매우 빠름 (Go)
Rspack/Rolldown/Turbopack: 빠름 (Rust)
Webpack: 느림 (JS)

언어 선택 (Go/Rust vs JS)

번들러 자체 구현 언어가 성능 좌우:

JavaScript: Webpack, Rollup. 단일 스레드 한계.
Go: esbuild. 병렬성 우수, 컴파일 언어 속도.
Rust: SWC, Turbopack, Rspack, Rolldown, Biome. Go 보다 조금 더 빠르고 wasm 배포.

2024-2026 은 Rust 번들러의 시대. Vite 도 Rolldown 으로 백엔드 이전.

관용 스택 (2026)

앱 개발 (Next.js/React/Vue/Svelte)

Vite: 대부분 프레임워크 기본 (React, Vue, Svelte, Astro, Solid)
Next.js: Turbopack (dev) + Webpack (prod, 이관 중) or Turbopack full
Nuxt: Vite
Angular: esbuild + Angular CLI

라이브러리 배포

tsup: esbuild 위에 얹은 zero-config TS 라이브러리 도구
Rollup: 전통적, 여전히 강력
Rolldown: Rollup 후계 (2025+ beta)
unbuild: tsup 유사, Nuxt 팀

모노레포

Turborepo, Nx: 빌드 오케스트레이션 (번들러 위 layer)
Rush.js, pnpm workspaces

서버 사이드

Bun: 자체 번들러 (매우 빠름)
Node + tsx: dev
esbuild dev 통합

실전 선택 기준

상황	권장
새 React/Vue/Svelte 앱	Vite
Next.js	Turbopack (2025+)
Angular	Angular CLI (esbuild)
TypeScript 라이브러리	tsup or unbuild
성숙 웹팩 앱	Rspack (마이그레이션 저비용)
초경량 빌드만	esbuild
라이브러리, ESM+CJS dual	Rollup or Rolldown
Bun 런타임	Bun bundler

Loader / Plugin 시스템

번들러는 확장 가능:

Webpack: loader (babel-loader, css-loader, ts-loader) + plugin
Vite: plugin (Rollup 호환)
Rollup: plugin
esbuild: plugin (제한적)

각 파일 유형 (TS, CSS, 이미지, SVG) 을 어떻게 처리할지 정의.

브라우저 native ESM 만으로 충분?

개발 시: 예. Vite 가 증명.

프로덕션: 아직 번들이 유리:

HTTP/2 개선에도 수백 개 파일 요청 오버헤드
Tree shaking, minification, 상수 folding
Legacy 브라우저 대응 (드물지만)

미래: HTTP/3 + Import Maps 조합으로 번들 필요성 감소 예상. 아직 시기상조.

함정

[!WARNING] 번들러 선택은 오래 유지. Webpack → Vite 는 큰 리팩터. 초기 선택 신중.

[!CAUTION] CommonJS dependency. 라이브러리 중 CJS-only 있으면 번들러가 처리 (interop). 종종 tree shake 못 함.

[!WARNING] sideEffects: false 잘못 표시 하면 실제 side effect (polyfill import 등) 제거되어 런타임 오류.

[!IMPORTANT] Source map 프로덕션 배포. 유용하지만 소스 노출. hidden-source-map 으로 Sentry 등에만 업로드.

[!CAUTION] 번들 크기 관리. Bundle analyzer (webpack-bundle-analyzer, rollup-plugin-visualizer) 로 정기 감사.

[JavaScript] CommonJS vs ESM (package.json 설정 완전 정복)

koa (김신건) — Tue, 07 Jul 2026 00:00:00 GMT

정의

JavaScript 는 두 개의 서로 다른 모듈 시스템 을 가집니다.

CommonJS (CJS): Node.js 초기 (2009) 부터 사용. require() / module.exports. 동기 로딩.
ECMAScript Modules (ESM): 2015 (ES2015) 언어 표준. import / export. 정적 분석 가능, 비동기 로딩.

이 이중 체제가 Node.js 생태계의 가장 큰 파편화 원인. 라이브러리 저자와 소비자 모두 이 문제를 이해해야 합니다.

핵심 문법 비교

CommonJS

// math.cjs
function add(a, b) { return a + b; }
module.exports = { add };
// 또는
module.exports.add = add;
exports.add = add;   // 축약 (exports = module.exports 초기값)

// main.cjs
const { add } = require('./math.cjs');
const math = require('./math.cjs');
console.log(add(1, 2));

ESM

// math.mjs
export function add(a, b) { return a + b; }
export default { add };

// main.mjs



console.log(add(1, 2));

근본 차이

축	CommonJS	ESM
로딩	동기 (blocking)	비동기 (top-level await 가능)
평가 시점	`require()` 호출 시	파싱 시 미리 분석, 실행은 나중
정적 분석	어려움 (동적 `require`)	강함 (import/export 는 top-level 만)
Tree shaking	어려움	자연스러움
Circular import	부분 export	strict, undefined 참조 가능
`this` 값	`module.exports`	`undefined`
파일 확장자	`.cjs`, `.js` (기본)	`.mjs`, `.js` (with `type: module`)
__dirname	있음	없음 (import.meta.url 사용)
JSON import	`require('./x.json')`	`import x from './x.json' assert { type: 'json' }`
Conditional load	`if (x) require(...)`	정적, 조건부는 `await import()`

package.json 설정

이 곳이 CJS/ESM 지옥의 중심.

`type` 필드

{ "type": "module" }

"type": "module": 이 패키지의 .js 파일은 ESM 으로 해석. .cjs 는 CJS.
"type": "commonjs" (또는 없음): .js 는 CJS (Node.js 기본). .mjs 는 ESM.

규칙:

.mjs → 항상 ESM (type 무관)
.cjs → 항상 CJS
.js → type 필드에 따라

`main` (legacy)

{ "main": "./dist/index.js" }

단일 진입점. 옛 관용. require(pkg) 시 이 파일. Dual package 를 못 만듦.

`exports` (모던, 권장)

{
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./utils": {
      "import": "./dist/utils.mjs",
      "require": "./dist/utils.cjs"
    },
    "./package.json": "./package.json"
  }
}

Conditional exports:

import: ESM 로더가 사용
require: CJS 로더가 사용
types: TypeScript
node, browser, default: 환경별
development, production: NODE_ENV 기반

Encapsulation: exports 명시된 것만 소비자가 import 가능. 내부 파일 접근 차단 (private).

`imports` (내부 alias)

{
  "imports": {
    "#config": "./src/config/index.js",
    "#utils/*": "./src/utils/*.js"
  }
}

패키지 안에서 import config from '#config' 사용. Deep relative path 회피.

기타 필드

module: 번들러 힌트 (ESM 파일). Webpack/Rollup 이 우선 참조.
browser: 브라우저용 대체 진입점.
types / typings: TypeScript 선언.
sideEffects: false: Tree shaking 힌트.

실전 패턴

1. Pure ESM 라이브러리 (권장 for 신규)

{
  "type": "module",
  "exports": {
    ".": "./dist/index.js",
    "./package.json": "./package.json"
  }
}

결과: 소비자가 ESM 이어야 함. CJS 프로젝트는 await import() 로만 사용 가능 (Node 22.12 이전).

2. Dual Package (CJS + ESM)

{
  "type": "module",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  }
}

결과: 양쪽 다 지원. 하지만 dual package hazard (아래 참조).

3. Pure CJS (legacy)

{
  "type": "commonjs",
  "main": "./dist/index.js"
}

여전히 유효. 하위 호환 우선.

흔한 에러

`ERR_REQUIRE_ESM`

Node 22.12 이전: CJS 파일에서 ESM 을 require() 시 오류.

// CJS 파일에서
const chalk = require('chalk'); // chalk v5+ 는 ESM only
// Error [ERR_REQUIRE_ESM]: require() of ES Module ... not supported

해결:

Node 22.12+: require(esm) 지원 (실험적 → stable). 그냥 됩니다.
이전: 프로젝트를 ESM 으로 변경 ("type": "module") 또는 await import() 사용.

`ERR_UNKNOWN_FILE_EXTENSION`

TypeScript 의 .ts 파일을 ESM 로더가 처리 못 함. tsx, ts-node/esm, --loader 등 필요.

`__dirname is not defined`

ESM 은 __dirname, __filename, require, module, exports 미제공.

대체:

// ESM 에서 __dirname 흉내


const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

Node 20.11+ 는 import.meta.dirname, import.meta.filename 직접 제공.

Circular Dependency

CJS: 순환 시 이미 evaluate 된 부분만 export (partial). 나머지 undefined.
ESM: 정적 분석 후 실행. Live binding 이라 어느 순간에는 값이 존재하지만, 접근 순서 이슈 발생 가능.

해결: 순환 자체를 refactor. forwardRef 스타일 지연 참조.

`dual package hazard`

한 앱에서 라이브러리의 CJS 버전과 ESM 버전이 동시에 로드. 클래스 instanceof 실패, 싱글턴 두 번 초기화, 상태 불일치.

방어:

라이브러리를 pure ESM 으로 유지 (dual 회피)
또는 상태 없음 확인 (pure function 만)
Client 에게 명확히 안내

`top-level await` in CJS

// CJS 에서
const data = await fetch(...);  // SyntaxError

CJS 는 top-level await 지원 X. ESM 만 가능.

Node 22.12+ `require(esm)` 지원

2024년 말 stable. CJS 파일에서 ESM 을 require() 가능:

const chalk = require('chalk');  // chalk v5 ESM ← 이제 됩니다

주의:

ESM 안에 top-level await 있으면 여전히 실패
ESM 이 다른 ESM 을 동기적으로 로드 못 하는 케이스는 실패
라이브러리 저자 = 여전히 dual 배포 고려 (하위 Node 지원)

TypeScript 와의 관계

tsconfig.json 의 module + moduleResolution 이 관건. 자세한 것은 [[ts-modules|TypeScript Modules]] 참조.

대표 조합:

Bundler: "module": "esnext", "moduleResolution": "bundler" (Vite/Next 등)
Node ESM: "module": "NodeNext", "moduleResolution": "NodeNext" + .js 확장자 명시
Legacy CJS: "module": "commonjs"

마이그레이션 전략

CJS → ESM

"type": "module" 추가
require → import
module.exports → export
__dirname 대체
.json import 는 assert
dependency 중 CJS-only 있으면 await import 나 upgrade
테스트 (Jest 는 ESM 지원 여전히 실험적, Vitest 로 이관 관용)

라이브러리는?

2026 관용:

새 라이브러리: pure ESM (Node 20+ target)
기존 라이브러리: dual 유지 (breaking change 최소화)
Node 22.12+ 보편화 이후 dual 부담 감소

함정

[!WARNING] .mjs 확장자 필수 케이스. type: "commonjs" 프로젝트 안에서 ESM 파일은 .mjs 로.

[!CAUTION] Jest + ESM. Jest 는 여전히 ESM 지원이 실험적. 새 프로젝트는 Vitest 권장.

[!WARNING] exports 지정 시 ./package.json 명시. 안 하면 소비자가 import('pkg/package.json') 못 함 (버전 확인 등).

[!IMPORTANT] CJS → ESM 이관 시 .js 파일들의 상대 경로 확장자. ESM 은 확장자 필수 (./util.js), 없으면 실패.

[!CAUTION] sideEffects: false 잘못 붙이면 tree shaking 이 필요한 코드 제거. 실제 side effect 있는 파일은 명시.

[JavaScript] esbuild

koa (김신건) — Tue, 07 Jul 2026 00:00:00 GMT

정의

esbuild 는 Evan Wallace (Figma CTO) 가 2020년 발표한 Go 로 작성된 JavaScript 번들러/컴파일러 입니다. 10-100배 빠른 성능으로 유명하며, 다른 도구들의 기반 (Vite dev, tsup, Angular CLI) 이 됩니다.

한 줄 요약: “가장 빠른 JS 빌드 도구”. 특히 TypeScript/JSX 변환 속도 압도적.

왜 이렇게 빠른가

Evan Wallace 의 블로그 FAQ 요약:

Go: 컴파일 언어 + 병렬성
Multi-core 병렬 파싱: 모든 CPU 활용
최소 문자열 할당: 파싱/생성 시 문자열 사본 최소화
소스맵 병렬 생성
TypeScript AST 자체 구현 (typescript 컴파일러 안 씀)
모든 것을 한 번에 (parse → transform → codegen 한 통과)

결과: 10만 라인 TS 앱을 100ms 안에 번들.

두 모드

Transformer (트랜스파일러)

한 파일씩 변환 (TS → JS, JSX → JS, ES2022 → ES2015):


const { code } = await transform(
  'const x: number = 5',
  { loader: 'ts', target: 'es2020' }
);

용도: dev server, jest transformer, watch mode.

Bundler

여러 파일을 하나로 (또는 여러 chunk 로):


await build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: true,
  sourcemap: true,
  target: 'es2020',
  format: 'esm',
});

지원 loaders

기본:

.ts, .tsx, .js, .jsx: JavaScript 변환
.json, .text, .base64, .dataurl, .file, .binary
.css: 기본 CSS 지원 (2023+)

Plugin 시스템 으로 확장:

Vue, Svelte SFC
MDX
SASS/LESS/PostCSS

Plugin API

Webpack loader 보다 간단:

const myPlugin = {
  name: 'my-plugin',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, args => ({
      path: args.path,
      namespace: 'env-ns',
    }));

    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json',
    }));
  },
};

성능 벤치마크

Sucrase, Babel, esbuild, swc 트랜스파일 비교 (표준 벤치, 조건마다 다름):

도구	상대 속도
esbuild	100x
swc	30x
sucrase	20x
babel	1x (baseline)

프로덕션 번들 (Webpack 대비):

도구	상대 속도
esbuild	100-200x
Rspack	20-50x
Webpack	1x

사용처 (다른 도구가 esbuild 를 활용)

Vite dev server: dep pre-bundle
Vite build (선택적): transform
tsup: TS 라이브러리 zero-config
Angular CLI (16+): dev + prod
SvelteKit dev
Next.js: 옛 minifier 이관 시 (Terser → SWC/esbuild)
Deno: 자체 통합

특징

Tree Shaking

ESM 기반 자동. sideEffects: false 힌트.

Code Splitting

Dynamic import 자동 chunk 분리. 하지만 Webpack/Vite/Rollup 만큼 세밀 X.

Minification

--minify. Terser 대비 몇 배 빠름, 결과물 크기는 약간 큼 (5-10%).

Source Maps

--sourcemap (external), --sourcemap=inline, --sourcemap=external.

esbuild 자체 한계

intentional 한계:

TypeScript type check X: 문법만 변환. tsc --noEmit 병행 필요.
일부 최신 CSS 기능 X
HMR X (Vite 가 얹음)
복잡한 code splitting X (SPA 특화 X)

이 한계 때문에 esbuild 는 종종 다른 도구의 기반 으로.

실전 사용

tsup (TS 라이브러리)

npm i -D tsup

{
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts"
  }
}

esbuild 위 wrapper. 라이브러리 빌드 최소 설정.

직접 사용 (CLI)

npx esbuild src/main.ts --bundle --outfile=dist/main.js --minify --target=es2020

Watch 모드

const ctx = await esbuild.context({
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/main.js',
});
await ctx.watch();

함정

[!WARNING] Type check 미포함. tsc --noEmit 을 CI 에서 별도 실행 필수.

[!CAUTION] Legacy target 제한. ES5 이하 target 은 미지원. IE 11 필요하면 Babel.

[!WARNING] CSS 처리는 기본만. PostCSS/SASS 는 plugin 필요.

[!IMPORTANT] Minify 결과물 크기. Terser 보다 5-10% 크지만, 속도 대가로 수용 가능.

[!CAUTION] Plugin API 는 다른 번들러와 다름. Vite/Rollup plugin 을 esbuild 에 못 쓰고 그 반대도.

[JavaScript] import / export

koa (김신건) — Tue, 07 Jul 2026 00:00:00 GMT

정의

import / export 는 ES2015 (ES6) 에서 도입된 정적 모듈 문법. 파일 간 값 (함수, 클래스, 상수) 공유의 표준 방법입니다.

CommonJS 의 require / module.exports 와 다른 근본 차이:

정적 분석 가능 (top-level 만)
비동기 로딩 지원
Tree shaking 자연스러움

자세한 차이는 [[js-cjs-vs-esm|CJS vs ESM]] 참조.

Export 문법

Named Export

여러 값을 이름으로 내보냄:

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Vector { /* ... */ }

// 또는 한 번에
const PI = 3.14159;
function add(a, b) { return a + b; }
class Vector { /* ... */ }
export { PI, add, Vector };

// 이름 변경 (rename)
export { add as sum };

Default Export

파일당 하나의 기본 export:

// user.js
export default class User {
  constructor(name) { this.name = name; }
}

// 또는
class User { /* ... */ }
export default User;

// 즉시 표현식
export default function() { return 42; }

주의: default export 는 하나만. Named 와 병존 가능.

Re-export (Barrel)

다른 모듈의 export 를 다시 내보냄:

// index.js (barrel)
export { add, sub } from './math.js';
export { default as User } from './user.js';
export * from './utils.js';
export * as api from './api.js';   // namespace re-export

주의: Barrel 파일은 tree-shaking 저해 가능. 큰 앱은 주의.

Import 문법

Named Import


add(1, 2);
console.log(PI);

// 이름 변경

sum(1, 2);

Default Import


const u = new User('Alice');

// Named 와 함께

Namespace Import

모든 export 를 하나의 객체로:


math.add(1, 2);
math.PI;

Side-Effect Import

값 없이 실행만:

용도: 폴리필, CSS/SCSS (번들러가 처리), auto-registration.

Dynamic Import

표현식 으로 import (조건부, 지연 로딩):

const module = await import('./heavy.js');
module.default();

// 조건부
if (userNeedsAdmin) {
  const { AdminPanel } = await import('./admin.js');
  new AdminPanel();
}

// 번들러가 code splitting
button.onclick = async () => {
  const { showDialog } = await import('./dialog.js');
  showDialog();
};

Promise 반환. top-level 이 아니어도 됨.

Import 규칙

Top-Level 만

정적 import 는 반드시 파일 최상위:

// 오류
if (condition) {
  import { foo } from './mod.js';   // ❌
}

// OK - dynamic import
if (condition) {
  const { foo } = await import('./mod.js');
}

확장자 (Node ESM)

Node.js ESM 은 확장자 명시 필수:

import { foo } from './mod.js';    // ✅
import { foo } from './mod';       // ❌ (Node ESM)

번들러 (Vite, Webpack) 는 관용적으로 생략 허용. TypeScript 는 moduleResolution 에 따라.

순환 참조

// a.js

export const a = () => b();

// b.js

export const b = () => a();

ESM 은 live binding 이라 실행 순서에 따라 동작. 하지만 사용 시점에 정의 안 됐으면 undefined.

Live Binding

CJS 는 값 복사, ESM 은 live reference:

// counter.js
export let count = 0;
export function inc() { count++; }

// main.js

console.log(count);  // 0
inc();
console.log(count);  // 1 (자동 반영)

CJS 라면 count 는 import 시점 값 (0) 유지.

Import Attributes (ES2025+)

JSON, CSS 등 특수 유형 명시:

이전 assert 문법에서 with 로 변경.

Import.meta

모듈 자체 메타 정보:

console.log(import.meta.url);       // 파일 URL
console.log(import.meta.dirname);   // Node 20.11+
console.log(import.meta.filename);  // Node 20.11+

// Vite
if (import.meta.env.DEV) { }
if (import.meta.hot) { /* HMR */ }

Tree Shaking

Named import 는 정적 분석 가능 → 번들러가 미사용 export 제거:

// utils.js
export function used() {}
export function unused() {}

// main.js

used();

// bundle: unused() 제거

Namespace import 는 tree shaking 어려움 (모두 사용 취급):


utils.used();
// 번들러가 unused 를 못 지울 수도 있음

Default + module.exports: CJS 스타일은 정적 분석 어려움.

Node vs 브라우저

Node.js

.mjs 또는 "type": "module" package.json
파일 확장자 필수
Node 22.12+ 는 CJS 에서 require(esm) 가능

브라우저

<script type="module" src="main.js">
import in browser 는 절대 경로 or 완전 URL
CORS 적용
캐시는 module map

Bundler

확장자 관대
node_modules 해석
각 파일 유형 loader/plugin

마이그레이션 팁 (CJS → ESM)

// CJS
const { readFile } = require('fs');
module.exports = { foo, bar };
module.exports.baz = baz;

// ESM

export { foo, bar };
export const baz = baz;

주의:

__dirname → import.meta.dirname
require.resolve → import.meta.resolve
require(...) → await import(...) (동적)
Top-level await 사용 가능 (ESM)

함정

[!WARNING] Node ESM 에서 확장자 필수. import './util' 이 아니라 import './util.js'.

[!CAUTION] Default export 는 리팩터링 어려움. Named 가 rename 안전.

[!WARNING] Barrel 파일 (index.js re-export) 남용 → tree shaking 저해 + 순환 참조 위험.

[!IMPORTANT] Dynamic import 는 Promise. await 또는 .then().

[!CAUTION] Namespace import (import * as) 는 tree shaking 저해 가능. 필요한 것만 named import.

김신건의 로그 - 위키 / javascript

[Javascript] BigInt

정의

사용 상황

왜 필요한가

사용

함정: number 와 혼합 금지

비교는 가능

BigInt → Number

JSON 호환성

자주 쓰는 사례

1. 큰 ID 처리

2. 정밀 계산

3. 비트 연산 (큰 정수)

4. 암호화 모듈러 거듭제곱

Math 함수와 호환 안 됨

Number vs BigInt 선택

BigInt 와 TypeScript

성능 고려사항

함정

1. 리터럴 표기

2. Math.pow

3. Array, Set 의 키

4. 조건문에서 0n 은 falsy

관련 위키

[Javascript] boolean / null / undefined

정의

사용 상황

boolean

falsy / truthy

falsy 값 시각화

null vs undefined

== 와 === 의 차이

비어있음 검사 idiom

Nullish Coalescing 과 Optional Chaining 패턴

void 연산자

명시적 boolean 변환

타입 강제 변환 전체 표

함정

1. typeof null

2. NaN 의 truthy

3. 빈 문자열의 비교

4. 객체의 truthy

5. null 과 관계 연산자의 모순

모범 사례

관련 위키

[Javascript] function

정의

사용 상황

두 가지 모양

함수 선언 (Function Declaration)

함수 표현식 (Function Expression)

호이스팅의 차이

호이스팅 동작 시각화

this 동적 바인딩

arguments 객체

new 호출

프로토타입 체인

일반 함수 vs 화살표 함수 비교

고급 패턴

IIFE (즉시 실행 함수)

커링 (Currying)

메모이제이션

언제 일반 함수를 쓰는가

함정

1. 메서드를 변수에 꺼내면 this 잃음

2. var 호이스팅과 함수 선언이 같은 이름

3. arguments 는 배열이 아님

4. 화살표 함수를 메서드로 쓰면 this 가 전역

관련 위키

[Javascript] String

정의

사용 상황

Template Literal

tagged template

자주 쓰는 메서드

메서드 분류 시각화

immutable

유니코드 함정

String vs string