← 자료실 홈
직접 코딩 0% — CLAUDE CODE로 진짜 서비스 만들고 배포·운영까지

9장. GitHub 입문

내 코드를 클라우드에 보관하기 — 잃어버리지 않는 금고와 시간 여행

직접 코딩 0%1 / 20

당신의 서비스는 지금 단 한 곳에 존재합니다.
당신의 컴퓨터.

컴퓨터가 고장 나면? 코드가 망가지면?
전부 사라집니다.

직접 코딩 0%9장 · 도입2 / 20
9장의 흐름

검문하고, 세이브하고, 되돌립니다

PROTECT · 안전하게 금고 열기
9.1GitHub이 필요한 이유
9.2계정과 저장소 — 금고 열쇠
9.3첫 업로드 전 비밀 검문
SAVE · RESTORE · SHARE
9.4세이브 포인트와 시간 여행
9.5커밋·푸시 자동화
9.6harness-kit 공개 저장소
9.7업로드 워크플로 정리
학습 리듬검문 → 업로드 → 사람 확인 → 세이브 → 복구
직접 코딩 0%9장 · 목차3 / 20
9.1 GitHub이 필요한 이유

6장의 안전벨트는 절반만 채워져 있었습니다

비교PM2 (7.5)Git + GitHub (이 장)
막는 사고서버가 죽었다코드가 망가졌다
하는 일죽으면 다시 살린다망가지면 되돌린다
비유자동 심장 충격기세이브 포인트 + 타임머신
보관 장소내 컴퓨터내 컴퓨터 + 인터넷 금고

6.1.3의 사고 — AI가 루프를 돌다 30분 만에 코드를 난장판으로. PM2는 "죽으면 살리는" 장치일 뿐,
살아 있는데 망가진 코드는 구해주지 못합니다. 서버는 멀쩡히 도는데 화면이 엉망이라면? 되돌릴 지점이 없습니다.

그 되돌릴 지점을 만드는 도구가 Git(내 컴퓨터의 세이브 장부 기술), 장부를 통째로 보관해 주는 인터넷 금고가 GitHub. 단, 내 컴퓨터에서 세이브만 하고 아직 올리지 않은 내용은 금고에 없으며, API 키·사용자 데이터처럼 올리지 않은 자료까지 함께 되돌아가는 것은 아닙니다.
직접 코딩 0%9.1 안전벨트의 두 반쪽4 / 20
9.1 GitHub이 필요한 이유

게임의 세이브, 그리고 금고의 두 가지 보너스

어려운 보스전 앞에서 세이브 → 지면 세이브 지점에서 다시 시작.
Git도 같습니다 — 잘 작동하는 코드를 저장해 두면, 망가졌을 때 그 상태로 복귀.
6.3 루프 그림의 "고리가 실패했을 때 돌아갈 지점" = 바로 이 세이브 포인트.

보너스 ① 다음 장의 출발점

10장에서 Vercel이 이 금고의 코드를 가져가 전 세계에 공개합니다. 보관 + 자동 배포의 연결 고리.

보너스 ② 공유의 통로

8.5의 예고 — "9장에서 GitHub을 배우면 내 플러그인을 세상과 공유할 수 있다". 이 장의 끝(9.6)에서 약속을 지킵니다.

NOTE — GitHub은 본래 전 세계 개발자의 협업 공간(브랜치·풀 리퀘스트…)이지만, 지금은 알 필요 없습니다. 우리에게 GitHub은 딱 두 가지 — 잃어버리지 않는 금고 + 10장 배포의 출발점. 일부 협업 기능은 11장에서 '작업용 가지'와 '변경 요청'으로 다시 만납니다.
직접 코딩 0%9.1 세이브 포인트5 / 20
9.2 GitHub 계정 만들기

금고 열쇠 받기 — 아이디는 잠시 고민할 가치가 있습니다

STEP 1
github.com
Sign up →
"Continue with Google"
(다른 계정도 절차 유사)
STEP 2
Username 결정
github.com/아이디 =
나의 공개 주소·포트폴리오
이름 기반의 단정한 아이디 권장
STEP 3
지역 · 생성
Korea, South 선택 →
"Create account"
(그림 9.1~9.4)
비교공개 (public)비공개 (private)
누가 보는가전 세계 누구나나 (+ 내가 초대할 사람)
어울리는 것남과 공유할 것 (플러그인·포트폴리오)내 서비스, 실습 프로젝트
비용 / 이 책에서무료 / my-plugins (9.6)무료 / qa-board (9.3)

금고 안은 저장소(repository) 칸으로 나뉨 — 프로젝트 하나 = 칸 하나. 판단 기준: 망설여지면 비공개(비공개→공개는 쉽지만, 한 번 공개된 것은 이미 누군가 봤을 수 있음). 칸은 미리 만들 필요 없음 — Claude Code가 만들어 줍니다.

직접 코딩 0%9.2 계정 · 저장소6 / 20
9.3.1 이 장에서 가장 중요한 이야기

금고에 비밀번호를 넣지 마라

qa-board 폴더 안에 있는 것들

.env — Claude API Key (비밀번호와 같다, 7.8)data/ — 사용자들이 올린 질문 (개인정보 가능)logs/ — 접속 기록공개 저장소를 자동으로 뒤지며 API 키를 수집하는 프로그램이 인터넷에서 쉬지 않고 돌고 있습니다. 키가 노출되면 누군가 내 크레딧으로 AI를 마음껏 씁니다.

더 무서운 사실

올린 비밀 파일을 화면에서 삭제해도 — 이전 세이브 기록에는 남아 있을 수 있습니다. 이미 누군가 복사했을 수도 있습니다.

그래서 원칙은 하나: 애초에 넣지 않는다.
반입 금지 목록 = .gitignore — 단, 이미 올라간 파일은 목록 추가만으로 사라지지 않으므로 첫 세이브 전에 만드는 것이 안전.

직접 코딩 0%9.3.1 반입 금지 목록7 / 20
9.3.1 검문 실행

올리기 전에 — 검문을 시킵니다

검문 프롬프트 (qa-board에서)

임무API 키·비밀번호·개인 정보(질문·로그·데이터)가 든 파일을 전부 찾아줘올라가지 않도록 .gitignore를 만들어줘node_modules처럼 올릴 필요 없는 폴더도 제외보고 — 무엇을 왜 제외했는지 표로

● 가장 중요한 발견 — .env에 실제 API 키가
  들어 있습니다 (sk-ant-api03-...)
  아직 git 저장소가 아니라 올라간 적 없음.
  새 .gitignore가 처음부터 차단합니다.
# 제외: .env(API 키) · data(질문) · logs(기록)
# · node_modules(부품 창고) (그림 9.5~9.6)

7.8을 건너뛴 독자는 ".env 없음"으로 나옵니다 — 그것대로 정상. 중요한 것은 올리기 전에 검문하는 습관. 단, AI가 빠뜨릴 수 있으니 업로드 후 실제 파일 목록을 사람이 재확인.

NOTE — 실수로 이미 올랐다면: 지우고 다시 올리는 것으로는 부족(과거 기록에 잔존). 정답은 비밀 자체를 무효로 — Anthropic Console에서 노출된 키를 삭제·재발급하고 .env를 새 키로 교체. 네이버 키 등도 해당 서비스에서 동일하게. 자물쇠가 노출됐으면 자물쇠를 바꾼다.
직접 코딩 0%9.3.1 검문 보고서8 / 20
9.3.2 올리기

"GitHub에 올려줘" — 그리고 두 가지 준비

업로드 프롬프트

이 프로젝트를 GitHub에 비공개(private) 저장소로 올려줘.GitHub 계정: XXXXXXXX · 저장소 이름: qa-board나는 계정만 있고, 이 컴퓨터에서 GitHub을 처음 사용해필요한 도구 설치나 인증이 있으면 단계별로 안내해줘완성 후 브라우저에서 확인할 저장소 주소를 알려줘

Claude Code가 도와주는 두 가지

도구 설치 — Git·GitHub 연결 도구(gh)가 없으면 안내. 설치 명령을 대신 실행하기도 하지만, 관리자 승인·버튼 클릭은 사람 몫

인증 — "이 컴퓨터가 정말 당신의 금고에 접근해도 되는가". 일회용 코드 + 브라우저 승인 = 금고 주인이 직접 도장을 찍는 순간, 휴먼 인 더 루프가 여기에도.

직접 코딩 0%9.3.2 업로드 지시9 / 20
9.3.2 인증 — 기기 등록 5단계

일회용 코드로 내 컴퓨터에 도장 찍기 (그림 9.8~9.15)

# 새 터미널에서 (Claude 입력창의 맨 앞 '!'는 빼고)
$ cd qa-board
$ gh auth login --hostname github.com --git-protocol https --web
? Authenticate Git with your GitHub credentials? Yes
! First copy your one-time code: XXXX-XXXX
Press Enter to open github.com/login/device ...
# 브라우저: Continue → 코드 입력 → Authorize github
Congratulations, you're all set!
> gh auth login 완료했어 # Claude Code에 복귀 보고
  • 브라우저 로그인은 대화형 작업 — AI가 대신 못 하므로 사람이 직접
  • 주의 — 브라우저에 다른 GitHub 계정이 로그인돼 있으면 그 계정으로 인증돼 버립니다. 로그아웃 후 진행하거나 시크릿 창에서
  • 완료를 알리면 Claude Code가 업로드 작업을 재개 → 저장소 주소 보고
직접 코딩 0%9.3.2 gh auth login10 / 20
9.3.2 업로드 후 — 사람의 검문

무엇이 올라갔는지보다, 무엇이 올라가지 않았는지

확인 1 — 코드 파일들이 보이는가 (server.js, public 폴더 등)
확인 2.env가 보이지 않는가 (안 보이는 게 정상. 보인다면 즉시 키 재발급 + "기록에서 제거하고 .gitignore를 고쳐줘")
확인 3data·logs 폴더가 보이지 않는가
확인 4 — 저장소 이름 옆 'Private' 회색 표시가 있는가

확인 2와 3이 이 장의 심장입니다.
이것이 고삐를 아는 사람의 업로드입니다. (그림 9.16~9.19)

TIP — 고삐도 함께 금고에 들어갑니다: 저장소에 CLAUDE.md와 .claude 폴더(설정·서브에이전트·프로젝트 스킬)도 올라가 있습니다. 누군가 이 저장소를 받으면 코드만이 아니라 당신이 채운 고삐까지 통째로 받는 겁니다 (5.3의 그 장면).
직접 코딩 0%9.3.2 확인 4종11 / 20
9.4 세이브 포인트와 시간 여행

용어는 딱 두 개 — 커밋과 푸시

커밋 (commit)
세이브
현재 상태를 저장 +
알아볼 이름표를 붙임
"관리자 답변 기능까지 완성"
푸시 (push)
금고에 올리기
세이브한 것을
GitHub 금고로 전송
> 지금 상태를 "안정 버전 : 게시판 전체 기능 완성"이라는 메시지로 커밋하고, GitHub에 푸시해줘.
Committed 780830f, pushed to main — 완료되었습니다! ☑ (그림 9.20~9.21)

금고에 넣는 것만으로는 안전벨트가 아닙니다 — "되돌릴 수 있어야" 완성. 이번 절에서 직접 증명합니다: 일부러 망가뜨리고, 되돌립니다.

직접 코딩 0%9.4 커밋 · 푸시12 / 20
9.4 파괴 테스트

일부러 망가뜨린다 — "고장난 게시판"

파괴 지시

"테스트를 하려고 해. 메인 화면 제목을 '고장난 게시판'으로 바꾸고, 질문 목록이 화면에 안 보이게 만들어줘. '테스트: 일부러 망가뜨림' 메시지로 GitHub에 업로드해줘."

7.3에서는 서비스를, 8.4에서는 울타리를 공격했고 — 이번엔 코드 자체를 망가뜨립니다. (고장 내는 방식은 실행마다 다를 수 있음)

$ npx pm2 start ecosystem.config.js
qa-board ✓ online (그림 9.23)
 
# 브라우저 접속 결과 (그림 9.24):
"고장난 게시판"
관리자 화면엔 질문이 있는데,
사용자 화면에선 목록이 사라짐

실제 서비스 중이라면 처참한 상황 — 예전 같으면 "원래대로 고쳐줘"라고 빌며 AI의 기억력에 운명을 맡겨야 했습니다.

직접 코딩 0%9.4 망가뜨리기13 / 20
9.4 시간 여행

코드를 "고친" 게 아니라 — 시간을 되돌렸다

> 방금 작업을 전부 취소하고, GitHub의
  "안정 버전 : 게시판 전체 기능 완성" 시점으로 되돌려줘.
● 되돌리기 완료했습니다 ☑
  로컬 코드가 GitHub 안정 버전과 완전히 일치
  (origin/main도 780830f) (그림 9.26)
 
# 새로고침 → "익명 질문 게시판" + 질문 목록 복구 (그림 9.27)
  • AI가 무엇을 어떻게 망가뜨렸는지 몰라도 됩니다 — 좋았던 시점의 이름표만 기억하면 됨
  • 되돌리기 전, 작업 중 내용은 따로 보관하게 하는 것이 안전
  • 확인 1: 망가진 화면을 직접 봤는가 / 확인 2: 되돌린 뒤 정상 작동하는가 (질문 등록까지)

6.3 루프의 안전벨트 = "실패 시 돌아갈 지점" —
이제 우리의 루프에는 돌아갈 곳이 생겼습니다.

TIP — 세이브는 언제? 게임과 같습니다: 보스전 직전(큰 수정 시작 전) + 잘 작동하는 상태가 될 때마다. "잘 되는 지금"을 세이브해 두면 "망가진 나중"이 두렵지 않습니다. 커밋 기록은 저장소 첫 화면의 'N commits' 클릭으로 시간순 열람.
직접 코딩 0%9.4 되돌리기14 / 20
9.5 자동화

반복되는 지시는 — 규칙으로 만든다

방법 ① CLAUDE.md 규칙 추가

"하나의 작업이 끝나면 먼저 정상 작동 확인 → .env·사용자 데이터·로그가 포함되지 않았는지 검사 → 두 검사를 통과하면 알아볼 이름으로 세이브하고 GitHub에 올린다. 문제 발견 시 올리지 말고 사용자에게 알린다."

단, CLAUDE.md는 지침 — 언제나 빠짐없이 실행된다는 보장은 없으므로, 실제로 올라갔는지 직접 확인.

방법 ② /저장 커스텀 명령어 (5.5 재활용)

"/저장 커스텀 명령어를 만들어줘 — 변경 사항을 요약한 메시지로 커밋하고 푸시."

생성 결과: 변경 없으면 중단 · 민감 파일 확인 · 강제 푸시 금지 안전장치 포함. /저장 좋아요 정렬 수정처럼 인자도 지원. (그림 9.28~9.30)

이 자동화의 진짜 가치는 10장에서 — 배포를 마치면, GitHub에 푸시될 때마다 자동으로 새 버전이 배포됩니다. "수정해줘" → Claude Code가 고치고 → GitHub에 올리고 → Vercel이 배포하는 흐름 — 그 마법의 앞 반쪽을 방금 만들었습니다.
직접 코딩 0%9.5 커밋·푸시 자동화15 / 20
9.6 공개 저장소로 남과 공유하기

8.5의 약속 회수 — 1인 장비점, 세계를 향해 개점

공개 업로드 프롬프트 (my-plugins에서)

my-plugins 폴더를 GitHub에 공개(public) 저장소로 올려줘.GitHub 계정: XXXXXXXX · 저장소 이름: my-plugins올리기 전에 비밀·개인 정보가 없는지 먼저 검문해줘다른 사람이 harness-kit를 설치하는 방법을 README로 만들어 함께 올려줘

  • 확인 1 — 시크릿 창(로그아웃 상태)에서도 저장소가 보이는가 = 진짜 공개되었는가
  • 확인 2 — README의 설치 안내가 8.5에서 실제로 했던 절차와 일치하는가
  • 공개 전에도 검문 — 공개 저장소일수록 검문은 더 중요

비밀이 없는 프로젝트는 같은 방식으로 Public 업로드 가능 — 이제 누구든 당신의 고삐 세트와 설치 안내를 볼 수 있습니다.

직접 코딩 0%9.6 harness-kit 공개16 / 20
9.7 이 장에서 달라진 것들 ①

안전벨트가 완성되었습니다

장치맡은 역할사고 시나리오
PM2 (7.5)죽으면 살리기 (자동 재시작)서버 프로세스가 멈췄다
Git + GitHub (9장)망가지면 되돌리기 (세이브 포인트·롤백)살아 있는데 코드가 엉망이다
GitHub 금고컴퓨터 밖 사본 보관내 컴퓨터가 고장 났다
직접 코딩 0%9.7 정리17 / 20
9.7 이 장에서 달라진 것들 ②

이제 몸에 밴 업로드 워크플로

1
검문
비밀·개인정보 탐색
.gitignore 작성
2
업로드
"GitHub에 올려줘"
(private/public 선택)
3
사람 확인
.env·data·logs가
안 보이는지 직접 검증
4
세이브 습관
큰 수정 전 + 잘 되는 순간
커밋·푸시 (자동화)
사고 시
시간 여행
"안정 버전으로
되돌려줘"

서비스는 이제 — 내 컴퓨터가 고장 나도 살아남고,
AI가 코드를 난장판으로 만들어도 돌아갈 지점이 있습니다.

직접 코딩 0%9.7 워크플로18 / 20
9.7 그러나 —

금고에 사본이 있을 뿐, 친구는 여전히 접속할 수 없다

  • 서비스는 아직 내 컴퓨터 안에서만 돌아갑니다 (localhost)
  • GitHub 저장소는 코드의 보관함이지, 서비스의 실행 장소가 아닙니다
  • 2장에서 예고한 마지막 벽 — "내 컴퓨터를 꺼도 접속되는 서비스"가 남았습니다

다음 장에서 이 금고를 출발점 삼아,
서비스를 전 세계에 공개합니다.

직접 코딩 0%9.7 남은 과제19 / 20
9장 마무리

잃어버리지 않는 금고를 만들었고,
시간을 되돌리는 타임머신을 얻었고,
올리기 전에 거르는 검문 습관이 생겼습니다.

NEXT · 10장. Vercel 배포 — 전 세계에 공개하기

GitHub 금고의 코드를 Vercel이 가져가 공개 URL로 —
푸시할 때마다 자동으로 새 버전이 배포되는 마법의 뒤 반쪽을 완성합니다.

직접 코딩 0%20 / 20
1 / 20 · ←/→ 이동 · F 전체화면