레슨 7 · 일상 업무
전체 파일이 아닌 선택한 덩어리를 커밋합니다.
나중에 사용할 별도의 카드 반경 편집을 남겨두고 헤드라인과 더 넓은 영웅을 준비하세요. 파일, 덩어리 및 줄 선택을 의도적으로 사용한 다음 정확하게 준비되고 남아 있는 CSS를 증명하십시오.
- 레벨: 중급
- 8분 읽음
- 4분 동영상
- 업데이트됨
- 이 수업 전에: 변화를 판단하기 전에 비교를 읽어보세요
이 브라우저에 진행 상황이 저장되었습니다.
재생하면 YouTube에서 동영상이 로드됩니다(개인정보 보호 강화 모드).
무엇을 배울 것인가
- 특정 커밋에 대한 파일, 덩어리 또는 라인 범위를 선택하세요.
- 교체할 제거/추가 라인을 모두 선택합니다.
- 색인과 작업 내용을 독립적으로 읽습니다.
- 8과의 커밋되지 않은 반경 편집을 유지합니다.
시작하기 전에
레슨 6이 끝난 곳에서 시작합니다. 원래 메인에는 두 개의 커밋이 있고 실행 가능한 레슨 6 입력이 있으며 원격은 없습니다. 작업/인덱스 청소; 무시된 dist가 존재할 수 있습니다. 동영상은 Ubuntu 24.04에서 Git 2.52.0 및 GitTree 2.0으로 녹화되었습니다. 두 편집 내용은 모두 GitTree의 자체 편집기에 저장되었고, 덩어리와 줄이 준비되었으며 커밋이 앱에서 이루어졌으며, 터미널 검사는 앱이 생성한 내용이나 별도의 복사본에 대해 실행되었습니다. Hunk 및 Line 컨트롤은 실제로 작동되었습니다. 기본 패치 경로는 별도의 복사본에서 실행되었습니다. macOS 또는 Windows에서는 아무것도 실행되지 않았으며 Ubuntu는 기록된 유일한 Linux 시스템입니다. GitTree의 소스 Git 최소값은 2.39.0입니다. 로그인하면 로컬 작업이 무료 플랜으로 진행됩니다.
개념
파일에는 여러 가지 독립적인 결정이 포함될 수 있습니다. 큰 덩어리는 반드시 하나의 비즈니스 의도가 아닌 텍스트 변경 사항 근처를 그룹화합니다. 대체 항목을 선택하려면 기존 줄을 제거하고 and 새 줄을 추가해야 합니다. 추가만 선택하면 다른 패치가 생성될 수 있습니다.
변경된 몇 줄만 선택한 경우에도 색인은 전체 다음 트리를 설명합니다. 여기서 HEAD에는 CSS-01이 있고 인덱스는 CSS-02-INDEX가 되며 작업 중인 CSS는 CSS-02-WORKING으로 유지됩니다. 편집 내용을 저장하면 작업 바이트가 변경됩니다. Stage Lines은 색인을 변경합니다. 일반 커밋은 메인으로 이동하지만 나머지 반경을 덮어쓰지는 않습니다. 원격 심판은 변경되지 않습니다. 네이티브 부분 스테이징 및 패치 애플리케이션은 동일한 콘텐츠 구별을 사용합니다.
전체 편집 및 대상 본체
index.html을 HTML-02-HEADLINE으로 바꾸고 styles.css를 CSS-02-WORKING으로 바꾸세요. 아래 CSS-02-INDEX는 작업 파일을 덮어쓸 본문이 아닌 target index입니다.
index.html — HTML-02-HEADLINE
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GitTree Features — course demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a href="#main">GitTree Features</a>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<p class="eyebrow">GitTree Learn demo project</p>
<h1 id="hero-title">See your work clearly.</h1>
<p id="hero-copy">Choose one change, then check what Git saved.</p>
</section>
<section class="features" aria-labelledby="features-title">
<h2 id="features-title">Follow your work</h2>
<div class="cards">
<article class="feature-card">
<h3>History</h3>
<p>Read commits and branches together.</p>
</article>
<article class="feature-card">
<h3>Changes</h3>
<p>Review the exact content selected for a commit.</p>
</article>
<article class="feature-card">
<h3>Recovery</h3>
<p>Inspect the scope of a recovery point before using it.</p>
</article>
</div>
</section>
</main>
<footer><p>Built by a fictional team for GitTree Learn.</p></footer>
<script type="module" src="site.js"></script>
</body>
</html>styles.css — CSS-02-INDEX
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.5rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}styles.css — CSS-02-작업 중
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}GitTree에서
- Show Files(Command/Ctrl+Shift+E)에서 각 기존 파일에 초점을 맞추고 Enter를 누릅니다. 명시된 작업 본문을 붙여넣은 다음 Save 또는 Command/Ctrl+S를 붙여넣습니다. 작업 중인 CSS 위에 인덱스 대상을 붙여넣지 마십시오.
- Back to Graph → 명령 팔레트… (Command/Ctrl+Shift+P) → Show Working Changes. Unstaged Files 아래의 index.html을 클릭하세요.
- Diff 보기(팔레트 Show Diff as Hunks)에서 Hunk를 선택합니다. 헤드라인 교체에서 Stage Hunk를 선택합니다. Staged Files에서는 완전한 헤드라인 변경만 예상됩니다. 전체 파일 Stage File은 이 HTML에 다른 편집 내용이 없기 때문에 동일합니다.
- Unstaged Files 아래의 styles.css를 클릭하세요. Ignore whitespace을(를) 꺼두세요. 41행에서 최대 너비 대체를 찾으세요:
44rem→48rem. - 제거된
max-width: 44rem;줄과 추가된max-width: 48rem;줄의 확인란을 선택합니다. 접근 가능한 이름에는 기호, 줄 번호 및 텍스트가 포함됩니다. 선택 도구 모음에서 Stage Lines를 활성화합니다. 59행에서 반경 쌍을 선택하지 마십시오. - 별도 재생의 대안: 최대 너비 덩어리에 대해서만 Stage Hunk는 여기서 동일한 목표를 제공합니다. Split/palette Show Diff Side by Side는 제거/추가된 셀을 적절한 이전/새 측면에 배치합니다. 둘 다 자체 선택 컨트롤이 있습니다. 메인 테이크를 보려면 Hunk로 돌아가세요.
- Staged styles.css를 클릭하세요. max-width만 변경되어야 합니다. unstaged styles.css를 클릭하세요. 반경만 남습니다. 콘텐츠를 삭제하는 것이 아니라 선택 항목을 지우려면 Clear를 사용하세요. 너무 많이 스테이징한 경우 관련 스테이징된 덩어리와 Unstage Hunk을 선택하거나 스테이징된 교체 라인과 Unstage Lines를 모두 선택한 다음 다시 확인하세요.
- 요약
feat: refine the hero and card spacing, 일반 옵션 모두 끄기, Commit Changes to 2 Files(또는 Command/Ctrl+Enter 한 번)을 입력합니다. 부분 커밋을 확인하고 스테이지되지 않은 반경을 유지합니다. - Stage All Changes을(를) 사용하거나 삭제하거나 정리 커밋을 하지 마세요. 레슨 8에서는 의도적으로 반경 커밋을 소유합니다.
오래된 선택 항목이 diff 지문에 바인딩되어 있습니다. 이전 바이트에 대한 패치를 적용하는 대신 외부 편집 후에 다시 로드하세요. 공백 숨기기로 인해 라인 선택 자격이 제거되는 경우 선택이 발생한 것처럼 가장하기보다는 이유를 읽고 전체 차이점을 복원하십시오.
터미널에서
두 가지 편집 내용을 모두 저장한 후:
git diff -- styles.css관찰된 전체 작업 차이점:
diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
기본 대화형 경로: git add -p -- index.html는 헤드라인 덩어리를 선택합니다. git add -p -- styles.css는 첫 번째 덩어리를 허용하고 반경 덩어리를 거부할 수 있습니다. 프롬프트는 Git 버전에 따라 다릅니다. 기억된 y/n 순서가 아닌, 답변하기 전에 내용을 확인하세요.
결정론적 네이티브 대응은 다음 전체 패치 outside 프로젝트를 <selection.patch>로 저장하고 인덱스에만 적용하는 것입니다.
diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.css검사/적용 모두 픽스처에서 자동으로 성공했습니다. 인쇄된 최종 쿼리는 다음과 같습니다.
diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git show :styles.css은 위의 전체 CSS-02-INDEX와 동일해야 합니다. 작업 파일은 여전히 전체 CSS-02-WORKING과 동일해야 합니다. --cached patch 명령도 작동하는 CSS를 작성하지 않습니다.
앱 성공 후 반복이 아닌 기본 커밋 대안:
git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css조용한 커밋: 0을 종료하고 출력이 없습니다. 상태:
M styles.css남은 전체 작업 차이:
diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
결과
이 강의가 끝나면 메인에 3개의 커밋이 발생합니다. HEAD/index에는 새로운 헤드라인과 더 넓은 영웅이 포함되어 있지만 반경은 여전히 0.5rem입니다. 작업 반경은 0.75rem입니다. styles.css에만 단계적이지 않은 수정이 있습니다. 원격, 병합 또는 리베이스가 없습니다. 선택적 노트북/클린 대안은 이 체크포인트를 대체하지 않습니다.
일반적인 실수
- 교체의 추가된 절반만 선택: 반드시 의도한 패치는 아닙니다.
- 전체 CSS 파일 준비: 반경도 포함됩니다.
- 작업 중인 CSS 위에 대상 인덱스 CSS를 붙여넣으면 의도적으로 분리된 편집 내용이 손실됩니다.
- 지금 정리 커밋 만들기: 8과의 시작 작업과 모순됩니다.
뭔가 잘못되면
캐시된/작업 비교를 사용하여 인덱스 불일치를 진단합니다. 커밋하기 전에 Unstage Lines/Hunk는 작업 편집 내용을 삭제하지 않고 선택을 변경할 수 있습니다. Git이 잘못되었거나 오래된 패치를 거부하면 중지하세요. 강요하지 마십시오. 현재 파일을 다시 읽고 정확한 내용을 다시 선택하세요. 실패한 커밋/후크는 후크를 건너뛸 수 있는 권한이 아닙니다.
이해도를 확인해보세요
각 질문에 답한 후 그 이유를 읽어보세요. '필수'라고 표시된 질문은 수업 완료에 반영됩니다.
6개 중 0개 정답
수업을 완료하려면 필수 질문에 올바르게 답하세요.
이 브라우저에서 확인했습니다.
연습
전체 파일을 사용하여 세 가지 다른 반경/폭 상태를 설명합니다. 변경된 입력: 반경 쌍도 준비하면 다음 커밋에 CSS 변경 사항이 모두 포함되고 CSS 차이가 남지 않습니다. 별도의 재생에서만 테스트하세요. 8과에서는 표준 반경 편집을 유지합니다.
귀하의 확인: 사이트에서 귀하의 컴퓨터를 볼 수 없습니다.
수업을 완료하려면 필수 질문에 올바르게 답하고 실제 연습을 확인하세요.
요약
- 의도한 변경과 일치하는 범위를 선택합니다.
- 준비된 전체 파일과 남은 작업 차이점을 확인하세요.
- 독립적으로 유용한 작업을 파기하지 않고 별도로 보관하세요.
관련된
용어집 소개
큰 덩어리 - كتلة; 선택된 라인 — الاستر المارة; 무대 - 태그; 언스테이지 — إلبان التجهيت; 패치 — رقعة; 색인 - البهرس.
비디오 대본
영상의 나레이션, 큐별로.
성적표 표시
- 변경사항 하나를 준비하는 동안 다음 것을 보존합니다.
- 주변 수정사항이 속할 수 있음 다른 의도로.
- 헤드라인과 CSS를 모두 저장하세요. 커밋을 선택하기 전에 편집합니다.
- 둘 중 하나를 선택하기 전에 두 가지 변경 사항을 모두 읽어보세요.
- 고립된 것부터 시작하라 헤드라인 교체.
- 이 헤드라인을 준비하세요. 관련없는 파일 변경이 아닙니다.
- 전체 차이점을 계속 표시하세요 라인 선택을 위해.
- 교체품에는 다음이 포함됩니다. 줄을 제거하고 추가했습니다.
- 너비 쌍을 준비하는 동안 반경을 바깥으로 두십시오.
- 준비된 내용을 확인하고 나머지 내용은 별도로.
- Unstaging 수리 선택 작업 텍스트를 삭제하지 않고.
- 전체 덩어리 선택은 동일합니다. 이 정확한 덩어리에게만.
- 확인란을 지우면 그렇지 않습니다. 콘텐츠를 스테이지 해제하거나 삭제합니다.
- 기본 패치는 다음을 업데이트합니다. 작업 파일이 아닌 인덱스입니다.
- 선택 완료 확인 파일은 하이라이트가 아닙니다.
- 어느 반경에 속합니까? 준비된 스냅샷은요?
- 제목과 너비를 커밋하고, 나중에 반경을 떠나십시오.
- 나머지 CSS 편집 의도한 결과입니다.
- 다음 수업은 녹음할 거예요 독립적인 반경 편집.
- 반경도 선택하면 CSS diff에는 아무것도 남지 않습니다.
- 변경된 차이점에는 새로운 것이 필요합니다. 강제 적용이 아니라 선택입니다.
- 유용한 작업을 버리지 마십시오. 단계적 선택을 수정합니다.
- 준비하고 남은 이름 계속하기 전에 수정하세요.
- 반경 편집 유지 다음 명시적 커밋.