이 레시피를 사용해 CSV 파일을 인터랙티브 데이터 탐색기로 변환하는 Fabric 앱을 만드세요. Claude 코드는 파일을 검사하고, 프로젝트를 구성하며, 사용 가능한 열에 맞는 필터와 시각화를 구현하고, 터미널에서 앱을 검증합니다.
완성된 앱은 CSV 파일을 정적 콘텐츠에 포함시키고 데이터를 브라우저에서 불러옵니다. 이 방법은 실시간 연결이 필요하지 않은 샘플, 공개 또는 비민감 데이터에 잘 작동합니다.
이 자습서에서는 다음을 수행합니다.
- Claude 코드를 설치하고 시작하세요.
- Claude Code에 Fabric 앱의 기본 구조를 생성하고 검토하도록 요청하세요.
- CSV 파일을 중심으로 인터랙티브 탐색기를 만들어 보세요.
- 생성된 변경 사항을 검토하고 검증하세요.
- 앱을 Fabric에 배포하세요.
- 배포를 확인하고 앱을 열어보세요.
사전 요구 사항
- Node.js 20 이상.
- 클로드 코드가 지원하는 터미널입니다.
- Claude Code에 접근할 수 있는 Claude Pro, Max, Team, Enterprise 또는 콘솔 계정입니다.
- Fabric에 액세스할 수 있는 Microsoft 계정
- 참가자, 구성원 또는 관리자 권한이 있는 Fabric 작업 영역입니다.
- 테넌트에 대해 Fabric Apps 워크로드가 활성화되어 있습니다.
- 헤더 행이 있는 UTF-8 CSV 파일입니다. Claude 코드를 시작하기 전에 파일의 전체 경로를 미리 알고 있어야 합니다.
Important
정적인 앱 콘텐츠로 배포된 CSV 파일은 앱에 접근할 수 있는 사람들에게 제공됩니다. 비밀, 개인 데이터 또는 기타 민감한 정보에 이 레시피를 사용하지 마세요.
Claude Code 시스템 요구사항 및 계정 옵션에 대해서는 Claude Code 설정 문서를 참조하세요.
Claude 코드 설치
운영체제의 메서드를 사용해 Claude 코드를 설치하세요.
Windows
WinGet으로 Claude 코드를 설치하세요:
winget install Anthropic.ClaudeCode
macOS, Linux 또는 Linux용 Windows 하위 시스템
네이티브 설치 프로그램을 사용하세요:
curl -fsSL https://claude.ai/install.sh | bash
설치를 확인합니다.
claude --version
claude doctor
다른 설치 방법에 대해서는 Install Claude Code를 참조하세요.
클로드 코드 시작
프로젝트를 만들고 싶은 상위 폴더에서 터미널을 열어보세요.
클로드 코드 시작하기:
claude요청이 오면 브라우저 인증 절차를 완료하세요.
Claude Code가 요청하는 폴더 접근 권한과 명령 권한을 검토하세요.
Claude Code는 검사하거나 수정하지 않길 원하지 않는 관련 파일이 있는 폴더에서 시작하지 마세요.
앱의 기본 구조를 생성하고 실행하세요
다음 프롬프트를 Claude 코드에 붙여넣으세요:
Set up a new Rayfin app for me, end to end.
Create the project in a folder named csv-data-explorer. Before changing code, read any
CLAUDE.md, copilot-instructions.md, and agent guidance included in the scaffolded project.
Do the work yourself instead of only printing instructions:
1. Run `npm create @microsoft/rayfin@latest csv-data-explorer`.
2. Inspect the scaffolded project. Explain the purpose of rayfin/rayfin.yml,
rayfin/data/, and src/.
3. Install dependencies if the scaffold command didn't install them.
4. Run `npx rayfin login` and pause while I complete sign-in.
5. Deploy the backend with `npx rayfin up`.
6. Confirm the deployment with `npx rayfin up status`.
7. Start the frontend with `npm run dev`.
8. Tell me the local URL to open and summarize what you created.
Ask before making a destructive change or using a force option.
명령어는 검토 후에만 승인하세요. Rayfin 브라우저 로그인 요청이 나오면 완료하세요. 프론트엔드가 시작된 후, Claude Code가 보고하는 로컬 URL을 엽니다.
Claude Code에게 데이터 탐색기를 만들어 달라고 요청하세요
CSV 파일의 전체 경로를 Claude Code에 제공하고, 사람들이 데이터를 어떻게 탐색해야 하는지 설명하세요. 에이전트는 헤더와 샘플 값을 검사하여 데이터셋에 맞춘 컨트롤과 시각화를 조정할 수 있습니다.
다음 프롬프트를 시작 레시피로 사용하세요.
<full-path-to-csv-file>를 파일 경로로 바꾸세요.
Turn this Fabric app into a data explorer for the CSV file at
<full-path-to-csv-file>.
Requirements:
- Inspect the headers and a representative sample of rows first. Summarize the
inferred date, numeric, Boolean, and categorical columns before editing.
- Don't modify the source file. Copy it into an appropriate static asset folder with
a clear name so the deployed app can load it.
- Parse quoted fields, escaped commas, missing values, and line breaks correctly.
Use an existing CSV dependency if the project includes one. Otherwise, add a
well-maintained parser and explain why it's needed.
- Build KPI callouts and two useful charts based on the columns actually present.
Don't invent fields or values.
- Add a global search, column filters appropriate to each inferred data type, sortable
columns, pagination, and a control to clear all filters.
- Show the filtered row count, and calculate KPIs and charts from the filtered rows.
- Add a detailed data grid and preserve the original column names.
- Include loading, empty, and error states.
- Report malformed rows without crashing the app.
- Make the layout usable with a keyboard and responsive at desktop and mobile sizes.
- Follow the scaffolded project's existing component and styling patterns.
- Don't add dependencies unless they're necessary.
Before editing, inspect the relevant files and give me a short implementation plan.
Then make the changes, run the existing build, start the app, and validate the main
flows in a browser at desktop and mobile sizes. Explain any errors you fix.
클로드 코드가 프로젝트를 수정하기 전에 계획을 검토하세요. 계획이 요구사항에 맞지 않는다면, 승인 전에 수정하세요.
생성된 변경 내용 검토
Claude Code가 끝나면, 자신의 작업을 검토해 달라고 요청하세요:
Review the changes you made against every requirement in my previous prompt.
Check for:
- Incorrect parsing of quoted fields, escaped commas, missing values, or line breaks.
- Type inference that changes valid identifiers or loses numeric precision.
- KPIs or charts that don't update from the filtered rows.
- Search, filtering, sorting, pagination, or clear-filter controls that don't work.
- Invented fields, values, or fallback data that aren't in the CSV file.
- The original CSV file being modified.
- Missing loading, empty, or error states.
- TypeScript, build, browser console, or responsive layout errors.
Fix confirmed issues, rerun the existing build and browser checks, and summarize the
final behavior.
소스 컨트롤 차이점을 직접 검토해 보세요. 다음 사항에 특히 주의하세요.
- 복사된 CSV 자산과 그것이 게시할 적절한지 여부에 대해 말이죠.
- CSV 파싱과 타입 추론.
-
rayfin/rayfin.yml의 서비스 구성. -
package.json의 새로운 종속성. - 절대 커밋해서는 안 되는 비밀이나 자격 증명.
앱 유효성 검사
Claude Code에게 프로젝트의 기존 검증을 실행해 달라고 요청하세요:
Validate the app without adding new tools.
1. Run the existing build and type-check commands from package.json.
2. Start the frontend if it isn't already running and report the local URL.
3. In a browser, verify the initial row count against the CSV file.
4. Test search, each filter type, sorting, pagination, clear filters, and malformed-row
handling. Confirm that KPIs and charts update with the filtered rows.
5. Check desktop and mobile layouts and report browser console errors.
6. Fix confirmed issues and rerun the failed check.
브라우저에서 몇 행, 총계, 필터링된 결과를 소스 CSV 파일과 비교하세요. 빈 결과, 왜곡된 데이터, 키보드 탐색, 좁은 화면을 테스트하세요.
완성된 앱을 배포하세요
변경 사항을 검토하고 앱을 테스트한 후, Claude Code에 배포를 요청하세요:
Deploy the reviewed app to Fabric.
1. Show me the current git diff and summarize what will be deployed.
2. Run `npx rayfin up`.
3. Run `npx rayfin up status`.
4. Confirm that the deployment is healthy.
5. Give me the hosted app URL and Fabric portal link from the command output.
Stop and explain the issue if deployment or verification fails.
같은 npx rayfin up 명령어가 앱 개발을 계속할 때 기존 배포를 업데이트합니다.
Claude 코드로 계속 반복하세요
나중에 변경할 때는 집중된 프롬프트를 사용하세요. 원하는 동작, 영향을 받는 사용자, 제약 조건, 검증 단계를 포함하세요.
Add saved views to the CSV data explorer.
Let users name and save the current search, filters, sort order, and visible columns
in browser storage. Don't store or duplicate CSV rows in browser storage. Add controls
to apply, rename, and delete a saved view. Run the existing build and browser checks,
then list the user flows I should retest.
각 요청은 검토할 수 있을 만큼 작게 유지하세요. 클로드 코드에게 크거나 잠재적으로 파괴적인 변경을 요청하기 전에 작동하는 상태를 커밋하세요.
Claude 코드 워크플로우 문제 해결
Claude 코드는 명령어만 출력합니다
클로드 코드에게 명령어를 실행하고 결과를 보고하라고 하세요. 요청된 지휘관 권한을 검토하고 승인하세요.
명령이 로그인을 기다립니다
브라우저 로그인 과정을 완료하세요. 그다음 클로드 코드에게 로그인이 완료되었다고 알려서 계속 진행할 수 있게 하세요.
Claude 코드가 잘못된 폴더에서 작동합니다
세션을 종료하고, 스캐폴드 프로젝트 폴더에서 터미널을 열고 다시 실행 claude 하세요.
Claude 코드가 명령을 찾을 수 없습니다
Claude Code 설치를 확인하려면 claude doctor를 실행하세요. Rayfin 명령어의 경우, Node.js 20 이상이고 프로젝트 의존성이 설치되어 있는지 확인하세요.
앱은 열리지만 CSV 데이터가 로드되지 않습니다
Claude Code에게 브라우저 네트워크와 콘솔 오류를 검사하고, 배포된 자산 경로를 확인하며, CSV 파일이 정적 빌드 출력에 포함되어 있는지 확인하도록 요청하세요.
클로드 코드가 제안합니다 --force
먼저 Claude Code가 잠재적으로 파괴적인 스키마 연산을 보여주도록 요구하세요. 데이터 손실 가능성을 이해하고 승인할 때만 수락하세요 --force .
다른 앱 문제에 대해서는 Troubleshoot Fabric Apps를 참조하세요.