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가 강제하며 사용자의 컴포넌트가 이에 부합하는지 확인하는 것입니다. 그중에서도 컴포넌트 정의와 소비자에 제공하는 안전성은 독보적..
프론트엔드 프레임워크 TypeScript는 프론트엔드 응용 프로그램 개발에 아주 적합합니다. 풍부한 JSX 지원과 변경에 안전하게 대응할 수 있는 능력으로 무장한 TypeScript는 응용 프로그램에 안전성과 멋진 구조를 선사하고, 빠르게 변화하는 프론트엔드 개발 환경에 적합한 정확하면서도 유지보수하기 쉬운 코드를 쉽게 작성할 수 있도록 도와줄 것이기 때문입니다. 물론 모든 내장 DOM API는 타입이 안전합니다. TypeScript에서 이 API를 사용하려면 간단히 프로젝트의 tsconfig.json에 필요한 타입 선언을 추가하기만 하면 됩니다. 이 설정은 TypeScript가 코드에서 타입을 검사할 때 lib.dom.d.ts(브라우저와 DOM 타입 내장 선언) 파일에 선언된 타입들을 포함하도록 합니다..
백엔드 프레임워크 DB와 상호작용하는 응용 프로그램을 만들 때 처음엔 타입을 갖지 않는 SQL 또는 API 호출을 그대로 사용했을 것입니다. // node-postgres를 이용한 PostgreSQL let client = new Client let res = await client.query( 'SELECT name FROM members where mId = $2', [123456] ) // any // node-mongodb-native를 이용한 MongoDB db.collection('members') .find({mId: 123456}) .toArray((err, member) => // member는 any ) 수동으로 타입을 추가하면 대부분의 any를 제거하면서 더 안전한 API로 개선할 수..
