비전공자의 코딩 독학 - 깃&깃허브[3] 깃허브 동기화 하기

안녕하세요.

오늘의 코딩독학 주제는 깃허브(Git hub) 동기화 하기입니다.

 

지난시간에는 깃허브에 회원가입하고

저장소도 만들어보았습니다.

 

이번시간에는 만들어둔 저장소를

작업을 진행하는 컴퓨터에 동기화하는 과정을 알아보겠습니다.

 

들어가기에 앞서

저는 기본적으로 비쥬얼 스튜디오 코드(이하 VSCode)로 코딩을 합니다.

따라서 지금부터 여러분께 설명해드리는 과정은

모두 VSCode에 맞춰져 있음을 알려드립니다.

 

 

1. 비쥬얼 스튜디오 코드에 깃허브 저장소 복제하기

(1) 우선 깃허브의 저장소(Repository)를

로컬 디렉토리에 클로닝 해줘야합니다.

VSCode의 터미널창을 띄워줍니다.

(2) 아래와 같이 깃허브에 접속하여

동기화 시킬 깃허브 저장소의 URL을 복사해줍니다.

 

(3) VSCode의 터미널 창에 아래와 같은 명령어를 입력합니다.

git clone 저장소URL

 

(4) 명령어를 정상적으로 입력하시면

아래와 같은 과정이 진행되며 

VSCode에 열려있는 로컬 디렉토리에

깃허브의 저장소가 복제됩니다.

 

2. 작업내용 깃허브 저장소에 올리기

(1) 이제 VSCode에서 복제한 저장소를 불러들입니다.

아래 사진과 같이 [폴더열기]를 클릭하여

복제한 저장소를 선택해줍니다.

 

(2) 새 파일을 만들어 내용을 입력 후 저장하면

아래 사진과 같이

좌측의 [소스제어] 탭에 변경내용이 감지됩니다.

 

(3) 이제 변경내용을 스테이징(Staging) 해보겠습니다.

여기서 스테이징이란 변경내용을 커밋하기 전 단계를 말하는데

학창시절 OMR카드로 시험을 처보신 분들이라면

플러스펜으로 정답을 체크하신 후

컴퓨터용 사인펜으로 다시 정답을 체크하신 경험이 있을겁니다.

그거랑 같다고 생각하시면 됩니다.

 

아래 사진과 같이 [+] 버튼을 눌러 변경내용을 스테이징 해줍니다.

(4) 이제 진짜 커밋(Commit) 해보겠습니다.

아래 사진과 같이 변경내용을 스테이징한 후

상단의 커밋 버튼을 누르면

우측에 커밋 메시지를 작성할 수 있는 창이 열립니다.

해당 창에 아무 메시지나 입력하신 후 엔터를 쳐줍시다.

 

(5) 여기까지 잘 따라오셨다면 VSCode의 좌측 하단에

붉은 박스로 체크해둔 것과 같이 동기화 마크가 생겨있는 것이 보일겁니다.

눌러줍시다.

(6) 아래와 같은 경고창이 뜨는데

[확인] 을 눌러줍시다.

(7) 잠시동안 동기화가 진행되며

연동된 깃허브의 저장소를 확인해보시면

아래 사진과 같이

방금 커밋한 파일이 저장되어있음을 확인하실 수 있습니다.

 

여기까지 VSCode와 깃허브의 저장소를 연동하는 방법에 대해 알아보았습니다.

진행과정에서 아래 사진과 같이 깃허브의 계정을 물어보는 창이 뜰수도 있는데

본인의 계정 정보를 입력하신 후 계속 진행해주시면 됩니다.

감사합니다.