[지옥에서 온 관리자 깃&깃허브 입문] 비주얼 스튜디오 코드(VSCode)에서 깃 활용하기

2022.01.22 - [독서/IT・컴퓨터] - [지옥에서 온 관리자 깃&깃허브 입문] 6장. 깃허브에서 개발자와 소통하기

[지옥에서 온 관리자 깃&깃허브 입문] 6장. 깃허브에서 개발자와 소통하기

 

 

 

실제로 개발을 할 때는 소스 편집기로 소스를 작성하게 됩니다.

소스 편집기로 비주얼 스튜디오 코드(Visual Studio Code)를 사용하면 더 편하게 파일을 관리할 수 있습니다.

비주얼 스튜디오 코드에서 깃을 연동하는 방법에 대해 알아봅니다.

 

 

활용1. 원격 저장소에 연결된 폴더 열기 및 닫기

비주얼 스튜디오에서 깃이나 깃허브를 사용하기 위한 메뉴는 왼쪽 사이드바의 세번째에 있는 소스 제어(source control)입니다.

변경내용 항목이 보인다면 깃을 사용할 수 있는 상태라는 의미입니다.

그리고 현재 폴더가 원격 저장소에 연결되어 있다면 비주얼 스튜디오 코드 상태 표시줄 왼쪽에 master 가 나타나 있을 것입니다.

비주얼 스튜디오 코드에서 더이상 작업 폴더를 사용하지 않는다면 파일 → 폴더 닫기를 선택해 작업 폴더를 닫습니다.

 

 

 

활용2. 새 폴더를 만들고 깃 환경 구성하기

새 폴더를 작업 폴더로 추가했을 때 비주얼 스튜디오코드에서 바로 깃을 초기화하고 원격 저장소에 연결하는 방법을 알아봅시다.

테스트를 위해 파일 탐색기에서 소스를 저장할 새 폴더를 만듭니다.

그리고 비주얼스튜디오코드를 실행한 후 파일 → 폴더 열기를 선택하고 앞에서 만들었던 폴더를 찾아서 폴더 선택합니다.

그럼 초기 아무것도 없는 상태가 되며 소스 제어 아이콘을 클릭해보면 깃을 사용할 준비가 안되었다고 나옵니다.

소스 제어창의 Initialize Repository를 누릅니다.

 

깃이 초기화 되면서 현재 폴더에 저장소가 만들어집니다. 이제부터 깃을 사용할수 있게 되었습니다.😉

 

 

 

활용3. 스테이지에 올리고 커밋하기

비주얼 스튜디오 코드에서 작성하거나 수정한 문서를 바로 스테이징하고 커밋하는 방법을 알아봅시다.

새 문서를 README.md 라고 만듭니다. 반드시 확장자까지 입력해야 합니다.

그러면 파일 오른쪽에 'U'가 나타나고, 파일 이름 위로 마우스 커서를 올려놓으면 '추적되지 않음'이라는 내용이 나타납니다. (=untracked)

 

이제 만든 파일을 스테이지에 올려봅니다.

지역 저장소에 변경사항이 생기면 변경된 파일의 개수만큼 소스 제어 아이콘에 숫자가 나타납니다.

스테이징하기 위해 파일 이름을 마우스 오른쪽 클릭 후 변경 내용 스테이징을 선택하거나, + 아이콘을 누릅니다.

스테이징이 완료되면 바로 위에 스테이징된 변경 내용 항목이 생기고 파일 이름 오른쪽에 'A'라고 나타납니다.

파일 위로 커서를 올려두면, 인덱스 추가됨이라는 문구가 표시됩니다. 마이너스 - 아이콘을 누르면 간단하게 스테이징을 취소할 수도 있습니다.

 

스테이지에 있는 파일을 커밋하려면 소스 제어 창 위의 메시지 창에 커밋 메시지를 입력 한 후 메시지 창 위에 있는 체크 표시(commit)을 누르면 커밋됩니다.

 

커밋이 끝나면 변경 내용에 있던 파일이 사라집니다.

 

스테이징이나 커밋을 취소하려면 간단하게 ... 버튼을 클릭하면 메뉴들이 나타납니다.

 

 

 

활용4. 원격 저장소 만들고 연결하기

이제 작업한 소스를 깃허브에 올려야 합니다. 깃허브에 새로운 저장소를 만든 후 다음 과정을 따라해봅시다.

저는 study_algorithms으로 만들었습니다.

이제 비주얼 스튜디오 코드의 터미널에 진입하고, 보기 → 터미널을 선택하거나, 터미널 → 새 터미널을 선택하면 하단에 터미널 창이 열립니다.

기본 경로는 작업폴더 경로로 설정되어 있습니다.

git remote add origin 원격저장소 주소 를 치고 엔터를 누릅니다.

앞으로 암호를 입력하고 싶지 않기 때문에 SSH 로 연동하겠습니다.

하단에 아래와 같은 구름모양과 master가 생기면 연결이 되었다는 뜻입니다.

 

 

 

 

활용5. 깃허브로 푸시하기

소스 제어창의 ... 아이콘 클릭 → pull, push → Push to...를 선택합니다.

커밋을 푸시할 원격 저장소를 선택합니다. 기본적으로 앞으로 연결한 원격 저장소가 나타나있습니다.

 

그러면 바로 푸시가 진행되며 웹 브라우저에서 확인해보면 깃허브 저장소에 파일이 잘 올라갔습니다.

 

 

 

활용6. 변경 내용 확인하기

비주얼 스튜디오 코드에서 수정한 내역을 손쉽게 확인할 수 있습니다.

커밋을 하기 전에 파일을 비교할 때 편리합니다.

파일을 수정하고 나면 M 이라는 표시가 생기며, 소스 제어로 들어가면 아래와 같이 왼쪽창에는 마지막 커밋한 내용이, 오른쪽 창에는 그 뒤로 수정한 내용이 나옵니다.

그리고 오른쪽 창의 탭 부분에 파일명 옆에 Working Tree라고 나와있습니다. 아직 스테이징이나 커밋하기 전 작업 폴더에 있는 파일 이라는 의미입니다.

 

 

 

활용7. 커밋하면서 자동 스테이징하기

비주얼 스튜디오코드에서 스테이징과 커밋을 한꺼번에 처리할 수 있습니다.

변경 파일을 스테이징한 후에 커밋할 수도 있지만, 한 번 커밋했던 파일이라면 스테이징과 커밋을 동시에 할 수 있습니다.

소스 제어 창에 커밋 메시지를 입력한 후 체크 혹은 커맨드 + enter를 입력합니다.

 

자동 스테이징할 것인지 묻는 창이 나타납니다. yes를 누릅니다.

 

이제 깃허브로 푸시를 하고 브라우저에서 확인해봅시다.

 

방금 푸시한 내용이 반영되었습니다.

 

 

 

활용8. 깃허브에서 풀하기

깃허브에서 다른 사람들과 협업을 한다면, 자신의 작업을 진행하기 전에 반드시 풀(Pull)을 먼저 해야합니다. 비주얼 스튜디오 코드에서 원격 저장소를 풀하는 방법도 간단합니다.

테스트를 위해 원격 저장소의 파일을 간단하게 수정합시다.

그리고 비주얼 스튜디오에서 ... → Pull,Push →Pull from..을 선택하고 원격 저장소를 선택합니다.

 

즉시 반영이 되어 나타납니다.

 

 

 

 

 

 

여기까지 지옥에서 온 관리자 깃&깃허브 입문 책의 정리를 마칩니다!👏👏

좋은 책 만들어주신 저자분들께 감사드립니다.🥺

깃에 대해 처음 접하게 되더라도 이 책대로 따라가다보면 저절로 알수 있도록 잘 쓰여진 책입니다.

이제 깃을 가지고 코드 관리만 잘하면 되겠습니다.😄😄