KDT 유비온 코딩 강의 12일차 [Git 실습 깃으로 코드 버전 관리]

KDT 유비온 코딩 강의 12일차 | Git 실습 깃으로 코드 버전 관리
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

지난 글은 아래 링크에서 확인 가능합니다!

https://ganzhotpot.tistory.com/28

 

 

📌 도입

오늘 드디어 Git을 실제로 활용해 보았는데요!
말로만 듣던 버전 관리를 직접 손으로 해보니 감이 오기 시작했습니다 😊

오늘 다룬 주요 내용은 세 가지였어요.

• Git의 역할과 기본 개념 소개
• 코드 저장 및 히스토리 관리의 중요성
• 잘못된 코드 복구를 위한 Git의 장점

 

 

 

💡 왜 Git이 필요한가요?

지난 강의 초반에 Git과 GitHub를 준비했었는데요.
웹 명함 만들기 과정에서는 단순한 작업이라 코드 복원이 쉬웠지만, 복잡한 과정에서는 훨씬 어렵다고 합니다.
굳이 설명 안 해도 지난 경험 덕분에 잘 알 것 같아요.. 😅

Git은 버전을 관리할 때 크게 활용되기 때문에 바이브 코딩을 할 때 수정과 복원이 수월하다고 합니다.
코드를 날려도 되돌릴 수 있다는 것, 생각보다 엄청난 안전망이에요!

 

 

🖥️ STEP 1. VSCode에서 Git 연결 확인하기

VSCode에 소스 컨트롤이라는 메뉴가 있는데, 깃을 설치하고 연결하면 바로 사용할 수 있다고 합니다.

 

 

 

VSCode에서 Ctrl + ` 키를 누르면 터미널이 열리는데요.
여기에 깃 버전을 확인할 수 있는 명령어를 입력해봤습니다.

git --version

시도해봤고 그 결과는 아래와 같이 확인되었어요.
제 깃 버전은 2.54.0인 것을 확인할 수 있었습니다!

 

 

아직까지는 잘 모르겠지만 명령어에 따라 결과만 나와도 감지덕지 하네요 😄

 

 

 

🔧 STEP 2. 저장소 초기화 및 첫 커밋하기

소스 컨트롤에서 Initialize Repository를 누르면 초기화가 되고,
현재 가지고 있는 데이터 소스들이 조회되는 것을 확인할 수 있었어요.

 

 

이 이후부터는 commit을 통해서 버전 저장이 가능하다고 합니다!
메시지 바에 소스 gang을 입력하면 아래 이미지처럼 보이는데요.

 

 

 

여기서 한 가지 오류가 발생했어요!

Git user.name / user.email 미설정 오류
커밋 작성자 정보가 없어서 발생하는 오류예요.
터미널에서 아래 명령어로 등록하면 해결됩니다!

git config --global user.name "홍길동"
git config --global user.email "your@email.com"

" " 안에 내용은 본인 설정 내용대로 입력하시면 되고,
터미널에서 입력하면 커밋이 정상 실행되는 점 참고하세요!

그렇게 하면 아래 이미지와 같이 그래프에서 이전 소스 내역을 확인할 수 있습니다.

 

 

 

✏️ STEP 3. 바이브 코딩으로 프로필 카드 업그레이드하기

이제 여기서 제 프로필을 추가로 수정해보고자 합니다.
'웹 프론트엔드 개발자' 타이틀 밑에 역량 카드를 추가하려는 거였는데요!

 

 

클로드 AI 프로젝트에서 아래 내용으로 프롬프트를 입력해서 요청했습니다.

"웹 화면에서 보이는 웹 프론트엔드 개발자 텍스트 아래에 내가 보유하고 있는 3개의 역량을 작은 카드 형식으로 보여주도록 수정하려고 해. 새로운 카드 영역이 들어가고 그 카드 영역 안에 작성되어야 하는 내 역량은 다음 내용과 같아.
1. 의사소통 역량
2. 문서작성 역량
3. 바이브 코딩 역량
이 글자 옆에는 svg 형식의 아이콘을 넣어줘."

요청을 했고 수정 혹은 추가되어야 하는 코드 내용을 받아서 웹 명함 프로필 카드를 업데이트했습니다!

 

 

여기서 알고 가면 좋은 SVG란?

SVG는 픽셀 대신 수학 공식으로 이미지를 표현하는 형식이에요.
아무리 확대해도 깨지지 않고, 파일 크기도 가볍습니다.

코드로 작성되기 때문에 CSS로 스타일을 바꾸거나 애니메이션을 적용하는 것도 가능하고,
로고, 아이콘, 인포그래픽처럼 다양한 크기로 사용되는 그래픽에 주로 쓰인다고 해요.

 

이렇게 좀 더 어려운 코딩 작업을 거치면서 공부하다 보면 이런 용어들도 익혀가는 것,

그리고 도움을 받는 것도 필요하다고 설명해 주셨습니다!

 

비개발자라고 할지라도 개발자들이 가지고 있는 지식을 알고 가야 한다는 점이 중요하다고 강조해 주셨어요.

 

 

 

🔄 STEP 4. 직함 수정 후 커밋하기

추가로 직함을 웹 프론트엔드 개발자에서 비지니스 플래너로 변경해봤어요.

 

 

기존에 웹 프론트엔드 개발자 내용을

 

 

비지니스 플래너로 변경했습니다.

 

변경 후 직함 수정으로 커밋을 하고 변경된 로그를 아래 이미지와 같이 확인할 수 있었어요.

 

 

 

⏪ STEP 5. 커밋 되돌리기 - git revert / git reset

그럼 저장하고 되돌리는 건 어떻게 할까요?

방법 1. git revert - 마지막 커밋 되돌리기
VSCode에서 Ctrl + ` 로 터미널을 열고
git revert HEAD 입력 후 엔터 하면
자동으로 커밋 메시지 편집 창이 열리며, 메시지 입력 후 저장하면
변경 사항이 적용된 새로운 커밋이 생성된다고 합니다.

 

 

방법 2. git reset - 커밋 자체를 제거하기
터미널에서 git reset --soft HEAD~1 입력하면
커밋만 제거되고, 변경사항은 그대로 남는다고 합니다.

시도해봤고 아래처럼 직함 수정 커밋이 없어진 것을 볼 수 있었어요!

 

 

이러한 작업도 필요한 경우에 따라 AI에 물어봐 가면서 깃을 관리하는 기본 기능부터

실제로 적용하는 실습이 큰 문제 없이 잘 진행되었습니다 😊

 

 

 

📖 모르는 단어 찾아보기

오늘도 새로운 단어들이 나왔어요. 찾아보고 정리해봤습니다!

[커밋 (Commit)]
현재 코드 상태를 스냅샷처럼 저장하는 행위예요. 저장 버튼을 누르는 것과 비슷하지만, 메시지와 함께 이력이 남는 게 차이예요.

[git revert]
특정 커밋을 되돌리는 명령어예요. 기존 커밋 이력은 유지하면서 되돌린 내용을 새 커밋으로 추가해요.

[git reset]
커밋 자체를 제거하는 명령어예요. --soft 옵션을 쓰면 커밋만 제거되고 변경된 코드 내용은 그대로 남아요.

[SVG (Scalable Vector Graphics)]
픽셀 대신 수학 공식으로 이미지를 표현하는 형식이에요. 아무리 확대해도 깨지지 않고 파일 크기가 가벼운 게 특징이에요.

[소스 컨트롤 (Source Control)]
VSCode에서 Git을 시각적으로 관리할 수 있는 메뉴예요. 변경된 파일 목록, 커밋, 브랜치 등을 GUI로 확인할 수 있어요.

[git config]
Git에 사용자 정보를 등록하는 명령어예요. 커밋할 때 작성자 이름과 이메일이 필요하기 때문에 처음 한 번은 꼭 설정해야 해요.



🙌 마무리

이렇게 깃 버전 저장과 관리를 잘 해야 나중에 문제가 발생했을 때 복구나 수정을 원활하게 작업할 수 있다는 걸 배웠어요.

나중에 문제 생기면 한참 롤백하거나 아예 처음부터 하는 경우도 있다고 하네요..
저한테 그런 일이 안 생기길.................ㅠ.ㅠ

다음은 깃허브 실습 과정이라서 또 열심히 따라가 보겠습니다!

앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏