Install
pnpm add @cloudflare/kumo누구에게 맞나
Kumo는 현대 Web 앱 화면을 짜는 사람, 특히 이미 React를 쓰고 키보드, 포커스, ARIA 세부사항을 덜 직접 다루고 싶은 프론트를 향한다. Cloudflare의 컴포넌트 라이브러리이며 Base UI 위에 세워졌다. 대응 페이지는 https://base-ui.com/ 설명은 키보드 탐색, 포커스 관리, ARIA 속성을 처리해 디자인 시스템에 맞춰 화면을 짜게 한다고 쓴다.
더 가까운 쓰임: React 프로젝트에 @cloudflare/kumo를 넣을 준비가 되었고, 먼저 대등 의존성 react, react-dom, @phosphor-icons/react가 설치되는지 확인한 뒤 필요에 따라 Button, Input, Dialog와 스타일을 넣는다. 코딩 도우미의 슬래시 기술로는 맞지 않고 React 없는 프로젝트에도 맞지 않는다.
저장소는 다른 패키지 관리자의 등가 명령을 쓰지 않았다. 따라서 주 경로는 그것이 준 pnpm만 따른다. 저장소가 pnpm을 쓰지 않으면 기존 설명은 여기까지다. 이 명령을 기록되지 않은 설치 프로그램으로 고쳐 쓰지 마라.
3분 만에 첫 시도 끝내기
공식 설치 명령은: pnpm add @cloudflare/kumo. 저장소 주소는 https://github.com/cloudflare/kumo
이 페이지만 따라 조작한다. 대등 의존성의 공식 명령은: pnpm add react react-dom @phosphor-icons/react. 프로젝트에 이미 React가 있으면 버전이 한 겹 더 설치가 필요한지 먼저 대조한다. 맹목적으로 거듭 설치하지 마라.
전제: 이 기기에 pnpm이 있고, 버릴 수 있거나 원래 React를 쓰는 로컬 앱이 있다. 설치 위치는 그 앱의 의존성이며 전역 스킬 디렉터리가 아니다.
낮은 위험의 첫 작업: 먼저 페이지를 바꾸지 마라. 프로젝트 디렉터리에서 npx @cloudflare/kumo ls를 실행해 모든 컴포넌트만 나열한다. 성공 신호는 터미널이 컴포넌트 명단을 출력하고 페이지가 아직 바뀌지 않은 것이다. 설명을 하나 더 보려면 npx @cloudflare/kumo doc Button로 Button 문서를 읽기 전용으로 본다. npx @cloudflare/kumo docs는 전체 문서를 가져오며 첫 번째에는 안 해도 된다.
명단을 확인한 뒤 정말 붙이려면, 올리지 않을 시험 페이지에 이것을 쓴다: @cloudflare/kumo에서 Button, Input, Dialog를 넣고 import "@cloudflare/kumo/styles". 쓰기 전에 diff를 보고 시험 페이지와 의존성 목록만 움직였는지 확인한다. 설명에는 테마 맞춤이나 서버 렌더 단계가 없다. 따라서 첫 번째는 「컴포넌트를 나열할 수 있고 시험 페이지가 Button 하나를 그릴 수 있다」에서 멈춘다.
사용 사례
사례 1: React 앱에 자주 쓰는 컴포넌트를 넣는다. 먼저 pnpm add @cloudflare/kumo, 대등 의존성을 맞춘 다음 import { Button, Input, Dialog } from "@cloudflare/kumo" 하고 @cloudflare/kumo/styles를 로드한다. 이미 페이지 뼈대가 있고 이 접근성 세트로만 바꾸고 싶을 때 맞다. 설명은 이 세 컴포넌트만 예시로 지목한다. 다른 컴포넌트 이름은 npx @cloudflare/kumo ls를 기준으로 하고 짐작하지 마라.
사례 2: CLI로 읽기 전용으로 문서를 본다. npx @cloudflare/kumo ls는 전부를 나열하고, npx @cloudflare/kumo doc Button는 단일 컴포넌트 문서를 가져오며, npx @cloudflare/kumo docs는 전체 문서를 가져온다. 어느 페이지를 고칠지 아직 정하지 않았고 먼저 API를 대조하고 싶을 때 맞다. 설명은 문서 출력 형식도 오프라인 캐시도 쓰지 않았다. 조회하면 되고 곧바로 코드를 고칠 필요는 없다. 명령이 실패하면 https://github.com/cloudflare/kumo 로 돌아가 대조하고 기록되지 않은 설치 방식으로 바꾸지 마라.
사용 경계
설치 경계: 공식은 pnpm add @cloudflare/kumo와 대등 의존성 react, react-dom, @phosphor-icons/react만 쓴다. 기록되지 않은 설치 프로그램은 쓰지 마라. 런타임 경계: 예시는 React 컴포넌트와 스타일 입구이며 React 없는 쓰임은 쓰지 않았다. 능력 경계: 키보드 탐색, 포커스 관리, ARIA를 처리하고 디자인 시스템에 맞는다고 한다. 시각 테마가 Cloudflare 사이트 모든 페이지와 반드시 같다고는 쓰지 않았다. CLI 경계: 대조할 수 있는 것은 ls, doc Button, docs다. 기초 라이브러리는 Base UI이며 https://base-ui.com/ 를 본다.
그러나 설명은 Kumo와 Base UI의 모든 컴포넌트를 하나하나 대응시키지 않았다.