초보자를 위한 GitHub: VS Code에서 Git과 GitHub 시작하기 (새 탭에서 열림)
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 원격 저장소 연결과 실제 푸시 절차는 포함되어 있지 않다.