월~금 오전 7시, 일요일 오전 8시 — AI 뉴스와 용어를 보내드립니다메일로 받아보기

METAL LAB

runmedev/web

6TypeScriptApache-2.0

Runme의 터미널 화면을 웹에 붙여 쓸 수 있게 만든 React 컴포넌트 모음

runmedev/web은 pnpm 워크스페이스로 관리되는 모노레포로, Runme의 웹/React 관련 코드를 담고 있다. 핵심 결과물은 @runmedev/react-console로, Runme 실행에 연결된 터미널을 보여주는 React 컴포넌트다. 그 아래에는 renderers라는 기반 웹 컴포넌트 패키지가 함께 들어 있다.

무엇을 하는 레포인가

  1. 한 저장소 안에 packages/renderers(기반 웹 컴포넌트 라이브러리)와 packages/react-console(터미널 형태의 콘솔 컴포넌트) 두 패키지를 두는 구조
  2. pnpm 워크스페이스와 Buf라는 별도 npm 레지스트리를 설정해 의존성을 설치하고 빌드
  3. 전체 빌드, 개별 패키지 빌드(build:renderers, build:console), 샘플 개발 서버 실행, 단위 테스트, 프런트엔드 및 백엔드 미연결 상황을 확인하는 브라우저 스모크 테스트 스크립트를 제공
  4. @runmedev/react-console을 npm에 배포 가능한 패키지로 만들어 다른 앱에서 Runme 실행용 터미널 화면을 그대로 가져다 쓸 수 있게 함

왜 중요한가

자신의 웹 앱에 실시간 실행 터미널 화면을 넣고 싶은 개발자는 이 패키지를 그대로 재사용하면 된다. 또한 pnpm 워크스페이스로 여러 웹 컴포넌트 라이브러리를 함께 관리하는 구체적인 구조 사례로도 참고할 수 있다.

이 레포의 용어

  • pnpm 워크스페이스 모노레포 · pnpm 패키지 매니저의 워크스페이스 기능으로 여러 관련 패키지를 한 저장소에서 함께 관리하는 방식
  • @runmedev/react-console · Runme 코드 실행에 연결된 터미널 창을 보여주는 React 컴포넌트 라이브러리
  • Buf 레지스트리 · buf.build에서 제공하는 npm 호환 패키지 저장소로, 자동 생성된 코드 의존성을 받아오는 데 쓰임
  • 브라우저 스모크 테스트 · 실행 중인 웹 앱의 기본 기능이 정상 작동하는지 빠르게 훑어보는 자동 테스트

레포 원문 소개 (영문)

Monorepo for Web & React Components

GitHub에서 보기

관련 기사

주목받는 레포

레포 전체 보기 →

METAL LAB 최신 기사