AI
Node.js와 React에서 VITO 음성인식 API 사용하기 (with TypeScript) - 파일 STT
두줄요약
TypeScript 기반 React·Express 환경에서 VITO 파일 STT API 연동 과정을 안내했습니다. 인증, 파일 업로드, 폴링 기반 결과 조회와 커스텀 훅 리팩터링을 다뤘습니다.
구조와 흐름
- React 클라이언트의 음성 파일 업로드와 Express 서버의 파일 전사 요청 구조
- 서버의 VITO STT API 인증 토큰 발급, form-data 전송,
transcribe_id수신 흐름 - 전사 완료 상태까지 폴링 후 발화문 배열을 클라이언트에 반환하는 결과 조회 흐름
해결 방법
.env의CLIENT_ID,CLIENT_SECRET으로 인증 정보 분리- Multer와
form-data를 통한 파일·전사 설정 전송 - React Axios 요청으로 전사 결과 수신 및 로딩·결과 화면 상태 관리
적용해볼 점
- 업로드 컴포넌트의 상태·이벤트 로직을
useUpload커스텀 훅으로 분리 - 지원 포맷, 최대 2GB 파일 크기, 최대 4시간 인식 시간 확인