[TS] 리액트 이벤트, 제네릭 컴포넌트, HTMLAttributes

리액트 이벤트리액트는 가상 DOM을 다루면서 이벤트도 별도로 관리한다. onclick , onchange 같이 DOM 엘리먼트에 등록되는 이벤트 리스너와 달리, 리액트 컴포넌트(노드)에 등록되는 이벤트 리스너는 onClick , onChange 처럼 카멜 케이스로 표기한다.리액트 이벤트는 브라우저의 고유한 이벤트와 완전히 동일하게 동작하지 않는다. 리액트 이벤트 핸들러는 이벤트 버블링 단계에서 호출된다.리액트는 브라우저 이벤트를 합성한 합성 이벤트(SyntheticEvent)를 제공한다.type EventHandler = ( e: Event) => void | null;type ChangeEventHandler = EventHandler>;const eventHandler1: GlobalEventHan..

• format_list_bulleted TypeScript
• · 2025. 2. 12.
• textsms

[TS] DetailedHTMLProps, ComponentPropsWithoutRef

리액트에서 HTML 태그의 속성 타입을 활용하는 대표적인 2가지 방법은 DetailedHTMLProps 와 ComponentWithoutRef 타입을 활용하는 것이다.DetailedHTMLPropsDetailedHTMLProps 타입을 활용하면 쉽게 HTML 태그 속성과 호환되는 타입을 선언할 수 있다. ButtonProps 의 onClick 타입은 실제 HTML button 태그의 onClick 이벤트 핸들러 타입과 동일하다.type NativeButtonProps = React.DetailedHTMLProps, HTMLButtonElement>;interface ButtonProps { onClick?: NativeButtonProps['onClick'];};ComponentPropsWithout..

• format_list_bulleted TypeScript
• · 2025. 2. 11.
• textsms

[TS] Superstruct

API 응답 값의 타입이 string 이어야 하는데 number 가 들어오는 것과 같이 잘못된 타입이 전달될 수 있다. 그러나 타입스크립트는 정적 검사 도구로 런타임에서 발생하는 오류는 찾아낼 수 없다. 런타임에 API 응답의 타입 오류를 방지하려면 Superstruct 같은 라이브러리를 사용하면 된다.Superstruct은 런타임에서의 데이터 유효성 검사를 통해 개발자와 사용자에게 자세한 런타임 에러를 보여주기 위해 고안되었다. 이를 사용하면 인터페이스 정의와 자바스크립트 데이터의 유효성 검사를 쉽게 할 수 있다.사용법assert : 유효하지 않을 경우 에러를 던진다.is : 유효성 검사 결과에 따른 boolean 값을 반환한다.validate : [error, data] 형식의 타입을 반환한다. 유효..

• format_list_bulleted TypeScript
• · 2025. 2. 4.
• textsms

[TS] 컴파일러 구조

컴파일러는 하나의 프로그램으로 이를 구현한 소스 파일이 존재한다. 타입스크립트 공식 깃허브에는 compiler라는 별도의 폴더로 구성된 타입스크립트 컴파일가 있다.해당 폴더는 타입스크립트 컴파일러가 동작하는 데 중요한 몇 가지 구성 요소를 가지고 있다. 주요 구성 요소로는 스캐너, 파서, 바인더, 체커, 이미터가 있다.타입스크립트 컴파일러는 다섯 단계를 거쳐 타입 검사와 자바스크립트 소스 변환을 수행한다.Program타입스크립트 컴파일러는 tsc 명령어로 실행된다. 컴파일러는 tsconfig.json에 명시된 컴파일 옵션을 기반으로 컴파일을 수행한다.가장 먼저 전체적인 컴파일 과정을 관리하는 프로그램 객체(인스턴스)가 생성된다. 이 객체는 컴파일할 소스 파일과 소스 파일 내에서 임포트된 파일을 불러온다...

• format_list_bulleted TypeScript
• · 2025. 2. 1.
• textsms

[TS] 런타임과 컴파일

런타임과 컴파일타임자바스크립트는 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 기계가 이해할 수 있는 저수준 프로그래밍 언어로 번역되어 실행된다.자바스크립트는 인터프리터 언어지만, 자바스크립트를 해석하고 실행하는 역할을 하는 V8 엔진은 때때로 최적화를 위해 컴파일 단계를 거친다. 이를 통해 코드를 캐싱하여 이후 실행 시간을 단축한다.컴파일타임은 소스코드가 컴파일 과정을 거쳐 컴퓨터가 인식할 수 있는 기계어 코드(바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행된다. 런타임은 컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.자바스크립트 런타임자바스크립트 런타임은 자바스크립트가 실행되는 환경을 의미..

• format_list_bulleted TypeScript
• · 2025. 1. 31.
• textsms

[TS] Record 원시 타입 키 개선

Record의 키를 string 이나 number 같은 원시 타입으로 명시하면 타입스크립트는 키가 유효하지 않더라도 타입상으로 문제가 없기 때문에 오류를 표시하지 않는다. 이는 런타임 에러를 야기할 수 있다.foodByCategory 객체는 무한한 키 집합을 가지게 된다. 객체에 없는 키값을 사용해도 타입스크립트는 오류를 표시하지 않는다. 그러나 런타임에서 westerns은 undefined 가 되어 오류를 반환한다.type Category = string;interface Food { name: string;}const foodByCategory: Record = { 한식: [{ name: '제육덮밥' }, { name: '뚝배기 불고기' }], 일식: [{ name: '초밥' }, { name:..

• format_list_bulleted TypeScript
• · 2025. 1. 30.
• textsms