프론트엔드
TypeScript 쓰면서 OpenAPI Generator 는 안 쓴다고?
두줄요약
Swagger와 OpenAPI Generator로 REST API 명세 기반 TypeScript 타입 자동 생성을 소개했습니다. API 변경 추적과 프론트엔드·백엔드 간 오사용 감소에 활용할 수 있습니다.
문제 상황
- RESTful API 입출력 불일치에 따른 프론트엔드 런타임 오류와 협업 비용
- API 증가 및 잦은 스펙 변경에 따른 TypeScript 타입 수동 관리 부담
해결 방법
- Swagger의 OpenAPI Specification 기반 API 명세 표준화
- OpenAPI Generator로 TypeScript API 입출력 타입 자동 생성
typescript-axios생성기와 npm 스크립트를 통한 모델 생성 자동화
구조와 흐름
- API 서버의
openapi.json을 입력으로 모델·API 코드 생성 - 생성 모델을 API 호출 정의와 react-query 데이터 타입에 활용
- 자동 생성 경로의
.gitignore처리 및 필요한 모델만 실제 코드에서 참조
주의할 점
- 자동 생성된 axios 기반 호출 함수의 프로젝트 적합성 검토 필요
- 백엔드 enum 정의의 한글 사용 시 생성 모델 오류 가능성
