프로젝트에서 React와 백엔드 간 통신을 위해 gRPC를 사용하고 있습니다. 이를 위해 protoc-gen-grpc-web 플러그인을 설치하고 설정해야 했습니다. protoc-gen-grpc-web 플러그인을 설치하기 위해 거친 과정을 공유하겠습니다.

아! protoc-gen-grpc-web 설치 전에 protoc가 설치되어 있어야합니다.
Protocol Buffers 컴파일러(protoc) 설치 방법

protoc-gen-grpc-web의 역할?

protoc-gen-grpc-web은 gRPC-Web 클라이언트 코드를 생성하기 위한 protoc 플러그인입니다. gRPC-Web은 gRPC를 웹 브라우저에서 사용할 수 있도록 확장한 것으로, HTTP/1.1을 통해 gRPC를 실행할 수 있게 합니다.

설치

방법 1 - 전역 설치

npm install -g protoc-gen-grpc-web

npx protoc -I=./src --js_out=import_style=commonjs,binary:./src --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./src ./src/server.proto

전역 설치를 원하지 않아서 프로젝트에 로컬로 설치하는 방법도 시도했습니다.

방법2 - 지역 설치 (프로젝트 설치)

npm install protoc-gen-grpc-web 명령어를 통해 프로젝트에 다운받았습니다.

npx protoc -I=./src --plugin=protoc-gen-grpc-web=%CD%\\node_modules\\.bin\\protoc-gen-grpc-web.cmd --js_out=import_style=commonjs,binary:./src --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./src ./src/server.proto

방법3 - 바이너리 다운로드

1. protoc-gen-grpc-web 바이너리를 다운로드
   
   다운로드한 파일을 적절한 위치에 저장합니다.
   참고로 (C:\protoc-gen-grpc-web)으로 지정했습니다.

2. 프로젝트에서 명령어 실행
   제가 사용한 명령어는 아래와 같습니다.

npx protoc -I=./src --plugin=protoc-gen-grpc-web=C:\protoc-gen-grpc-web\protoc-gen-grpc-web.exe --js_out=import_style=commonjs,binary:./src --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./src ./src/server.proto

• npx protoc: Node.js 패키지 실행기(npx)를 사용하여 Protocol Buffers 컴파일러(protoc)를 실행
• -I=./src: .proto 파일의 포함 경로 지정
• --plugin=protoc-gen-grpc-web=경로: protoc-gen-grpc-web 플러그인의 경로 지정
• --js_out=import_style=commonjs,binary:./src: JavaScript 파일의 출력 옵션과 출력 디렉토리 지정
• --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./src: gRPC-Web 클라이언트 코드의 출력 옵션과 출력 디렉토리를 지정
• ./src/server.proto: 컴파일할 .proto 파일의 경로

정리하자면

npx protoc -I=./src --plugin=protoc-gen-grpc-web=[protoc-gen-trpc-web.exe 파일이 있는 폴더명]\protoc-gen-grpc-web.exe --js_out=import_style=commonjs,binary:./src --grpc-web_out=import_style=commonjs,mode=grpcwebtext:[출력 디렉토리] [컴파일할 .proto 파일의 경로]

짠 컴파일된 파일이 나왔습니다.

결론

전역 설치를 사용하면 protoc-gen-grpc-web 플러그인의 경로를 명시적으로 지정할 필요가 없어서 간편합니다. 하지만 프로젝트마다 독립적인 설정이 필요하거나, 특정 버전을 관리해야 하는 경우 로컬 설치가 유용할 거라 생각합니다. 필요한 경우 바이너리를 직접 다운로드하여 사용할 수도 있습니다.