This article describes how to comunicate with a gRPC-Web proxy server with the Protobuf compilation files we created from the Part 1. Part 1: https://ranku.tistory.com/161 React & gRPC-Web : PART 1 - How To Compile Protobuf in Windows Environment This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. Thi is only front-..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 16:31

This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. Thi is only front-end side. The backend must be setup as gRPC-Web server using .NET gRPC service with gRPC-Web or Envoy proxy. In order for gRPC-Web clients to communicate with the backend gRPC-Web servers, the fontend apps must have Protobuf compilation files. The..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 15:59

If you separate front and back end, you may have CORS issue. The CORS issue can happen if you assign different ports or use different domain. This example shows how to add CORS to open a service to ALL external addresses to simplify the code. In any production environment, this is NOT a safe option. You must use CORS policy to allow only certain number of external addresses. Before starting this..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 15:29

In gRPC world, there is no text-to-binary conversion, so the machines do not spend time to convert data to the format they can read. However, gRPC utilizes HTTP/2 protocol, which is not yet supported with current browsers. That is what gRPC-Web was introduced. gRPC-Web uses HTTP/1.1 protocol in browsers. In .NET 7, there is a new feature called JSON Transcoding, which uses Google API to convert ..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 15:19

이 글에서는 .NET gRPC 서버제작과 간단하게 gRPC-Web 기능을 넣는 방법을 소개해 드리겠습니다. gRPC 서버는 바이너리 데이터형식이라 텍스트 형식의 Restful 기반의 서버보다 훨씬 빠른 성능을 가지고 있습니다. 그러나 HTTP/2 프로토콜을 사용하여 기존의 브라우저에서는 호환이 안 되는 단점이 있습니다. 그로 인해 gRPC-Web이라는 기능을 넣고 HTTP/1.1 프로토콜을 이용하여 gRPC와 데이터 교류가 가능해집니다. .NET 7 에서는 Json Trancoding이라는 Google API를 이용한 신기능이 도입되어 gRPC-Web 없이도 gRPC 서버와 브라우저와 호환이 가능하지만 제가 테스트해본 결과 Google API 버전 문제와 .NET 7의 라이브러리 호환 문제로 아직 시기상..

개발 (Development & Coding)/한글본 (Korean) 2022. 11. 28. 17:52

이번 글에서는 리액트로 gRPC-Web 서버에서 데이터 가져오기를 해 보겠습니다. 저번 글에서 생성된 두 개의 컴필레이션 파일을 이용하여 gRPC-Web 서버나 프락시에서 데이터를 가지고 와 보겠습니다. 1. Prerequisites (준비사항) a. 리액트 프로젝트 및 .proto 파일과 컴파일된 두 개의 자바스크립트 파일 아래의 파일들로 이 글을 작성해 보겠습니다. 이 예제에선 아래 세 가지 파일들은 모두 src/protos 폴더에 위치해 있습니다. greet.proto greet_grpc_web_pb.js greet_pb.js b. gRPC-Web 서버나 프락시 위의 파일들은 greeter 서비스를 이용하므로 서버에서도 같은 서비스가 노출이 되어 있어야겠죠? 사용하시는 서비스를 서버와 클라이언트에 ..

개발 (Development & Coding)/한글본 (Korean) 2022. 11. 28. 15:00

이 글에선 윈도즈 환경에서 React (리액트)의 gRPC-Web으로 컴필레이션 하는 방법을 소개해드리겠습니다. gRPC-Web 은 gRPC 서버에 WebAPI 형식으로 엔드포인트와 커뮤니케이션을 할 수 있게 만들어 주는 방법입니다. 간단하게 생각하면 HTTP/1.1과 HTTP/2의 컨버터라고 보시면 됩니다. 이 방법을 쓰는 이유는 아직 브라우저에선 HTTP/2 형식을 서포트를 못해서 이고요. 컴필레이션 파일을 이용하여 gRPC-Web 서버에 HTTP/1.1 방식의 연결과 통화를 합니다. 이글 하나만으로 다 된 건 아닙니다 ^^ 자바스크립트 기반의 웹 클라이언트에서의 셋업이 이 글의 내용입니다. gRPC 서버의 엔드포인트에 완전히 연결하기 위해선 .NET 기반의 gRPC 서버에 gRPC-Web 기능을 넣..

개발 (Development & Coding)/한글본 (Korean) 2022. 11. 25. 15:47