본문 바로가기

👨‍💻 web.dev/js.ts10

DOM event.composed (shadow root 밖으로 이벤트 전파시키기) 📌 CustomEvent 가 shadow root 밖으로 전파되지 않는다? shadow DOM 과 함께 작업하다보면 CustomEvent 로 생성한 이벤트가 shadow DOM boundary 를 벗어나서 전파 되지 않는 이슈를 마주하게 되는데, 이는 의도된 동작입니다. 예시로 살펴봅시다. 다음과 같은 menu 컴포넌트가 있다고 하겠습니다. 재사용성을 위해 공통 메뉴 로직을 담은 컴포넌트입니다. 코드는 단순화시켰지만, open 속성이 true 가 되면 해당 메뉴 엘리먼트의 overlay 선택시에 메뉴를 닫기 위한 커스텀 이벤트를 발생시키는 핸들러를 부착하는 흐름으로 진행됩니다. export default class MyMenu extends HTMLElement { // ... other logics a.. 2023. 5. 15.

TypeScript + Jest 유닛 테스트 작성하기 이번 포스트에서는 TypeScript 환경에서 Jest 로 유닛 테스트를 진행하기 위해 필요한 설정들과 확인을 위한 간단한 예시 코드를 작성해보겠습니다. 사용할 테스트 프레임워크는 가장 대중적으로 사용되고 있는 Jest 입니다. 📌 Jest 설정 1️⃣ 패키지 설치 먼저 필요한 패키지를 설치합니다. npm i -D jest @jest/globals ts-jest 💡 @jest/globals 명시적인 import 를 선호하기에, 해당 패키지를 사용해서 jest api 사용했습니다. 💡 ts-test TS 로된 모듈 테스트를 수행할 때 컴파일 + 타입 체크까지 함께 수행할 수 있도록 해줍니다. 2️⃣ config 파일 추가 // jest.config.js /** @type {import('jest').Con.. 2022. 11. 27.

async function 식별하기 📌 문제 상황 사내 프로젝트를 진행하다가 prop 으로 전달받은 함수의 반환값에 따라서 그 다음 호출되는 액션 핸들러를 제어하기 위한 경우가 생겼습니다. 아래는 이를 간략화한 예시 코드입니다. interface ComponentProps { onAction: () => void onClick: () => unknown } export default function Component({ onClose }: ComponentProps) { // ... const handleClick = () => { onClick ? onClick() && onAction() : onAction() } return ( try me! ) } 여기서 onClick 이 동기 함수라면 아무런 문제가 발생하지 않는데.. Promis.. 2022. 8. 8.

[JavaScript] Debounce 와 Throttle 에 대해 알아보자 📌 Debounce 와 Throttle 을 이용한 이벤트 처리 debounce 와 throttle 은 과도한 이벤트 발생으로 인한 성능 저하를 방지하는 방법입니다. 이 둘은 일정 시간 간격을 두고 이벤트를 호출한다는 동일한 목표를 가지고 있지만 서로 동작 방식이 다릅니다. 📌 Debounce 의 동작 방식과 구현 1️⃣ Debounce 동작 예시 debounce 는 이벤트를 그룹화하여 하나의 이벤트만 호출되도록 합니다. 위 예시와 같이 debounce 는 일정 waiting time 동안 함수 호출이 없는 경우 가장 마지막 이벤트를 선택합니다. (trailing) 이 대신에 가장 처음 호출된 이벤트를 선택하는 방법도 있습니다. (leading) 2️⃣ Debounce 구현하기 function deboun.. 2022. 7. 9.

[TypeScript] enum 과 union type, 언제 써야할까? 📌 TypeScript 에서 연관된 타입 정의하기 TypeScript 를 이용해서 개발을 하다보면 서로 연관된 값을 타입으로 정의할 때 enum 혹은 union type 을 이용해서 정의하게 됩니다. 두가지 방법 중에서 어떤것이 최선인지 항상 고민이 되었는데 이번 기회에 둘의 차이점에 대해서 알아두면 좋을 것 같아서 정리해봤습니다. 만약 디바이스의 종류에 대한 타입을 string union 으로 정의한다면 다음과 같습니다. type DeviceType = "phone" | "desktop" | "pad" | "watch" 이를 enum 을 이용해서 타입을 정의하면 다음과 같습니다. enum DeviceType { phone = 'phone', desktop = 'desktop', tablet = 'tab.. 2022. 7. 9.

[JavaScript] Array.sort 는 안정성을 보장할까? JavaScript 의 sort 함수는 안정 정렬일까? 📌 안정 정렬이란? 안정 정렬(stable sort) 은 동일한 키 값에 대해 입력 순서를 보장하는 정렬 알고리즘입니다. 그 반대인 불안정 정렬(unstable sort) 은 정렬 후 입력 순서를 보장해주지 않습니다. 대표적인 안정 정렬 알고리즘은 다음과 같이 3가지가 있습니다. 1️⃣ 버블 정렬 (Bubble Sort) 2️⃣ 삽입 정렬 (Insertion Sort) 3️⃣ 병합 정렬 (Merge Sort) 그 외 퀵 정렬 과 선택 정렬 은 불안정 정렬 의 대표적인 알고리즘입니다. 📌 JavaScript 의 sort 함수 JavaScript 의 sort 함수는 안정 정렬일까? JavaScript 의 sort 함수는 그렇다면 안정 정렬 일까요? Ch.. 2022. 3. 9.

이전 1 2 다음

티스토리툴바