github-code Web Component
요약
GPT-5.5를 활용하여 GitHub 코드를 임베딩할 수 있는 실험적인 Web Component를 구축하는 방법을 소개합니다. 특정 URL을 raw 파일 경로로 변환하고 fetch를 통해 지정된 코드 범위를 표시하는 기능을 구현했습니다.
핵심 포인트
- GPT-5.5와 프롬프트를 이용한 Web Component 제작 실험
- GitHub URL을 raw 콘텐츠 URL로 자동 변환하는 로직 구현
- fetch API를 사용하여 지정된 코드 라인 범위를 가져와 표시
- 구문 강조(syntax highlighting)는 미지원하며 줄 번호만 표시
2026년 7월 7일
GPT-5.5와 다음 프롬프트를 사용하여 구축한 실험적인 Web Component (웹 컴포넌트)입니다:
GitHub에서 코드를 임베딩(embedding)하기 위한 Web Component를 만들어보자
<github-code href="https://github.com/simonw/sqlite-ast/blob/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py#L9-L18"></github-code>
이 컴포넌트는 위와 같은 URL을 받아 https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py 로 변환한 다음, fetch()를 사용하여 이를 가져오고 지정된 범위의 줄을 표시합니다. 줄 번호는 포함되지만, 구문 강조 (syntax highlighting)는 지원하지 않습니다.
당신의 작업물을 볼 수 있도록 미리보기 웹 브라우저를 보여줘
이 페이지에 임베딩된 모습은 다음과 같습니다:
최근 기사
- sqlite-utils 4.0, 이제 데이터베이스 스키마 마이그레이션 지원 - 2026년 7월 7일
- sqlite-utils 4.0rc2, 대부분 Claude Fable이 작성 (약 $149.25 소요) - 2026년 7월 5일
- shot-scraper video를 사용하여 에이전트가 작업 내용을 비디오 데모로 기록하게 하세요 - 2026년 6월 30일
AI 자동 생성 콘텐츠
본 콘텐츠는 RSS: Simon Willison's Weblog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기