[GitHub 깃 & 깃허브 입문] VS code로 다루기

[깃 & 깃허브 입문] 깃허브로 협업하기

[깃 & 깃 허브 입문] 깃허브로 협업하기

---

저장소 만들기

VS code 작업용으로 새 파일을 만들고 작업 환경을 구축해보는 것으로 시작합니다.

 

작업 폴더 생성

비쥬얼 스튜디오에서 사용할 새 폴더를 컴퓨터에 원하는 위치에 하나 생성합니다.

https://vscode.dev/

Visual Studio Code for the Web

https://code.visualstudio.com/download

작업을 위해 VS code를 설치하거나 웹용 VS code를 실행합니다.

실행하면 위와 같은 화면이 나타납니다. 폴더 열기 버튼을 눌러서 생성한 폴더를 VS code에서 열어줍니다.

 

저장소 초기화

새로 생성한 폴더에서는 VS code에게 버전 관리용이라는 것을 알려줘야 합니다. git bash에서 'git init'을 입력했던 것처럼, VS code에서는 단순하게 클릭 몇 번으로 가능합니다.

왼쪽 메뉴에서 브랜치 구조와 비슷한 아이콘을 클릭하면 저장소를 초기화할 수 있습니다. 초기화를 진행하면 아래와 같은 화면이 나타나 추가적인 작업을 진행할 수 있게 됩니다.

VS code 왼쪽 아래에 main의 의미는 현재 main 브랜치에 위치하고 있다는 뜻입니다.

 

깃 설정

Git bah 에서 처럼 처음 사용할 때는 사용자의 이메일과 이름을 등록해야합니다. 상단의 [터미널] - [새 터미널]을 선택하거나 Ctrl + Shift + ` 을 눌러줍니다.

터미널 창이 나왔다면 사용자 이름과 이메일 주소를 입력합니다. 저장소마다 다르게 등록하고 싶으면 --global 옵션을 제거하고 실행합니다.

git config --global user.name "user"
git config --global user.email "user@email.com"

 

 

버전 만들기

파일 생성

다시 탐색기 메뉴로 돌아와서, 생성한 폴더 아래에 텍스트 파일을 하나 만들어 줍니다. 내용과 제목은 원하는 대로 작성후 Ctrl + S를 눌러서 저장을 합니다. 이러면 소스 제어 창에 저장소에서 변경 사항이 생겼다는 것을 의미하는 알림이 표시 됩니다.

 

소스 제어

다시 소스제어 창으로 넘어가서 생성한 텍스트 파일을 누르면 위와 같은 화면이 나옵니다. 생성한 파일의 변경 사항을 보여주고 있습니다.

생성한 파일 옆에 나오는 버튼들의 기능은 왼쪽부터 이렇습니다.

1. 파일 열기: 편집 창에 현재 파일을 열 수 있습니다.
2. 변경 내용 취소: 파일 변경 사항을 취소할 수 있습니다.
3. 변경 내용 스테이징: 현재 파일을 스테이지에 올립니다.
4. 파일의 상태: U는 untracked라는 의미로, 한 번도 커밋되지 않은 파일을 뜻합니다. 커밋을 하면 M으로 표시됩니다.

 

스테이징과 커밋

스테이징 하는 버튼을 눌러서 스테이징을 합니다. 이후 U가 A로 바뀌면서 인덱스가 추가됐다(Added)는 상태로 변하게 됩니다. 

커밋 메시지 입력 창에 커밋 메시지를 입력하고 아래의 커밋 버튼 또는 위의 체크 버튼을 누릅니다.

 

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

다시 탐색기 메뉴로 돌아가서 2개의 텍스트 파일을 새로 생성합니다. 그 다음에 소스 제어로 넘어와서 스테이징과 커밋을 해줍니다. 이때 각각 개별의 파일을 스테이징 하지 않고 한꺼번에 여러 파일을 스테이징과 커밋을 할 수 있습니다.

이후 커밋한 파일들을 수정해봅니다. 그러면 이번에는 수정되었다의 modified를 뜻하는 M으로 표시되어 있습니다.

이후 스체이징 과정 없이 커밋 메시지를 입력하고 커밋을 시도하면 커밋을 바로 하겠냐고 물어보는 창이 팝업됩니다. Yes를 누르면 진행이 됩니다. 

Always는 앞으로 물어보지 않고 계속 스테이징과 커밋을 하겠다는 설정을 한다는 뜻입니다.

 

VS code에서의 깃 로그

VS code에서도 Git bash에서 했던 것과 마찬가지로 깃 로그를 확인할 수 있습니다.

새 터미널 창을 불러와서 git log 명령어를 입력하면 아래와 같이 깃 로그를 살펴볼 수 있습니다.

 

 

 

깃 허브에 연결

원격 저장소 연결

https://github.com/

GitHub: Let’s build from here

일단 깃 허브로 가서 VS code에 사용할 원격 저장소를 만듭니다. 그런 다음 HTTPS 용 저장소 주소를 복사를 합니다.

그런 다음 VS code의 원격 제어 창에서 4번째에 위치한 점 3개짜리 버튼을 누르고 [원격] - [원격 추가]를 누릅니다.

그러면 상단의 위와 같은 입력창이 나타나게 됩니다. 아까 복사해둔 HTTPS 주소를 붙여넣기 하고 원격 저장소의 이름까지 지정을 합니다. 이 이름으로 저장소를 추가해 두어서 나중에는 주소 복사 없이 간단하게 사용할 수 있게 됩니다.

저장소를 추가하면 아래에는 정기적으로 fetch할 거라고 묻는 창이 뜹니다. 중요한 프로젝트라면 설정을 해두는 것이 좋습니다.

 

푸시

아까 원격 저장소를 연결했던 것처럼 똑같은 버튼을 눌러서 이번에는 push 항목으로 들어가서 다음으로 푸시를 하면 아까 추가했던 저장소에 푸시를 할 수 있게 됩니다.

푸시 후 지역 저장소에 있던 파일들이 원격 저장소인 깃허브의 저장소에 들어가 있는 것을 확인할 수 있습니다.

 

브랜치 관리

새로운 브랜치 생성

GIt bash에서 작업을 하던 것처럼, 파일들의 버전을 관리하다 보면 새롭게 브랜치를 생성하고 관리하는 기능도 VS code에 존재합니다. 특히나 앞으로 협업을 할 때 많이 도움이 되는 기능입니다. 새로운 브랜치를 생성해서 새로운 파일을 만들어 봅시다.

이번에는 [분기] - [분기 만들기]로 넘어가서 새로운 브랜치를 생성합니다. 이러면 아래의 main이 새로 생성한 브랜치 명으로 바뀌면서 브랜치를 이동한 것을 알 수 있습니다.

 

브랜치 사이에 전환

다시 탐색기 창으로 넘어가서, 새로운 텍스트 파일을 생성합니다. 이후 원격 제어 창으로 넘어가서 스테이징과 커밋을 처리합니다.

이후 새로 생성한 파일이 main 브랜치로 전환하였을 때 어떻게 달라지는 지 확인 해봅시다.

좌 하단에 새로 생성한 브랜치 명이 나타나는 곳을 클릭하고 main 브랜치로 넘어가 봅니다.

이렇게 되면 방금까지는 잘 보였던 새 파일이 보이지 않게 됩니다. 열어 두었던 파일 창에도 파일명에 취소선이 생겼습니다.

 

새 브랜치를 원격 저장소로

브랜치를 만든 후 원격 저장소로 푸시하는 것도 잊지 맙시다. 

다시 새로 만든 브랜치로 이동 후 아까 했던 것처럼 소스 제어 창에서 푸시를 해봅니다. 복잡한 과정없이 원격 저장소를 선택하면 바로 푸시할 수 있습니다.

이후 원격 저장소에도 새롭게 브랜치가 추가된 것을 확인할 수 있습니다.

 

브랜치 병합

새로 생성한 브랜치를 main 브랜치에 병합하는 방법을 알아 봅시다. 브랜치를 병합하려면 병합 받는 main 브랜치로 이동한 상태에서 병합을 진행해야합니다. 

[분기] - [분기 병합]을 눌러서 병합하고자 하는 브랜치를 선택합니다. 

이러면 이전 브랜치에서 생성했던 파일을 main 브랜치에서도 확인할 수 있게 됩니다.

 

 

 

[GitHub 깃 & 깃허브 입문] 깃허브를 포트폴리오로

[깃 & 깃 허브 입문] 깃허브를 포트폴리오로