[깃허브.003] 내 코드 깃허브에 올리기

* 먼저 알아야할 개념

이 실습을 하기전에 위 그림의 원격 저장소, 로컬 저장소의 개념을 먼저 알아야 합니다.

-원격 저장소:: 깃허브 온라인 사이트의 파일 저장소-로컬 저장소: 내 컴퓨터 속의 오프라인 저장소

 

* 아래 실습은 "[깃허브.002] 깃허브 데스크탑용 프로그램설치/저장소 연결" 실습을 완료한 후 이어지는 실습입니다.

 

[1] 깃허브의 원격 저장소와 깃허브 데스크탑 프로그램이 연결된 상태에서 아래 그림과 같이 데스크탑 프로그램의 화면에 보면, (1) 저장소의 이름(myfirstTest)을 확인할수 있고, (2) show in Explorer를 클릭하면 내 컴퓨터에 저장된 코드의 폴더(로컬 저장소)로 이동하게 됩니다.

 

[2] Show in Explorer 버튼을 눌렀을 때 나타나는 폴더(로컬 저장소)에 아래 그림과 같이 HTML 코딩을 간단히 하고 저장했습니다. 코딩파일 이름은 index.html로 했습니다.

 

 

[3] 코딩을 하고 저장했더니, 아래 그림과 같이 깃허브 데스크탑 프로그램에서 index.html이라는 파일을 감지하고 어떤 코드변화가 있었는지 초록색 화면으로 나타내줍니다.(자동으로~)

 

[4] 아래 그림에 나타난 깃허브 데스크탑의 중요한 메뉴를 번호 순서대로 설명하겠습니다.

 

(1) : 수정한 코드파일에 부여할 제목

(2) : 수정한 코드파일에 기입할 상세한 설명

(3) : Commit 하기 (아래에서 자세히 설명)

(4) : 수정한 코드파일을 깃허브 온라인 저장소에 업로드하기(동기화)

 

 

[5] 수정한 코드파일에 대한 제목과 자세한 설명을 아래 그림과 같이 적고, Commit 버튼을 누릅니다.

* Commit(커밋)이란?
파일 및 폴더의 추가/변경 사항들에 대해 기록을 하는 것을 말합니다. Commit은 시간 순으로 저장이 되며 최근 커밋부터 거슬러 올라가면 과거 변경 이력과 내용을 확인 할 수 있습니다. Commit은 영문/숫자로 이루어진 40자리 고유 이름이 붙으며 고유 이름을 통해 각 커밋을 구분하게 됩니다.

Commit은 쉽게말해 원격 저장소에 업로드하기 전에 로컬 저장소에서 코드 파일들을 설정/준비하는 작업이라고 생각하시면 됩니다.

 

 

[6] Publiesh branch버튼(아래 그림에서 두개의 빨간 네모 버튼 중 아무거나 한 개만 클릭)

Publish branch 버튼을 누르면 push, clone이라는 단어가 순서대로 나타나면서 로컬 저장소의 코드파일을 원격 저장소로 업로드하게 됩니다. 여기에서 Publish라는 기능은 최초로 코드파일을 로컬 저장소 => 원격 저장소로 업로드 하는 과정이고, 이후에 코드 수정을 할시 Publish 라는 단어가 안나오고 대신에 Push라는 단어가 나타납니다. (*Push에 대한 자세한 설명은 아래 참조)

 

Push
웹 상의 원격 저장소로 변경된 파일을 업로드하는 것을 푸시(PUSH)라고 합니다. push를 실행하면, 원격 저장소에 내 변경 이력이 업로드되어, 원격 저장소와 로컬 저장소가 동일한 상태가 됩니다.

Clone
원격 저장소의 내용을 통째로 다운로드하는 것을 말합니다. 복제한 저장소를 다른 PC에서 로컬 저장소로 사용할 수 있게 됩니다.

 

[7] 깃허브 원격 저장소 화면을 새로고침하면 아래 그림과 같이 코딩파일(index.html)이 나타납니다. 이 index.html 파일을 클릭해서 들어가봅니다.

 

 

[8] 그러면 깃허브 원격 저장소에 저장된 나의 코드를 확인할 수 있습니다.

 

 

 

[9] 저는 추가적인 2번의 코드수정(로컬 저장소의 index.html파일의 코드 수정)과 2번의 commit-push를 해봤습니다. 그럴 경우, 코드의 히스토리(과거 코드)를 깃허브 원격저장소에서 볼수 있습니다. 아래 그림과 같이 깃허브 사이트의 원격저장소(myfirstText)에서 index.html 파일을 클릭하고, History를 누르면 제가 과거에 업로드한(push) 코드들이 나타납니다. 이 코드를 하나씩 클릭해 봅니다.

 

 

[10] 과거의 코드를 클릭하면 아래 그림과 같이 왼쪽에 빨간색 표시로 수정전의 모습을 강조해 줍니다. 그리고 오른쪽에 초록색 표시로 수정후의 모습을 강조해 줍니다.

 

 

[11] 이상으로 나의 코드파일을 깃허브 원격 저장소에 업로드하는 방법을 알아봤습니다.

 

추가적인 내용으로 아래의 누구나 쉽게 이해할 수 있는 Git입문을 참조하면 도움이 됩니다.

https://backlog.com/git-tutorial/kr/

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog