변경 내용 스테이징 및 커밋

명확한 설명과 함께 집중된 커밋을 생성하면 자신과 팀이 코드베이스 기록을 더 잘 이해하는 데 도움이 됩니다. VS Code는 스테이징 변경 내용과 커밋 생성을 위한 통합 Git 도구를 제공하며, 포함할 변경 내용을 세밀하게 제어할 수 있습니다.

이 문서는 VS Code의 스테이징 및 커밋 워크플로를 다룹니다. Git의 2단계 프로세스부터 커밋 메시지를 위한 AI 지원 사용 및 커밋 전 변경 내용 검토까지 다룹니다.

Git 워크플로

Git은 작업을 저장하기 위해 스테이징 및 커밋의 2단계 프로세스를 사용합니다. 파일을 수정하면 Git이 이러한 변경 내용을 추적하지만 다음 커밋에 자동으로 포함하지는 않습니다. 스테이징을 통해 각 커밋에 포함할 변경 내용을 선택할 수 있습니다.

스테이징은 작업의 스냅샷을 준비하는 것으로 생각하세요. 포괄적인 커밋을 위해 모든 변경 내용을 한 번에 스테이징하거나, 나중에 검토하고 이해하기 쉬운 집중되고 논리적인 커밋을 만들기 위해 특정 파일 또는 개별 줄까지 스테이징할 수 있습니다.

변경 내용 보기

소스 제어 보기(⌃⇧G (Windows, Linux Ctrl+Shift+G))는 Git 리포지토리에서 변경 내용을 관리하는 중앙 허브입니다. 변경 내용은 스테이징 상태에 따라 두 섹션으로 구성됩니다.

• 변경 내용: 아직 커밋을 위해 스테이징되지 않은 수정, 추가 또는 삭제된 모든 파일을 나열합니다.
• 스테이징된 변경 내용: 스테이징되어 커밋 준비가 된 파일을 나열합니다.

변경 내용이 있는 파일 옆에 "U"(추적되지 않음), "M"(수정됨) 또는 "D"(삭제됨) 아이콘이 표시되어 변경 유형을 나타냅니다. 이 변경 표시기도 탐색기 보기 및 수정된 파일의 편집기 탭 제목에도 표시됩니다.

활동 막대의 소스 제어 아이콘은 커밋되지 않은 변경 내용의 개요를 제공하기 위해 영향을 받은 파일 수를 나타내는 배지도 표시합니다.

편집기 여백 표시기

파일에서 변경 내용을 빠르게 식별하는 데 도움이 되도록 VS Code는 줄 번호 옆에 편집기의 여백에 추가, 수정 또는 삭제된 줄을 나타내는 표시기를 표시합니다. 이러한 표시기는 미니맵에서도 볼 수 있습니다.

여백 색상은 변경 유형을 나타냅니다.

• 녹색 막대: 마지막 커밋 이후 새로 추가된 줄
• 파란색 막대: 마지막 커밋 이후 수정된 줄
• 빨간색 삼각형: 삭제된 줄 (삭제 지점 위에 표시됨)

여백 표시기를 선택하면 변경 내용의 인라인 diff 미리 보기가 나타납니다. 해당 버튼을 사용하여 이 미리 보기에서 직접 변경 내용을 스테이징하거나 되돌릴 수 있습니다.

다음 설정을 사용하여 여백 표시기 동작을 사용자 지정할 수 있습니다.

• scm.diffDecorations: diff 장식이 나타나는 시기(모두, 여백, 개요, 미니맵 또는 없음)를 제어합니다.
• scm.diffDecorationsGutterAction: 여백 메뉴에서 사용 가능한 작업을 제어합니다.
• scm.diffDecorationsGutterPattern: 여백 장식에 사용되는 패턴을 사용자 지정합니다.
• scm.diffDecorationsGutterVisibility: 여백 장식을 표시할 시기(항상 또는 마우스 포인터 오버 시)를 제어합니다.
• scm.diffDecorationsGutterWidth: 여백 표시기의 너비를 설정합니다.
• scm.diffDecorationsIgnoreTrimWhitespace: diff 장식에서 공백 변경을 무시합니다.

변경 내용 스테이징

변경 내용 스테이징은 다음 커밋에 추가하기 위해 준비합니다. 더 세부적인 제어를 위해 전체 파일 또는 특정 줄과 코드 블록을 스테이징할 수 있습니다.

개별 파일을 스테이징하려면 변경 내용 목록에서 해당 파일에 마우스 포인터를 놓고 +(플러스) 아이콘을 선택하거나, 파일을 마우스 오른쪽 버튼으로 클릭하고 변경 내용 스테이징을 선택합니다. 또한 변경 내용 섹션에서 파일을 드래그하여 스테이징된 변경 내용 섹션에 놓아 스테이징할 수도 있습니다.

트리 보기를 사용할 때 폴더 자체를 스테이징하여 전체 폴더를 스테이징할 수 있습니다. 모든 수정된 파일을 한 번에 스테이징하려면 변경 내용 헤더에 마우스 포인터를 놓고 +(플러스) 아이콘을 선택합니다.

명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 더 전문화된 스테이징 작업을 사용할 수 있습니다. "Git: 스테이징"을 입력하여 파일 스테이징 옵션을 확인합니다.

특정 줄 또는 코드 블록 스테이징

전체 파일을 스테이징하는 대신 파일의 특정 부분을 스테이징할 수도 있습니다. 부분 스테이징을 사용하면 집중된 커밋을 만들 수 있습니다. 예를 들어, 동일한 파일에서 서식 변경과 버그 수정을 모두 수행한 경우 적절한 커밋 메시지와 함께 별도로 커밋할 수 있습니다.

diff 편집기에서 부분 스테이징 수행

1. 변경 내용 목록에서 파일을 선택하여 diff 편집기 열기

2. 스테이징하려는 줄 선택

3. 선택 영역 옆의 diff 편집기 여백에 있는 스테이징 버튼을 사용하여 해당 줄만 스테이징

   

   선택 영역을 마우스 오른쪽 버튼으로 클릭하고 선택한 범위 스테이징을 선택하거나 명령 팔레트에서 Git: 선택한 범위 스테이징을 실행할 수도 있습니다.

변경 내용 스테이징 해제

스테이징에서 파일을 제거하려면 스테이징된 변경 내용 목록에서 해당 파일에 마우스 포인터를 놓고 -(마이너스) 아이콘을 선택하거나, 마우스 오른쪽 버튼으로 클릭하고 변경 내용 스테이징 해제를 선택합니다. 파일은 수정 내용을 잃지 않고 변경 내용 섹션으로 다시 이동합니다.

마찬가지로 diff 편집기에서 선택 영역 옆의 여백에 있는 스테이징 해제 버튼을 사용하여 특정 줄 또는 코드 블록의 스테이징을 해제할 수도 있습니다.

변경 내용 커밋

변경 내용을 스테이징한 후 커밋을 만들어 로컬 리포지토리에 저장할 수 있습니다. 커밋을 만들려면 변경 내용을 설명하는 커밋 메시지를 작성해야 합니다. 이 메시지는 자신과 다른 사람들이 커밋 기록을 검토할 때 커밋의 목적을 이해하는 데 도움이 됩니다.

커밋 메시지 작성

커밋 메시지는 커밋하는 변경 내용을 설명하고 다른 사람(및 미래의 자신)이 커밋의 목적을 이해하는 데 도움이 됩니다. 소스 제어 보기 상단의 커밋 메시지 입력 상자에 메시지를 입력하고 커밋을 선택하여 스테이징된 변경 내용을 저장합니다.

커밋 메시지 작성을 돕기 위해 커밋 메시지 입력 상자에 있는 반짝임 아이콘 을 선택하여 스테이징된 변경 내용을 기반으로 메시지를 생성하도록 AI를 사용할 수 있습니다. 사용자 지정 지침을 만들어 AI가 메시지를 생성하도록 안내할 수 있습니다.

여러 단락으로 커밋 메시지를 작성하려면 입력 상자 대신 전체 편집기를 사용할 수 있습니다. git.useEditorAsCommitInput 설정을 사용하여 이 기능을 활성화합니다. 커밋 메시지 없이 변경 내용을 커밋하면 새 편집기 탭이 열려 메시지를 작성할 수 있습니다.

변경 내용 커밋

소스 제어 보기에서 스테이징된 변경 내용 섹션의 변경 내용을 커밋하려면 커밋 버튼을 선택합니다. 스테이징되지 않은 모든 변경 내용은 향후 커밋을 위해 변경 내용 섹션에 남아 있습니다.

모든 변경 내용(스테이징된 것과 스테이징되지 않은 것 모두)을 한 번에 커밋하려면 추가 작업(...) 메뉴를 선택하고 커밋 > 모두 커밋을 선택합니다. 이렇게 하면 수정된 모든 파일을 한 단계로 스테이징하고 커밋합니다.

이전 커밋 수정

가장 최근 커밋을 수정해야 하는 경우 새 커밋을 만드는 대신 수정할 수 있습니다. 이는 잊어버린 변경 내용을 추가하거나 커밋 메시지를 수정하는 데 유용합니다.

커밋을 수정하려면 커밋 버튼 드롭다운을 선택하고 커밋 (수정)을 선택하거나, 추가 작업(...) 메뉴에서 스테이징된 커밋 (수정) 옵션을 사용합니다.

마지막 커밋 실행 취소

마지막 커밋을 실행 취소해야 하는 경우 소스 제어 보기의 추가 작업(...) 메뉴를 선택한 다음 커밋 > 마지막 커밋 실행 취소를 선택합니다. 이렇게 하면 마지막 커밋이 브랜치 기록에서 제거되지만 해당 커밋의 모든 변경 내용은 스테이징된 변경 내용 섹션에 스테이징된 상태로 유지됩니다.

변경 내용 삭제

커밋되지 않은 변경 내용을 완전히 삭제하고 파일을 마지막으로 커밋된 상태로 되돌리려면 소스 제어 보기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 변경 내용 삭제를 선택합니다. 또는 변경 내용 목록에서 파일에 마우스 포인터를 놓고 삭제 아이콘(왼쪽을 가리키는 곡선 화살표)을 선택합니다.

삭제된 변경 내용은 휴지통(Windows) 또는 트래시(macOS/Linux)로 이동하여 필요한 경우 복구할 수 있습니다.

변경 내용 diff 편집기에서 검토

diff 편집기는 파일의 변경 내용을 보여줍니다. 원본 버전과 수정된 버전의 나란히 비교를 표시합니다. diff 편집기는 나란히 또는 인라인 보기로 열 수 있습니다.

diff 편집기를 열려면 소스 제어 보기 변경 내용 또는 스테이징된 변경 내용 목록에서 파일을 선택하여 해당 파일과 마지막으로 커밋된 버전 간의 변경 내용을 확인합니다.

나란히 보기 vs 인라인 보기

기본적으로 diff 편집기는 원본 파일을 왼쪽에, 변경 내용을 오른쪽에 나란히 비교하여 표시합니다.

diff 편집기 도구 모음에서 추가 작업(...) > 인라인 보기를 선택하여 인라인 보기로 전환하여 하나의 편집기 내에서 변경 내용을 봅니다.

기본 보기를 구성하려면 diffEditor.renderSideBySide 설정을 사용합니다.

diff 편집기에서 스테이징 및 되돌리기

diff 편집기에는 각 변경 내용 옆에 스테이징 및 되돌리기 버튼이 있는 여백이 포함되어 있습니다. 이러한 버튼을 사용하면

• diff 보기에서 직접 개별 코드 블록 또는 줄 스테이징
• 다른 수정에 영향을 주지 않고 특정 변경 내용 되돌리기

diff 편집기에서 특정 줄을 선택하면 버튼이 선택 영역에만 적용됩니다.

diffEditor.renderGutterMenu 설정을 사용하여 diff 편집기 여백을 숨길 수 있습니다.

접근 가능한 diff 뷰어

스크린 리더 사용자를 위해 VS Code는 변경 내용을 통합된 패치 형식으로 제공하는 접근 가능한 diff 뷰어를 제공합니다. 접근 가능한 diff 뷰어를 열려면 diff 편집기 도구 모음의 추가 작업(...) 메뉴를 사용하고 접근 가능한 diff 뷰어 열기를 선택하거나 F7 키보드 단축키를 사용합니다.

다음 차이로 이동(F7) 및 이전 차이로 이동() 명령을 사용하여 변경 내용을 탐색합니다.

AI로 코드 변경 내용 검토

VS Code는 커밋하기 전에 AI 지원을 사용하여 커밋되지 않은 변경 내용을 검토할 수 있도록 합니다. 이러한 AI 기능은 수동 코드 검토를 보완하고 개발 워크플로의 초기 단계에서 문제를 포착하는 데 도움이 됩니다.

AI 기반 코드 검토를 위해 커밋되지 않은 변경 내용 검토

1. 소스 제어 보기에서 코드 검토 버튼을 선택합니다.

   

2. VS Code는 변경 내용을 분석하고 검토 주석 및 제안을 생성하며, 이들은 편집기에 오버레이 주석으로 표시됩니다.

   

Git blame 정보

VS Code는 편집기와 상태 표시줄에 Git blame 정보를 인라인으로 표시할 수 있습니다. 상태 표시줄 항목 또는 편집기 인라인 힌트에 마우스를 가져가면 자세한 Git blame 정보를 볼 수 있습니다.

Git blame 정보를 활성화하거나 비활성화하려면 Git: Git Blame Editor Decoration 토글 및 Git: Git Blame Status Bar Item 토글 명령을 사용하거나 다음 설정을 구성합니다.

• git.blame.statusBarItem.enabled (기본값으로 활성화됨)
• git.blame.editorDecoration.enabled

편집기와 상태 표시줄에 표시되는 메시지의 형식은 git.blame.editorDecoration.template 및 git.blame.statusBarItem.template 설정을 사용하여 사용자 지정할 수 있습니다. 가장 일반적인 정보를 위한 변수를 사용할 수 있습니다.

예를 들어, 다음 템플릿은 커밋의 제목, 작성자의 이름, 그리고 작성 날짜를 현재로부터 상대적으로 보여줍니다.

{
  "git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}

편집기 장식 색상을 조정하려면 git.blame.editorDecorationForeground 테마 색상을 사용합니다.

커밋 기록에 대한 그래프 보기

소스 제어 보기의 소스 제어 그래프는 커밋 기록 및 브랜치 관계를 시각적으로 표현합니다. 원격 리포지토리가 구성되어 있으면 원격에 비해 얼마나 많은 커밋 앞에 있는지 또는 뒤에 있는지 확인할 수 있습니다.

그래프에는 현재 브랜치, 현재 브랜치의 업스트림 브랜치, 그리고 선택적 기본 브랜치가 포함됩니다. 그래프의 루트는 이 브랜치들의 공통 조상입니다.

그래프는 다음 기능을 제공합니다.

• 항목을 선택하면 해당 커밋에서 변경된 파일을 볼 수 있습니다. 변경 내용 열기 작업을 선택하면 편집기에서 커밋의 diff를 볼 수 있습니다.
• 커밋을 마우스 오른쪽 버튼으로 클릭하여 checkout, cherry-pick, 채팅에 컨텍스트로 추가 등의 작업을 수행할 수 있습니다.
• 파일을 선택하면 편집기에서 해당 파일의 diff를 볼 수 있습니다.
• 커밋을 선택하고 다른 브랜치 또는 태그와 비교하려면 커밋을 마우스 오른쪽 버튼으로 클릭하고 비교, 원격과 비교 또는 병합 기준과 비교를 선택합니다.

그래프 보기 도구 모음의 작업을 사용하여 브랜치, fetch, pull, push 및 sync 변경 내용을 선택합니다.

파일 기록에 대한 타임라인 보기

파일 탐색기 하단에서 액세스할 수 있는 타임라인 보기는 파일의 이벤트 기록을 시각화하는 통합 보기입니다. 예를 들어, Git 커밋 또는 로컬 파일 저장을 타임라인 보기에서 볼 수 있습니다.

타임라인 보기에 대해 자세히 알아보세요.

다음 단계

• 브랜치 및 작업 트리 - 브랜치 관리, Git 작업 트리 및 stash 작업에 대해 알아봅니다.
• 리포지토리 및 원격 - 원격 리포지토리 복제, 게시 및 동기화에 대해 알아봅니다.
• 병합 충돌 - 브랜치를 병합할 때 충돌을 처리합니다.
• GitHub 작업 - pull 요청 및 문제에 대해 알아봅니다.
• VS Code의 Copilot - 더 많은 AI 기반 개발 기능을 발견합니다.