🔀 레슨

협업·GitHub — push·브랜치·머지

① 오늘의 미션

내 PC에만 있으면 불안해요

지난 레슨에서 '우리동네 반찬가게' 세이브포인트를 잔뜩 쌓았어요. 그런데 전부 내 노트북 안에만 있죠. 노트북이 고장 나면? 동료와 같이 만들려면?

오늘은 GitHub — 가게 코드를 인터넷에 올려 백업·공유하고, 올리는 순간 Vercel이 자동 배포까지 해주는 흐름을 손으로 익혀요.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「협업·GitHub — push·브랜치·머지」 레슨 내용 전체 텍스트로 훑어보기

내 PC에만 있으면 불안해요

오늘은 GitHub — 가게 코드를 인터넷에 올려 백업·공유하고, 올리는 순간 Vercel이 자동 배포까지 해주는 흐름을 손으로 익혀요.

git이 '내 PC 안 세이브'였다면, 그 코드를 인터넷에 둔다면?

맞아요. GitHub는 우리동네 반찬가게 git 저장소를 인터넷에 두는 곳이에요. 올리는 걸 push, 받아오는 걸 pull이라 해요. 백업+협업이 한 번에 되죠. 👇

우리동네 반찬가게를 함께 만든다고 생각하며 두 개념을 나란히 보세요.

⬆️ push / ⬇️ pull: 가게 커밋을 GitHub로 올리고(push), 동료의 변경을 받아와요(pull).
같은 가게 코드를 함께 키우는 통로예요.

🌿 브랜치: 잘 돌아가는 본 줄기는 안 건드리고 곁가지(브랜치)에서 '할인 배너' 같은 새 기능을 따로 만들어요. 완성되면 본 줄기에 합치죠(merge). 서로 안 부딪혀요.

먼저 인터넷에 가게가 들어갈 저장소(repository)를 만들어요. gh는 GitHub를 터미널에서 다루는 도구예요.

gh repo create my-shop --public --source=. — 우리동네 반찬가게용 GitHub 저장소를 만들어요

인터넷에 빈 가게 창고가 생겼고, 내 폴더와 연결됐어요. 이제 세이브를 올려볼게요.

이제 git push 로 가게 코드를 GitHub에 올리려 해요. 이 프로젝트는 Vercel에 연결돼 있어요.
push하면 무슨 일이 일어날까요?

맞아요. GitHub에 push하면 Vercel이 변경을 감지해 자동으로 가게를 배포해요. 손님이 볼 수 있는 진짜 주소(URL)가 갱신되죠. push 한 번이 곧 '배포'가 되는 거예요. 직접 올려볼까요? 👇

지금까지의 세이브를 인터넷으로 올려요. -u origin main은 "내 main 줄기를 GitHub(origin)에 올린다"는 뜻이에요.

git push -u origin main — 가게 세이브를 GitHub로 올려요(push)

백업 + 공개 주소 갱신이 한 번에! 이제 노트북이 고장 나도 가게 코드는 인터넷에 안전해요.

'할인 배너'를 본 가게는 안 건드리고 따로 만들려 해요. 새 브랜치(곁가지)를 만들며 그쪽으로 옮겨가는 명령의 빈칸을 채워보세요.

맞아요! git checkout -b sale-banner = 'sale-banner'라는 곁가지를 새로 만들고 그리로 이동해요. 이제 여기서 마음껏 실험해도 본 가게(main)는 안전하죠. 👇

곁가지에서 '할인 배너'를 작업한 셈 치고, 커밋해서 GitHub에 올려요. 곁가지도 따로 push할 수 있어요.

git checkout -b sale-banner — 할인 배너용 곁가지를 만들고 이동해요

git add . && git commit -m "할인 배너 추가" — 작업한 변경을 세이브해요

git push -u origin sale-banner — 이 곁가지를 GitHub에 올려요

본 가게(main)는 그대로 둔 채, 할인 배너만 따로 만들어 올렸어요. 이제 '이거 본 가게에 합쳐도 될까?'를 동료에게 물어볼 차례예요.

GitHub에서 협업의 꽃이라 불리는 기능이에요.

맞아요. 풀 리퀘스트(PR)는 '내 곁가지를 본 줄기에 합쳐도 될지' 동료에게 검토를 요청하는 거예요. 리뷰 후 merge하면 우리동네 반찬가게 본 줄기에 반영되죠. 👇

곁가지를 본 줄기에 합칠 수 있게 PR을 만들고, 검토가 끝났다 치고 merge해요.

gh pr create --title "할인 배너 추가" --body "메인 배너 위에 할인 안내" — 할인 배너 곁가지로 PR(검토 요청)을 만들어요

gh pr merge 1 --merge — 검토 OK! 본 줄기에 합쳐요(merge)

할인 배너가 본 가게에 반영됐고, merge로 main이 바뀌니 Vercel이 또 자동 배포했어요. 협업과 배포가 한 흐름으로 돌죠.

곁가지로 새 기능을 만들어 본 가게에 반영하는 순서를 맞춰보세요. (↑↓로 정렬)

정확해요! 곁가지 만들기 → 커밋 → push → PR·merge. merge되는 순간 Vercel이 자동 배포까지 — 모든 코스가 여기서 이어져요.

브랜치·PR·머지는 누구를 위한 장치였는지 떠올려 보세요.

맞아요. 브랜치·PR·머지는 여러 명이 함께 만들 때 빛나요. 혼자라면 Claude에게 "GitHub에 올려줘"라고만 해도 push+자동배포가 되죠. 나머지는 '이런 게 있구나'로 OK.

한 줄로

GitHub는 우리동네 반찬가게 세이브를 인터넷에 올려 백업·공유하는 곳이에요. push(올리기)·브랜치(곁가지)·merge(합치기)가 기본이고, 올리는 순간 Vercel이 자동 배포까지 해줘요.

다음 레슨에서

오늘 스친 셋 중 브랜치(곁가지)를 다음에 제대로 잡아요. 다음 레슨은 브랜치 감각 — 평행우주에서 실험 — 본점은 그대로 두고 복제 세계에서 마음껏 실험하는 법을 손에 익힙니다. 🌱