이벤트 방출기 이벤트 방출기는 채널로 이벤트를 방출하고 채널에서 발생하는 이벤트를 리스닝하는 API를 제공합니다. interface Emitter { // 이벤트 방출 emit(channel: string, value: unknown): void // 이벤트가 방출되었을 때 어떤 작업을 수행 on(channel: string, f:(value: unknown)=>void): void } 이벤트 방출기는 JavaScript에서 자주 사용하는 디자인 패턴입니다. DOM 이벤트, 제이쿼리 이벤트, NodeJS의 EventEmitter 등을 사용하면서 이미 이벤트 방출기를 사용해 본 적 있으신 분도 계실 겁니다. 대부분의 언어에서 이런 형태의 이벤트 방출기는 안전하지 않습니다. value의 타입이 특정 chan..
타입 안전 API 어떤 프론트엔드/백엔드 프레임워크를 선택했든 클라이언트와 서버, 서버와 서버, 클라이언트 기기 간의 통신이 안전하게 이루어지기를 바랄 것입니다. 안전한 통신과 관련해 몇 가지 도구와 표준이 서로 경쟁하는 중입니다. 이들이 무엇이고 어떻게 동작하는지 살펴보기 전에 직접 해결책을 구현할 수 있는지, 그리고 직접 해결한다면 어떤 단점이 있는지 살펴보겠습니다. 예를 들어 현재의 클라이언트와 서버는 100% 타입 안전하지만 언젠가는 HTTP, TCP, 소켓 기반 프로토콜처럼 타입을 사용하지 않는 네트워크 프로토콜로 통신해야 할 수도 있을 것입니다. 그렇다면 어떻게 해야 그 상황에서도 타입 안전성을 유지할 수 있을까요? 타입 안전성을 제공하는 프로토콜을 직접 개발하는 방법이 있습니다. 아래는 직접..
TSX = JSX + TypeScript JSX 파일의 확장자는 보통 .jsx이고 JSX를 포함하는 TypeScript 파일의 확장자는 .tsx입니다. TSX는 TypeScript가 JavaScript에 제공하는 것과 같은 기능을 제공합니다. 즉, 컴파일 타임 안전성은 물론 실수를 줄이면서 더 생산적인 코드를 만들 수 있도록 도와줍니다. 프로젝트가 TSX를 지원하도록 하려면 tsconfig.json에 아래 내용을 추가하면 됩니다. JSX 지시어는 세 가지 모드를 지원합니다. react JSX 지시문(pragma)에 따라 JSX를 .js 파일로 컴파일합니다. 기본값은 React.createElement입니다. react-native 컴파일하지 않고 JSX를 보존하며, .js 확장자 파일을 생성합니다. pr..
리액트 리액트(React)는 오늘날 가장 인기 있는 프론트엔드 프레임워크 중 하나로, 타입 안정성과 관련해선 탁월한 선택이라 할 수 있습니다. 리액트 응용 프로그램의 기본 빌딩 블록인 리액트 컴포넌트는 TypeScript로 정의되고 소비되므로 안전합니다. 이는 다른 프론트엔드 프레임워크에선 찾아보기 힘든 특징으로, 컴포넌트 정의와 소비자 모두 타입을 검사함을 의미합니다. 덕분에 타입을 이용하여 "이 컴포넌트는 사용자 ID와 색을 인수로 받는다" 또는 "이 컴포넌트는 리스트 항목만을 자식으로 가질 수 있다"라고 표현할 수 있습니다. 타입으로 표현한 이러한 제한을 TypeScript가 강제하며 사용자의 컴포넌트가 이에 부합하는지 확인하는 것입니다. 그중에서도 컴포넌트 정의와 소비자에 제공하는 안전성은 독보적..
