슬기로운 땅콩 마을

HTML5 환경에서는 별도의 식별자를 가지고 동작을 모듈화시킬 수 있는 커스텀 요소(자세히 알아보기)를 정의할 수 있는 기능을 제공합니다.(e.g. 와 같은) 다만 TSX(Typescript JSX)에서는 별도의 타입 검사를 수행하기 때문에 JSX에서는 별도의 식별자 이름을 지닌 HTML 요소를 문제 없이 컴파일 할 수 있지만 TSX 환경에서는 별도로 이를 정의해 주지 않는다면 타입 검사에서 예외가 발생하게 됩니다. 이러한 이슈를 해결하는 방법은 매우 간단합니다.declare module "react/jsx-runtime" { namespace JSX { interface IntrinsicElements { "custom-element1": JSXCustomEleme..

평소처럼 한가롭게 개발을 이어가던 와중, React의 경량화 버전이라고 볼 수 있는 Preact에서 나의 자작 패키지 react_widgets의 타입 추론 기능(그에 따라 자동완성 기능이 제대로 동작하지 않음)이 Preact 기반 개발 환경에서 제대로 동작하지 않는다는 것을 깨달았습니다. 이에 대해 자세히 알아본 결과, Preact에서 CSS 속성이 정의된 인터페이스, 즉 CSSProperties를 Typescript에서 기본적으로 제공하는 유틸리티 타입인 Omit으로 랩핑한다면 어떤 이유인지 모르겠지만 CSSProperties의 모든 속성이 제외되는 현상이 발생한 것입니다. 이는 사실 대부분은 모두 아는 사실이겠지만 Omit 타입의 경우, 주어진 특정 속성만을 제외하는 기능을 수행합니다.Omit // ..

타입스크립트는 정적 타입 검사 기능 외에도 다양하고 유용한 기능들을 제공합니다. 하지만 많은 개발자들이 이러한 기능들을 잘 모르고 사용하지 않는 경우가 많습니다. 해당 글에서는 타입과 관련된 다양한 유틸리티 기능들을 살펴보도록 하겠습니다. 유틸리티 타입 (Utility Types)타입스크립트는 타입 보장 및 검사 기능 뿐만 아니라 그와 관련된 다양한 유틸리티 타입을 제공하여 기존 타입을 기반으로 새로운 타입을 쉽게 만들 수 있도록 도와줍니다. 쉽게 말하자면 마치 레고 블럭처럼, 타입스크립트에서는 이미 존재하는 타입들을 조립해서 새로운 타입을 만들 수 있는 편리한 도구들을 제공하는데, 이걸 "유틸리티 타입"이라고 부릅니다. 여기에선 몇 가지 자주 그리고 널리 사용되는 유틸리티 타입들을 소개하겠습니다.  P..

데코레이터(Decorator) 패턴, 혹시 한 번씩은 들어보시거나 기억나시나요? 해당 패턴은 기존 객체의 기능을 동적으로 추가하거나 덮는 식으로 전체적인 기능에 변화를 주거나 하는데 널리 사용되는 패턴 중 하나입니다. 더보기해당 패턴에 대해 더 자세히 알고 싶다면 https://mttankkeo.tistory.com/19 참고해주세요. 앞서 데코레이터 패턴을 언급한 이유는 바로 여러분에게 소개할 믹스인과 그 사용 목적이 매우 유사하기 때문입니다. 물론 데코레이터 패턴과 믹스인 개념에 이미 익숙한 분들도 계시겠지만, 믹스인은 주로 단일 상속만을 지원하는 Dart나 Javascript 같은 언어에서 사용되는 개념입니다. 다중 상속을 지원하는 C++ 같은 언어에서는 믹스인의 필요성이 크지 않습니다. 또 한 가..