gRPC-Web이란 무엇인가? 알아야 할 모든 것

안녕하세요! 웹 개발의 최신 트렌드를 따라잡고 있다면, 아마 gRPC-Web이라는 용어를 들어봤을 것입니다. 아마도 개발자로서 이를 프로젝트에 통합해야 할지 고민하고 있을 수도 있죠. 아니면 이 모든 소문이 어떤 것인지 궁금할 수도 있습니다. 어쨌든, 당신은 올바른 곳에 오셨습니다. gRPC-Web의 세계로 뛰어들어 봅시다. 이 게시물의 끝에 이게 무엇인지, 왜 유용한지, 그리고 어떻게 사용할 수 있는지에 대한 확실한 이해를 하게 될 것입니다.

gRPC-Web이란?

먼저, gRPC-Web이란 무엇인가요? 본질적으로 gRPC-Web은 웹 애플리케이션이 gRPC 서비스를 통신할 수 있게 해주는 자바스크립트 클라이언트 라이브러리입니다. 이는 HTTP/2를 사용하여 메시지를 전송하는 오픈 소스 프레임워크인 gRPC (Google Remote Procedure Call)의 기능을 확장합니다. gRPC는 확장 가능하고 효율적인 API를 구축하는 것을 쉽게 만들기 위해 설계되었습니다.

gRPC에 대한 간단한 요약

gRPC-Web에 대해 더 깊이 들어가기 전에, gRPC 자체에 대한 간단한 복습을 해봅시다. gRPC는 Google에서 개발했으며, 마이크로서비스 통신에 널리 사용됩니다. HTTP/2, 프로토콜 버퍼(프로토폼), 그리고 인증, 로드 밸런싱 등과 같은 기능을 제공합니다. gRPC를 사용하면 프로토콜 버퍼를 사용하여 서비스 메서드와 메시지 유형을 정의하며, 이후 클라이언트와 서버 모두를 위한 코드를 생성합니다.

왜 gRPC-Web이 필요한가요?

그렇다면 우리가 이미 gRPC가 있는데 왜 gRPC-Web이 필요할까요? 그 답은 브라우저의 제한에 있습니다. gRPC는 서버 간 통신에 뛰어나지만, 브라우저는 gRPC가 의존하는 HTTP/2 트레일러를 지원하지 않기 때문에 직접 작동하지 않습니다. 여기서 gRPC-Web이 등장합니다. gRPC-Web은 다리 역할을 하여 gRPC 서비스가 웹 애플리케이션에 의해 소비될 수 있게 해줍니다.

gRPC-Web의 주요 이점

이제 gRPC-Web이 무엇인지 알았으니, 사용하고 싶은 이유를 알아봅시다. 다음은 몇 가지 주요 이점입니다:

1. 성능

gRPC-Web의 뛰어난 기능 중 하나는 성능입니다. HTTP/2와 프로토콜 버퍼를 사용하여 gRPC-Web은 높은 수의 요청을 효율적으로 처리할 수 있습니다. 이는 실시간 데이터 교환이 필요하거나 여러 동시 연결을 관리해야 하는 애플리케이션에 이상적입니다.

2. 사용 용이성

gRPC-Web을 사용하면 웹 클라이언트와 백엔드 서비스 모두에 대해 동일한 프로토콜 버퍼 정의를 활용할 수 있습니다. 즉, 애플리케이션 스택 전반에 걸쳐 일관성을 유지하고 작성해야 하는 보일러플레이트 코드를 줄일 수 있습니다. 또한, Apidog와 같은 도구를 사용하면 API 개발 프로세스를 더욱 간소화할 수 있습니다.

3. 확장성

gRPC-Web은 HTTP/2를 사용하기 때문에 다중 요청이 단일 연결을 통해 전송될 수 있는 멀티플렉싱과 같은 이점이 있습니다. 이는 여러 연결을 생성하고 관리하는 것과 관련된 오버헤드를 줄여 애플리케이션의 확장성을 높입니다.

4. 상호 운용성

gRPC-Web은 웹 애플리케이션과 gRPC 서비스 간의 원활한 통신을 가능하게 합니다. 이는 추가 REST API를 생성할 필요 없이 기존 gRPC 기반 마이크로서비스 아키텍처와 상호작용할 수 있는 현대적인 웹 앱을 구축할 수 있음을 의미합니다.

gRPC-Web 시작하기

좋습니다, 이론은 충분합니다! 이제 손을 더럽히고 gRPC-Web을 프로젝트에서 어떻게 사용할 수 있는지 살펴봅시다.

사전 요구 사항

시작하기 전에 다음을 설치했는지 확인하세요:

Node.js
npm 또는 yarn
프로토콜 버퍼 컴파일러 (protoc)

1단계: 서비스 정의하기

첫 번째 단계는 프로토콜 버퍼를 사용하여 gRPC 서비스를 정의하는 것입니다. 서비스 및 메시지 정의와 함께 .proto 파일을 생성하십시오. 예를 들어:

syntax = "proto3";

package example;

service HelloService {
  rpc SayHello (HelloRequest) returns (HelloResponse);
}

message HelloRequest {
  string name = 1;
}

message HelloResponse {
  string message = 1;
}

2단계: 클라이언트 및 서버 코드 생성하기

다음으로, 프로토콜 버퍼 컴파일러를 사용하여 클라이언트 및 서버 코드를 생성합니다. 다음 명령어를 실행하세요:

protoc -I=. --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. example.proto

이 명령어는 gRPC-Web 클라이언트를 위한 필요한 자바스크립트 파일을 생성합니다.

3단계: 서버 설정하기

이제 요청을 처리할 gRPC 서버를 설정합니다. 다음은 Node.js를 사용하는 예입니다:

const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');

const packageDefinition = protoLoader.loadSync('example.proto', {});
const exampleProto = grpc.loadPackageDefinition(packageDefinition).example;

function sayHello(call, callback) {
  callback(null, { message: `안녕하세요, ${call.request.name}!` });
}

const server = new grpc.Server();
server.addService(exampleProto.HelloService.service, { sayHello: sayHello });
server.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {
  server.start();
});

4단계: 클라이언트 설정하기

마지막으로, gRPC 서버와 통신할 웹 클라이언트를 설정합니다. 다음은 React를 사용하는 예입니다:

import React, { useState } from 'react';
import { HelloServiceClient } from './example_grpc_web_pb';
import { HelloRequest } from './example_pb';

const client = new HelloServiceClient('http://localhost:8080');

function App() {
  const [response, setResponse] = useState('');

  const sayHello = () => {
    const request = new HelloRequest();
    request.setName('세계');

    client.sayHello(request, {}, (err, response) => {
      if (err) {
        console.error(err);
      } else {
        setResponse(response.getMessage());
      }
    });
  };

  return (
    <div>
      <button onClick={sayHello}>인사하기</button>
      <p>{response}</p>
    </div>
  );
}

export default App;

5단계: 프록시 설정하기

gRPC-Web은 HTTP/2를 사용하므로 요청을 변환하기 위한 프록시를 설정해야 합니다. 이 목적으로 grpc-web 프록시를 사용할 수 있습니다. 다음은 설정 방법입니다:

docker run -d -p 8080:8080 --network host \
  --name grpc-web-proxy \
  envoyproxy/envoy:v1.18.3 -c /etc/envoy-config.yaml

envoy-config.yaml 파일을 다음 내용으로 생성합니다:

static_resources:
  listeners:
    - address:
        socket_address:
          address: 0.0.0.0
          port_value: 8080
      filter_chains:
        - filters:
            - name: envoy.filters.network.http_connection_manager
              typed_config:
                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
                codec_type: AUTO
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ["*"]
                      routes:
                        - match:
                            prefix: "/"
                          route:
                            cluster: grpc_service
                http_filters:
                  - name: envoy.filters.http.grpc_web
                  - name: envoy.filters.http.router
  clusters:
    - name: grpc_service
      connect_timeout: 0.25s
      type: logical_dns
      lb_policy: round_robin
      http2_protocol_options: {}
      load_assignment:
        cluster_name: grpc_service
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 127.0.0.1
                      port_value: 50051

gRPC-Web 개발을 위한 도구들

gRPC-Web 설정은 상당히 간단하지만, 개발 프로세스를 더욱 매끄럽게 만들어줄 도구들이 있습니다. 그런 도구 중 하나가 Apidog입니다. Apidog는 API를 설계하고, 테스트하며, 모니터링하는 데 도움을 주는 API 관리 도구입니다. gRPC를 지원하여 gRPC-Web 개발에 뛰어난 선택입니다. Apidog를 사용하면:

API 설계: 직관적인 UI로 gRPC 서비스 정의를 생성하고 관리할 수 있습니다.
API 테스트: 강력한 테스트 도구로 gRPC 서비스를 쉽게 테스트할 수 있습니다.
API 모니터링: API의 성능을 추적하고 모든 것이 원활하게 실행되고 있는지 확인할 수 있습니다.

gRPC-Web과 함께 Apidog를 사용하면 개발 워크플로우를 크게 간소화하고 강력하고 신뢰할 수 있는 APIs를 구축하고 있는지 확인할 수 있습니다.

Apidog로 gRPC-Web 테스트하기 위한 단계별 가이드

1단계: Apidog 설정하기

새 프로젝트 만들기: Apidog를 열고 "+ 새 프로젝트" 버튼을 클릭하여 새 프로젝트를 생성합니다. 프로젝트 이름과 설명을 입력하여 정리하는 데 도움이 됩니다.

2단계: gRPC 서비스 정의하기

.proto 파일 가져오기: 기존의 .proto 파일을 가져오거나 gRPC 서비스를 수동으로 정의할 수 있습니다. 가져오려면 "가져오기" 버튼을 클릭하고 .proto 파일을 선택하세요. Apidog는 자동으로 파일을 구문 분석하고 필요한 API 정의를 생성합니다.

3단계: gRPC-Web 엔드포인트 구성하기

엔드포인트 설정하기: .proto 파일을 가져온 후 gRPC-Web 서버의 URL을 지정하여 gRPC-Web 엔드포인트를 구성합니다. 예를 들어, 서버가 http://localhost:8080에서 실행되고 있다면, 이 URL을 엔드포인트 구성에 입력하세요.

Apidog는 .proto 파일에 정의된 모든 서비스 메서드를 나열합니다. 테스트하고자 하는 메서드를 선택하여 API에 추가할 수 있습니다.

gRPC-Web의 실제 사용 사례

gRPC-Web이 어떤 분야에서 뛰어난 성능을 발휘하는지에 대한 예시를 들어드리겠습니다:

1. 실시간 애플리케이션

채팅 애플리케이션이나 라이브 대시보드처럼 실시간 데이터 업데이트가 필요한 애플리케이션은 gRPC-Web의 큰 혜택을 볼 수 있습니다. 효율적인 통신 프로토콜은 낮은 지연 시간과 높은 성능을 보장합니다.

2. 마이크로서비스 아키텍처

마이크로서비스 아키텍처로 작업하는 경우, gRPC-Web은 웹 애플리케이션이 백엔드 서비스와 원활하게 통신하는 데 도움을 줄 수 있습니다. 이를 통해 전체 스택에서 일관된 통신 프로토콜을 유지할 수 있습니다.

3. 데이터 집약적 애플리케이션

비디오 스트리밍 서비스나 빅데이터 분석 플랫폼처럼 대량의 데이터를 처리해야 하는 애플리케이션은 gRPC-Web의 효율적인 데이터 직렬화 및 전송 기능을 활용할 수 있습니다.

4. IoT 플랫폼

IoT 플랫폼은 종종 장치와 서버 간의 효율적이고 확장 가능한 통신이 필요합니다. gRPC-Web은 이러한 상호작용을 관리하는 강력한 솔루션을 제공합니다.

결론

이렇게 gRPC-Web에 대한 종합적인 개요를 제공했습니다. gRPC-Web이 무엇인지, 왜 유용한지, 그리고 어떻게 프로젝트에서 사용할 수 있는지 논의했습니다. 성능 이점, 사용 용이성 및 확장성 덕분에 gRPC-Web은 현대 웹 개발을 위한 강력한 도구입니다. 실시간 애플리케이션, 마이크로서비스 아키텍처 또는 데이터 집약적 플랫폼을 구축하든, gRPC-Web은 여러분을 지원합니다. Apidog와 같은 도구를 이용하면 API 개발 프로세스를 간소화하고 서비스가 원활하게 운영되고 있는지 확인할 수 있습니다.

그렇다면, 무엇을 망설이고 있나요? gRPC-Web에 뛰어들어 다음 세대의 웹 애플리케이션을 구축해 보세요!