프로그래밍 허브

1. 이벤트 전파: 버블링 vs 캡처링

✅ DOM 중첩 구조 예시

네가 올린 이미지처럼 DOM은 아래처럼 중첩된 박스처럼 되어 있어:

body
└─ main
    └─ div
        └─ p
            └─ span

이벤트는 이렇게 안쪽 ↔ 바깥쪽으로 흘러간다.

캡처링 (Capturing Phase)

• 이벤트가 가장 바깥쪽 → 가장 안쪽으로 전파
• 예: body → main → div → p → span
• 흔히 캡처 단계라고 부름

타깃 단계 (Target Phase)

• 이벤트가 실제로 발생한 요소에서 실행
• 예: span에서 클릭 발생

버블링 (Bubbling Phase)

• 이벤트가 안쪽 → 바깥쪽으로 전파
• 예: span → p → div → main → body
• 디폴트 동작은 대부분 버블링

✅ event.eventPhase 값

event.eventPhase로 현재 단계 알 수 있음

✅ 버블링/캡처링 코드 예시

HTML

<div id="outer">
  <div id="inner">클릭해보세요!</div>
</div>

document.getElementById("outer").addEventListener(
  "click",
  (e) => {
    console.log("outer div 캡처링 단계", e.eventPhase);
  },
  true // 캡처링
);

document.getElementById("inner").addEventListener(
  "click",
  (e) => {
    console.log("inner div 버블링 단계", e.eventPhase);
  },
  false // 버블링
);

2. JS 모듈 import/export

✅ ES6 모듈 기본 문법

1) export

파일 math.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

2) import

파일 main.js

import { add, multiply } from "./math.js";

console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

default export

math.js

export default function subtract(a, b) {
  return a - b;
}

main.js

import subtract from "./math.js";
console.log(subtract(5, 2)); // 3

✅ 모듈 사용 시 주의

• import/export는 브라우저에서 type="module" 필요
• html
   

<script type="module" src="main.js"></script>

3. Array API

✅ map

• 배열의 각 요소를 변환 → 새로운 배열 반환

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

✅ some

• 배열 중 하나라도 조건 만족하면 true

const nums = [1, 2, 3];
console.log(nums.some(n => n > 2)); // true

✅ reduce

• 배열 요소를 하나의 값으로 누적

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

✅ filter

• 조건에 맞는 요소만 추출 → 새로운 배열

const nums = [1, 2, 3, 4];
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

✅ 마무리

오늘은 프런트엔드 개발자가 꼭 알아야 할

• 이벤트 전파 (버블링/캡처링)
• ES6 모듈 시스템
• Array API (map, some, reduce, filter)
  를 정리했어.

작은 차이를 이해하면 코드가 더 깔끔하고 효율적해질 수 있으니 꼭 익혀두자!