Transcript
00:00:00이것은 TypeScript와 JavaScript를 위한 코드 기반 지능형 도구인 Fallo입니다. 코드 전체를 분석하여 데드 코드, 중복, 불필요한 복잡성 등을 찾아내죠.
00:00:10즉, 에이전트가 좋지 않은 코드를 배포하는 것을 막기 위해 NIP, JSC, PD, ESLint를 조합해서 사용할 필요가 없다는 뜻입니다.
00:00:17Rust로 구축되었으며 90개 이상의 플러그인을 지원하므로, 대부분의 프레임워크 및 인기 패키지에서 별도 설정 없이 바로 작동합니다.
00:00:23하지만 JavaScript와 TypeScript만 지원한다는 점은 AI 보조 코더들에게 조금 덜 매력적일 수도 있겠네요.
00:00:29구독 버튼을 누르시고 함께 확인해 보시죠.
00:00:30자, 여기 제가 작업 중인 프로젝트가 있는데, 비디오와 이미지에 시네마틱한 필름 룩을 더해주는 도구입니다.
00:00:39대부분 Claude Code로 빌드되었기 때문에 어느 정도 AI의 흔적이 남아 있을 겁니다.
00:00:43여기 새로운 기능을 위한 PR도 있는데, GitHub이 실수로 삭제하지만 않는다면 나중에 다시 이야기해 보겠습니다.
00:00:51시작하기 위해 BunX를 사용해 summary 플래그와 함께 Fallo를 실행하겠습니다. 설치할 필요가 없어서 편하죠.
00:00:56그러면 프로젝트의 스냅샷이 제공되는데, 데드 코드 요약, 중복 코드, 그리고 복잡도 건강 상태 요약을 보여줍니다.
00:01:02git 상태를 확인해 보면 캐시가 포함된 새로운 .fallo 디렉토리가 추가된 것을 볼 수 있습니다.
00:01:07이는 다음에 이 명령을 실행할 때 속도가 더 빨라진다는 것을 의미하며, 스냅샷과 플러그인 정보도 포함됩니다.
00:01:12여기 보시면 건강 상태(Health) 점수가 임계값보다 41만큼 높게 나왔습니다.
00:01:16이게 정확히 무슨 뜻일까요?
00:01:17Fallo의 건강 점수는 순환 복잡도(Cyclomatic Complexity)와 인지 복잡도(Cognitive Complexity)를 계산하여 산출됩니다.
00:01:24그리고 몇 가지 공식을 사용하여 복잡도 밀도를 계산하죠.
00:01:27아래쪽을 보면 이 모든 데이터가 유지보수 지수(Maintainability Index)를 산출하는 데 사용되며, 이것이 우리가 보는 점수입니다.
00:01:33이 점수를 바탕으로 제 파일 중 41개가 리팩토링이 필요하다고 감지되었습니다.
00:01:38여기서 특정 영역에 대한 더 자세한 보고서를 얻기 위해 다음 명령어들을 실행할 수 있습니다.
00:01:43예를 들어 건강 상태에 집중하고 싶다면 이 명령어를 실행하면 됩니다.
00:01:46잠시 후, 다양한 건강 문제를 가진 모든 파일의 목록이 나타납니다.
00:01:49참고로 CRAP이 무엇의 약자인지 궁금하시다면, 이것은 "변경 위험 안티 패턴(Change Risk Anti-Patterns)"의 줄임말입니다.
00:01:55이에 대한 자세한 내용은 문서에서 확인하실 수 있습니다.
00:01:57이 정도 수준의 상세 정보라면 에이전트가 무엇을 수정해야 할지 따라가기가 매우 쉽습니다.
00:02:00사실 중복 코드 확인은 정확한 파일 위치와 구체적인 라인 번호를 알려주기 때문에 훨씬 더 따라하기 쉽다고 봅니다.
00:02:06그러니 일단 중복 코드 수정에 집중해 보죠.
00:02:07원한다면 fallo 설정 파일을 추가해서 무시하고 싶은 특정 패턴이나 종속성 정보를 Fallo에 제공할 수 있습니다.
00:02:14또한 사용자 정의 중복 설정, 건강 점수 설정, 그리고 경계(Boundaries) 설정도 가능합니다.
00:02:18경계 설정은 어떤 디렉토리가 다른 디렉토리로부터 임포트할 수 있는지 선언하는 아주 멋진 방법이죠.
00:02:23하지만 제 요구사항에는 너무 복잡하니 지금은 기본 설정을 유지하겠습니다.
00:02:27이제 여기서 fallo fix 명령을 실행하거나, dry run 플래그를 추가해 수정 가능한 이슈들에 대해 정확히 무엇을 할지 미리 볼 수 있습니다.
00:02:32수정 가능한 모든 이슈 유형을 해결하려고 시도할 것입니다.
00:02:35여기 보시면 여러 export 구문들을 제거하려는 것을 확인할 수 있습니다.
00:02:38하지만 사실 저는 Fallo의 자동 수정을 완전히 신뢰하지는 않는데, 제 코드의 문맥을 충분히 알지 못하기 때문입니다.
00:02:43각 함수가 무엇을 하는지, 전체적으로 어떻게 맞물려 돌아가는지 말이죠.
00:02:46그래서 fix 플래그를 쓰는 대신 Fallo를 제 에이전트에 연결해 보겠습니다.
00:02:49MCP 서버를 이용하거나 VS Code 플러그인을 쓰면 되는데, 아마 Cursor에서도 작동할 겁니다.
00:02:55저는 간단하게 몇 가지 가드레일, 에이전트 규칙, 공통적인 실수 방지책이 포함된 fallo skill을 설치하겠습니다.
00:03:03스킬이 설치된 상태에서 Claude Code를 실행하고, 코드가 어떻게 작동하는지 이해하기 위해 이 프로젝트를 공부하라는 프롬프트를 주겠습니다.
00:03:10그 다음 Fallo를 실행해 중복 코드를 처리하되, 코드를 제거해도 핵심 기능이 망가지지 않도록 주의하라고 시켰습니다.
00:03:16작업이 끝나면 변경 사항을 피처 브랜치에 넣고 테스트를 실행해 앱이 예상대로 작동하는지 확인하라고 했습니다.
00:03:22보시는 것처럼 fallo skill을 로드합니다.
00:03:24그런 다음 fallo dupes 명령을 실행하고 머신 친화적인 포맷인 JSON으로 결과를 내보냅니다.
00:03:29약 4분 후, Claude는 Fallo가 제안한 모든 파일 대신 3개의 파일을 수정하는 것으로 작업을 마쳤습니다.
00:03:34주로 나머지 파일들이 테스트 파일이었기 때문인데, 테스트 코드는 때때로 중복이 허용되기도 하니까요.
00:03:39PR을 생성하라고도 시켰는데 확인해 보면 54라인이 추가되고 43라인이 삭제되었습니다.
00:03:46이는 향후 보고서에서 모든 테스트 파일을 무시하도록 약 20라인 정도의 fallo 설정 파일을 추가하라고 요청했기 때문입니다.
00:03:54물론 Claude Code나 다른 에이전트를 계속 사용해서 복잡성 문제나 데드 코드를 수정해 나갈 수 있습니다.
00:04:00하지만 Fallo는 PR 리뷰 기능도 제공합니다.
00:04:02아까 보여드린 PR을 보면, fallo audit 명령을 실행해 현재 브랜치와 main을 비교하여 특정 이슈만 수정할 수 있게 해줍니다.
00:04:12만약 다른 브랜치를 기준으로 삼고 싶다면 base 플래그를 사용하면 됩니다.
00:04:16매번 Claude에게 Fallo를 쓰라고 프롬프트를 입력하기 번거롭다면 setup hooks 명령을 실행해 Claude Code용 후킹 설정을 생성할 수 있습니다.
00:04:24Fallo는 PR 주석 기능을 포함한 GitHub Action으로도 실행 가능합니다.
00:04:28워크스페이스(Workspaces)도 지원하고요.
00:04:30건강 상태 배지를 내보낼 수 있고 베이스라인(Baselines)을 지원하여, 현재 이슈들을 시간을 두고 천천히 해결할 수 있게 해줍니다.
00:04:35CI에서는 새로운 이슈만 잡아내는데, 이슈가 많은 대규모 프로젝트를 수정할 때 매우 유용합니다.
00:04:41기본적으로 많은 기능을 가지고 있지만, 대부분 정적 코드 분석이므로 실제로 함수를 실행하지는 않습니다.
00:04:49런타임 분석이 필요하다면, Fallo는 프로덕션 앱이 실제 트래픽을 만났을 때 어떤 함수가 실행되는지 알려주는 런타임 인텔리전스 기능을 지원합니다.
00:04:59V8 런타임 커버리지를 사용하며, 로컬이나 어디든 배포 가능한 사이드카를 통해 결과를 기존 건강 보고서에 통합합니다.
00:05:08물론 이것은 유료 기능인데, 충분히 납득이 가는 부분입니다.
00:05:11전반적으로 Fallo는 기능이 매우 많고 JavaScript 스택만 지원함에도 불구하고, 제가 앞으로 훨씬 더 많이 사용하게 될 훌륭한 도구입니다.
00:05:19다른 언어들도 각자의 도구가 있겠지만 Fallo만큼 모든 것을 잘 통합한 도구는 모르겠네요. 제작자인 Bart가 아주 잘 만든 것 같습니다. OXC를 사용해 의미 분석과 모듈 해석을 마친 뒤 그래프 기반 분석을 시작하죠.
00:05:36기본적으로 JavaScript를 벗어나지 않을 텐데, 이는 Evan You를 매우 기쁘게 할 겁니다. JavaScript 때문이 아니라 본인이 Void Zero로 후원하는 OXC를 사용하기 때문이죠.
00:05:46Evan You 이야기가 나와서 말인데, 그에게 Void Zero와 Vite, React 서버 컴포넌트 등에 대해 심도 있게 질문한 1시간 분량의 팟캐스트 영상이 있으니 꼭 확인해 보세요. 제가 가장 좋아하는 에피소드 중 하나입니다.