GitHub 코드베이스 탐험, 이제 Codebase Navigator로

Codebase Navigator는 로드 시점과 질문에 대한 답변 시점에 서로 다른 방식으로 의존성 그래프를 생성한다. 초기 로드 시에는 `buildOverviewGraph` 함수를 사용하여 파일 트리 구조를 기반으로 한 폴더 맵을 생성한다. 사용자가 질문을 하면, `buildDependencyNodes` 함수가 호출되어 실제 import 문을 분석하여 파일 간의 의존 관계를 나타내는 그래프를 생성한다.

이러한 과정을 통해, 사용자는 코드베이스의 구조를 직관적으로 파악하고, 질문에 대한 답변과 관련된 파일들의 의존 관계를 시각적으로 확인할 수 있다.

Codebase Navigator는 CopilotKit을 사용하여 AI 에이전트와 UI를 통합하고, 사용자 질문에 대한 답변을 생성한다. `/api/copilotkit` API route는 LLM 요청을 처리하며, OpenAI 호환 백엔드(Ollama, OpenAI 등)를 사용할 수 있도록 구성되어 있다. `useCopilotContext` 훅을 사용하여 파일 목록과 시스템 지침을 LLM에 제공하며, `useFrontendTool` 훅을 통해 다양한 도구를 등록하여 LLM이 호출할 수 있도록 한다.

이러한 도구들을 통해 LLM은 코드베이스를 이해하고, 사용자의 질문에 대한 답변을 시각적으로 제공한다.

Codebase Navigator는 Zenflow를 사용하여 개발 프로세스를 구조화하고 자동화했다. Zenflow는 소프트웨어 개발을 코드 자동 완성 이상의 구조화된 엔지니어링 프로세스(Structured Engineering Process)로 취급하며, 프로젝트 계획, 구축, 테스트, 검토 및 배포를 단일 세션 내에서 수행할 수 있도록 지원한다. Zenflow는 다음과 같은 여섯 단계를 거쳐 프로젝트를 진행했다.

각 단계는 린트(Lint), 타입 검사(Type Checks), 테스트를 통해 검증되었으며, 코드 검토를 통해 14개의 문제를 발견하고 11개를 수정했다. 이러한 과정을 통해 코드 품질을 향상시키고, 개발 효율성을 높였다.

Codebase Navigator는 Next.js API routes를 통해 GitHub API에 접근하여, API 키 노출을 방지하고 보안을 강화한다. `/api/github/*` 경로를 통해 GitHub API를 프록시하며, `fetchFile` 함수는 파일 내용을 가져오기 전에 in-memory cache를 확인하여, 5분 TTL(Time-To-Live)을 가진 캐싱 전략을 사용한다. 캐싱을 통해 불필요한 API 호출을 줄이고, 성능을 향상시킨다.

이러한 전략을 통해, Codebase Navigator는 GitHub API의 rate limit을 효율적으로 관리하고, 사용자 경험을 개선한다.