top of page

React (리액트) 와 gRPC-Web : PART 1 : 윈도우 환경에서의 Protobuf 컴필레이션 방법

이 글에선 윈도즈 환경에서 React (리액트)의 gRPC-Web으로 컴필레이션 하는 방법을 소개해드리겠습니다. gRPC-Web 은 gRPC 서버에 WebAPI 형식으로 엔드포인트와 커뮤니케이션을 할 수 있게 만들어 주는 방법입니다. 간단하게 생각하면 HTTP/1.1과 HTTP/2의 컨버터라고 보시면 됩니다.


이 방법을 쓰는 이유는 아직 브라우저에선 HTTP/2 형식을 서포트를 못해서 이고요. 컴필레이션 파일을 이용하여 gRPC-Web 서버에 HTTP/1.1 방식의 연결과 통화를 합니다.


이글 하나만으로 다 된 건 아닙니다 ^^ 자바스크립트 기반의 웹 클라이언트에서의 셋업이 이 글의 내용입니다.


gRPC 서버의 엔드포인트에 완전히 연결하기 위해선 .NET 기반의 gRPC 서버에 gRPC-Web 기능을 넣던지, .NET 이 아니라면 제가 아는 정보는 Envoy라는 프락시 서버가 gRPC 서버와의 커뮤니케이션을 돕는 걸로 알고 있습니다.


여러 사이트들이 많이 나와 있는데 윈도즈 환경에서 방법 정보들이 다 흩어져있어서 한 군데로 다 모아 보았습니다.


 

1. Development Environment (개발 환경)

  • Windows 11 (10도 무관)

  • Visual Studio 2022 (이부분은 무관합니다)

  • React 프로젝트 (Javascript 버전)

    • src/protos 폴더에 샘플 .proto 파일 (Visual Studio사용하셨으면 greet.proto라는 파일이 자동 생성되어 있을거예요 - 이 글은 greet.proto 파일을 쓰겠습니다)

 

2. Prerequisites (준비사항)


a. OS 준비 항목


!!! 주의 - 모든 항목을 설치하실 때마다 윈도즈 시스템 환경 변수에 넣어 주셔야 합니다!!!





  • Protobuf JS Compiler (proto-gen-js)

    • 자바스크립트 버전의 Protobuf 컴필레이션 파일 생성을 위해 필요

    • 아래 커멘드를 입력하여 생성


b. React 리액트 준비 항목

다음의 라이브러리를 React 프로젝트에 설치해 주세요.

  • google-protobuf

  • grpc

  • grpc-web

  • @grpc/grpc-js

 

3. Instructions

a. Command Prompt 나 Powershell을 React 프로젝트의 루트 폴더에서 열어주세요

b. 다음의 커멘드 (중간에 직접 바꾸어야 하는 부분 있음)를 입력 후 엔터키 입력


만약에 여기서 오류가 뜨면 대개가 윈도즈 시스템 환경 변수 문제이니 재 확인하고 고쳐진 후엔 항상 지금의 창을 닫고 다시 1번으로 돌아가서 시작합니다

c. 오류가 없으면 src/protos 폴더에 다음의 두 가지 새로운 파일이 형성됩니다.

  • greet_grpc_web_pb.js

  • greet_pb.js

 

수고하셨고 축하드립니다!


이 두 가지 파일이 생성되면 완료된 것입니다. 다음엔 이 두 가지 파일을 이용하여 어떻게 React에서 gRPC 서버와 커뮤니케이션을 하는지 알려드리겠습니다.


감사합니다


pngegg (11)_result.webp

<Raank:랑크 /> 구독 하기 : Subscribe

감사합니다! : Thanks for submitting!

bottom of page