혜개바라
close
프로필 배경
프로필 로고

혜개바라

  • 분류 전체보기 (170)
    • 코테 준비 (46)
      • 알고리즘 (8)
      • [JS] 프로그래머스 (37)
      • [MYSQL] 프로그래머스 (1)
    • 언어 정리 (52)
      • JavaScript (52)
      • TypeScript (0)
    • 개발 공부 (26)
      • HTML (2)
      • CSS (2)
      • React-Next.js (6)
      • Vue (0)
      • Tanstack Query (1)
      • Webpack (4)
      • Github (2)
      • MYSQL (2)
      • 기타 (개발 공부) (7)
    • 프로젝트 (22)
      • Vanilla JS 문서편집기 (10)
      • 올해도 아좌좌 (5)
      • 개발괴발 (5)
      • 기타 (프로젝트) (2)
    • 회고 (18)
    • 블로그 관리 (0)
    • 기타 (4)
  • 홈
  • 코테 준비
  • 언어 정리
  • 개발 공부
  • 프로젝트
  • 회고
  • 태그
  • 방명록
  • github@suehdn
디바운스와 스로틀

디바운스와 스로틀

scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.다음 예제의 버튼을 짧은 시간 간격으로 연속해서 클릭했을 때 일반적인 이벤트 핸들러와 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도가 어떻게 다른지 살펴보자! click me 일반 클릭 이벤트 카운터 0 디바운스 클릭 이벤트 카운터 0 스로틀 클릭 이벤트 카운터 0 일반적인 이벤트 핸들러'click me' 버튼을 누를때마다 카운..

  • format_list_bulleted 개발 공부/HTML
  • · 2024. 8. 7.
  • textsms
이벤트를 간편하게 걸고 싶은 당신을 위한 ”이벤트 버블링,캡처링, 위임”

이벤트를 간편하게 걸고 싶은 당신을 위한 ”이벤트 버블링,캡처링, 위임”

여러분은 여러개의 버튼을 반복문을 통해 만들었고, 각 버튼에 이벤트를 추가해야한다면 어떤 방식을 사용하시나요?일일히 쿼리를 querySelector로 가져와 이벤트를 추가하시는 분이 있으시다면 이 글을 본 뒤 한번 적용해 보시면 좋을것 같습니다.이벤트를 등록하는 법이벤트에 반응하기 위해선 이벤트가 발생했을 때 실행되는 함수 핸들러(handler)를 할당해야 합니다.my buttonvar button = document.querySelector('button');button.addEventListener('click', (event) => { console.log(event);});우리는 위의 예시와 같은 코드를 통해 버튼을 만들고, 그 버튼을 클릭했을때 어떤 동작을 할 지 정할 수 있습니다. 이때 브라우..

  • format_list_bulleted 개발 공부/HTML
  • · 2024. 8. 7.
  • textsms
contentEditable에 placeholder 적용하기(흉내내기)

contentEditable에 placeholder 적용하기(흉내내기)

contentEditable에서 placeholder를 적용하려면..위의 코드와 같은 방식으로 작성했을때 과연 아래의 사진과 같은 결과가 나올까요?직접 해봤다면 원하는대로 적용이 되지않음을 알 수 있습니다.placeholder는 input이나 textarea 태그인 경우에만 사용할 수 있습니다.따라서 ContentEditable은 엘리먼트를 input처럼 편집할 수 있지만 placeholder 어트리뷰트는 적용할 수 없음을 알 수 있습니다. 그렇다면 placeholder를 사용할 수 있는 방법은 없는걸까요..?😭가능합니다!가상클래스를 이용한 방법으로 placeholder인것 처럼 동작할 수 있게 만들 수 있는데 방법은 아래와 같습니다.:empty : 자식, 텍스트가 없는 요소 선택:before : 의사..

  • format_list_bulleted 프로젝트/개발괴발
  • · 2024. 8. 6.
  • textsms
  • navigate_before
  • 1
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (170)
    • 코테 준비 (46)
      • 알고리즘 (8)
      • [JS] 프로그래머스 (37)
      • [MYSQL] 프로그래머스 (1)
    • 언어 정리 (52)
      • JavaScript (52)
      • TypeScript (0)
    • 개발 공부 (26)
      • HTML (2)
      • CSS (2)
      • React-Next.js (6)
      • Vue (0)
      • Tanstack Query (1)
      • Webpack (4)
      • Github (2)
      • MYSQL (2)
      • 기타 (개발 공부) (7)
    • 프로젝트 (22)
      • Vanilla JS 문서편집기 (10)
      • 올해도 아좌좌 (5)
      • 개발괴발 (5)
      • 기타 (프로젝트) (2)
    • 회고 (18)
    • 블로그 관리 (0)
    • 기타 (4)
최근 글
인기 글
최근 댓글
태그
  • #VanillaJS
  • #코딩테스트준비
  • #프로젝트
  • #js
  • #JavaScript
  • #0단계
  • #회고
  • #프로그래머스
  • #js메서드
  • #2023
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바