대화 시작과 함께 Boris와 Cat이 자기소개하며 Claude Code에 대해 간략히 언급합니다.
[00:00]
보리스와 캣이 자신을 소개하고, Claude로 코딩하는 것에 대한 즐거움을 표현합니다.
Claude Code가 연구 미리보기로 출시되며, 터미널에서 직접 작동하는 에이전트형 코딩 도구임을 설명합니다.
[00:17]
Claude Code를 연구 프리뷰로 출시한다고 발표하며, 이는 터미널에서 직접 Claude와 작업할 수 있는 에이전트 기반 코딩 도구입니다.
[00:31]
Next.js 앱 프로젝트를 Claude Code로 열어 코드베이스를 분석하고 설명받습니다.
Next.js 앱의 코드베이스를 Claude Code가 자동으로 읽고 분석하여, 구성 요소와 기능을 파악하는 과정을 보여줍니다.
Claude Code가 사이드바 변경 및 새로운 채팅 버튼 추가 요청을 받아 파일을 자동으로 찾아 업데이트하는 작업을 시연합니다.
[01:15]
왼쪽 사이드바를 채팅 히스토리로 교체하고 새 채팅 버튼을 추가하는 작업을 Claude에게 요청합니다.
[01:44]
Claude가 변경사항을 적용하고 네비게이션 바를 업데이트하며, 저장 기능을 구현합니다.
추가된 기능에 대한 테스트를 진행하고, 빌드 오류를 수정하는 과정을 통해 Claude Code의 자동화 능력을 보여줍니다.
[02:27]
새로 추가된 기능들에 대한 테스트를 작성하고 실행하여 모든 테스트가 통과하는지 확인합니다.
[03:05]
앱을 컴파일하고 빌드 에러를 수정한 후, 변경사항을 GitHub에 커밋하고 푸시합니다.
최종적으로 변경 사항을 요약, 커밋하고 GitHub에 푸시하는 과정을 통해 전체 플로우를 마무리합니다.
[00:00]
우리 활짝 웃어야 하나요?
[00:02]
- 아니, 지금 하시는 대로-
- 활짝 웃으면 좀 으스스해요.
[00:04]
그래서 제가 말하는 거예요.
[00:06]
저는 보리스고, 엔지니어입니다.
[00:08]
저는 캣이고, 제품 관리자입니다.
[00:09]
사람들이 Claude로 만드는 것들을 보는 게 즐거운데,
[00:11]
특히 코딩 분야에서요.
[00:12]
우리는 Claude를 모든 사람들을 위해
더 나은 코딩 도구로 만들고 싶습니다.
[00:14]
우리가 만든 도구들 중 하나를
오늘 공개하려고 합니다.
[00:17]
Claude Code를 연구 프리뷰로 출시합니다.
[00:24]
Claude Code는 에이전트 기반 코딩 도구로
[00:27]
터미널에서 직접 Claude와
작업할 수 있게 해줍니다.
[00:29]
실제 동작하는 예시를 보여드리겠습니다.
[00:31]
여기 Next.js 앱 프로젝트가 있습니다.
[00:35]
Claude Code 인스턴스에서 열어보겠습니다.
[00:41]
이제 Claude Code가
[00:43]
이 저장소의 모든 파일에 접근할 수 있습니다.
[00:46]
이 코드베이스에 대해 잘 모르는 상태인데,
[00:47]
고객 지원 상담원과 채팅하는
[00:49]
앱인 것 같네요.
[00:51]
Claude에게 이 코드베이스를
설명해달라고 해보겠습니다.
[00:56]
Claude가 먼저 상위 레벨 파일들을 읽고
[00:59]
더 깊이 파고들고 있습니다.
[01:02]
지금은 프로젝트의 모든 컴포넌트를
살펴보고 있어요.
[01:09]
좋아요, 여기 최종 분석이 나왔네요.
[01:15]
이제 왼쪽 사이드바를 채팅 히스토리로 교체하고
[01:18]
채팅 히스토리로 바꾸고,
[01:19]
새로운 채팅 버튼도 추가하려고 합니다.
[01:22]
Claude에게 도움을 요청해보겠습니다.
[01:26]
우리가 특정 파일이나 경로를 지정하지 않았는데도
[01:29]
Claude가 이미
[01:30]
스스로 업데이트할 파일들을 찾고 있습니다.
[01:33]
Claude는 자신의 사고 과정도 보여줄 수 있어서
[01:35]
이 문제를 어떻게 해결하기로
결정했는지 볼 수 있습니다.
[01:44]
Claude가 이 변경사항들을
수락할지 물어보네요.
[01:46]
네라고 하겠습니다.
[01:47]
이제 Claude가 네비게이션 바를 업데이트하고,
[01:49]
버튼과 아이콘도 추가하고 있습니다.
[01:55]
다음으로는 로직을 업데이트해서
[01:57]
저장 상태가 제대로 작동하도록
확인하고 있습니다.
[02:03]
잠시 후에 Claude가 작업을 완료했습니다.
[02:05]
수행한 작업의 요약입니다.
[02:08]
앱을 한번 살펴볼까요.
[02:10]
새로운 채팅 버튼과
[02:12]
왼쪽의 새로운 채팅 히스토리 섹션이 보이네요.
[02:15]
이전 채팅을 저장한 상태에서
[02:16]
새로운 채팅을 시작할 수 있는지 확인해보겠습니다.
[02:20]
새 채팅 버튼도 테스트해보죠.
[02:25]
좋아요, 모두 잘 작동하네요.
[02:27]
이제 Claude에게 테스트를 추가해달라고 해서
[02:29]
우리가 추가한 기능들이
제대로 작동하는지 확인해보겠습니다.
[02:34]
Claude가 명령어 실행 권한을 요청하네요.
[02:36]
허용하겠습니다.
[02:41]
Claude가 테스트를 실행하기 위해
변경사항을 만들고 있습니다.
[02:49]
결과를 받아본 후에,
[02:51]
모든 테스트가 통과할 때까지
계획을 계속 진행합니다.
[02:57]
몇 분 후에, 모든 게 잘 된 것 같네요.
[03:05]
이제 Claude에게 앱을 컴파일하고
[03:08]
빌드 에러가 있는지 확인해달라고 하겠습니다.
[03:11]
어떤 걸 찾는지 보죠.
[03:13]
Claude가 빌드 에러를 찾아내고
지금 수정하고 있습니다.
[03:18]
그리고 다시 빌드를 시도합니다.
[03:21]
잘 될 때까지 계속할 거예요.
[03:27]
이제 마무리를 해볼까요.
[03:28]
Claude에게 변경사항을 커밋하고
[03:30]
GitHub에 푸시하라고 하겠습니다.
[03:32]
Claude가 우리의 변경사항에 대한
요약과 설명을 만듭니다.
[03:39]
그리고 GitHub에 변경사항을 푸시할 거예요.
[03:43]
자, 이게 Claude Code가
할 수 있는 것의 예시였습니다.
[03:46]
사람들이 이걸로 무엇을 만들어낼지
정말 기대됩니다.
