chaeon1 님의 블로그

투 포인터

chaeon1 — Thu, 14 Aug 2025 21:44:13 +0900

✨ 투 포인터란?

정렬된 배열이나 리스트에서 주로 사용되는 알고리즘 기법
두 개의 포인터를 사용하여 효율적으로 문제 해결
시간 복잡도를 O(n²) → O(n) 으로 개선 가능
전제 조건: 배열이 오름차순(또는 내림차순)으로 정렬되어 있어야 함

투 포인터의 종류

두 방향 포인터

시작(start)과 끝(end) 포인터가 중앙으로 이동하며 조건 탐색
예시: 합이 k인 두 수 찾기

한 방향 포인터

한쪽 포인터 고정, 다른 포인터만 이동하며 모든 부분 배열 또는 쌍 순회
예시: 두 수의 차가 k인 쌍 개수 세기

슬라이딩 윈도우

고정된 크기 혹은 조건을 만족하는 구간을 이동하며 탐색
구간 길이가 고정인 경우와 조건 만족 시까지 크기가 가변적인 경우 존재
예시: 고정 길이 k인 부분 배열의 최대 합

❓ 두 수의 합이 특정 값이 되는 쌍 찾기

https://jojozhuang.github.io/algorithm/algorithm-two-pointers/

Brute Force (완전 탐색)

모든 쌍을 비교해 목표 값과 같은지 확인
시간 복잡도: O(n²)

이진 탐색

각 원소에 대해 이진 탐색 수행
시간 복잡도: O(n log n)

투 포인터 알고리즘

배열의 양 끝에서 포인터를 시작하여 조건에 따라 포인터 이동
시간 복잡도: O(n)

https://jojozhuang.github.io/algorithm/algorithm-two-pointers/

투 포인터 코드

function findPairWithSum(nums, target) {
  let start = 0;
  let end = nums.length - 1;

  while (start < end) {
    const sum = nums[start] + nums[end];

    if (sum === target) {
      return [nums[start], nums[end]];
    }

    if (sum < target) {
      start++;
    }

    else {
      end--;
    }
  }

  return null;
}

예제

수들의 합 2 https://www.acmicpc.net/problem/2003
좋다 https://www.acmicpc.net/problem/1253
부분합 https://www.acmicpc.net/problem/1806
구명보트 https://school.programmers.co.kr/learn/courses/30/lessons/42885
보석 쇼핑 https://school.programmers.co.kr/learn/courses/30/lessons/67258

시간 복잡도 (2)

chaeon1 — Mon, 30 Jun 2025 00:36:08 +0900

✍️ 시간 복잡도 계산법

1️⃣ 알고리즘 분석

알고리즘에서 반복되는 기본 연산 확인

반복문 (for, while)
재귀 호출
정렬, 탐색, 삽입 등

2️⃣ 반복문 분석

반복문은 n번 실행되므로 시간 복잡도는 O(n)

반복문이 중첩되었을 때는 반복 횟수를 서로 곱해서 계산

for i in range(n):          // n번
    for j in range(n):      // n번
        print(i, j)         // n * n = n²번 → O(n²)

3️⃣ 함수 호출 분석

함수 호출이 있을 경우 호출된 함수의 시간 복잡도를 분석하여 합산

function a(n) {
  for (let i = 0; i < n; i++) {
    b(n);
  }
}

function b(n) {
  for (let j = 0; j < n; j++) {
    console.log(j);
  }
}

이 경우 함수 b는 O(n), 함수 a는 함수 b를 n번 호출하므로 총 시간 복잡도는 O(n²)

4️⃣ 분할 정복 구조 분석

분할 정복 알고리즘의 시간 복잡도는 재귀식으로 표현됨

// 병합 정렬
function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));  // 왼쪽 절반 정렬
  const right = mergeSort(arr.slice(mid));    // 오른쪽 절반 정렬
  return merge(left, right);                  // 정렬된 두 배열 병합
}

재귀식: T(n) = 2T(n/2) + O(n)

배열을 반으로 나누어 mergeSort를 두 번 호출하므로 2T(n/2)
두 정렬된 배열을 병합하는 시간 O(n)

마스터 정리에 따라 O(n log n)

5️⃣ 최악의 경우 고려

조건문이 있을 경우 가장 오래 걸리는 조건을 기준으로 분석

function findTarget(arr, target) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) return i;
  }
  return -1;
}

이때 최악의 경우 끝까지 탐색하므로 O(n)

6️⃣ 최종 계산

알고리즘 내 모든 연산의 시간 복잡도를 합산하여 가장 영향력 있는 항(가장 큰 항)만 남기고 나머지는 제거

T(n) = 3n² + 5n + 7 → O(n²)
T(n) = n log n + n → O(n log n)

시간 복잡도 (1)

chaeon1 — Sun, 22 Jun 2025 23:06:12 +0900

시간 복잡도

정의

알고리즘이 문제를 해결하는 데 걸리는 시간을 입력 크기(n)와 비교하여 표현한 것
알고리즘의 실행 시간을 수학적으로 분석하여 입력 크기가 커졌을 때 실행 시간이 어떻게 변화하는지 예측

기본 개념

입력 크기(n): 알고리즘에 주어지는 데이터의 크기
- 예: 배열의 크기, 그래프의 노드 수 등
최악의 경우 시간 복잡도: 입력 크기 n에 대해 알고리즘이 가장 많은 시간을 소요하는 경우
평균 시간 복잡도: 입력 데이터가 일반적으로 어떻게 분포하는지에 따른 평균적인 시간

문제 해결 전략

분할 정복: 문제를 작은 문제로 나누어 해결한 후 합치는 방법 (예: 퀵 정렬, 병합 정렬)
동적 계획법: 문제를 작은 하위 문제로 나누고, 그 결과를 재사용하는 방식 (예: 피보나치 수 계산)
그리디 알고리즘: 매 순간 최적의 선택을 하는 방식 (예: 다익스트라 알고리즘)
탐색 방법 개선: 비효율적인 탐색을 개선 (예: 이진 탐색)

무조건 시간 복잡도가 낮은 알고리즘을 사용하는 것이 좋은가?

일반적으로는 시간 복잡도가 낮은 알고리즘이 유리하지만 예외가 존재할 수 있음

입력 크기가 작을 때
- 입력 데이터가 작으면 O(n²) 알고리즘도 충분히 빠르게 실행됨
- 이럴 경우 구현이 더 간단한 알고리즘 선택 가능
상수 계수가 클 때
- 시간 복잡도는 입력 크기가 무한히 커질 때의 추세를 보는 것이므로 실제 성능은 구현의 상수 계수(숨겨진 비용)에 영향을 받음
- 예시: O(n) 알고리즘이지만 내부 연산이 무거우면 O(n log n)보다 느릴 수 있음 (상수 계수나 내부 연산의 복잡도 고려)
메모리 사용량 고려
- 어떤 알고리즘은 시간 복잡도는 낮지만 메모리를 많이 사용할 수도 있음
- 예시: 재귀적으로 호출되는 알고리즘은 메모리 스택을 많이 소모할 수 있음
- 제한된 환경에서는 시간보다 메모리가 더 중요할 수도 있음

빅오 표기법 (Big-O Notation)

입력 n값에 따른 시간 복잡도

Complexity	1	10	100
O(1)	1	1	1
O(log n)	0	2	5
O(n)	1	10	100
O(n log n)	0	20	461
O(n²)	1	100	10000
O(2ⁿ)	1	1024	1267650600228229401496703205376
O(n!)	1	3628800	화면에 표현 불가

주요 빅오 표기법

O(1): 상수 시간 복잡도
- 입력 크기와 관계 없이 실행 시간이 일정함
- 예: 배열 인덱스 접근
```
const element = array[index];
```

O(log n): 로그 시간 복잡도

입력 크기가 커질수록 실행 시간은 느리게 증가함

예: 이진 탐색

const binarySearch = (arr, target) => {
  let start = 0, end = arr.length - 1;
  while (start <= end) {
      const mid = Math.floor((start + end) / 2);
      if (arr[mid] === target) return mid;
      if (arr[mid] < target) start = mid + 1;
      else end = mid - 1;
  }
  return -1;
}

O(n): 선형 시간 복잡도
- 입력 크기에 비례하여 실행 시간 증가
- 예: 배열 순회
```
const sum = arr.reduce((acc, val) => acc + val, 0);
```

O(n log n): 로그 선형 시간 복잡도

효율적인 정렬 알고리즘에서 나타남

예: 병합 정렬, 퀵 정렬

function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));
  return merge(left, right);
}

function merge(left, right) {
  let result = [], i = 0, j = 0;
  while (i < left.length && j < right.length) {
      if (left[i] < right[j]) result.push(left[i++]);
      else result.push(right[j++]);
  }
  return result.concat(left.slice(i), right.slice(j));
}

O(n²): 이차 시간 복잡도

입력 크기가 커지면 매우 느려짐

예: 버블 정렬, 선택 정렬

function bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
              [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          }
      }
  }
  return arr;
}

O(2ⁿ): 지수 시간 복잡도
- 입력 크기 증가에 따라 매우 빠르게 증가함
- 예: 피보나치 수열의 재귀적 계산
```
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
```

프로젝트 세팅 - Git, Prettier, Husky

chaeon1 — Sun, 15 Jun 2025 23:59:35 +0900

Git

GitHub 저장소 연동

cd read-on

Git 초기화

git init

원격 저장소 연결

git remote add origin https://github.com/user/repository.git

브랜치 이름 변경

git branch -M main

첫 푸시

git push -u origin main

Lint & Format

사용 도구

ESLint – 코드 문법 검사
Prettier – 코드 포맷 자동 정리
lint-staged – 변경된 파일만 lint/format
Husky – Git Hook 설정

설치

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier lint-staged husky

⚙️ 설정

`.eslintrc.json`

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

`.prettierrc`

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}

`.prettierignore`

node_modules
.next
dist
out
public
*.log

`lint-staged` 설정 (`package.json` 내부에 추가)

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,css,md}": [
    "prettier --write"
  ]
}

Husky 설정

초기화

npx husky init

pre-commit 설정 (`.husky/pre-commit`)

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

commit-msg 설정

패키지 설치

npm install --save-dev @commitlint/cli @commitlint/config-conventional

`commitlint.config.js`

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

`.husky/commit-msg`

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit "$1"

커밋 타입 예시

타입	설명
`build:`	빌드 시스템, 의존성 관련 변경
`chore:`	설정, 패키지 등 개발환경 변경
`ci:`	CI 관련 설정
`docs:`	문서 수정
`feat:`	새로운 기능 추가
`fix:`	버그 수정
`perf:`	성능 개선
`refactor:`	리팩토링
`revert:`	커밋 되돌리기
`style:`	스타일 변경 (공백, 세미콜론 등)
`test:`	테스트 코드 추가 및 수정

참고

GitHub
***https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories
Husky
***https://typicode.github.io/husky/
lint-staged
***https://github.com/lint-staged/lint-staged
commitlint
***https://commitlint.js.org/guides/getting-started.html

프로젝트 세팅 - Next.js, Storybook, Jest

chaeon1 — Sun, 15 Jun 2025 23:58:23 +0900

프론트엔드

️ Next.js

작업 디렉토리로 이동

cd /Projects

프로젝트 생성

npx create-next-app@latest

예시 응답:

√ What is your project named? ... read-on
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
√ What import alias would you like configured? ... @/*

참고

Next.js
https://nextjs.org/docs/app/getting-started/installation

테스트 및 문서화 도구

Storybook

✅ 설치 및 초기화

npm create storybook@latest

자동으로 Vite 기반 preset(@storybook/nextjs-vite)으로 설치됨
@storybook/addon-a11y, @storybook/addon-vitest 포함

▶️ 실행

npm run storybook

Jest

✅ 설치

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom

npm init jest@latest

설정 예시:

√ Would you like to use Jest when running "test" script in "package.json"? ... yes      
√ Would you like to use Typescript for the configuration file? ... yes
√ Choose the test environment that will be used for testing » jsdom (browser-like)      
√ Do you want Jest to add coverage reports? ... no
√ Which provider should be used to instrument code for coverage? » babel                
√ Automatically clear mock calls, instances, contexts and results before every test? ... yes

⚙️ 설정 파일

`jest.config.ts`

import type { Config } from 'jest';

const config: Config = {
  clearMocks: true,
  testEnvironment: 'jsdom',
  testMatch: [
    '**/__tests__/**/*.test.[jt]s?(x)',
    '**/?(*.)+(spec|test).[jt]s?(x)',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

export default config;

`jest.setup.ts`

import '@testing-library/jest-dom';

참고

[React] Toast 컴포넌트 구현하기

chaeon1 — Mon, 9 Jun 2025 00:01:02 +0900

✨ 핵심 기능

재사용 가능한 useToast() 훅
Framer Motion 적용
React Portal을 사용해 DOM 트리 외부에 렌더링

1️⃣ Toast 컴포넌트

ReactDOM.createPortal을 이용해 Toast를 document.body에 직접 렌더링

이렇게 하면 부모 컴포넌트의 CSS나 위치에 영향을 받지 않고 자유롭게 위치 지정 가능

return ReactDOM.createPortal(
  <div className="...">
    <div className={`...`}>
      {message}
    </div>
  </div>,
  document.body,
);

2️⃣ useToast Hook

컴포넌트 어디서든 Toast 메시지를 쉽게 트리거할 수 있도록 커스텀 훅 작성

필요한 곳에서 showToast(message)만 호출하여 사용

import { useState, useCallback } from 'react';

export default function useToast() {
  const [message, setMessage] = useState('');

  const showToast = useCallback((msg: string) => {
    setMessage(msg);
    setTimeout(() => setMessage(''), 2000);
  }, []);

  return { message, showToast };
}

useToast() 훅은 상태(message) + 제어 함수 (showToast를 제공하는 컨트롤러 역할
Toast는 그 상태를 뷰로 표현하는 컴포넌트
토스트를 띄우는 로직과 실제 UI를 분리함으로써 독립적으로 유지 → 재사용성, 유지보수성 증가

3️⃣ 실제 사용 예시

const { message, showToast } = useToast();

const handleCopy = async () => {
  await navigator.clipboard.writeText(`https://...`);
  showToast('클립보드에 복사되었습니다.');
};

...

{message && <Toast key={message} message={message} />}

동일한 메시지를 여러 번 연속으로 보여주기 위해 key={message} 사용

React에서는 동일한 key를 가진 컴포넌트를 재사용하려 하기 때문에 메시지가 바뀌지 않으면 Toast가 재렌더링되지 않음

이를 방지하고자 메시지 변경 시 강제 리마운트하도록 적용

4️⃣ 최종 코드

//Toast.tsx
import { AnimatePresence, motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

interface ToastProps {
  message: string;
  duration?: number;
}

export default function Toast({ message, duration = 2000 }: ToastProps) {
  const [show, setShow] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setShow(false), duration);
    return () => clearTimeout(timer);
  }, [duration]);

  return ReactDOM.createPortal(
    <AnimatePresence>
      {show && (
        <motion.div
          className="fixed bottom-6 inset-x-0 mx-auto z-50 w-fit"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          transition={{ duration: 0.5 }}
        >
          <div className="bg-black text-white text-sm px-4 py-2 rounded-lg shadow-lg text-center">
            {message}
          </div>
        </motion.div>
      )}
    </AnimatePresence>,

    document.body,
  );
}

// useToast.tsx
import { useState, useCallback } from 'react';

export default function useToast() {
  const [message, setMessage] = useState('');

  const showToast = useCallback((msg: string, duration: number = 2000) => {
    setMessage(msg);
    setTimeout(() => setMessage(''), duration);
  }, []);

  return { message, showToast };
}

[JavaScript] 코딩테스트 기본 문법 정리

chaeon1 — Mon, 2 Jun 2025 02:56:08 +0900

1. 입출력 처리

✅ 콘솔 입력 (Node.js 기준)

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n');

✅ 예제 입력

const input = `31 2
 3`.split('\n');
 const N = Number(input[0]);
 const arr = input[1].split(' ').map(Number);

✅ 출력

console.log(answer);

2. 기본 자료형

숫자형 변환

Number("123");        // 123
parseInt("123", 10);  // 123

문자열

let str = "hello";
str.length;           // 문자열 길이
str.split('');        // ['h','e','l','l','o']

3. 배열

생성 및 초기화

let arr = [1, 2, 3];
let newArr = new Array(5).fill(0); // [0, 0, 0, 0, 0]

순회

for (let i = 0; i < arr.length; i++ { ... }
arr.forEach((v) => console.log(v));
for (let x of arr) { ... }

정렬

arr.sort((a, b) => a - b); // 오름차순
arr.sort((a, b) => b - a); // 내림차순

기타 메서드

arr.push(4);       // 뒤에 추가
arr.pop();         // 마지막 제거
arr.shift();       // 첫 요소 제거
arr.unshift(0);    // 앞에 추가
arr.includes(2);   // 요소 포함 여부

4. 문자열 처리

let s = "hello world";s.split(' ');           // ['hello', 'world']
s.replace('l', 'x');    // 첫 번째 'l'만 변경
s.replaceAll('l', 'x'); // 전체 'l' 변경
s.toUpperCase();        // 대문자 변환
s.toLowerCase();        // 소문자 변환

5. Set / Map

Set

let set = new Set([1, 2, 2, 3]);
set.has(2); // true

Map

let map = new Map();
map.set('a', 1);
map.get('a'); // 1

6. 조건문 & 반복문

if (a > b) {
  ...
} else {
  ...
}

for (let i = 0; i < 10; i++) { ... }

while (조건) { ... }

do {
  ...
} while (조건);

7. 함수

function add(a, b) {
  return a + b;
}

const sub = (a, b) => a - b; // 화살표 함수

8. 객체

let obj = { name: "Tom", age: 25 };
obj.name;       // "Tom"
obj["age"];     // 25

for (let key in obj) {
  console.log(key, obj[key]);
}

9. 기타 유용한 메서드

Math.max(...arr);   // 배열 최댓값
Math.min(...arr);   // 배열 최솟값
Math.abs(-10);      // 절댓값
Math.floor(3.7);    // 내림
Math.ceil(3.1);     // 올림
Math.round(3.5);    // 반올림

[React/TypeScript + tailwindCSS] Tiptap 에디터 적용

chaeon1 — Sat, 24 May 2025 17:05:03 +0900

✉️ 기술 스택

React, TypeScript, Zustand, Tiptap, DOMPurify, tailwindCSS, Flowbite

Tiptap Editor

Tiptap Rich Text Editor - the Headless WYSIWYG Editor

✔️ 쉽게 확장 가능
✔️ ProseMirror 기반: 구조적 편집 가능
✔️ 확장 기능 커스터마이징 가능
✔️ 공식 문서 설명이 잘 되어 있어서 따라하기 편함

커스터마이징 에디터 구성

✏️ 에디터 설정

필요한 extension (StarterKit, Underline, Highlight) 선택적으로 추가
prose 기반 스타일링 적용
debounce 적용으로 입력 최적화

const editor = useEditor({
  editorProps: {
    attributes: {
      class:
        'prose prose-sm dark:prose-invert prose-headings:my-2 prose-p:m-0 min-h-[120px] focus:outline-none',
    },
  },
  extensions: [StarterKit, Underline, Highlight],
  content,
  onUpdate({ editor }) {
    debouncedOnChange(editor.getHTML());
  },
});

✏️ 툴바 기능

Format: Paragraph, Heading 1, Heading 2
Bold, Italic, Underline, Highlight

{/* Bold */}
<button
  type="button"
  onClick={() => editor.chain().focus().toggleBold().run()}
  className={`...`}
>
  <BoldIcon />
  <span className="sr-only">Bold</span>
</button>

HTML 렌더링

작성된 HTML 콘텐츠는 <p><strong>텍스트</strong></p> 형식으로 저장됨
이를 안전하게 보여주기 위해 DOMPurify.sanitize 적용

const photoTalkMessage = DOMPurify.sanitize(photoTalk.message);

<p dangerouslySetInnerHTML={{ __html: photoTalkMessage }} />

dangerouslySetInnerHTML: WYSIWYG 작성 콘텐츠를 그대로 표현
DOMPurify.sanitize: script injection과 같은 보안 문제 방지

에디터 구조 및 확장 적용

에디터를 다른 영역에도 재사용 가능하도록 설계했으며, 교통 안내 입력 등에서도 동일한 에디터 UI 활용

 components
 ┣  common
 ┃ ┣  Editor
 ┃ ┃ ┣  MenuBar.tsx
 ┃ ┃ ┗  TiptapEditor.tsx

// TiptapEditor.tsx
return (
  <div className="border rounded-md bg-white dark:bg-gray-800">
    {editor && (
      <>
        <MenuBar editor={editor} />
        <div className="p-4 h-[160px] overflow-y-auto">
          <EditorContent editor={editor} />
        </div>
      </>
    )}
  </div>
);


// PhotoTalkEditor.tsx
import TipTapEditor from '@/components/common/Editor/TiptapEditor';

<TipTapEditor
  content={form.message}
  onChange={(value) => {
    setForm((prev) => ({ ...prev, message: value }));
  }}
/>


// TransportationItem.tsx
import TipTapEditor from '@/components/common/Editor/TiptapEditor';

<TipTapEditor
  content={transportationInputs[inputKey] || ''}
  onChange={(value) => {
    updateTransportationInput(inputKey, value);
  }}
/>

[모던 자바스크립트 Deep Dive] 46장 ~ 49장

chaeon1 — Sun, 11 May 2025 01:08:16 +0900

46장 제너레이터와 async/await

46.1 제너레이터란?

제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.

46.2 제너레이터 함수의 정의

function* 키워드로 선언, yield 표현식 포함
선언문, 표현식, 메서드, 클래스 메서드 형태
화살표 함수로 정의 불가
new 생성자로 호출 불가

46.3 제너레이터 객체

일반 함수: 호출 시 코드 블록 실행
제너레이터 함수: 호출 시 제너레이터 객체 생성 후 반환
제너레이터 객체는 이터러블이면서 동시에 이터레이터
- Symbol.iterator
- next: 호출 시 yield까지 실행하고 { value, done } 객체 반환
- return: 호출 시 { value, done: true } 반환 후 종료
- throw: 호출 시 에러 발생

46.4 제너레이터의 일시 중지와 재개

yield 키워드로 실행 중지, next()로 재개
next(value): 값을 제너레이터 내부로 전달
yield 연속 호출 구조: generator.next() -> yield -> generator.next() -> yield -> ... -> generator.next() -> return

46.5 제너레이터의 활용

이터러블의 구현
- 무한 이터러블 간결하게 생성 가능 (무한 피보나치 수열 등)
- 기존 이터레이션 프로토콜 구현보다 간단
비동기 처리
- yield 표현식을 통해 비동기 흐름을 동기처럼 표현 가능
- 제너레이터 실행기 필요 (co 라이브러리)

46.6 async/await

async 함수
- async 키워드로 정의, 항상 프로미스 반환
- 명시적 return 없이도 암묵적으로 프로미스 resolve
- 클래스의 constructor 메서드는 사용 불가
await 키워드
- await: 프로미스가 완료될 때까지 대기
- 반드시 async 함수 내부에서 사용
에러 처리
- try...catch문을 사용해 에러 처리 가능
- 에러 전파 및 처리 명확
- catch문을 사용하지 않고 에러가 발생하면 reject된 프로미스 반환

47장 에러 처리

47.1 에러 처리의 필요성

에러 방치하면 프로그램 강제 종료
try...catch문으로 적절히 대응하면 종료 없이 실행 가능
예외 상황(DOM 조작 등)도 에러로 이어질 수 있으므로 방어 코드 필요
- null 체크, ?. 옵셔널 체이닝 사용 등

47.2 try...catch...finally 문

try, catch, finally 세 블록으로 구성
- try: 실행할 코드
- catch: 에러 발생 시 실행, 에러 객체가 인자로 전달
- finally: 에러 발생과 상관 없이 무조건 실행
catch 생략 불가, finally 생략 가능

47.3 Error 객체

Error 생성자 함수로 에러 객체 생성 가능
- const error = new Error('invalid');
- message: 전달된 에러 메시지
- stack: 콜스택 정보 (디버깅 목적)

생성자 함수	인스턴스
`Error`	일반적인 에러
`SyntaxError`	문법 오류
`ReferenceError`	정의되지 않은 변수 참조
`TypeError`	타입 불일치
`RangeError`	허용 범위를 벗어난 값
`URIError`	URI 처리 함수 오류
`EvalError`	`eval` 함수 오류

47.4 throw 문

에러 객체 생성만으로는 에러가 발생하지 않음
throw문으로 명시적 에러 발생 가능
throw: catch 블록 실행 트리거

47.5 에러의 전파

콜 스택을 따라 호출자 방향(아래 방향)으로 전파
catch되지 않으면 프로그램 강제 종료
setTimeout, Promise.then 등 비동기 콜백 함수 내부에서 throw한 에러는 전파되지 않음
- 전역에서 uncaught되어 종료될 수 있음, 내부에서 try/catch로 직접 처리 필요
에러는 호출자 쪽에서만 처리 가능, 적절한 위치에 catch 구문 필요

48장 모듈

48.1 모듈의 일반적 의미

모듈: 재사용 가능한 코드 조각, 일반적으로 기능 단위로 파일 분리
자신만의 파일 스코프(모듈 스코프)를 가지며, 내부 자산은 기본적으로 비공개
export 키워드로 선택적 공개 가능
import를 통해 export된 자산 재사용 가능

48.2 자바스크립트와 모듈

과거 자바스크립트는 파일 스코프 없이 전역 공유, 모듈 시스템 미지원
여러 script 태그를 사용해도 전역 스코프 공유, 변수 충돌 가능성
문제 해결을 위해 CommonJS(Node.js 기반), AMD 방식 등장

48.3 ES6 모듈(ESM)

type = "module" 속성을 가진 <script> 태그로 ESM 로드
ESM: 기본적으로 strict mode 적용
모듈 스코프
- ESM 내부 변수는 전역 스코프에 등록되지 않음
- 동일한 식별자를 다른 모듈에서 선언해도 충돌 없이 동작
- 외부 모듈에서 ESM 내 식별자에 접근 불가 -> export 필요
export 키워드
- 변수, 함수, 클래스 등을 외부에 공개 가능
- 선언 앞에 export 키워드 사용
- export const pi = Math.PI; export function square(x) { return x * x; }
- 하단에서 객체처럼 한 번에 export
- const pi= Math.PI; function square(x) { return x * x; } export { pi, square };
import 키워드
- 다른 모듈이 export한 식별자를 현재 모듈 스코프 내부로 불러오기
- 기본 사용
- import { pi, square } from './lib.mjs';
- 전체 import (as 구문)
- import * as lib from './lib.mjs'; lib.square(2);
- 이름 변경 후 import (as 구문)
- import { square as sq } from './lib.mjs'; sq(2);
- default export
  - 모듈에서 하나의 값만 export할 때 사용
  - 이름 없이 export, import 시 임의의 이름 사용
```
// lib.mjs
export default x => x * x;
```

  // app.mjs
  import square from './lib.mjs';

  square(3); // 9
  ```

49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

49.1 Babel

Babel: ES6+/ES.NEXT 코드를 ES5 코드로 변환하여 구형 브라우저 호환성 확보
브라우저가 지원하지 않는 최신 문법 자동 변환
- 화살표 함수, 지수 연산자 등
브라우저에서 require 함수 미지원
- Babel은 기본적으로 CommonJS 방식으로 트랜스파일링 (require, exports)
- 브라우저는 이를 지원하지 않으므로 브라우저 실행 시 에러 발생

49.2 Webpack

Webpack: 여러 JS 모듈, 이미지, CSS 등을 하나의 번들 파일로 묶음
모듈 로더 없이 브라우저에서 실행 가능
Babel과 함께 사용하여 트랜스파일링 + 번들링

[모던 자바스크립트 Deep Dive] 40장 ~ 45장

chaeon1 — Sun, 11 May 2025 01:07:25 +0900

41장 타이머

41.1 호출 스케줄링

함수 호출 지연, 반복 예약 가능
타이머 함수: 호스트 객체
setTimeout: 일정 시간 후 한 번만 실행
setInterval: 일정 시간 간격으로 반복 실행
자바스크립트는 싱글 스레드로 동작하므로 타이머는 비동기 처리

41.2 타이머 함수

setTimeout / clearTimeout

const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);

매개변수	설명
`func`	타이머가 만료된 뒤 호출될 콜백 함수
`delay`	타이머 만료 시간(ms). `setTimeout` 함수는 `delay` 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.
`param1`, `param2`, ...	호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달할 수 있다.

setInterval / clearInterval
- const timerId = setInterval(func|code[, delay, param1, param2, ...]);
- 일정 간격마다 콜백 반복 실행
- 반복 횟수 조건으로 제한 가능

41.3 디바운스와 스로틀

디바운스
- 짧은 시간 간격으로 이벤트가 발생하면 이벤트 핸들러를 호출하지 않음
- 일정 시간이 경과한 이후에 콜백 한 번 호출
- 최종 상태 반영에 적합: 입력 완료 후 한 번만 Ajax 요청
- setTimeout, clearTimeout 사용
- resize 이벤트, 자동완성 UI, 중복 클릭 방지 등
스로틀
- 이벤트가 연속 발생해도 일정 시간 간격마다 한 번씩만 콜백 실행
- setTimeout 사용, 일정 간격마다 타이머 초기화
- scroll 이벤트, 무한 스크롤 UI

42장 비동기 프로그래밍

42.1 동기 처리와 비동기 처리

싱글 스레드 기반: 한 번에 하나의 태스크 처리 가능
함수 호출 시 실행 컨텍스트 스택에 푸시되어 순차적 실행
실행 중인 함수가 종료되어야 다음 함수 실행 가능 -> 동기 처리 -> 블로킹 발생
비동기 처리
- 실행 순서에 상관 없이 다음 태스크 실행 가능
- 실행 순서 보장 어려움
- setTimeout, setInterval, HTTP 요청, 이벤트 핸들러
콜백 패턴
- 비동기 처리 방식
- 콜백 헬, 예외 처리 어려움, 복잡한 비동기 흐름 처리 한계
- 해결책: 프로미스(Promise)

42.2 이벤트 루프와 태스크 큐

이벤트 루프: 자바스크립트의 동시성 지원
자바스크립트 엔진 구성 요소
- 콜 스택(call stack): 실행 컨텍스트 저장 및 실행
- 힙(heap): 객체 저장 공간
비동기 작업 처리: 브라우저, Node.js
- 태스크 큐(task queue): 비동기 콜백 함수, 이벤트 핸들러 저장
- 마이크로태스크 큐: 프로미스의 후속 처리용 콜백 저장
- 이벤트 루프 동작 원리
  1. 콜 스택이 비었는지 확인
  2. 비어 있으면 태스크 큐에서 콜백 함수를 꺼내 콜 스택에 푸시하여 실행
  3. FIFO(First In First Out) 방식으로 처리
- 자바스크립트는 싱글 스레드, 브라우저는 멀티 스레드
- 브라우저와 자바스크립트 엔진이 협력하여 비동기 처리 구현

43장 Ajax

43.1 Ajax란?

브라우저와 서버 간 비동기 통신을 가능하게 하는 프로그래밍 방식
XMLHttpRequest 객체 사용하여 HTTP 요청 비동기 처리
기존 방식 단점
- 매 요청마다 HTML을 다시 받아와 불필요한 데이터 전송과 렌더링 발생
- 화면 깜빡임 등 사용자 경험 저하
- 서버 응답 전까지 블로킹 발생
Ajax 장점
- 필요한 데이터만 요청, 네트워크 부하 감소
- 변경된 부분만 렌더링하여 UX 향상
- 비동기 통신으로 블로킹 없는 처리 가능

43.2 JSON

JSON 표기 방식
- 자바스크립트 객체와 유사한 텍스트 기반 포맷
- 배열과 객체 모두 표현 가능
- 키와 문자열은 반드시 " 사용
JSON.stringify
- 객체나 배열을 JSON 문자열로 직렬화
- 선택적 들여쓰기 가능
- replacer: 특정 속성 제외 가능
JSON.parse
- JSON 문자열을 객체나 배열로 역직렬화
- 서버에서 받은 JSON 데이터를 자바스크립트에서 사용할 수 있도록 변환

43.3 XMLHttpRequest

XMLHttpRequest 객체 생성
- const xhr = new XMLHttpRequest()
HTTP 요청 전송
1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청 초기화
2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값 설정
3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청 전송
HTTP 응답 처리
- onreadystatechange 이벤트: readyState === 4 (DONE) && status === 200일 때 응답 처리
- onload 이벤트: 성공 시 자동 호출, readyState 체크 불필요

44장 REST API

44.1 REST API의 구성

구성 요소	내용	표현 방법
자원 (resource)	자원	URI(엔드포인트)
행위 (verb)	자원에 대한 행위	HTTP 요청 메서드
표현 (representations)	자원에 대한 행위의 구체적 내용	페이로드

44.2 REST API의 설계 원칙

URI는 리소스를 표현해야 한다.
- 명사 사용: GET /todos/1
리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.
- GET: 조회
- POST: 생성
- PUT: 전체 수정
- PATCH: 부분 수정
- DELETE: 삭제

45장 프로미스

45.1 비동기 처리를 위한 콜백 패턴의 단점

콜백 헬
- 비동기 함수는 결과가 준비되기 전 종료, 반환값 외부 사용 불가능
- setTimeout, XMLHttpRequest: 콜백 실행이 호출 시점 이후에 발생
- 콜백에서 상위 스코프의 변수에 값을 할당해도 순서 보장이 안 되므로 예상대로 동작하지 않음
- 후속 처리는 콜백 함수로 처리, 콜백 중첩 시 콜백 헬 현상 발생
  - 가독성 저하
  - 유지보수 어려움
에러 처리의 한계
- try...catch
  - 동기 코드에만 유효
  - 비동기 콜백에서 발생한 에러는 잡을 수 없음
  - 비동기 콜백은 호출 스택 상에서 try 블록과 연결되어 있지 않음
- 콜백 기반 비동기 처리에서는 에러 처리를 위한 일관된 매커니즘 부재

45.2 프로미스의 생성

등장 배경
- 콜백 패턴의 한계 해결
- 비동기 처리 결과 명확하게 표현
- 가독성 및 에러 처리 용이성 향상

생성 방법

const promise = new Promise((resolve, reject) => {...});
executor 함수: 생성 시 전달되는 콜백, 비동기 작업 수행

프로미스의 상태 정보	의미	상태 변경 조건
`pending`	비동기 처리가 아직 수행되지 않은 상태	프로미스가 생성된 직후 기본 상태
`fulfilled`	비동기 처리가 수행된 상태 (성공)	`resolve` 함수 호출
`rejected`	비동기 처리가 수행된 상태 (실패)	`reject` 함수 호출

45.3 프로미스의 후속 처리 메서드

Promise.prototype.then
- 두 개의 콜백 함수를 인수로 전달받음
  - 첫 번째: fulfilled, 프로미스의 비동기 처리 결과
  - 두 번째: rejected, 프로미스의 에러
- 언제나 프로미스 반환
  - 반환값이 프로미스인 경우 그대로 반환
  - 반환값이 프로미스가 아닐 경우 암묵적으로 프로미스를 생성해 반환
Promise.prototype.catch
- 한 개의 콜백 함수를 인수로 전달받음
  - 프로미스가 rejected 상태일 경우 호출
- then(undefined, onRejected)과 동일하게 동작
Promise.prototype.finally
- 한 개의 콜백 함수를 인수로 전달받음
  - 성공/실패 여부와 무관하게 무조건 호출
- 리소스 정리, 로딩 종료 등 공통 처리 시 유용

45.4 프로미스의 에러 처리

catch
- 비동기 처리에서 발생한 에러 처리 가능
- then 내부에서 발생한 에러 처리 가능
then의 두 번째 인자보다는 catch 사용 권장
- then: 두 번째 콜백은 첫 번째 콜백에서 발생한 에러 캐치 불가능

45.5 프로미스 체이닝

then, catch, finally는 모두 프로미스 반환, 연속 호출 가능 -> 체이닝
체이닝을 통해 비동기 처리 순차적 연결 가능 -> 콜백 헬 방지
async/await: 체이닝 없이도 동기처럼 프로미스 처리 가능

45.6 프로미스의 정적 메서드

Promise.resolve / Promise.reject
- resolve: 값을 즉시 resolve한 프로미스 생성
- reject: 에러 등을 즉시 reject한 프로미스 생성
Promise.all
- 여러 프로미스 병렬 처리, 모두 성공 시 배열로 결과 반환
- 하나라도 실패하면 즉시 reject
Promise.race
- 가장 먼저 완료된 프로미스의 결과/오류를 반환
Promise.allSettled
- 모든 프로미스의 성공/실패 결과를 객체 배열로 반환

45.7 마이크로태스크 큐

마이크로태스크 큐는 태스크 큐보다 우선순위가 높음

45.8 fetch

fetch()
- XMLHttpRequest를 대체하는 HTTP 요청 API
- Promise 기반
Response 객체: HTTP 응답 표현
에러 처리
- 404, 500 등의 HTTP 오류는 reject되지 않음 -> ok: false인 Response로 resolve
- 네트워크 에러나 CORS 오류만 reject 처리
- 명시적 에러 처리 필요
- axios: 모든 HTTP 에러를 자동으로 reject 처리