TypeScript Proxy로 gRPC 통신, 100만 줄 코드 삭제!
by DD
1년 전
조회수 9
gRPC를 사용하는 게임 Admin에서 Proxy API를 활용하여 FE-BE 간 통신을 구현함
TypeScript 기반의 Proxy를 통해 code-gen 없이 FE에서 BE API를 호출하도록 개선함
100만 줄의 JavaScript 코드 삭제 및 개발 생산성 향상, Admin BE 부팅 시간 단축
gRPC와 Proxy API를 활용한 FE-BE 통신 구조
gRPC는 HTTP/2 기반 프로토콜로, protobuf를 사용하여 바이너리 데이터를 직렬화한다. Admin FE는 gRPC를 직접 호출할 수 없어 Admin BE를 프록시로 사용한다. 따라서 Proxy API를 통해 FE에서 BE의 gRPC 메서드를 호출하도록 설계하여, FE 개발 생산성을 향상시켰다.
Proxy API를 이용한 동적 gRPC 클라이언트 구현
JavaScript Proxy API를 사용하여 런타임에 FE용 gRPC 클라이언트를 동적으로 생성한다. get() handler와 apply() handler를 재정의하여, 마치 FE에서 BE API를 직접 호출하는 듯한 개발 경험을 제공한다. code-gen 없이 타입 안전성을 유지하며, 유연성을 확보했다.
Proxy 서버 최적화: JSON 기반 직렬화
기존 code-gen 방식 대신 JSON 기반 직렬화 방식을 채택하여 Admin BE 부팅 시간을 단축했다. protobufjs의 reflection 기능을 활용하여 런타임에 proto 파일을 JSON으로 변환한다. 100만 줄의 JavaScript 코드 삭제를 통해 유지보수성을 높이고, 성능 향상을 달성했다.
