feat: [academy] Git 관리도구 페이지 추가
- 라우트, 컨트롤러 메서드 추가 - git-tools.blade.php 뷰 생성 (violet 테마, 8개 섹션) - 용어집 git-tools 도메인 20개 용어 추가
This commit is contained in:
김보곤
@@ -98,6 +98,15 @@ public function gitPolicy(Request $request): View|Response
|
||||
return view('academy.git-policy');
|
||||
}
|
||||
|
||||
public function gitTools(Request $request): View|Response
|
||||
{
|
||||
if ($request->header('HX-Request')) {
|
||||
return response('', 200)->header('HX-Redirect', route('academy.git-tools'));
|
||||
}
|
||||
|
||||
return view('academy.git-tools');
|
||||
}
|
||||
|
||||
public function nginxEncyclopedia(Request $request): View|Response
|
||||
{
|
||||
if ($request->header('HX-Request')) {
|
||||
|
||||
968
resources/views/academy/git-tools.blade.php
Normal file
968
resources/views/academy/git-tools.blade.php
Normal file
@@ -0,0 +1,968 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Git 관리도구')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.help-balloon-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid #c4b5fd;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.help-balloon-trigger:hover {
|
||||
background: #6d28d9;
|
||||
color: white;
|
||||
border-color: #7c3aed;
|
||||
}
|
||||
.help-balloon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
background: #1e293b;
|
||||
color: #f1f5f9;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
width: max-content;
|
||||
white-space: normal;
|
||||
word-break: keep-all;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
z-index: 40;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.help-balloon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 7px solid transparent;
|
||||
border-top-color: #1e293b;
|
||||
}
|
||||
.help-balloon-trigger.is-active .help-balloon {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.help-balloon-trigger.is-active .help-balloon.balloon-right {
|
||||
left: auto;
|
||||
right: -10px;
|
||||
transform: scale(1);
|
||||
}
|
||||
.help-balloon-trigger.is-active .help-balloon.balloon-right::after {
|
||||
left: auto;
|
||||
right: 14px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1e1e2e;
|
||||
color: #a6e3a1;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.code-block .code-comment { color: #6c7086; }
|
||||
.code-block .code-keyword { color: #cba6f7; }
|
||||
.code-block .code-string { color: #a6e3a1; }
|
||||
.code-block .code-flag { color: #89b4fa; }
|
||||
.code-block .code-path { color: #f9e2af; }
|
||||
.code-block .code-output { color: #9399b2; }
|
||||
.code-block .code-danger { color: #f38ba8; }
|
||||
.code-block .code-prompt { color: #89dceb; }
|
||||
|
||||
.tool-card {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.tool-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.star-rating { color: #f59e0b; letter-spacing: 1px; }
|
||||
.star-empty { color: #d1d5db; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 히어로 배너 --}}
|
||||
{{-- ============================================================ --}}
|
||||
<div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #2e1065 0%, #0f172a 100%);">
|
||||
<div class="flex items-center" style="flex-wrap: wrap;">
|
||||
<div style="flex: 1 1 300px; padding: 2rem 2.5rem;">
|
||||
<div class="flex items-center gap-2 text-sm mb-2" style="color: #c4b5fd;">
|
||||
<span>아카데미</span>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||||
<span style="color: #e9d5ff;">Git 관리도구</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">Git 관리도구</h1>
|
||||
<p class="text-sm" style="color: #cbd5e1;">VS Code 기반 IDE에서 Git 브랜치를 시각적으로 관리하는 도구 추천과 사용법</p>
|
||||
</div>
|
||||
<div class="shrink-0" style="width: 240px; padding: 1.5rem;">
|
||||
<div class="text-center" style="font-size: 100px; line-height: 1;">
|
||||
<span style="filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));">🔀</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-8">
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 좌측 고정 목차 (TOC) --}}
|
||||
{{-- ============================================================ --}}
|
||||
<nav class="hidden lg:block shrink-0" style="width: 220px;">
|
||||
<div class="sticky top-24">
|
||||
<div class="bg-violet-50 border border-violet-200 rounded-xl p-5">
|
||||
<h2 class="font-semibold text-violet-800 mb-3 flex items-center gap-2 text-sm">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
|
||||
목차
|
||||
</h2>
|
||||
<div class="space-y-0.5 text-xs">
|
||||
<a href="#why-visual-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium">1. 왜 시각화 도구가 필요한가?</a>
|
||||
<a href="#cli-limits" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">CLI의 한계</a>
|
||||
<a href="#visual-benefits" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">시각화 장점</a>
|
||||
|
||||
<a href="#git-graph" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">2. Git Graph</a>
|
||||
<a href="#git-graph-install" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">설치 및 사용</a>
|
||||
|
||||
<a href="#gitlens" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">3. GitLens</a>
|
||||
<a href="#gitlens-features" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">핵심 기능</a>
|
||||
|
||||
<a href="#vscode-scm" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">4. VS Code 내장 SCM</a>
|
||||
<a href="#scm-shortcuts" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">단축키</a>
|
||||
|
||||
<a href="#gui-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">5. 독립 GUI 도구 비교</a>
|
||||
<a href="#gui-comparison" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">비교 테이블</a>
|
||||
|
||||
<a href="#rebase-vs-merge" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">6. Rebase vs Merge</a>
|
||||
<a href="#rebase-warning" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">주의사항</a>
|
||||
|
||||
<a href="#sam-workflow" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">7. SAM 실전 워크플로우</a>
|
||||
<a href="#sam-repos" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">3개 저장소 관리</a>
|
||||
|
||||
<a href="#terminal-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">8. 터미널 도구</a>
|
||||
<a href="#lazygit-usage" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">lazygit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 우측 콘텐츠 --}}
|
||||
{{-- ============================================================ --}}
|
||||
<div class="flex-1 min-w-0 space-y-10">
|
||||
|
||||
{{-- 모바일 목차 --}}
|
||||
<div class="lg:hidden bg-violet-50 border border-violet-200 rounded-xl p-4 mb-6">
|
||||
<details>
|
||||
<summary class="font-semibold text-violet-800 text-sm cursor-pointer flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
|
||||
목차 보기
|
||||
</summary>
|
||||
<nav class="mt-3 space-y-1 text-sm">
|
||||
<a href="#why-visual-tools" class="block text-violet-700 hover:text-violet-900 py-1">1. 왜 시각화 도구가 필요한가?</a>
|
||||
<a href="#git-graph" class="block text-violet-700 hover:text-violet-900 py-1">2. Git Graph</a>
|
||||
<a href="#gitlens" class="block text-violet-700 hover:text-violet-900 py-1">3. GitLens</a>
|
||||
<a href="#vscode-scm" class="block text-violet-700 hover:text-violet-900 py-1">4. VS Code 내장 SCM</a>
|
||||
<a href="#gui-tools" class="block text-violet-700 hover:text-violet-900 py-1">5. 독립 GUI 도구 비교</a>
|
||||
<a href="#rebase-vs-merge" class="block text-violet-700 hover:text-violet-900 py-1">6. Rebase vs Merge</a>
|
||||
<a href="#sam-workflow" class="block text-violet-700 hover:text-violet-900 py-1">7. SAM 실전 워크플로우</a>
|
||||
<a href="#terminal-tools" class="block text-violet-700 hover:text-violet-900 py-1">8. 터미널 도구</a>
|
||||
</nav>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 1. 왜 시각화 도구가 필요한가? --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="why-visual-tools" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
|
||||
왜 Git 시각화 도구가 필요한가?
|
||||
</h2>
|
||||
|
||||
<div id="cli-limits" class="scroll-mt-20 mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
CLI만으로는 부족하다
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">터미널에서 git log --graph를 실행하면 브랜치를 볼 수 있지만, 복잡한 프로젝트에서는 읽기 어렵다.</span></span>
|
||||
</h3>
|
||||
<div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
|
||||
<p class="font-semibold text-amber-800 mb-1">비유: 네비게이션 없이 운전하기</p>
|
||||
<p class="text-xs text-amber-900 leading-relaxed">
|
||||
주소만 보고 처음 가는 곳을 찾아가는 것은 가능하지만, <strong>네비게이션이 있으면 훨씬 빠르고 안전</strong>하다.
|
||||
Git 시각화 도구는 코드 저장소의 네비게이션이다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">CLI에서 보는 브랜치 그래프</p>
|
||||
<div class="code-block"><span class="code-prompt">$</span> <span class="code-keyword">git</span> log <span class="code-flag">--oneline --graph --all</span>
|
||||
<span class="code-output">* 3a7f2c1 (HEAD -> feature/calendar) feat: 달력 기능 추가
|
||||
| * b8e4d3a (develop) fix: 로그인 오류 수정
|
||||
|/
|
||||
* 1c5e9f0 (main) chore: 초기 설정
|
||||
| * d4a2b7c (feature/dashboard) feat: 대시보드 추가
|
||||
|/
|
||||
* 9e3f1a2 docs: README 업데이트</span>
|
||||
<span class="code-comment"># 브랜치가 10개 이상이면 이 그래프는 읽기 힘들어진다</span></div>
|
||||
</div>
|
||||
<div class="bg-violet-50 rounded-lg p-4 border border-violet-200">
|
||||
<p class="text-sm font-semibold text-violet-800 mb-2">시각화 도구에서 보는 같은 내용</p>
|
||||
<p class="text-xs text-violet-700 leading-relaxed">
|
||||
시각화 도구는 <strong>색상으로 브랜치를 구분</strong>하고, <strong>마우스 클릭만으로 커밋 상세 정보</strong>를 볼 수 있다.
|
||||
Merge와 Rebase 결과도 즉시 확인할 수 있어 실수를 방지한다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="visual-benefits" class="scroll-mt-20">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
시각화 도구의 장점
|
||||
</h3>
|
||||
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
|
||||
<div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
|
||||
<div class="text-2xl mb-2">🎨</div>
|
||||
<p class="font-semibold text-gray-800 text-sm mb-1">색상 구분</p>
|
||||
<p class="text-xs text-gray-600">브랜치별 다른 색상으로 한눈에 구분 가능</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
|
||||
<div class="text-2xl mb-2">🖱</div>
|
||||
<p class="font-semibold text-gray-800 text-sm mb-1">클릭 조작</p>
|
||||
<p class="text-xs text-gray-600">명령어 대신 마우스 클릭으로 Merge, Rebase 실행</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
|
||||
<div class="text-2xl mb-2">🔍</div>
|
||||
<p class="font-semibold text-gray-800 text-sm mb-1">Diff 미리보기</p>
|
||||
<p class="text-xs text-gray-600">커밋 클릭만으로 변경 사항을 바로 확인</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
|
||||
<div class="text-2xl mb-2">⚠</div>
|
||||
<p class="font-semibold text-gray-800 text-sm mb-1">실수 방지</p>
|
||||
<p class="text-xs text-gray-600">위험한 작업 전 시각적 확인으로 사고 방지</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 2. Git Graph --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="git-graph" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
|
||||
Git Graph
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full font-medium">필수 설치</span>
|
||||
</h2>
|
||||
|
||||
<div id="git-graph-install" class="scroll-mt-20 mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
설치 및 기본 사용
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">Cursor, AntiGravity 등 VS Code 기반 IDE에서 동일하게 사용 가능하다.</span></span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
|
||||
<p class="font-semibold text-amber-800 mb-1">비유: 지하철 노선도</p>
|
||||
<p class="text-xs text-amber-900 leading-relaxed">
|
||||
Git Graph는 <strong>지하철 노선도</strong>처럼 브랜치를 보여준다.
|
||||
각 노선(브랜치)이 어디서 갈라지고 합쳐지는지 한눈에 파악할 수 있다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
|
||||
<div class="code-block"><span class="code-comment"># VS Code / Cursor / AntiGravity 확장 마켓플레이스에서 설치</span>
|
||||
<span class="code-comment"># Extension ID:</span>
|
||||
<span class="code-string">mhutchie.git-graph</span>
|
||||
|
||||
<span class="code-comment"># 또는 명령 팔레트 (Ctrl+Shift+P)에서:</span>
|
||||
<span class="code-keyword">ext install</span> <span class="code-string">mhutchie.git-graph</span></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">사용 방법</p>
|
||||
<div class="space-y-2 text-xs text-gray-700">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">1</span>
|
||||
<span>Source Control 탭에서 <strong>"Git Graph"</strong> 아이콘 클릭 (또는 명령 팔레트에서 <code class="bg-gray-200 px-1 rounded">Git Graph: View Git Graph</code>)</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">2</span>
|
||||
<span>전체 브랜치 그래프가 <strong>색상별</strong>로 표시됨</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">3</span>
|
||||
<span>커밋을 <strong>클릭</strong>하면 변경 파일 목록과 Diff를 볼 수 있음</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">4</span>
|
||||
<span>커밋을 <strong>우클릭</strong>하면 Cherry-pick, Revert, Reset 등 Git 작업 메뉴 표시</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-3">주요 기능</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800">기능</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">설명</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">사용법</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr><td class="p-2 font-medium">브랜치 그래프</td><td class="p-2">모든 브랜치를 색상별 그래프로 표시</td><td class="p-2">자동 표시</td></tr>
|
||||
<tr><td class="p-2 font-medium">커밋 상세</td><td class="p-2">변경 파일, Diff 미리보기</td><td class="p-2">커밋 클릭</td></tr>
|
||||
<tr><td class="p-2 font-medium">브랜치 생성</td><td class="p-2">커밋에서 새 브랜치 생성</td><td class="p-2">커밋 우클릭 > Create Branch</td></tr>
|
||||
<tr><td class="p-2 font-medium">Merge</td><td class="p-2">브랜치를 현재 브랜치에 병합</td><td class="p-2">브랜치 우클릭 > Merge</td></tr>
|
||||
<tr><td class="p-2 font-medium">Rebase</td><td class="p-2">현재 브랜치를 다른 브랜치 위에 재배치</td><td class="p-2">브랜치 우클릭 > Rebase</td></tr>
|
||||
<tr><td class="p-2 font-medium">Cherry-pick</td><td class="p-2">특정 커밋만 가져오기</td><td class="p-2">커밋 우클릭 > Cherry Pick</td></tr>
|
||||
<tr><td class="p-2 font-medium">태그</td><td class="p-2">커밋에 버전 태그 추가</td><td class="p-2">커밋 우클릭 > Add Tag</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 3. GitLens --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="gitlens" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
|
||||
GitLens
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full font-medium">필수 설치</span>
|
||||
</h2>
|
||||
|
||||
<div id="gitlens-features" class="scroll-mt-20 mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
핵심 기능
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">GitLens는 코드 편집기 안에서 "누가, 언제, 왜 이 코드를 바꿨는지"를 바로 보여준다.</span></span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
|
||||
<p class="font-semibold text-amber-800 mb-1">비유: CCTV 재생</p>
|
||||
<p class="text-xs text-amber-900 leading-relaxed">
|
||||
GitLens는 코드의 <strong>CCTV</strong>와 같다. 어떤 줄이든 클릭하면
|
||||
<strong>누가(작성자), 언제(날짜), 왜(커밋 메시지)</strong> 수정했는지 바로 확인할 수 있다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
|
||||
<div class="code-block"><span class="code-comment"># Extension ID:</span>
|
||||
<span class="code-string">eamodio.gitlens</span>
|
||||
|
||||
<span class="code-comment"># 또는 명령 팔레트에서:</span>
|
||||
<span class="code-keyword">ext install</span> <span class="code-string">eamodio.gitlens</span></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="bg-violet-100 text-violet-800 text-xs font-bold px-2 py-0.5 rounded">무료</span>
|
||||
<span class="text-sm font-semibold text-gray-800">Inline Blame</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 mb-2">코드 줄 끝에 <strong>최근 수정자와 커밋 메시지</strong>가 흐릿하게 표시된다. 커서를 올리면 상세 정보를 볼 수 있다.</p>
|
||||
<div class="code-block"><span class="code-comment">// 코드 편집기에서 이렇게 보인다:</span>
|
||||
<span class="code-keyword">function</span> <span class="code-string">calculateTotal</span>() { <span class="code-output">// 홍길동, 3일 전 — fix: 합계 계산 오류 수정</span>
|
||||
<span class="code-keyword">return</span> items.reduce(...) <span class="code-output">// 김철수, 1주 전 — feat: 합계 기능 추가</span>
|
||||
}</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="bg-violet-100 text-violet-800 text-xs font-bold px-2 py-0.5 rounded">무료</span>
|
||||
<span class="text-sm font-semibold text-gray-800">File History</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">파일의 전체 변경 이력을 시간순으로 보여준다. 특정 시점의 내용으로 쉽게 비교할 수 있다.</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="bg-orange-100 text-orange-800 text-xs font-bold px-2 py-0.5 rounded">유료</span>
|
||||
<span class="text-sm font-semibold text-gray-800">Commit Graph</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">Git Graph와 유사한 시각적 브랜치 그래프. GitLens+ (유료) 기능이지만, Git Graph 확장으로 대체 가능하다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-3">무료 vs 유료 비교</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800">기능</th>
|
||||
<th class="text-center p-2 font-semibold text-violet-800">무료</th>
|
||||
<th class="text-center p-2 font-semibold text-violet-800">유료 (Pro)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr><td class="p-2">Inline Blame</td><td class="p-2 text-center text-green-600 font-bold">✔</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">File History</td><td class="p-2 text-center text-green-600 font-bold">✔</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">Line History</td><td class="p-2 text-center text-green-600 font-bold">✔</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">Status Bar Blame</td><td class="p-2 text-center text-green-600 font-bold">✔</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">Commit Graph</td><td class="p-2 text-center text-red-500 font-bold">✘</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">Visual File History</td><td class="p-2 text-center text-red-500 font-bold">✘</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
<tr><td class="p-2">Worktrees</td><td class="p-2 text-center text-red-500 font-bold">✘</td><td class="p-2 text-center text-green-600 font-bold">✔</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">* 무료 기능만으로도 충분히 유용하다. Commit Graph는 Git Graph 확장으로 대체하면 된다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 4. VS Code 내장 Source Control --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="vscode-scm" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
|
||||
VS Code 내장 Source Control
|
||||
</h2>
|
||||
|
||||
<div id="scm-shortcuts" class="scroll-mt-20">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
별도 설치 없이 바로 사용
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">VS Code, Cursor, AntiGravity 모두 기본 내장되어 있다. 확장 설치 없이 바로 사용 가능하다.</span></span>
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-3">주요 단축키</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800">단축키</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">기능</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">설명</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr><td class="p-2 font-mono font-medium">Ctrl+Shift+G</td><td class="p-2">Source Control 열기</td><td class="p-2">Git 패널 열기</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">Ctrl+Shift+P</td><td class="p-2">명령 팔레트</td><td class="p-2">"Git:" 입력 후 모든 Git 명령 접근</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">Ctrl+Enter</td><td class="p-2">커밋</td><td class="p-2">Source Control에서 메시지 입력 후 커밋</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">파일 클릭</td><td class="p-2">Diff 보기</td><td class="p-2">변경된 파일 클릭 시 Diff 뷰어 열림</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">+ 버튼</td><td class="p-2">Stage (git add)</td><td class="p-2">파일 옆 + 클릭 시 스테이징</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">- 버튼</td><td class="p-2">Unstage</td><td class="p-2">스테이지된 파일 옆 - 클릭 시 언스테이지</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-3">내장 기능 활용</p>
|
||||
<div class="space-y-2 text-xs text-gray-700">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Diff</span>
|
||||
<span>변경된 파일 클릭 시 좌우 분할 Diff 뷰어가 열린다. 어떤 줄이 추가/삭제/수정되었는지 색상으로 구분된다.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Timeline</span>
|
||||
<span>파일 탐색기 하단의 <strong>Timeline</strong> 패널에서 파일의 변경 이력을 시간순으로 볼 수 있다.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Gutter</span>
|
||||
<span>편집기 좌측 거터에 <strong>변경 표시</strong>(초록: 추가, 파랑: 수정, 빨강: 삭제)가 나타난다.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Branch</span>
|
||||
<span>하단 상태바의 브랜치 이름을 클릭하면 <strong>브랜치 전환</strong>이나 <strong>새 브랜치 생성</strong>을 할 수 있다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 5. 독립 GUI 도구 비교 --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="gui-tools" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
|
||||
독립 GUI 도구 비교
|
||||
</h2>
|
||||
|
||||
<div id="gui-comparison" class="scroll-mt-20">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
전체 도구 비교 테이블
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">VS Code 확장으로 충분하지만, 더 복잡한 Git 작업이 필요하면 독립 GUI 도구를 고려해 볼 수 있다.</span></span>
|
||||
</h3>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">도구</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">분류</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">가격</th>
|
||||
<th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">OS</th>
|
||||
<th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">Rebase 시각화</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">장점</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">단점</th>
|
||||
<th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">추천도</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr class="bg-green-50">
|
||||
<td class="p-2 font-medium border border-violet-100">Git Graph</td>
|
||||
<td class="p-2 border border-violet-100">VS Code 확장</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">All</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-green-600 font-bold">✔</td>
|
||||
<td class="p-2 border border-violet-100">IDE 통합, 경량</td>
|
||||
<td class="p-2 border border-violet-100">대규모 레포에서 느림</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★★</span></td>
|
||||
</tr>
|
||||
<tr class="bg-green-50">
|
||||
<td class="p-2 font-medium border border-violet-100">GitLens</td>
|
||||
<td class="p-2 border border-violet-100">VS Code 확장</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span>+유료</td>
|
||||
<td class="p-2 text-center border border-violet-100">All</td>
|
||||
<td class="p-2 text-center border border-violet-100">유료</td>
|
||||
<td class="p-2 border border-violet-100">Inline Blame, 상세 이력</td>
|
||||
<td class="p-2 border border-violet-100">일부 기능 유료</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium border border-violet-100">VS Code SCM</td>
|
||||
<td class="p-2 border border-violet-100">내장</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">All</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-red-500 font-bold">✘</td>
|
||||
<td class="p-2 border border-violet-100">설치 불필요, 기본 제공</td>
|
||||
<td class="p-2 border border-violet-100">그래프 없음</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★</span><span class="star-empty">★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium border border-violet-100">GitKraken</td>
|
||||
<td class="p-2 border border-violet-100">독립 GUI</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-orange-700 font-bold">유료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">Win/Mac/Linux</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-green-600 font-bold">✔</td>
|
||||
<td class="p-2 border border-violet-100">직관적 UI, 드래그&드롭</td>
|
||||
<td class="p-2 border border-violet-100">유료, 무거움</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★</span><span class="star-empty">★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium border border-violet-100">Sourcetree</td>
|
||||
<td class="p-2 border border-violet-100">독립 GUI</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">Win/Mac</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-green-600 font-bold">✔</td>
|
||||
<td class="p-2 border border-violet-100">무료, Atlassian 제품</td>
|
||||
<td class="p-2 border border-violet-100">Linux 미지원, 느림</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★</span><span class="star-empty">★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium border border-violet-100">Fork</td>
|
||||
<td class="p-2 border border-violet-100">독립 GUI</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-orange-700 font-bold">유료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">Win/Mac</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-green-600 font-bold">✔</td>
|
||||
<td class="p-2 border border-violet-100">경량, 빠른 속도</td>
|
||||
<td class="p-2 border border-violet-100">Linux 미지원</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★</span><span class="star-empty">★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium border border-violet-100">lazygit</td>
|
||||
<td class="p-2 border border-violet-100">터미널</td>
|
||||
<td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
|
||||
<td class="p-2 text-center border border-violet-100">All</td>
|
||||
<td class="p-2 text-center border border-violet-100 text-green-600 font-bold">✔</td>
|
||||
<td class="p-2 border border-violet-100">터미널 전용, 초경량</td>
|
||||
<td class="p-2 border border-violet-100">학습 필요</td>
|
||||
<td class="p-2 text-center border border-violet-100"><span class="star-rating">★★</span><span class="star-empty">★</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bg-violet-50 rounded-lg p-4 border border-violet-200 mt-4">
|
||||
<p class="text-xs text-violet-800 leading-relaxed">
|
||||
<strong>SAM 프로젝트 추천 조합:</strong>
|
||||
<strong>Git Graph</strong> (브랜치 시각화) + <strong>GitLens</strong> (코드 이력 추적) + <strong>VS Code SCM</strong> (기본 Git 작업).
|
||||
이 3개면 별도 GUI 도구 없이 모든 Git 작업을 처리할 수 있다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 6. Rebase vs Merge --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="rebase-vs-merge" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
|
||||
Rebase vs Merge 시각으로 이해하기
|
||||
</h2>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
Merge: 합류 기록을 남긴다
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">두 도로가 만나는 교차로를 만드는 것과 같다. "여기서 합쳐졌다"는 기록이 남는다.</span></span>
|
||||
</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
|
||||
<p class="text-xs text-gray-600 mb-2">Merge 후 그래프 (다이아몬드 형태)</p>
|
||||
<div class="code-block"><span class="code-comment"># git merge feature/calendar</span>
|
||||
|
||||
<span class="code-output"> * ─── M (Merge commit) ← develop
|
||||
|\
|
||||
| * ── C3 (feat: 날짜 선택)
|
||||
| * ── C2 (feat: 달력 UI)
|
||||
|/
|
||||
* ──── C1 (이전 커밋) ← 분기점
|
||||
|
||||
두 브랜치가 합쳐지는 "다이아몬드" 형태
|
||||
Merge 커밋(M)이 생성되어 합류 기록이 남는다</span></div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
Rebase: 직선으로 정리한다
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">줄을 서다가 맨 앞으로 끼어드는 것과 같다. 이력이 깔끔한 직선이 된다.</span></span>
|
||||
</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
|
||||
<p class="text-xs text-gray-600 mb-2">Rebase 후 그래프 (직선 형태)</p>
|
||||
<div class="code-block"><span class="code-comment"># git rebase develop (feature 브랜치에서 실행)</span>
|
||||
|
||||
<span class="code-output"> * ── C3' (feat: 날짜 선택) ← feature/calendar
|
||||
* ── C2' (feat: 달력 UI)
|
||||
* ── C1 (이전 커밋) ← develop
|
||||
|
||||
브랜치 분기 없이 깔끔한 "직선" 형태
|
||||
커밋이 develop 위에 재배치(re-base)된다</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
비교 정리
|
||||
</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800">항목</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">Merge</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">Rebase</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr><td class="p-2 font-medium">그래프 모양</td><td class="p-2">다이아몬드 (분기+합류)</td><td class="p-2">직선</td></tr>
|
||||
<tr><td class="p-2 font-medium">이력</td><td class="p-2">합류 기록 보존</td><td class="p-2">깔끔한 직선 이력</td></tr>
|
||||
<tr><td class="p-2 font-medium">Merge 커밋</td><td class="p-2">생성됨</td><td class="p-2">생성 안 됨</td></tr>
|
||||
<tr><td class="p-2 font-medium">안전성</td><td class="p-2">안전 (기존 커밋 변경 없음)</td><td class="p-2">주의 필요 (커밋 해시 변경)</td></tr>
|
||||
<tr><td class="p-2 font-medium">추천 상황</td><td class="p-2">공유 브랜치, PR 머지</td><td class="p-2">로컬 feature 브랜치 정리</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rebase-warning" class="scroll-mt-20">
|
||||
<div class="bg-red-50 rounded-lg p-4 border border-red-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-red-600 font-bold text-sm">⚠ 절대 주의!</span>
|
||||
</div>
|
||||
<p class="text-xs text-red-800 leading-relaxed mb-2">
|
||||
<strong>이미 Push한 브랜치에서 Rebase를 하면 안 된다!</strong>
|
||||
</p>
|
||||
<p class="text-xs text-red-700 leading-relaxed mb-3">
|
||||
Rebase는 커밋의 해시값을 변경한다. Push한 브랜치를 Rebase하면 원격 저장소와 이력이 달라져
|
||||
다른 팀원들의 작업이 꼬이게 된다. <strong>Force Push가 필요해지며, 이는 매우 위험하다.</strong>
|
||||
</p>
|
||||
<div class="code-block"><span class="code-comment"># ✔ 안전: 아직 Push하지 않은 로컬 브랜치에서 Rebase</span>
|
||||
<span class="code-keyword">git</span> checkout feature/my-work
|
||||
<span class="code-keyword">git</span> rebase develop
|
||||
|
||||
<span class="code-comment"># ✘ 위험: 이미 Push한 브랜치에서 Rebase</span>
|
||||
<span class="code-keyword">git</span> checkout feature/shared-work <span class="code-danger"># 이미 push됨!</span>
|
||||
<span class="code-keyword">git</span> rebase develop <span class="code-danger"># ✘ 하면 안 됨!</span>
|
||||
<span class="code-keyword">git</span> push <span class="code-flag">--force</span> <span class="code-danger"># ✘ 더 위험!</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 7. SAM 프로젝트 실전 워크플로우 --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="sam-workflow" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">7</span>
|
||||
SAM 프로젝트 실전 워크플로우
|
||||
</h2>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
브랜치 흐름 도식
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">SAM 프로젝트의 Git 정책은 <a href="{{ route('academy.git-policy') }}" class="text-blue-300 underline">Git 정책</a> 페이지에서 자세히 확인할 수 있다.</span></span>
|
||||
</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
|
||||
<div class="code-block"><span class="code-comment"># SAM 프로젝트 브랜치 전략</span>
|
||||
|
||||
<span class="code-string">feature/*</span> ──push──> <span class="code-keyword">develop</span> ──PR merge──> <span class="code-danger">main/master</span>
|
||||
| |
|
||||
v v
|
||||
<span class="code-flag">개발 서버</span> <span class="code-danger">운영 서버</span>
|
||||
(자동 배포) (Jenkins CI/CD)
|
||||
|
||||
<span class="code-comment"># 저장소 3개 (각각 독립적으로 관리)</span>
|
||||
<span class="code-path">mng/</span> ── 관리자 웹 (Laravel)
|
||||
<span class="code-path">api/</span> ── API 서버 (Laravel)
|
||||
<span class="code-path">react/</span> ── 프론트엔드 (Next.js)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sam-repos" class="scroll-mt-20 mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
3개 저장소 관리 팁
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">Git Graph에서 3개 저장소 전환하기</p>
|
||||
<div class="space-y-2 text-xs text-gray-700">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">1</span>
|
||||
<span>VS Code에서 <strong>File > Open Folder</strong>로 원하는 저장소 폴더를 연다 (<code class="bg-gray-200 px-1 rounded">mng/</code>, <code class="bg-gray-200 px-1 rounded">api/</code>, <code class="bg-gray-200 px-1 rounded">react/</code>)</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">2</span>
|
||||
<span>Git Graph 아이콘을 클릭하면 <strong>해당 저장소의 브랜치 그래프</strong>가 표시됨</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">3</span>
|
||||
<span>또는 <strong>Workspace</strong> 기능으로 3개 폴더를 한 번에 열어 전환 가능</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">Step-by-Step: feature 브랜치 작업 흐름</p>
|
||||
<div class="code-block"><span class="code-comment"># 1. develop 브랜치에서 최신 코드 받기</span>
|
||||
<span class="code-keyword">git</span> checkout develop
|
||||
<span class="code-keyword">git</span> pull origin develop
|
||||
|
||||
<span class="code-comment"># 2. feature 브랜치 생성</span>
|
||||
<span class="code-keyword">git</span> checkout <span class="code-flag">-b</span> feature/calendar
|
||||
|
||||
<span class="code-comment"># 3. 작업 후 커밋 (SAM 커밋 메시지 규칙 준수)</span>
|
||||
<span class="code-keyword">git</span> add <span class="code-path">app/Http/Controllers/CalendarController.php</span>
|
||||
<span class="code-keyword">git</span> commit <span class="code-flag">-m</span> <span class="code-string">"feat: [calendar] 달력 기능 추가"</span>
|
||||
|
||||
<span class="code-comment"># 4. develop에 Push (자동 배포됨)</span>
|
||||
<span class="code-keyword">git</span> checkout develop
|
||||
<span class="code-keyword">git</span> merge feature/calendar
|
||||
<span class="code-keyword">git</span> push origin develop
|
||||
|
||||
<span class="code-comment"># 5. feature 브랜치 정리</span>
|
||||
<span class="code-keyword">git</span> branch <span class="code-flag">-d</span> feature/calendar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-violet-50 rounded-lg p-4 border border-violet-200 mt-4">
|
||||
<p class="text-xs text-violet-800 leading-relaxed">
|
||||
<strong>📖 관련 문서:</strong>
|
||||
SAM 프로젝트의 Git 정책, 커밋 메시지 규칙, 브랜치 전략은
|
||||
<a href="{{ route('academy.git-policy') }}" class="text-violet-600 underline hover:text-violet-800 font-medium">Git 정책</a> 페이지에서 자세히 확인할 수 있다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ============================================================ --}}
|
||||
{{-- 8. 터미널 기반 도구 --}}
|
||||
{{-- ============================================================ --}}
|
||||
<section id="terminal-tools" class="scroll-mt-20">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
||||
<span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">8</span>
|
||||
터미널 기반 도구
|
||||
</h2>
|
||||
|
||||
<div id="lazygit-usage" class="scroll-mt-20">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-violet-400 rounded-full"></span>
|
||||
lazygit
|
||||
<span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">터미널에서 동작하는 Git GUI. SSH 접속 환경에서도 사용할 수 있어 서버 작업 시 유용하다.</span></span>
|
||||
</h3>
|
||||
|
||||
<div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
|
||||
<p class="font-semibold text-amber-800 mb-1">비유: 터미널 속 미니 Git 데스크톱</p>
|
||||
<p class="text-xs text-amber-900 leading-relaxed">
|
||||
lazygit는 터미널 안에서 동작하는 <strong>미니 Git 데스크톱 앱</strong>이다.
|
||||
키보드만으로 Stage, Commit, Push, Branch 전환, Rebase까지 모든 Git 작업을 할 수 있다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
|
||||
<div class="code-block"><span class="code-comment"># Ubuntu/WSL</span>
|
||||
<span class="code-keyword">sudo</span> add-apt-repository ppa:lazygit-team/release
|
||||
<span class="code-keyword">sudo</span> apt update
|
||||
<span class="code-keyword">sudo</span> apt install lazygit
|
||||
|
||||
<span class="code-comment"># macOS</span>
|
||||
<span class="code-keyword">brew</span> install lazygit
|
||||
|
||||
<span class="code-comment"># Windows (scoop)</span>
|
||||
<span class="code-keyword">scoop</span> install lazygit</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-2">실행 및 기본 사용</p>
|
||||
<div class="code-block"><span class="code-comment"># Git 저장소에서 실행</span>
|
||||
<span class="code-prompt">$</span> <span class="code-keyword">lazygit</span>
|
||||
|
||||
<span class="code-comment"># 화면 구성 (5개 패널)</span>
|
||||
<span class="code-output">┌─ Status ──────┬─ Files ──────────────────────────┐
|
||||
│ │ M app/Controller.php │
|
||||
│ On branch: │ M resources/views/index.blade │
|
||||
│ develop │ A new-file.php │
|
||||
│ │ │
|
||||
├─ Branches ────┤──────────────────────────────────┤
|
||||
│ * develop │ Diff / Commit details │
|
||||
│ feature/cal │ │
|
||||
│ main │ │
|
||||
├─ Commits ─────┤ │
|
||||
│ abc1234 feat │ │
|
||||
│ def5678 fix │ │
|
||||
└───────────────┴──────────────────────────────────┘</span></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
||||
<p class="text-sm font-semibold text-gray-700 mb-3">핵심 단축키</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="bg-violet-50">
|
||||
<th class="text-left p-2 font-semibold text-violet-800">키</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">기능</th>
|
||||
<th class="text-left p-2 font-semibold text-violet-800">설명</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr><td class="p-2 font-mono font-medium">Space</td><td class="p-2">Stage/Unstage</td><td class="p-2">파일 또는 줄 단위 스테이징</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">c</td><td class="p-2">Commit</td><td class="p-2">스테이지된 파일 커밋</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">P</td><td class="p-2">Push</td><td class="p-2">원격 저장소에 Push</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">p</td><td class="p-2">Pull</td><td class="p-2">원격 저장소에서 Pull</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">n</td><td class="p-2">New Branch</td><td class="p-2">새 브랜치 생성</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">r</td><td class="p-2">Rebase</td><td class="p-2">선택한 브랜치에 Rebase</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">M</td><td class="p-2">Merge</td><td class="p-2">선택한 브랜치 Merge</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">e</td><td class="p-2">Edit</td><td class="p-2">에디터로 파일 열기</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">q</td><td class="p-2">Quit</td><td class="p-2">lazygit 종료</td></tr>
|
||||
<tr><td class="p-2 font-mono font-medium">?</td><td class="p-2">Help</td><td class="p-2">전체 단축키 보기</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-violet-50 rounded-lg p-4 border border-violet-200">
|
||||
<p class="text-xs text-violet-800 leading-relaxed">
|
||||
<strong>SSH 환경에서의 장점:</strong>
|
||||
개발 서버에 SSH로 접속하면 GUI 도구를 사용할 수 없다.
|
||||
lazygit를 설치해두면 서버에서도 <strong>시각적으로 Git을 관리</strong>할 수 있다.
|
||||
<code class="bg-violet-100 px-1 rounded">ssh pro@114.203.209.83</code> 접속 후
|
||||
<code class="bg-violet-100 px-1 rounded">cd /home/webservice/mng && lazygit</code>로 바로 사용 가능.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// 도움말 풍선 토글
|
||||
window.toggleBalloon = function(el) {
|
||||
var wasActive = el.classList.contains('is-active');
|
||||
document.querySelectorAll('.help-balloon-trigger.is-active').forEach(function(t) {
|
||||
t.classList.remove('is-active');
|
||||
});
|
||||
if (!wasActive) {
|
||||
el.classList.add('is-active');
|
||||
}
|
||||
};
|
||||
|
||||
// 풍선 외부 클릭 시 닫기
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.help-balloon-trigger')) {
|
||||
document.querySelectorAll('.help-balloon-trigger.is-active').forEach(function(t) {
|
||||
t.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@include('components.academy-glossary', ['domain' => 'git-tools'])
|
||||
@endsection
|
||||
@@ -1,7 +1,7 @@
|
||||
{{--
|
||||
Academy Glossary Tooltip Component
|
||||
@include('components.academy-glossary', ['domain' => 'fire-shutter'])
|
||||
도메인: fire-shutter | it-planning | server-knowledge | frontend-dev | docker-environment | docker-commands | backend-dev | web-basics | env-management | nginx-encyclopedia
|
||||
도메인: fire-shutter | it-planning | server-knowledge | frontend-dev | docker-environment | docker-commands | backend-dev | web-basics | env-management | nginx-encyclopedia | git-policy | git-tools
|
||||
--}}
|
||||
|
||||
@push('styles')
|
||||
@@ -417,6 +417,29 @@
|
||||
"FCM": "Firebase Cloud Messaging. Google의 무료 푸시 알림 서비스.",
|
||||
"GCS": "Google Cloud Storage. Google의 클라우드 파일 저장소 서비스."
|
||||
};
|
||||
@elseif($domain === 'git-tools')
|
||||
window.__GLOSSARY_DATA['git-tools'] = {
|
||||
"Git Graph": "VS Code 확장 프로그램. 브랜치를 색상별 그래프로 시각화하여 커밋 이력을 한눈에 파악할 수 있다.",
|
||||
"GitLens": "VS Code 확장 프로그램. 코드 줄마다 누가, 언제, 왜 수정했는지 Inline Blame으로 보여준다.",
|
||||
"Rebase": "브랜치의 커밋들을 다른 브랜치 위에 재배치하는 것. 이력이 깔끔한 직선이 되지만 커밋 해시가 변경된다.",
|
||||
"Merge": "두 브랜치의 변경 사항을 하나로 합치는 것. 합류 기록(Merge 커밋)이 남아 이력이 보존된다.",
|
||||
"Interactive Rebase": "커밋 순서 변경, 합치기(Squash), 수정 등을 대화형으로 수행하는 Rebase. git rebase -i로 실행한다.",
|
||||
"Squash": "여러 개의 커밋을 하나로 합치는 것. 불필요한 중간 커밋을 정리할 때 사용한다.",
|
||||
"Cherry-pick": "다른 브랜치의 특정 커밋 하나만 현재 브랜치에 가져오는 것. 전체 Merge 없이 필요한 변경만 적용한다.",
|
||||
"HEAD": "현재 체크아웃된 브랜치의 최신 커밋을 가리키는 포인터. '지금 내가 보고 있는 위치'를 뜻한다.",
|
||||
"Fast-forward": "브랜치 사이에 분기가 없을 때 포인터만 앞으로 이동하는 Merge 방식. Merge 커밋이 생성되지 않는다.",
|
||||
"Blame": "파일의 각 줄을 누가 마지막으로 수정했는지 보여주는 기능. git blame 명령어 또는 GitLens Inline Blame으로 확인한다.",
|
||||
"Source Control": "VS Code에 내장된 Git 관리 패널. Ctrl+Shift+G로 열 수 있으며 Stage, Commit, Push 등을 GUI로 수행한다.",
|
||||
"Diff": "두 버전 간 차이를 줄 단위로 비교하는 것. 추가(초록), 삭제(빨강), 수정(파랑)으로 색상 구분된다.",
|
||||
"Stash": "작업 중인 변경 사항을 임시로 저장하고 Working Directory를 깨끗하게 만드는 기능. 나중에 꺼내어 적용할 수 있다.",
|
||||
"GitKraken": "유료 독립 Git GUI 도구. 직관적 UI와 드래그&드롭 방식의 Merge/Rebase를 지원한다.",
|
||||
"Sourcetree": "Atlassian에서 제공하는 무료 Git GUI 도구. Windows와 macOS를 지원한다.",
|
||||
"Fork": "경량 유료 Git GUI 도구. 빠른 속도와 깔끔한 인터페이스가 특징이다.",
|
||||
"lazygit": "터미널에서 동작하는 Git TUI(Text UI) 도구. SSH 환경에서도 시각적으로 Git을 관리할 수 있다.",
|
||||
"Timeline": "VS Code 파일 탐색기 하단의 패널. 파일의 변경 이력을 시간순으로 보여준다.",
|
||||
"Conflict": "같은 파일의 같은 부분을 두 사람이 다르게 수정했을 때 발생하는 충돌. 수동으로 해결해야 한다.",
|
||||
"3-way Merge": "공통 조상, 현재 브랜치, 대상 브랜치 세 가지를 비교하여 충돌을 해결하는 Merge 방식."
|
||||
};
|
||||
@endif
|
||||
</script>
|
||||
<script src="{{ asset('js/academy-glossary.js') }}" defer></script>
|
||||
|
||||
@@ -1492,6 +1492,7 @@
|
||||
Route::get('/backend-dev', [\App\Http\Controllers\AcademyController::class, 'backendDev'])->name('backend-dev');
|
||||
Route::get('/env-management', [\App\Http\Controllers\AcademyController::class, 'envManagement'])->name('env-management');
|
||||
Route::get('/git-policy', [\App\Http\Controllers\AcademyController::class, 'gitPolicy'])->name('git-policy');
|
||||
Route::get('/git-tools', [\App\Http\Controllers\AcademyController::class, 'gitTools'])->name('git-tools');
|
||||
Route::get('/nginx-encyclopedia', [\App\Http\Controllers\AcademyController::class, 'nginxEncyclopedia'])->name('nginx-encyclopedia');
|
||||
Route::get('/linux-commands', [\App\Http\Controllers\AcademyController::class, 'linuxCommands'])->name('linux-commands');
|
||||
Route::get('/pm2-guide', [\App\Http\Controllers\AcademyController::class, 'pm2Guide'])->name('pm2-guide');
|
||||
|
||||
Reference in New Issue
Block a user