diff --git a/app/Http/Controllers/AcademyController.php b/app/Http/Controllers/AcademyController.php index 530e041c..9f9ef87d 100644 --- a/app/Http/Controllers/AcademyController.php +++ b/app/Http/Controllers/AcademyController.php @@ -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')) { diff --git a/resources/views/academy/git-tools.blade.php b/resources/views/academy/git-tools.blade.php new file mode 100644 index 00000000..ae70e94a --- /dev/null +++ b/resources/views/academy/git-tools.blade.php @@ -0,0 +1,968 @@ +@extends('layouts.app') + +@section('title', 'Git 관리도구') + +@push('styles') + +@endpush + +@section('content') +
+ + {{-- ============================================================ --}} + {{-- 히어로 배너 --}} + {{-- ============================================================ --}} +
+
+
+
+ 아카데미 + + Git 관리도구 +
+

Git 관리도구

+

VS Code 기반 IDE에서 Git 브랜치를 시각적으로 관리하는 도구 추천과 사용법

+
+
+
+ 🔀 +
+
+
+
+ +
+ {{-- ============================================================ --}} + {{-- 좌측 고정 목차 (TOC) --}} + {{-- ============================================================ --}} + + + {{-- ============================================================ --}} + {{-- 우측 콘텐츠 --}} + {{-- ============================================================ --}} +
+ + {{-- 모바일 목차 --}} +
+
+ + + 목차 보기 + + +
+
+ + {{-- ============================================================ --}} + {{-- 1. 왜 시각화 도구가 필요한가? --}} + {{-- ============================================================ --}} +
+
+

+ 1 + 왜 Git 시각화 도구가 필요한가? +

+ +
+

+ + CLI만으로는 부족하다 + ?터미널에서 git log --graph를 실행하면 브랜치를 볼 수 있지만, 복잡한 프로젝트에서는 읽기 어렵다. +

+
+

비유: 네비게이션 없이 운전하기

+

+ 주소만 보고 처음 가는 곳을 찾아가는 것은 가능하지만, 네비게이션이 있으면 훨씬 빠르고 안전하다. + Git 시각화 도구는 코드 저장소의 네비게이션이다. +

+
+
+
+

CLI에서 보는 브랜치 그래프

+
$ git log --oneline --graph --all +* 3a7f2c1 (HEAD -> feature/calendar) feat: 달력 기능 추가 +| * b8e4d3a (develop) fix: 로그인 오류 수정 +|/ +* 1c5e9f0 (main) chore: 초기 설정 +| * d4a2b7c (feature/dashboard) feat: 대시보드 추가 +|/ +* 9e3f1a2 docs: README 업데이트 +# 브랜치가 10개 이상이면 이 그래프는 읽기 힘들어진다
+
+
+

시각화 도구에서 보는 같은 내용

+

+ 시각화 도구는 색상으로 브랜치를 구분하고, 마우스 클릭만으로 커밋 상세 정보를 볼 수 있다. + Merge와 Rebase 결과도 즉시 확인할 수 있어 실수를 방지한다. +

+
+
+
+ +
+

+ + 시각화 도구의 장점 +

+
+
+
🎨
+

색상 구분

+

브랜치별 다른 색상으로 한눈에 구분 가능

+
+
+
🖱
+

클릭 조작

+

명령어 대신 마우스 클릭으로 Merge, Rebase 실행

+
+
+
🔍
+

Diff 미리보기

+

커밋 클릭만으로 변경 사항을 바로 확인

+
+
+
⚠
+

실수 방지

+

위험한 작업 전 시각적 확인으로 사고 방지

+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 2. Git Graph --}} + {{-- ============================================================ --}} +
+
+

+ 2 + Git Graph + 필수 설치 +

+ +
+

+ + 설치 및 기본 사용 + ?Cursor, AntiGravity 등 VS Code 기반 IDE에서 동일하게 사용 가능하다. +

+ +
+

비유: 지하철 노선도

+

+ Git Graph는 지하철 노선도처럼 브랜치를 보여준다. + 각 노선(브랜치)이 어디서 갈라지고 합쳐지는지 한눈에 파악할 수 있다. +

+
+ +
+
+

설치 방법

+
# VS Code / Cursor / AntiGravity 확장 마켓플레이스에서 설치 +# Extension ID: +mhutchie.git-graph + +# 또는 명령 팔레트 (Ctrl+Shift+P)에서: +ext install mhutchie.git-graph
+
+ +
+

사용 방법

+
+
+ 1 + Source Control 탭에서 "Git Graph" 아이콘 클릭 (또는 명령 팔레트에서 Git Graph: View Git Graph) +
+
+ 2 + 전체 브랜치 그래프가 색상별로 표시됨 +
+
+ 3 + 커밋을 클릭하면 변경 파일 목록과 Diff를 볼 수 있음 +
+
+ 4 + 커밋을 우클릭하면 Cherry-pick, Revert, Reset 등 Git 작업 메뉴 표시 +
+
+
+ +
+

주요 기능

+
+ + + + + + + + + + + + + + + + + +
기능설명사용법
브랜치 그래프모든 브랜치를 색상별 그래프로 표시자동 표시
커밋 상세변경 파일, Diff 미리보기커밋 클릭
브랜치 생성커밋에서 새 브랜치 생성커밋 우클릭 > Create Branch
Merge브랜치를 현재 브랜치에 병합브랜치 우클릭 > Merge
Rebase현재 브랜치를 다른 브랜치 위에 재배치브랜치 우클릭 > Rebase
Cherry-pick특정 커밋만 가져오기커밋 우클릭 > Cherry Pick
태그커밋에 버전 태그 추가커밋 우클릭 > Add Tag
+
+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 3. GitLens --}} + {{-- ============================================================ --}} +
+
+

+ 3 + GitLens + 필수 설치 +

+ +
+

+ + 핵심 기능 + ?GitLens는 코드 편집기 안에서 "누가, 언제, 왜 이 코드를 바꿨는지"를 바로 보여준다. +

+ +
+

비유: CCTV 재생

+

+ GitLens는 코드의 CCTV와 같다. 어떤 줄이든 클릭하면 + 누가(작성자), 언제(날짜), 왜(커밋 메시지) 수정했는지 바로 확인할 수 있다. +

+
+ +
+
+

설치 방법

+
# Extension ID: +eamodio.gitlens + +# 또는 명령 팔레트에서: +ext install eamodio.gitlens
+
+ +
+
+
+ 무료 + Inline Blame +
+

코드 줄 끝에 최근 수정자와 커밋 메시지가 흐릿하게 표시된다. 커서를 올리면 상세 정보를 볼 수 있다.

+
// 코드 편집기에서 이렇게 보인다: +function calculateTotal() { // 홍길동, 3일 전 — fix: 합계 계산 오류 수정 + return items.reduce(...) // 김철수, 1주 전 — feat: 합계 기능 추가 +}
+
+ +
+
+ 무료 + File History +
+

파일의 전체 변경 이력을 시간순으로 보여준다. 특정 시점의 내용으로 쉽게 비교할 수 있다.

+
+ +
+
+ 유료 + Commit Graph +
+

Git Graph와 유사한 시각적 브랜치 그래프. GitLens+ (유료) 기능이지만, Git Graph 확장으로 대체 가능하다.

+
+
+ +
+

무료 vs 유료 비교

+
+ + + + + + + + + + + + + + + + + +
기능무료유료 (Pro)
Inline Blame✔✔
File History✔✔
Line History✔✔
Status Bar Blame✔✔
Commit Graph✘✔
Visual File History✘✔
Worktrees✘✔
+
+

* 무료 기능만으로도 충분히 유용하다. Commit Graph는 Git Graph 확장으로 대체하면 된다.

+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 4. VS Code 내장 Source Control --}} + {{-- ============================================================ --}} +
+
+

+ 4 + VS Code 내장 Source Control +

+ +
+

+ + 별도 설치 없이 바로 사용 + ?VS Code, Cursor, AntiGravity 모두 기본 내장되어 있다. 확장 설치 없이 바로 사용 가능하다. +

+ +
+
+

주요 단축키

+
+ + + + + + + + + + + + + + + + +
단축키기능설명
Ctrl+Shift+GSource Control 열기Git 패널 열기
Ctrl+Shift+P명령 팔레트"Git:" 입력 후 모든 Git 명령 접근
Ctrl+Enter커밋Source Control에서 메시지 입력 후 커밋
파일 클릭Diff 보기변경된 파일 클릭 시 Diff 뷰어 열림
+ 버튼Stage (git add)파일 옆 + 클릭 시 스테이징
- 버튼Unstage스테이지된 파일 옆 - 클릭 시 언스테이지
+
+
+ +
+

내장 기능 활용

+
+
+ Diff + 변경된 파일 클릭 시 좌우 분할 Diff 뷰어가 열린다. 어떤 줄이 추가/삭제/수정되었는지 색상으로 구분된다. +
+
+ Timeline + 파일 탐색기 하단의 Timeline 패널에서 파일의 변경 이력을 시간순으로 볼 수 있다. +
+
+ Gutter + 편집기 좌측 거터에 변경 표시(초록: 추가, 파랑: 수정, 빨강: 삭제)가 나타난다. +
+
+ Branch + 하단 상태바의 브랜치 이름을 클릭하면 브랜치 전환이나 새 브랜치 생성을 할 수 있다. +
+
+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 5. 독립 GUI 도구 비교 --}} + {{-- ============================================================ --}} +
+
+

+ 5 + 독립 GUI 도구 비교 +

+ +
+

+ + 전체 도구 비교 테이블 + ?VS Code 확장으로 충분하지만, 더 복잡한 Git 작업이 필요하면 독립 GUI 도구를 고려해 볼 수 있다. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
도구분류가격OSRebase 시각화장점단점추천도
Git GraphVS Code 확장무료All✔IDE 통합, 경량대규모 레포에서 느림★★★
GitLensVS Code 확장무료+유료All유료Inline Blame, 상세 이력일부 기능 유료★★★
VS Code SCM내장무료All✘설치 불필요, 기본 제공그래프 없음★★★
GitKraken독립 GUI유료Win/Mac/Linux✔직관적 UI, 드래그&드롭유료, 무거움★★★
Sourcetree독립 GUI무료Win/Mac✔무료, Atlassian 제품Linux 미지원, 느림★★★
Fork독립 GUI유료Win/Mac✔경량, 빠른 속도Linux 미지원★★★
lazygit터미널무료All✔터미널 전용, 초경량학습 필요★★★
+
+ +
+

+ SAM 프로젝트 추천 조합: + Git Graph (브랜치 시각화) + GitLens (코드 이력 추적) + VS Code SCM (기본 Git 작업). + 이 3개면 별도 GUI 도구 없이 모든 Git 작업을 처리할 수 있다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 6. Rebase vs Merge --}} + {{-- ============================================================ --}} +
+
+

+ 6 + Rebase vs Merge 시각으로 이해하기 +

+ +
+

+ + Merge: 합류 기록을 남긴다 + ?두 도로가 만나는 교차로를 만드는 것과 같다. "여기서 합쳐졌다"는 기록이 남는다. +

+
+

Merge 후 그래프 (다이아몬드 형태)

+
# git merge feature/calendar + + * ─── M (Merge commit) ← develop + |\ + | * ── C3 (feat: 날짜 선택) + | * ── C2 (feat: 달력 UI) + |/ + * ──── C1 (이전 커밋) ← 분기점 + + 두 브랜치가 합쳐지는 "다이아몬드" 형태 + Merge 커밋(M)이 생성되어 합류 기록이 남는다
+
+ +

+ + Rebase: 직선으로 정리한다 + ?줄을 서다가 맨 앞으로 끼어드는 것과 같다. 이력이 깔끔한 직선이 된다. +

+
+

Rebase 후 그래프 (직선 형태)

+
# git rebase develop (feature 브랜치에서 실행) + + * ── C3' (feat: 날짜 선택) ← feature/calendar + * ── C2' (feat: 달력 UI) + * ── C1 (이전 커밋) ← develop + + 브랜치 분기 없이 깔끔한 "직선" 형태 + 커밋이 develop 위에 재배치(re-base)된다
+
+
+ +
+

+ + 비교 정리 +

+
+ + + + + + + + + + + + + + + +
항목MergeRebase
그래프 모양다이아몬드 (분기+합류)직선
이력합류 기록 보존깔끔한 직선 이력
Merge 커밋생성됨생성 안 됨
안전성안전 (기존 커밋 변경 없음)주의 필요 (커밋 해시 변경)
추천 상황공유 브랜치, PR 머지로컬 feature 브랜치 정리
+
+
+ +
+
+
+ ⚠ 절대 주의! +
+

+ 이미 Push한 브랜치에서 Rebase를 하면 안 된다! +

+

+ Rebase는 커밋의 해시값을 변경한다. Push한 브랜치를 Rebase하면 원격 저장소와 이력이 달라져 + 다른 팀원들의 작업이 꼬이게 된다. Force Push가 필요해지며, 이는 매우 위험하다. +

+
# ✔ 안전: 아직 Push하지 않은 로컬 브랜치에서 Rebase +git checkout feature/my-work +git rebase develop + +# ✘ 위험: 이미 Push한 브랜치에서 Rebase +git checkout feature/shared-work # 이미 push됨! +git rebase develop # ✘ 하면 안 됨! +git push --force # ✘ 더 위험!
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 7. SAM 프로젝트 실전 워크플로우 --}} + {{-- ============================================================ --}} +
+
+

+ 7 + SAM 프로젝트 실전 워크플로우 +

+ +
+

+ + 브랜치 흐름 도식 + ?SAM 프로젝트의 Git 정책은 Git 정책 페이지에서 자세히 확인할 수 있다. +

+
+
# SAM 프로젝트 브랜치 전략 + +feature/* ──push──> develop ──PR merge──> main/master + | | + v v + 개발 서버 운영 서버 + (자동 배포) (Jenkins CI/CD) + +# 저장소 3개 (각각 독립적으로 관리) +mng/ ── 관리자 웹 (Laravel) +api/ ── API 서버 (Laravel) +react/ ── 프론트엔드 (Next.js)
+
+
+ +
+

+ + 3개 저장소 관리 팁 +

+
+
+

Git Graph에서 3개 저장소 전환하기

+
+
+ 1 + VS Code에서 File > Open Folder로 원하는 저장소 폴더를 연다 (mng/, api/, react/) +
+
+ 2 + Git Graph 아이콘을 클릭하면 해당 저장소의 브랜치 그래프가 표시됨 +
+
+ 3 + 또는 Workspace 기능으로 3개 폴더를 한 번에 열어 전환 가능 +
+
+
+ +
+

Step-by-Step: feature 브랜치 작업 흐름

+
# 1. develop 브랜치에서 최신 코드 받기 +git checkout develop +git pull origin develop + +# 2. feature 브랜치 생성 +git checkout -b feature/calendar + +# 3. 작업 후 커밋 (SAM 커밋 메시지 규칙 준수) +git add app/Http/Controllers/CalendarController.php +git commit -m "feat: [calendar] 달력 기능 추가" + +# 4. develop에 Push (자동 배포됨) +git checkout develop +git merge feature/calendar +git push origin develop + +# 5. feature 브랜치 정리 +git branch -d feature/calendar
+
+
+ +
+

+ 📖 관련 문서: + SAM 프로젝트의 Git 정책, 커밋 메시지 규칙, 브랜치 전략은 + Git 정책 페이지에서 자세히 확인할 수 있다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 8. 터미널 기반 도구 --}} + {{-- ============================================================ --}} +
+
+

+ 8 + 터미널 기반 도구 +

+ +
+

+ + lazygit + ?터미널에서 동작하는 Git GUI. SSH 접속 환경에서도 사용할 수 있어 서버 작업 시 유용하다. +

+ +
+

비유: 터미널 속 미니 Git 데스크톱

+

+ lazygit는 터미널 안에서 동작하는 미니 Git 데스크톱 앱이다. + 키보드만으로 Stage, Commit, Push, Branch 전환, Rebase까지 모든 Git 작업을 할 수 있다. +

+
+ +
+
+

설치 방법

+
# Ubuntu/WSL +sudo add-apt-repository ppa:lazygit-team/release +sudo apt update +sudo apt install lazygit + +# macOS +brew install lazygit + +# Windows (scoop) +scoop install lazygit
+
+ +
+

실행 및 기본 사용

+
# Git 저장소에서 실행 +$ lazygit + +# 화면 구성 (5개 패널) +┌─ 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 │ │ +└───────────────┴──────────────────────────────────┘
+
+ +
+

핵심 단축키

+
+ + + + + + + + + + + + + + + + + + + + +
키기능설명
SpaceStage/Unstage파일 또는 줄 단위 스테이징
cCommit스테이지된 파일 커밋
PPush원격 저장소에 Push
pPull원격 저장소에서 Pull
nNew Branch새 브랜치 생성
rRebase선택한 브랜치에 Rebase
MMerge선택한 브랜치 Merge
eEdit에디터로 파일 열기
qQuitlazygit 종료
?Help전체 단축키 보기
+
+
+ +
+

+ SSH 환경에서의 장점: + 개발 서버에 SSH로 접속하면 GUI 도구를 사용할 수 없다. + lazygit를 설치해두면 서버에서도 시각적으로 Git을 관리할 수 있다. + ssh pro@114.203.209.83 접속 후 + cd /home/webservice/mng && lazygit로 바로 사용 가능. +

+
+
+
+
+
+ +
+
+
+ + + +@include('components.academy-glossary', ['domain' => 'git-tools']) +@endsection diff --git a/resources/views/components/academy-glossary.blade.php b/resources/views/components/academy-glossary.blade.php index dbeea5d7..25225177 100644 --- a/resources/views/components/academy-glossary.blade.php +++ b/resources/views/components/academy-glossary.blade.php @@ -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 diff --git a/routes/web.php b/routes/web.php index 91faaa7a..bb290de6 100644 --- a/routes/web.php +++ b/routes/web.php @@ -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');