[00:00]
Claude Code를 사용하고 있고 GitHub도
[00:02]
사용한다면, Claude Code GitHub
[00:04]
액션을 꼭 설치해야 합니다.
[00:07]
이것은 Claude Code를 기본적으로
[00:10]
백그라운드 에이전트로 만들어서
[00:12]
당신이 놓칠 수 있는 코드베이스의
[00:14]
문제들을 찾아내고 실제로
[00:16]
당신을 위해 풀 리퀘스트를 생성해서
[00:18]
데스크톱에 앉아 있지 않아도
[00:22]
코딩할 수 있게 해줍니다. 기본적으로
[00:24]
GitHub 저장소 안에 자리잡고
[00:27]
이슈와 PR을 감시합니다. 언제든지
[00:31]
Claude Code를 언급하면 Claude가
[00:33]
와서 모든 것을 검토해 줍니다.
[00:36]
즉, 잠자리에 들기 전에 GitHub에
[00:38]
이슈를 등록할 수 있습니다.
[00:40]
아침에 일어나면 Claude가 만든
[00:43]
풀 리퀘스트를 받게 되고,
[00:46]
작동하는지 확인할 수 있습니다.
[00:47]
병합하고 라이브 사이트에 배포하기 전에
[00:50]
데스크톱에서 테스트할 수 있습니다.
[00:52]
기본적으로 팀에 또 다른 개발자가
[00:54]
24시간 백그라운드에서 작업하는
[00:58]
것과 같습니다.
[00:59]
이전에는 API를 통해서만 사용할 수
[01:01]
있었는데, 이는 모든 요청에 대해
[01:03]
비용을 지불해야 했지만 최근에
[01:06]
Claude Pro와 Max 플랜 사용자들에게
[01:09]
제공되기 시작했습니다. 더 이상
[01:12]
비용을 지불하지 않습니다.
[01:13]
데스크톱에서 사용하는 것과
[01:15]
정확히 같습니다. API를 통해
[01:17]
청구되지 않습니다. 모르는 사이에
[01:20]
요금이 부과되지 않습니다. 그냥
[01:22]
사용하면 됩니다. 저는 월 200달러
[01:26]
Max 플랜을 사용하고 있고,
[01:28]
추가 요금 없이 원하는 만큼
[01:30]
사용할 수 있습니다. 이것을 설정하려면
[01:34]
Claude를 열고 /ash 명령어로
[01:37]
GitHub 앱을 설치합니다. 제 프로젝트는
[01:39]
이미 여기에 저장소가 있어서
[01:41]
그것을 선택할 예정이지만, 원한다면
[01:42]
다른 저장소를 입력할 수도 있습니다.
[01:45]
엔터를 누르겠습니다.
[01:47]
Claude GitHub 앱을 설치할 수 있는
[01:49]
GitHub로 이동됩니다. 모든
[01:51]
저장소에 설치할지 선택된
[01:53]
저장소에만 설치할지 결정할 수
[01:55]
있습니다. 저는 Claude를 모든 곳에서
[01:57]
사용하고 싶으므로 모두를 선택하겠습니다.
[02:00]
설정을 완료하면 워크플로우를
[02:02]
설치할 수 있는 옵션이 주어집니다.
[02:04]
Claude Code를 설치할 수 있는데,
[02:07]
이는 이슈와 풀 리퀘스트 댓글에서
[02:09]
Claude를 태그할 수 있다는 의미이고,
[02:11]
Claude Code 리뷰는 모든 새로운
[02:12]
풀 리퀘스트에 대한 자동 코드
[02:15]
리뷰입니다. 풀 리퀘스트가 있을
[02:17]
때마다 코드를 감사하고 라이브
[02:20]
사이트에 병합하기 전에 잠재적인
[02:22]
문제들을 찾아냅니다. 이 두
[02:23]
워크플로우를 모두 설치할 것임을
[02:25]
확인하기 위해 엔터를 누르겠습니다.
[02:27]
이제 구독으로 장기간 토큰을
[02:29]
생성할 수 있는 새로운 기능입니다.
[02:32]
API 키를 사용하고 싶다면 할 수
[02:35]
있지만, 저는 Claude Max 플랜을
[02:37]
가지고 있으므로 장기간 토큰으로
[02:39]
계속 진행하겠습니다. 이것은
[02:42]
승인을 클릭해야 하는 인증 화면으로
[02:44]
이동됩니다. 다시 돌아가면
[02:46]
API 키와 함께 앱이 설치되었음을
[02:48]
확인할 수 있고 저장되었습니다.
[02:50]
그리고 이 변경사항을 저장소에
[02:52]
병합하기 위해 자동으로 풀 리퀘스트를
[02:55]
생성하는 것을 볼 수 있습니다.
[02:57]
Claude ReviewBot이 이를 검토하고 있고
[02:59]
풀 리퀘스트가 병합해도 괜찮은지 확인하고 있습니다.
[03:01]
확인할 파일이 이 두 개뿐이라서
[03:04]
꽤 간단할 것 같습니다.
[03:05]
하지만 여기 있는 할 일 목록을
[03:08]
아주 빠르게 처리할 겁니다.
[03:09]
그리고 완료되면
[03:11]
이를 병합하고 Claude를
[03:14]
제대로 사용할 수 있습니다.
[03:16]
Claude 코드 리뷰에서는
[03:18]
특정 부분에 집중하고 싶다면
[03:21]
프롬프트를 변경할 수 있습니다.
[03:23]
원하는 대로 변경할 수 있어요.
[03:25]
예를 들어 이런 식으로
[03:26]
변경할 수 있습니다.
[03:28]
풀 리퀘스트를 검토해주세요.
[03:30]
버그와 보안 이슈를 중점적으로 살펴보세요.
[03:32]
잠재적인 버그와 취약점에 대해서만
[03:34]
피드백을 제공하세요.
[03:37]
간결하고 요점을 말하세요. 제가 중점적으로
[03:40]
원하는 것은 버그가 있는지와
[03:42]
보안 취약점이 있는지입니다.
[03:44]
이제 제 playbooks GitHub 저장소의
[03:48]
이 이슈에서 어떻게 사용하는지 봅시다.
[03:49]
가끔 배포할 때 문제가 생깁니다.
[03:52]
사용자가 배포가 완료되기 전에
[03:53]
사이트에 접속하면 오류가 발생합니다.
[03:56]
Vite 매니페스트를 찾을 수 없다는 오류죠.
[03:59]
Sentry에서 이 문제를 설명하는
[04:01]
정보를 얻었습니다.
[04:03]
그래서 Claude에게 이걸 살펴보고
[04:05]
다운타임 없이 앱을 배포할 방법을
[04:07]
찾을 수 있는지 물어봤습니다.
[04:09]
이제 Claude가 이를 검토하고 있습니다.
[04:11]
다운타임 문제를 분석할 겁니다.
[04:12]
현재 설정을 살펴보고
[04:14]
프로세스와 오류 처리를 살펴보고
[04:16]
누락된 Vite 매니페스트에 대한
[04:19]
우아한 처리를 구현할 겁니다.
[04:20]
그러면 이 문제를 해결할 수 있을 겁니다.
[04:23]
다시 말하지만, 휴대폰으로도
[04:24]
어디서든 할 수 있습니다.
[04:27]
Claude가 바로 들어와서
[04:29]
작업을 시작할 거예요. 이게 작동하려면
[04:31]
데스크톱에 있을 필요가 없습니다.
[04:34]
벌써 Claude가 문제를 찾았습니다.
[04:36]
앱 레이아웃이 디렉티브를 사용하는데
[04:38]
배포 중에 매니페스트 JSON 파일이
[04:40]
누락되면 예외가 발생합니다.
[04:42]
여기서 솔루션을 만들었는데
[04:44]
기본적으로 이런 일이 발생하면
[04:45]
유지보수 페이지를 보여줍니다. 그리고
[04:49]
다운타임을 최소화하기 위해
[04:50]
에셋을 교체하기 전에 빌드하는
[04:53]
배포 스크립트도 만들 수 있습니다.
[04:56]
또한 이를 수행하는 방법에 대한
[04:58]
전체 지침이 포함된 deployment.md도
[05:01]
만들었습니다. 여기 전체 솔루션이 있습니다.
[05:03]
우아한 오류 처리. 오류를 잡아서
[05:05]
유지보수 페이지를 보여주고
[05:08]
배포 전략도 권장합니다.
[05:09]
라이브로 가기 전에 에셋을
[05:11]
완전히 빌드하는 새로운 스크립트와 함께 말이죠.
[05:13]
그리고 여기 위쪽에서
[05:14]
작업이 완료되었다고 나와 있습니다.
[05:16]
수행한 작업을 보거나
[05:18]
그냥 Create PR을 클릭하면
[05:20]
저장소에 풀 리퀘스트를 만들어줍니다.
[05:22]
여기서 변경된 파일들을 볼 수 있습니다.
[05:24]
그리고 Cursor 내 프로젝트에서
[05:26]
git pull을 할 수 있습니다.
[05:28]
그러면 이슈를 확인할 수 있습니다.
[05:30]
이제 이 브랜치에 있습니다.
[05:32]
라이브로 배포하기 전에 로컬에서
[05:34]
실제로 작동하는지 테스트할 수 있습니다.
[05:36]
다른 프로젝트도 매우 빠르게 작업할 수 있습니다.
[05:39]
밖에 있다가 개인 웹사이트에서
[05:41]
뉴스레터 박스를 더 크고
[05:43]
눈에 띄게 만들고 싶다고 결정할 수 있습니다.
[05:46]
그럼 레포지토리로 가서 이슈에 가서
[05:49]
Claude에게 그걸 해달라고 요청할 수 있습니다.
[05:52]
새로운 이슈를 만들어서
[05:54]
뉴스레터 컴포넌트를 다시 디자인해서
[05:56]
더 좋게 만들고 더 많은 가입을
[05:58]
유도해달라고 요청할 수 있습니다.
[06:00]
제가 하는 일에 대한 맥락을 좀 줄 수 있고
[06:03]
헤드라인과 서브타이틀이
[06:04]
특별히 마음에 들지 않습니다.
[06:06]
이제 Claude Code가 이걸 처리해서
[06:09]
가서 작업하고
[06:10]
뉴스레터 가입을 위한 새로운 버전을 제안해줄 겁니다.
[06:13]
좋아요, 이것 좀 보세요.
[06:15]
말 그대로 제 뉴스레터 가입 프로세스 전체를 살펴보고
[06:18]
우선 제가 실제로 사용하지 않는
[06:20]
터미널 컴포넌트가 있고
[06:22]
거기에 할일이 있다는 걸 알아냈습니다.
[06:25]
그래서 실제 가입 로직을 구현했습니다.
[06:27]
이제 가서 디자인을 부드럽게 만들었습니다.
[06:30]
기본적으로 두 컴포넌트 모두에 대해서요.
[06:33]
두 개가 있었거든요.
[06:36]
메인 페이지를 조금 다시 디자인했고
[06:38]
더 많은 공간과 여백을 추가했습니다.
[06:40]
이제 더 부드럽고 친근한 컬러 팔레트를 사용하고 있습니다.
[06:43]
제 레트로 스타일을 유지하면서도
[06:44]
여전히 기술적이지 않은 사용자들에게
[06:47]
환영받는 느낌을 주고 있습니다.
[06:50]
제가 정말로 튜토리얼과 콘텐츠를 통해
[06:52]
도달하려고 하는 분들에게
[06:55]
개발자가 아니어도 AI를 사용할 수 있다는 것을
[06:57]
보여주려고 하는 거죠.
[07:00]
이제 위로 올라가서 풀 리퀘스트를
[07:02]
만들 수 있습니다.
[07:05]
셀에서 미리보기를 만들어줬으니
[07:06]
이제 미리보기를 볼 수 있습니다.
[07:08]
좋아요, 이게 더 좋아 보입니다.
[07:10]
Ian's list는 딱히 마음에 들지 않지만
[07:12]
초록색 요소들은 없애줬네요.
[07:14]
실제로는 텍스트는 바뀌지 않았지만
[07:17]
잘 디자인했습니다.
[07:19]
꽤 좋네요. 다크모드도 확인해보겠습니다.
[07:21]
좋아요, 멋있네요.
[07:23]
이게 이 새로운 테마를 중심으로
[07:26]
이 페이지를 완전히 다르게 디자인할
[07:28]
아이디어를 주네요.
[07:30]
사실 꽤 마음에 들어요.
[07:32]
정말 좋습니다.
[07:34]
시스템으로 돌아가보겠습니다.
[07:35]
괜찮아 보이네요.
[07:38]
이 모든 것이 백그라운드에서 처리되었습니다.
[07:40]
말 그대로 제가 가서 다른 일을 하고
[07:42]
돌아왔더니 완료되어 있었습니다.
[07:44]
이걸 직접 시도해보고 비동기 개발을 설정해보세요.
[07:47]
이는 Claude가 당신이 잠들거나 식사하거나
[07:50]
다른 작업에 집중하는 동안 작업할 수 있다는 뜻입니다.
[07:53]
GitHub 레포지토리 안에서
[07:55]
할 일을 줄 수 있습니다.
[07:58]
Claude Code와 동시에 작업해서
[07:59]
작업량을 두 배로 늘릴 수 있습니다.
[08:01]
그리고 풀 리퀘스트에서 작업할 때마다
[08:03]
이슈를 해결받을 수 있습니다.
[08:06]
당신이 문제라는 걸 알지도 못했던 것들을 찾아서
[08:09]
더 좋고 안전하고 보안이 강화된
[08:12]
앱을 출시할 수 있도록 도와줍니다.