![]()
들어가며한번에 많은 대량의 데이터를 처리하게 되면 싱글 스레드 구조상 연산이 끝나기 전까지 웹이 먹통이 됩니다.이런 상황에서 태스크의 분산 처리가 필요한데 requestIdleCallback을 통해 브라우저의 유휴시간에 분할 요청하여 대량 데이터 연산을 처리할 수 있습니다. window.requestIdleCallback() - Web API | MDNwindow.requestIdleCallback() 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않developer.mozilla.org 우리의 목표는 다음과 같습니다대량의 데이터를 처리하되 인터렉션을 유지한다.데이터 처리 진행율을 시각..
![]()
1. Type assertion 대신 Type Guard로 타입 좁히기as(type assertion)대신 type guard를 사용하는 것이 대부분 더 안전합니다.as(type assertion)의 경우 type 체크의 블랙박스를 만들고 운영 이슈로 이어질 수 있습니다.const dog = {} as Dog;// ❌ 런타임 에러가 나기 쉽다.dog.bark();interface Animal { type: 'dog' | 'bird'}type AnimalType = Animal['type']interface Dog extends Animal { type: 'dog'; bark: VoidFunction}interface Bird extends Animal { type: 'bird'; ..
![]()
멀티 탭간 인터렉션에 대해 고려해야하는 순간이 있습니다.독립적 탭에서 발생하는 인터렉션을 구독해서 화면을 업데이트(예를 들면 받은 좋아요 혹은 새로운 메세지)를 해야할 수 있습니다.그럴 때 유용한 기능이 Broadcast Channel API입니다.Broadcast Channel API는 동일 origin을 가진 웹페이지간 통신 기능을 제공합니다.채널 명이 동일하다면 해당 채널에 대한 메세지를 수신할 수 있기 때문에 멀티 탭간 통신에 유용한 API 입니다.이 기능을 이용해서 React 앱에서의 멀티 탭 통신 예제를 만들어 보도록 하겠습니다.BroadcastChnnelManager를 만들어 중앙에서 모든 채널을 관리하도록 의도했습니다.BroadcastChnnelManager의 목표는 앱에서 이용되는 채널과..
