syntax = "proto3";
package your.service.v1;
option go_package = "github.com/yourorg/yourprotos/gen/go/your/service/v1";

import "google/api/annotations.proto";

message StringMessage {
  string value = 1;
}

service YourService {
  rpc Echo(StringMessage) returns (StringMessage) {
    option (google.api.http) = {
      get: "/v1/example/echo" // k8s inter-cluster 에서 호출 가능한 엔드포인트
      additional_bindings: {
        get: "/external/example/echo" // k9s cluster 밖 (사용자 기기 등)에서 호출 가능한 엔드포인트 
      }
    };
  }
}

const ECHO_SERVICE_PATHS = {
  ECHO: '/example/echo',
} as const;

const enum NamespaceEnv {
  PRODUCTION = 'production',
  STAGING = 'staging',
}

const isNamespaceProduction = () =>
  process.env.NEXT_PUBLIC_현재_환경 === NamespaceEnv.PRODUCTION;

const API_BASE_URL = isNamespaceProduction()
  ? '프로덕션 api 도메인' as const
  : '스테이징 api 도메인' as const;

export const echo = async () => {
  const data = await fetch(`${API_BASE_URL}${ECHO_SERVICE_PATHS.ECHO}`, {
    headers: {
      // 적절한 헤더
    },
  }).then(res => res.json());

  return data;
};

// 이제 echo() 함수를 react-query, getServerSideProps 등에서 활용합니다.

protoc -I=$SRC_DIR --go_out=$DST_DIR $SRC_DIR/addressbook.proto

# buf.gen.yaml
version: v1
plugins:
  - name: go
    out: gen/go
  - name: go-grpc
    out: gen/go
  - name: grpc-gateway
    out: gen/go
  - name: java
    out: gen/java
  - name: grpc-java 
    out: gen/java
  - name: swift
    out: gen/swift
  - name: python
    out: gen/python

# buf.gen.yaml
version: v1
plugins:
  # typescript용 http client를 생성하는 plugin
  - name: protoc-gen-banksalad-http-client
    # local plugin 소스코드 경로
    path: ./scripts/typescript/src/protoc-gen-banksalad-http-client.ts
    out: gen/typescript/http-client
    # 최종 결과물을 typescript로 출력
    opt: target=ts

    ...기존 플러그인들

service EchoService {
  rpc Echo(StringMessage) returns (StringMessage) {
    option (google.api.http) = {
      get: "/v1/example/echo" // k8s cluster 에서 호출 가능한 엔드포인트
      additional_bindings: {
        get: "/external/example/echo" // k8s cluster 밖 (사용자 기기 등)에서 호출 가능한 엔드포인트 
      }
    };
  }
}

interface Schema {
  files: [{
    services: [{
      kind: "service";
      name: 'Echo',
      methods: [{
        name: 'Echo',
        ...
      }]
    }]
  }]
}

// 이 함수의 내부를 구현합니다.
function generateTsFile(schema: Schema) {
  for (const file of schema.files) {
    // buf에 전달돤 각 proto file을 file 변수로 순회합니다.
    
    for (const enumeration of file.enums) {
      // enumeration is type DescEnum
    }
    
    for (const message of file.messages) {
      // file에 정의된 proto message를 순회합니다. 보통 message로 ts interface를 생성합니다. 
    }
      
    for (const service of file.services) {
      // file에 정의된 service를 순화합니다. 보통 service로 class를 생성합니다.
      
      for (const method of service.methods) {
          // service에 정의된 method를 순화합니다. 이 부분에서 런타임에 실행될 함수를 생성합니다.
      }
    }
  }
}

// 단순화된 예제 코드, proto file에 있는 service마다 간단한 클래스를 생성합니다.
function generateTs(schema: Schema) {
 for (const file of schema.files) {
   for (const service of file.services) {
      f.print`export class ${service.name}Client {`; 
      for (const method of service.methods) {
          f.print`public async ${method.name}() {`;
          f.print`  console.log(\`implement this function\`)`
          f.print`}`;
      }
      f.print`}`;
   }
 }
}

/**
 service EchoService {
    rpc Echo(StringMessage) returns (StringMessage) {
      option (google.api.http) = {
        get: "/v1/example/echo" // k8s inter-cluster 에서 호출 가능한 엔드포인트
        additional_bindings: {
          get: "/external/example/echo" // k9s cluster 밖 (사용자 기기 등)에서 호출 가능한 엔드포인트 
        }
      };
    }
  }

위와 같은 RPC를 buf로 빌드하면 아래와 같은 ts file이 출력됩니다.
*/

// @generated by protoc-gen-banksalad-http-client v1.0.0 with parameter "target=ts"
// @generated from file echo.proto (package echo, syntax proto3)
import type { 
  BaseExternalClient, BaseInternalClient, 
  ClientConstructorParams, ExtendInterfaceFunctionParameter, 
  ExternalClientOption 
} from "뱅크샐러드_내부_타입_패키지";
import type { EchoService, StringMessage } from "뱅크샐러드_내부_gRPC_타입_패키지";
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

export type IEchoServiceClient = ExtendInterfaceFunctionParameter<EchoService, AxiosRequestConfig | undefined>;
export type IEchoServiceClientWithExternalRpcOnly = Pick<IEchoServiceClient, 'Echo'>

/**
 * EchoService에 호출할 수 있는 모든 external http endpoint를 호출할 수 있는 클래스입니다.
*/
export class EchoServiceExternalClient implements IEchoServiceClientWithExternalRpcOnly, BaseExternalClient {
  protected axiosInstance: AxiosInstance
  constructor (option: ExternalClientOption) {
    this.axiosInstance = option.axiosInstance;
    return;
  }
  /**
   * Echo RPC를 external path로 호출합니다.
   * [GET] /example/echo
   * @param request - StringMessage
   * @returns response - Promise<StringMessage>
  */
  public async Echo<ReturnType = StringMessage>(request: StringMessage, config?: AxiosRequestConfig): Promise<AxiosResponse<ReturnType>> {
    const {
      
    } = request;

    return this.axiosInstance<ReturnType>({
      method: 'get',
      url: `/example/echo`,
      data: undefined,
      params: undefined,
      ...config
    });
  }
  static EchoQueryKey = 'EchoService.Echo' as const
}

/**
 * EchoService에 호출할 수 있는 모든 internal http endpoint를 호출할 수 있는 클래스입니다.
*/
export class EchoServiceInternalClient implements IEchoServiceClient, BaseInternalClient {
  // k8s svc dns
  static baseUrl = 'http://echoservice.운영계.svc.cluster.local:80' as const
  static stagingBaseUrl = 'http://echoservice.개발계.svc.cluster.local:80' as const
  // 로컬 환경에서 kubectl proxy를 통해 접근 가능한 주소
  static proxyBaseUrl = 'http://127.0.0.1:8001/api/v1/namespaces/개발계/services/echoservice:80/proxy/' as const
  protected axiosInstance: AxiosInstance
  protected namespace: 'local' | '개발계' | '운영계'

  constructor (option: ClientConstructorParams) {
    if(typeof window !== 'undefined') {
      throw new Error('뱅크샐러드_클라이언트에서_내부망호출시_경고_에러');
    }

    this.axiosInstance = option.axiosInstance;
    return;
  }
  /**
   * Echo RPC를 internal path로 호출합니다.
   * [GET] /v1/example/echo
   * @param request - StringMessage
   * @returns response - Promise<StringMessage>
  */
  public async Echo<ReturnType = StringMessage>(request: StringMessage, config?: AxiosRequestConfig): Promise<AxiosResponse<ReturnType>> {
    const {
      
    } = request;

    return this.axiosInstance<ReturnType>({
      method: 'get',
      url: `/v1/example/echo`,
      data: undefined,
      params: undefined,
      ...config
    });
  }
  // react-query 등에서 사용 가능한 RPC 식별자
  static EchoQueryKey = 'EchoService.Echo' as const
}

// 페이지 구현시 아래와 같이 호출할 수 있습니다.
import { ExternalClientFactory, InternalClientFactory } from '뱅크샐러드_모노레포_클레스_팩토리_라이브러리'
import { EchoServiceInternalClient, EchoServiceExternalClient } from '뱅크샐러드_모노레포_자동생성_클라이언트_라이브러리'

export const getServerSideProps = async () => {
  // 서버사이드에서는 Node.js와 호출할 마이크로서비스가 같은 데이터센터 리전에 있으므로, k8s service dns로 호출하는 클라이언트를 사용합니다.
  const client = new InternalClientFactory(EchoServiceInternalClient).getClass();

  const res = await client.Echo();

  return {
    props: {
      ssrEcho: res
    }
  }
} 

const Page = ({ssrEcho}) => {
  const [csrEcho, setCsrEcho] = useState(null);

  useAsyncEffect(async () => {
    const externalClient = new ExternalClientFactory(EchoServiceExternalClient).getClass();

    setCsrEcho(await externalClient.Echo());
  })

  return (
    <div>
      ssr: {ssrEcho}
      <br/>
      csr: {csrEcho ?? '대기중...'}
    </div>
  )
}

export default Page;

// 아래와 같이 proto 선언을 참고하여 적절한 쿼리 옵션을 자동 생성합니다.
const EchoQueryOption = {
  queryKey: ['EchoService', 'Echo']
  queryFn = async () => {
    const client = ...
    // ... fetch 코드
  }
}

// 자동 생성된 쿼리 옵션을 기본값으로 하는 useQuery hook.
export const useEchoQuery = (options) => {
  useQuery({
    ...EchoQueryOption,
    ...options
  })
}