2025-08-07

1일 1아티클

요즘IT

프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략

이벤트 위임

  • DOM의 이벤트 버블링 활용

    이벤트 버블링 : DOM 요소에서 이벤트 발생 시, 해당 이벤트가 DOM 트리를 따라 상위 요소로 순차 전파되는 현상

  • 자식 요소가 아닌, 부모 요소에 이벤트 핸들러를 등록 → 하위 요소 이벤트 한번에 처리
  • 반복 구조/동적 요소 많을 때 유용

장점

  • 반복 구조에서 핸들러 수 대폭 감소
  • 동적 생성된 요소에서도 자동 적용

주의사항

  • 반복 구조에서는 이벤트 위임
  • 단일/중요한 인터랙션은 직접 등록
    • submit, scroll, drag, touchmove : 예기치 않은 전파, 성능 문제 우려되므로 직접 등록
    • 로그인, 결제, 보안 관련 이벤트 : 반드시 의도한 대상에서만 동작해야 하므로 직접 등록
    • 버블링이 중간에 중단되는 구조 : 위임이 제대로 동작하지 않으므로 직접 등록

크롬 개발자 도구의 Performance, Memory 탭으로 주기적으로 성능 점검
이벤트 핸들러 수, 실행 시간, GC 상태, etc.

오늘 배운 것

  1. JavaScript

    html에서 사용 방법

    • inline
    • 내부
    • 외부

    blank final

    • 생성자에서 단 한번만 초기화

    const

    • 선언 시 ‘할당’도 동시에 진행

    자료형

    • 기본형
      • number : 정수 or 부동소수점 실수
      • string
      • boolean
      • undefined : 변수 선언만 하고, 할당 X or undefined 할당
      • null : 변수 선언하고, null 할당

    number

    • Infinity : 한계를 넘어서는 값 (ex. 1/0)
    • NaN : not a number, NaN은 어떤 산술연산을 해도 결과는 NaN
    • isFinite(x) : x값이 표현 가능한 자릿수인지? (NaN/infinity/-infinity일 때 false, 나머지 true)
    • isNaN(x) : x값이 NaN인지?
    • Number : 참조형
      • But, 기본형으로도 Number에 정의된 함수 사용 가능 (weakly typed language)

    템플릿 문자열

    • 따옴표가 아닌 백틱 문자(\`)로 문자열 감싸기
    • 이때, 문자열 안에 변수 삽입 가능 ${변수명}
    • 손쉬운 문단 구성 가능 : 중간에 엔터키 삽입 가능!

    boolean

    • falsy : 논리값 필요 시 false로 인식하는 경우
      • false, null, undefined, NaN, 0, ““(빈 문자열)

    객체 속성 관리

    • in 연산자 : 객체가 특정 속성 가지고 있는지?
    • 이때, user-address 와 같이 - 존재 시 연산자로 인식되므로 [] 붙이기
    • ex. person["user-address"]

    연산

    • + 연산과 그 외 연산이 다르게 동작
    • ===, !== : 값과 타입 모두 같아야 함!
    • short-circuit 논리 연산자
      • &&, || : 비교와 할당 동시 발생!

    function

    • 파라미터 : var/let 등의 변수 선언 지시어 사용 X
      • 파라미터 수가 달라도 동작(!?)

    함수 호이스팅

    1. 파싱 : 프로그램 전역 레벨에서 선언문 파싱
      • 전역레벨에서 정의된 이름있는 함수에 대해 함수명으로 변수 생성
    2. 실행 : 할당(=) 등 실행문 실행
      • 따라서 함수 호출 후 해당 함수 정의가 있어도 정상 동작!
      • ex. var num 1 = 10 에서 var num1 까지는 선언문, num1 = 10 은 실행문이므로, 파싱 단계에서 저장되는 num1 = undefined !!!(초기화만 된 상태)

    first class citizen

    • function은 메모리상에 객체로 존재, 변수에 할당되어 참조값으로 사용

    callback function

    • 다른 함수에 인자로 전달되어, event 발생 등의 특정 조건에서 호출되는 function

내일 할 일

  1. 정처기 필기 모의고사 CBT 풀어보고 오답노트 (con.)

참고자료

results matching ""

    No results matching ""