[TIL🔥] Day15(8/26)

Introduction

오늘은 자동 완성 편집기 구현 강의를 들었다. 로토님께서 사용자를 위한 웹페이지를 만들기 위한 여러 방법들을 알려주셨고, 그것들이 매우 흥미로웠다...개념만 접하고 아직 완벽히 구현하진못하지만, 노션 클론 프로젝트를 통해 열심히 연습해봐야겠다.
사용자 입장에서 생각하는 개발자가 되려면 어떻게 해야하는지가 구체화된 느낌이라 기분이 좋았다.
데브코스를 하면서 가장 좋은점은 혼자는 막연했던 공부 방향 등이 이제는 어떤 방향으로 공부해야할지 확실히 알겠고, 멘토님과 좋은 동료들 덕분에 힘이 난다는 것이다~🥳

오늘 새롭게 배운 것

1. 이벤트 위임(Event Delegation)
2. 낙관적 업데이트
3. 디바운스(Debounce)

오늘은 하나의 주제를 정하지않고, 각 용어에 대해 간단히 정리해보고자 한다.

1. 이벤트 위임(Event Delegation)

이벤트 위임을 이해하려면 먼저 이벤트 캡처링과 버블링에 대해 알아야한다. 위의 링크에 자세히 설명되어있다.

이벤트 위임이란?

이벤트 캡처링과 버블링을 활용하여 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다루는 방법

이벤트 위임을 사용하지않는다면

$todoItems.forEach($item => {
  $item.addEventListener('click', e => {
  	// 이벤트 내용
  })
}

이벤트 위임없이 위와 같이 forEach문을 사용할 경우에는
몇가지 문제점이 존재한다.

• 새로 추가되는(동적으로 등록되는) 요소에는 이벤트가 적용되지 않는다.
• 요소가 많아질경우, 모든 요소에 이벤트를 걸어 메모리 사용량이 많아지고 누수가 발생할 수 있다.

이벤트 위임을 사용한다면

$todoList.addEventListener('click', e => {
  const { id } = e.target.dataset;
  console.log(`${id}가 클릭되었습니다!`);
});

위의 코드처럼 여러 todoItem을 가지고 있는 todoList(부모 요소)에 이벤트를 등록해주고,
e.target을 이용해 실제 이벤트가 발생한 요소를 찾아 각 요소들에 대한 이벤트 제어가 가능해진다.

이벤트 위임을 사용한다면,
동적으로 등록되는 요소에도 이벤트가 적용되면, 메모리 사용량 역시 줄일 수 있다.

2. 낙관적 업데이트

낙관적 업데이트란?

API를 이용해 데이터를 가져와 화면에 렌더링할 경우 서버에 따라 사용자가 느낄만한 지연성이 발생할 수 있다.

이때 서버에서 데이터를 받기 전에 입력된 값을 미리 화면에 렌더링해주고,
서버에서 데이터를 받으면 그 최신 정보로 재렌더링을 해주는 것이 바로 낙관적 업데이트이다.

즉, 서버에서 데이터를 받아올 수 있을 것이라는 낙관적인 생각을 기반으로 이러한 이름이 지어졌다고 볼 수 있다. 향상된 사용자 경험 제공이 가능하다.

3. 디바운스(Debounce)

디바운스란?

이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 방법

연이어 호출되는 이벤트들 중 마지막 이벤트만 호출하도록 하는 방법

노션과 같은 자동 저장 편집기를 예로 들자면, 사용자가 글자를 연속적으로 입력한다면 저장하지않고,
연속적으로 입력하다가 입력을 몇 초간 멈춘다면 그때 저장 이벤트를 발생시키는 방식이라 볼 수 있다.
이는 불필요한 자원 낭비와 이벤트 발생 횟수를 줄여준다.

Comment

해야할 일은 많지만 무언가를 할 수 있다는 것에 그리고 좋은 방향으로 나아가고있다는 것에 감사하다.
자바스크립트를 배우면 배울수록 재미있고 신기하다.
정말 언젠가 고객을 위한 서비스를 만들고 있을 나를 상상하며 계속해서 열정을 불태우고자한다.
나의 뇌야, 체력아, 손목아, 눈아 버텨줘 제발~~~🔥