목차(클릭)
보다 쉽게, 보다 편하게
1. 개념
VS Code "소스 제어" (Git 기본 기능)
소스 제어란?
VS Code에 내장된 Git 기본 조작 도구
→ 코드 수정 내역을 관리하고 GitHub와 연동하여 버전 관리(Version Control) 가능
GitLens 기본 개념
GitLens는 Git을 위한 최고의 확장프로그램항목 | 설명 |
GitLens란? | VS Code 확장 프로그램, Git 히스토리 시각화 도구 |
어떤 기능? | 커밋 히스토리, 브랜치 비교, 변경 내용 라인별 주석, blame 보기 |
왜 사용하나? | VS Code 안에서 Git 히스토리를 쉽게 확인하고, 누가 어떤 코드를 바꿨는지 바로 볼 수 있음 |
1-1. 차이점
항목 | 소스 제어 (Source Control) | GitLens |
기본 기능 | Git 커밋, 푸시, 풀, 브랜치 생성 및 전환 | 커밋 히스토리, blame(라인별 수정자), 그래프 시각화 |
설치 여부 | VS Code에 기본 내장 | 별도 설치 필요 (GitLens 확장 프로그램) |
커밋/푸시/풀 | 가능 | 직접 커밋/푸시는 안 됨 (소스 제어와 함께 사용) |
라인별 수정자(blame) | 지원 안 함 | 코드 라인 옆에 수정자, 수정 시간 표시 |
커밋 히스토리 확인 | 파일 히스토리 직접 확인 불가 | 파일별/폴더별 커밋 히스토리 상세 확인 가능 |
커밋 그래프(visualize) | 지원 안 함 | 브랜치 흐름, 머지 그래프 시각화 제공 |
브랜치 비교 | 기본 비교 기능만 제공 | 브랜치 간 변경사항 상세 비교 가능 |
변경 파일 관리 | 변경된 파일 감지, 스테이지, 커밋, 푸시 가능 | 변경 파일 스테이지/커밋 기능 없음 |
1-2. vsc소스제어
클라우드 드라이브는 뭔가 에러가 발생하니 로컬에서 진행
•
vsc는 터미널 기능뿐만 아니라 깃과 연동되어 소스를 관리하는 기능을 가지고 있음
•
왼쪽 사이드 아이콘을 클릭한 후, [Initialize repository]=리포지토리 초기화를 클릭
•
커밋 클릭
•
이제 게시를 클릭할 차례
•
깃허브로 로그인
•
리포짓토리를 선택한 후 진행
•
로컬 프로젝트를 GitHub에 처음으로 업로드(Publish)할 때 나오는 옵션
•
여기서 선택은 공개할지( public) / 비공개할지( private)결정•
GitHub Pages 등으로 배포하기 위해 public 선택
public 선택•
깃허브에 리포지토리를 만들지 않았으므로 오류 발생
•
깃허브로 이동해서 새로운 리포지토리가 생성되었는지 확인 후 다시 로그인 진행
•
푸시(Push)가 완료된 상태이면 아래 그림처럼 보라색 구름 아이콘
[그림의 의미]
•
first: 현재 가장 최근 커밋 메시지 (first)
•
main: 현재 브랜치 (기본 브랜치)
•
보라색 구름() 아이콘이 채워져 있지 않고 비어 있음
) 아이콘이 채워져 있지 않고 비어 있음→ 현재 로컬과 원격(GitHub) 상태가 동일하다는 뜻!
•
실제 깃허브 리포지토리가 가서 파일이 업로드 되었는지 확인
참고: 구름 아이콘 상태별 의미구름 아이콘 | 의미 |
| (비어 있음) | Push 완료됨 (로컬과 GitHub가 동일) |
| (업 화살표 + 구름) | 푸시 안 됨 → 변경사항 있음 (Push 필요) |
| (다운 화살표 + 구름) | 원격(GitHub)에 새로운 커밋이 있음 → Pull 필요 |
1-3. 파일을 변경해보기자동 푸쉬?
•
아래 그림처럼 readme.md파일의 일부를 수정하면 소스제어 부분에 숫자가 표시됨
•
커밋메시지를 작성 후 푸쉬 진행, 아래 그림처럼 변경내용 동기화 여부 확인
•
물론 하나의 파일을 스테이징 한 뒤, push 하는 방법도 있음
2. GitLens와 GitLens Inspector의 차이
항목 | GitLens | GitLens Inspector |
기본 역할 | Git 히스토리 보기, blame, 커밋 그래프 등 시각화 도구 | 특정 커밋의 상세 정보(파일 변경, diff, 변경 내역)를 분석해서 보여주는 도구 |
어디서 쓰나? | VS Code 확장 프로그램 (패널 메뉴, 사이드바) | GitLens 확장 안에 포함된 기능 (커밋 클릭 시 Inspector 창이 열림) |
주요 기능 | - 커밋 히스토리 보기- blame 보기- 그래프 시각화- 브랜치 비교 | - 선택한 커밋의 변경 파일 상세 보기- diff 비교- 커밋 메타데이터 확인 (작성자, 날짜 등) |
언제 사용? | 히스토리 흐름이나 브랜치 구조를 보고 싶을 때 | 특정 커밋의 세부 변경사항을 파악하고 싶을 때 |
설치 여부 | GitLens 설치하면 자동 포함 | 별도 설치 X, GitLens 안에 들어있음 |
2-1.GitLens 설치 방법
•
VS Code 왼쪽 확장기능 아이콘 클릭
•
"GitLens" 검색 → 설치
•
왼쪽 Activity Bar에 GitLens 아이콘 생성
2-2.GitLens 사용
•
많은 기능들 중 코어는 바로 GitLens Inspector
•
직관적으로 수정된 이력을 보여줌
