techlist.io
KR EN
github

초보자를 위한 GitHub: VS Code에서 Git과 GitHub 시작하기 (새 탭에서 열림)

githubgitversion-controlvisual-studio-codesource-controlgit-branchesgit-commits

VS Code는 Git과 GitHub 기능을 통합해 편집기를 벗어나지 않고 저장소 초기화, 브랜치 관리, 변경 사항 검토, 커밋과 푸시를 수행하게 해준다. 이 글은 Git과 GitHub의 차이를 설명하고, VS Code에서 로컬 폴더를 Git 저장소로 만들고 변경 사항을 GitHub에 올리는 초보자용 흐름을 단계별로 안내한다. 이를 통해 도구 간 전환을 줄이고 개발 작업의 생산성을 높일 수 있다.

Git, GitHub, VS Code의 관계

  • GitHub는 코드 저장소를 호스팅하는 서비스다.
  • Git은 소스 코드의 변경 이력을 관리하는 프로그램이다.
  • Git은 명령줄뿐 아니라 VS Code 같은 편집기에서도 사용할 수 있다.
  • VS Code는 Git 기능을 내장하고 있어 GitHub와 연계된 버전 관리 작업을 편리하게 수행할 수 있다.
  • 실습을 위해 Git과 VS Code를 먼저 설치해야 한다.

폴더를 Git 저장소로 초기화

  • VS Code에서 Explorer → Open Folder를 선택해 코드가 들어 있는 폴더를 연다.
  • 왼쪽의 Source Control 아이콘을 클릭한다.
  • Initialize Repository를 선택하면 해당 폴더에 로컬 Git 저장소가 생성된다.
  • 하단 왼쪽에서 현재 브랜치 이름을 확인할 수 있으며, 기본 브랜치는 보통 main이다.
  • Command Palette에서 Git: Rename Branch를 실행해 브랜치 이름을 변경할 수 있다.
    • macOS: Shift-Command-P
    • Windows/Linux: Ctrl-Shift-P

파일 추적과 스테이징

  • 저장소를 초기화하면 기존 파일 옆에 U 표시가 나타난다.
    • U는 Untracked, 즉 아직 Git이 추적하지 않는 파일이라는 뜻이다.
  • 파일 옆의 + 버튼을 클릭하면 해당 파일이 스테이징된다.
  • CHANGES 옆의 + 버튼을 누르면 변경된 모든 파일을 한 번에 스테이징할 수 있다.
  • 스테이징된 파일은 A로 표시된다.
    • A는 파일이 추가되었지만 아직 커밋되거나 GitHub에 업로드되지는 않았다는 의미다.

커밋 생성

  • Source Control 패널 상단의 입력란에 변경 내용을 설명하는 커밋 메시지를 작성한다.
  • 필요하면 Copilot 아이콘을 사용해 커밋 메시지를 생성할 수 있다.
  • Commit 버튼을 누르면 스테이징된 변경 사항이 로컬 Git 저장소에 기록된다.
  • 커밋은 변경 사항을 GitHub에 업로드하는 것과는 다르며, 이후 별도의 푸시 작업이 필요하다.

브랜치 생성과 전환

  • 주요 기능을 개발할 때는 main 브랜치에서 직접 작업하기보다 별도 브랜치를 만드는 것이 권장된다.
  • Command Palette에서 **Git: Create Branch…**를 실행한다.
  • 예를 들어 new-features 같은 브랜치 이름을 입력한다.
  • VS Code는 새 브랜치를 생성한 뒤 자동으로 해당 브랜치로 전환한다.
  • 현재 브랜치는 화면 하단 왼쪽에서 확인할 수 있다.

코드 변경 사항 확인

VS Code의 편집기 여백인 gutter는 코드 변경 유형을 시각적으로 표시한다.

  • 초록색 선: 새로 추가된 코드
  • 파란색 표시: 기존 코드가 수정된 부분
  • 빨간색 화살표: 코드가 삭제된 부분
  • 변경된 파일은 Source Control 패널의 CHANGES 아래에 표시된다.
  • 파일에 마우스를 올리면 다음 작업을 수행할 수 있다.
    • 파일 열기
    • 변경 사항 폐기
    • 변경 사항 스테이징
  • CHANGES 영역에서도 여러 파일의 변경 사항을 한꺼번에 검토하거나 스테이징할 수 있다.

diff로 변경 내용 비교

  • Source Control 패널에서 파일 이름을 클릭하면 변경 전후를 나란히 비교하는 diff 화면이 열린다.
  • diff 화면에서는 어떤 코드가 추가·수정·삭제되었는지 확인할 수 있다.
  • 오른쪽 위의 … 메뉴에서 Inline View를 선택하면 변경 전후 내용을 하나의 화면에서 볼 수 있다.
  • Inline View에서는 diff 화면 안에서 직접 코드를 수정할 수도 있다.

실용적인 작업 흐름

  • VS Code에서 폴더를 연다.
  • Git 저장소를 초기화한다.
  • 기능별 브랜치를 만든다.
  • 코드를 수정하고 Source Control에서 변경 사항을 검토한다.
  • 필요한 파일을 스테이징한다.
  • 의미 있는 커밋 메시지와 함께 커밋한다.
  • 이후 변경 사항을 GitHub에 반영하려면 푸시 작업을 수행한다.

이 글은 제공된 내용 기준으로 diff 확인 단계 이후에서 본문이 중단되어 있으며, GitHub 원격 저장소 연결과 실제 푸시 절차는 포함되어 있지 않다.