TypeScript의 필요성

TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입을 지원하여 코드의 안정성과 유지보수성을 향상시킵니다. JavaScript는 동적 타입 언어로, 런타임에 타입 오류가 발견될 수 있습니다. TypeScript는 컴파일 타임에 타입 오류를 잡아줌으로써 이러한 문제를 방지합니다.

<aside> 1️⃣ 정적 타입 검사

TypeScript는 변수, 함수 인자, 반환 값 등에 타입을 명시적으로 정의할 수 있습니다. 이는 코드를 작성하는 도중에 타입 오류를 사전에 방지할 수 있게 합니다.

</aside>

<aside> 2️⃣ 코드 가독성 및 유지보수성 향상

명시적인 타입 선언은 코드의 의도를 명확히 하여 다른 개발자가 코드를 이해하고 유지보수하는 데 큰 도움을 줍니다. 이는 팀 프로젝트에서 특히 유용합니다.

</aside>

<aside> 3️⃣ 개발자 도구 지원 강화 TypeScript는 다양한 IDE와의 호환성이 좋아 코드 자동 완성, 디버깅 등의 도구를 효과적으로 활용할 수 있습니다.

</aside>

요즘 리액트 개발에서 Typescript는 선택이 아닌 필수입니다.

API의 타입

클라이언트에서 관리하는 상태, 함수들의 타입 뿐만 아니라 서버와 API 통신에 사용되는 request, response에 대한 타입 또한 명시해주어야 합니다.

API의 타입을 정의하면, 클라이언트와 서버 간의 데이터 형식 및 구조를 명확히 규정할 수 있습니다.

하지만 API의 타입을 하나씩 정의하여 작성하는 것은 쉬운일이 아닙니다.

저희 서버 Swagger를 한번 보겠습니다.

Untitled

저희의 앱잼 기간의 스프린트에서는 20여개의 API가 사용되었고, 50여개의 스키마가 정의되어 있습니다. (스키마 시작부분의 스크린샷인데, 옆에 페이지의 절반도 못온 스크롤이 보이시나요,,,,) request, response 그리고 그 안에 다양한 데이터의 모든 객체에 대한 타입이 있고, 프로젝트의 규모가 커질수록 이는 기하급수적으로 많아지게 됩니다.

하지만 타입스크립트를 사용하고, API로 서버와 통신하기 위해서는 이 모든 스키마들에 대한 타입 정의가 필요합니다.

이건 굉장히 귀찮은 일일뿐만 아니라, 저걸 사람이 보고 하나하나 치다보면 오타 등 다양한 오류가 발생할 수도 있습니다.

그렇다면 이걸 좀 쉽게 할 수 있는 방법은 없을까요?

라이브러리 소개 - openapi-typescript