[14주 5일차] 비주얼 스튜디오 코드로 다루는 깃과 깃허브

Chapter07. 비주얼 스튜디오 코드로 다루는 깃과 깃허브

 

 

 

 

 

07-1 저장소 만들기

VS Code에서는 어떤 작업을 하든 작업 폴더를 먼저 추가해야한다.

새 폴더 만들고 작업 폴더 추가하기

 

project라는 폴더를 만든 후 폴더를 열어 작업 폴더로 추가해주었다.

그럼 탐색기에 작업 폴더 project가 나타난다.

저장소 초기화하기

project 폴더에서 버전 관리를 하고자한다.

그러므로 초기화를 해주어야한다. 이전에서는 git init 명령을 사용했지만 VS Code는 다른 방법을 사용한다.

왼쪽 사이드에서 소스제어 아이콘을 클릭한다.

그럼 리포지토리 초기화라는 문구를 볼 수 있는데 그것을 클릭하면 창이 바뀌며 초기화가 완료된다.

 

깃 설정하기

 

VS Code에서 깃을 처음 사용할 경우 사용자의 이름과 이메일 주소를 등록해야한다.

터미널 창을 켜기 위해 터미널을 클릭한 후 새 터미널을 선택하거나 ctrl+shitf+~를 클릭하여 터미널 창은 켠다.

터미널 창을 켠 후 이름와 이메일 등록은 다음과 같은 명령을 사용한다.

git config --global user.name "사용자 이름"
git config --global user.email "이메일 주소"

이때 --global 과 같은 옵션을 사용하면 계속 같은 사용자와 이메일을 유지하며 사용한다는 뜻이다.

그러므로 저장소마다 다른 계정을 사용하려면 --global 옵션은 빼고 입력해야한다.

 

 

 

이후 project를 확인하면 .git 폴더가 확인되어야하는데 안보인데 

그 이유는 저장소 git 폴더가 숨김처리 되어 있기 때문이다.

이것을 해결하기 위해서는 파일 -> 기본설정 -> 설정 을 차례대로 클릭한 후 검색창에 exclude라고 입력한다.

그럼 Files:Exclude 항못을 찾아 **/.git 위에 마우스 포인터를 올린 후 x표기를 클릭하여 .git 폴더가 탐색 창에 보이도록 만든다.

 

 

아래와 같이 .git 폴더가 보이는 것을 알 수 있다.

 

 

 

 

---

07-2 버전 만들기

 

 

파일 만들기

탐색키 창에서 project 폴더 이름 위로 마우스를 올린후 새파일을 클릭하면 새 파일이 만들어지면서 파일 이름을 입력할 수 있다.

이름을 'work1.txt'로 입력하고 엔터키를 누른다.

파일을 생성한 후 1를 입력하고 저장한다.

 

 

 

소스 제어 창 살펴보기

 

앞에서 새로운 파일을 만들었기 때문에 소스 제어 아이콘에는 1이라고 표시가 된다.

아래의 그림과 같이 소스 제어 아이콘에 숫자가 표시되어 있다면 저장소에 변경 사항이 존재한다는 뜻이다.

 

 

 

스테이징하기

변경 사항에 있는 파일을 스테이징 하려면 파일 이름 위로 마우스를 올렸을 때 나타나는 아이콘 중 +를 클릭한다.

그럼 아래 그림과 같이 A라고 표시가 된다.

이것은 인덱스가 추가되었다는(added)라는 의미이다.

 

 

 

커밋하기

 

스테이징을 했다면 커밋을 할 수 있다.

커밋은 소스 제어 창 맨 뒤에 있는 메시지 창에 커밋 메시지를 입력한 후 메시지 창 윙에 있는 체크 표시를 클릭하면 커밋이 완료된다.

 

 

 

한꺼번에 여러 파일 스테이징하고 커밋하기

파일 2개를 한번에 스테이징을하고 커밋을 할 수 있다.

이전과 같이  +를 클릭하여 스테이제 각각 올려준다.

그 후 커밋 메시지를 입력하고 체크를 클릭하여 커밋하면 파일이 여러 개가 한번에 커밋된다.

(스테이징은 각 각 해준다.)

 

 

 

 

스테이징과 커밋 한번에 처리하기

스테이징과 커밋을 한번에 처리할 수 있는 방법도 존재한다.

하지만 이럴 경우에는 한번이라도 커밋한 파일이어야만 한다.

 

 

변경사항이 있는 파일이 있다는 것을 보고 클릭하여 소스 제어 창으로 이동한다.

그럼 work1.txt파일에 M표시가 있는 것을 볼 수 있는데

이것은 M(modified) 수정되었다는 의미로 스테이징이 되기 전의 상태이다.

한번에 처리하기 위해 커밋 메시지 창에 메시지를 입력한 후 체크를 클릭한다.

 

 

클릭하면 아래와 같은 창이 나타난다.

그럼 예를 클릭하면 스테이징과 커밋을 동시에 처리할 수 있다.

 

 

 

 

변경 내용 살펴보기

 

파일을 변경한 후 커밋하기 전에 어떤 부분이 어떻게 수정되었는지 살펴 볼 수 있다.

 

work2.txt 파일을 편집 창에 열고 입력된 2 다음에 4를 입력한다.

그리고 파일을 저장한 후에 소스 제어 창으로 이동한다.

 

변경 내용을 확인하려면 변경 사항에 있는 파일 이름을 클릭한다.

그럼 아래와 같이 왼쪽에는 기존 파일 내용이 나타나고 오른쪽에는 수정한 파일 내용이 보인다.

 

 

 

 

 

변경 내용 취소하기

 

변경 내용을 취소하고하 할 경우에는 소스 제어 창에서 work2.txt 파일 오른 쪽에 위치하는 아이콘 중 두번째에 위치하는 돌아간다는 표기 아이콘을 클릭한다.

 

 

클릭하면 아래와 같이 변경 내용을 취소하겠냐는 창이 나타난다.

그럼 변경 내용 취소를 클릭한다.

 

 

클릭 후 work2.txt 파일을 조회하면 아래와 같이 변경 전의 내용으로 돌아간 것을 볼 수 있다.

 

 

 

터미널 창에서 깃 로그 살펴보기

터미널에서 새 터미널을 선택한 후 터미널 창을 열어서 git log라고 입력하면 지금까지 만든 커밋들을 볼 수 있다.

이때 HEAD -> main 라고 된 부분이 가장 최신의 커밋이다.

 

 

 

 

 

 

 

---

07-3 깃허브에 연결하기

 

깃허브에 원격 저장소 만들기

 

원격 저장소를 만들기 위해 깃허브에 새로운 저장소를 만들어주었다.

 

저장소를 만든 후 접속할 수 있는 저장소 주소가 나타나는데 그 중 HTTPS 접속 주소를 복사한다.

 

 

원격 저장소 연결하기

 

원격 저장소를 연결하기 위해 소스제어 창을 연다 그 후 ... 되어 있는 아이콘을 클릭해 원격을 클릭하고 원격 추가를 선택한다.

 

그럼 화면 위쪽에 아래와 같은 창이 뜨는데 그 창에 복사한 HTTPS 주소를 입력하고 엔터를 누른다.

그리고 그 다음에 test-3이라는 원격 이름을 제공하면 여러번 사용할 떄 이름으로 저장소를 구별해 재사용에 용이해진다.

 

 

원격 저장소로 푸시하기

 

소스 제어 창에서 ...을 클릭하고 풀,푸시를 클릭하면 아래와 같이 다음으로 푸시를 볼 수 있는데 그것을 클릭한다.

 

 

원격 저장소에 연결이 되었기 떄문에 지역 저장소(작업폴더)에 있던 파일 들이 깃허브로 푸시된다.

웹 브라우저에서 깃허브 저장소로 접속하면 아래와 같이 방금 푸시한 파일들이 올라와 있는 것을 볼 수 있다.

 

 

 

 

 

 

---

07-4 브랜치 관리하기

 

새로운 브랜치 만들기

새로운 브랜치를 만들고 그 브랜치에 work4.txt 파일을 만들어보려고 한다.

소스 제어 창에서 ...를 클릭하고 분기 -> 분기 만들기를 선택한 후에 아래와 같은 창이 뜨는데 그곳에 새로운 브랜치 이름을 입력한다. 브랜치 이름은 newbranch로 입력했다.

 

 

newbranch 브랜치가 만들어지면 그 브랜치로 정환되는데 브랜치가 저노한된 것은 VS Code의 상태 표시줄을 보면 newbranch료 표기되어 바뀌어 있다는 것을 알 수 있다.

 

 

새 브랜치에서 커밋하기

 

브랜치 사이에 전환하기

 

newbranch에서 work4.txt 파일을 만들었다.

다시 main 브랜치로 전환을 하면 아래와 같이 화면이 변한다.

work4.txt파일을 볼 수 없게되는데 이것은 newbranch에서 만든 파일이기 때문이다.

 

 

 

 

새 브랜치를 원격 저장소로 푸시하기

 

소스 제어 창에서 ...을 클릭하고 이전과 같이 풀,푸시 -> 다음으로 푸시를 선택한 후 푸시할 원격 저장소를 선택한다. 이전에 연결한 test-3.git을 선택하면 따로 브랜치를 선택하거나 입력하지 않고 간단하게 푸시할 수 있다.

 

 

깃허브에 접속하여 newbranch로 선택하면 아래와 같은 화면이 보이는데 compare&pull request를 클릭하면 연결이 완료된다.

그리고 아래 파일들을 보면 work4.txt가 들어가 제대로 내용이 푸시된 것 또한 알 수 있다.

 

 

 

브랜치 병합하기

 

앞에서 만들었던 newbranch를 main 브랜치로 병합할 수 있다.

브랜치를 병합라겨면 기본 브랜치인 main 브랜치로 전환해야만 한다.

main 브랜치로 전환한 후 ...를 클릭하고 분기 -> 분기 병합을 선택한다.

 

병합할 브랜치를 선택하는데 이때 newbranch를 선택한다.

 

그럼 newbranch가 main 브랜치로 병합되면서 newbranch에서 만들었던 work4.txt를 이제 main 브랜치에서도 볼 수 있는 것을 아래 화면과 같이 볼 수 있다.