깃 레포 VSCode 바이브코딩 준비 끝
GitHub 레포지토리와 VSCode를 연결하는 방법을 안내합니다. 클론부터 커밋, 푸시까지 바이브코딩을 위한 워크플로우를 완성합니다.
관련 링크
VSCode를 설치하고 GitHub 계정을 만들었습니다. 바이브 코드할 때 가장 기본이 되는 두 가지 툴입니다. 이제 이 둘을 연결할 차례입니다. GitHub에 만들어둔 레포지토리를 내 컴퓨터로 가져오고(클론 시킨다고 합니다), 코드를 수정하고, 변경 사항을 GitHub에 다시 올리는(푸시) 과정을 배웁니다. 이 워크플로우만 익히면 바이브코딩을 위한 환경 설정은 완료됩니다.
어렵게 생각하지 마세요. GitHub에서 코드를 내려받고, VSCode에서 수정하고, 다시 GitHub에 올리는 것입니다. 마치 클라우드 드라이브에서 파일을 내려받아 수정하고 다시 올리는 것과 같습니다. 다만 코드 전용이라서 변경 이력까지 꼼꼼히 관리해 준다는 점이 다릅니다.
레포지토리 클론하기
클론(Clone)은 GitHub에 있는 레포지토리를 내 컴퓨터로 복사하는 것입니다. GitHub에서 원하는 레포지토리 페이지로 이동합니다. 초록색 Code 버튼을 클릭하면 URL이 표시됩니다. 이 URL을 복사합니다.
VSCode를 열고 Ctrl+Shift+P(맥은 Cmd+Shift+P)를 눌러 명령 팔레트를 엽니다. “Git: Clone”을 입력하고 선택합니다. 복사한 URL을 붙여넣고 엔터를 누릅니다. 저장할 폴더를 선택하면 레포지토리가 내 컴퓨터에 다운로드됩니다. “Open” 버튼을 클릭하면 VSCode에서 바로 작업을 시작할 수 있습니다.
코드 수정하고 변경 사항 확인하기
클론한 폴더에서 파일을 수정해 보겠습니다. README.md 파일을 열고 아무 내용이나 추가해 보세요. 저장(Ctrl+S)하면 왼쪽 사이드바의 소스 제어 아이콘에 숫자가 표시됩니다. 변경된 파일이 있다는 표시입니다.
소스 제어 탭을 클릭하면 변경된 파일 목록이 보입니다. 파일을 클릭하면 어떤 내용이 변경되었는지 비교해서 보여줍니다. 초록색은 추가된 내용, 빨간색은 삭제된 내용입니다. 이렇게 모든 변경 사항을 추적할 수 있습니다.
커밋하기
커밋(Commit)은 변경 사항을 하나의 버전으로 저장하는 것입니다. 게임의 세이브 포인트와 비슷합니다. 소스 제어 탭 상단에 메시지 입력창이 있습니다. 여기에 무엇을 변경했는지 간단히 적습니다. 예를 들어 “README 파일 수정”처럼 작성합니다.
메시지를 입력하고 체크 버튼(또는 Ctrl+Enter)을 누르면 커밋이 완료됩니다. 이제 이 변경 사항은 내 컴퓨터의 Git에 저장되었습니다. 하지만 아직 GitHub에는 올라가지 않았습니다. GitHub에 올리려면 푸시를 해야 합니다.
푸시하기
푸시(Push)는 로컬에서 커밋한 내용을 GitHub으로 업로드하는 것입니다. VSCode 하단 상태바를 보면 구름 모양 아이콘 옆에 화살표가 보입니다. 이것을 클릭하거나, 소스 제어 탭에서 더보기(…)를 클릭하고 Push를 선택합니다.
처음 푸시할 때는 GitHub 로그인을 요청할 수 있습니다. 브라우저 창이 열리면 GitHub에 로그인하고 VSCode에 접근 권한을 허용합니다. 한 번만 설정하면 이후에는 자동으로 연결됩니다. 푸시가 완료되면 GitHub 페이지를 새로고침해서 변경 사항이 반영되었는지 확인해 보세요.
바이브코딩 워크플로우 완성
이제 바이브코딩을 위한 워크플로우가 완성되었습니다. AI에게 코드를 요청하고, VSCode에서 파일에 붙여넣고, 저장한 후, 커밋하고, 푸시하면 됩니다. 이 과정을 반복하면서 웹사이트를 만들어 나갑니다.
작업 순서를 정리하면 다음과 같습니다. 먼저 GitHub에서 레포지토리를 클론합니다. AI에게 코드를 요청해서 파일을 수정합니다. 변경 사항을 커밋합니다. 커밋한 내용을 GitHub에 푸시합니다. 다음 강에서는 이렇게 만든 코드를 실제 인터넷에 공개하는 방법을 알아보겠습니다.
#GitHub #VSCode #Git연동 #클론 #커밋 #푸시 #바이브코딩 #개발환경 #개발워크플로우 #코드관리