깃/깃허브 배우기

Study/HTML5 & CSS3

깃/깃허브 배우기

posey 2022. 8. 17. 22:34

2022.08.17.

<비전공자를 위한 첫 코딩 챌린지> - DAY 12

: 13 깃/깃허브 배우기

Review

<비전공자를 위한 첫 코딩 챌린지> - DAY 12

: 버전 관리 시스템 깃(Git)과 깃을 이용해 소스 코드를 저장하고 관리하는 깃허브(GitHub)를

알아보는 날이다.

이전에 스파르타코딩클럽 강의를 들으면서 깃허브 계정은 이미 만들었는데 소스 코드를 매번

올리는 것이 참 번거로운 일이다.

나중에 실무를 할 때 과연 깃허브를 통해 소스 코드를 저장할지 그것도 사실 의문이다.

그래도 일단 깃, 깃허브가 유용하다고 하니 우선 이론을 공부해보자 !

깃은 문서나 소스 코드 같은 파일의 변경 이력을 관리해주는 시스템이다.

파일 내용을 수정해 저장해도, 필요하면 수정 전 내용을 언제든 다시 확인하거나 복원할 수 있다.

이런 시스템을 일컬어 버전 관리 시스템(version-control system)이라고 한다.

<버전관리 시스템이 왜 필요할까?>

: 예를 들어, 버전 업그레이드를 하다가 오류가 발생하여 이전 버전으로 되돌려야 하는 상황을

가정해보자.

깃을 사용한다면 코드를 이전 상태로 되돌릴 뿐만 아니라 시간 경과에 따른 변경 사항을 비교하고,

문제를 일으킨 항목을 마지막으로 수정한 사람, 시기 등을 확인할 수 있다.

깃은 저장소에 등록된 코드에 발생한 모든 수정 사항을 추적할 수 있다.

버전 관리 시스템은 더 빠르고 스마트하게 작업할 수 있도록 지원한다.

협업뿐만 아니라 혼자 개발할 때도 개발 시간을 줄이고 깃허브 등으로 배포하는 데 도움이 된다.

즉, 소스 코드와 문서를 안전하게 바꾸고 관리하는 tool이라고 할 수 있다.

음 포토샵에서 History를 이용해 이전 작업으로 돌아갈 수 있는 그런 것과 비슷한 것인가보다.

<깃 설치하기>

1. 깃 홈페이지 (www.git-scm.com)에 접속한다.

2. Download를 진행한다.

3. 설치 완료 화면이 보일 때까지 기본 설정으로 Next를 클릭한다.

4. 완료 화면이 보이면 [View Release Notes] 선택을 해제하고 Finish 버튼을 누른다.

이대로 깃을 설치했다. 지금은 큰 변화가 없지만 이제 깃허브와 VSCode를 연동시킬 수 있는

토대를 마련한 것이다.

<깃허브가 왜 필요할까?>

: 깃허브는 협업 및 버전 관리에 사용되는 소스 코드 호스팅 플랫폼이다.

쉽게 깃 인터넷 저장소라고 생각하면 된다. 물론 저장만 하는 것은 아니다.

우리는 소중한 사진들을 날리지 않고 간직하기 위해 네이버 클라우드나 Dropbox 같은 곳에 사진들을

저장하는 작업을 하곤 한다.

그런 것처럼 코드도 실컷 작업해놓고 날리면 안되니까 열심히 저장해놓아야 한다.

혼자 작업할 떄는 내 PC에 코드를 저장해도 되지만, 협업할 때 팀원들이 코드를 각자의 PC에 따로따로

관리하면 서로의 코드를 확인하기 어렵다.

이럴 때 깃허브를 공동 저장소로 사용하면 유용하다.

또한 대부분 오픈 소스는 깃허브에 있다.

이처럼 너도나도 깃허브에 소스 코드를 모아두니, 깃허브에 들어가기만 하면 참고할 만한 코드를 손쉽게

찾아볼 수 있다.

깃허브는 개발자의 커뮤니티가 활성화되어있는 곳이라고 할 수 있다.

<같은 듯 다른 깃과 깃허브의 차이>

: 아까 전까지만 해도 나는 깃과 깃허브가 같은 사이트인 줄 알았는데 아니었다.

깃허브는 깃을 SaaS 형태로 제공한다. 여기서 SaaS란 서비스 소프트웨어를 의미한다.

가장 완성된 형태의 클라우드 서비스로, 소프트웨어 형태로 서비스를 제공한다.

앞서 말한 네이버 N드라이브나 구글 드라이브도 SaaS에 해당하는 서비스이다.

깃은 코드 버전 관리 소프트웨어이다.

그리고 깃허브는 깃 소프트웨어를 기반으로 구축된 클라우드 플랫폼이다.

결국 깃을 웹에서 더 쉽게 사용할 수 있도록 만든 것이 깃허브이다.

<깃/깃허브 핵심 개념 알아보기>

1. 저장소 (repositories)

: 저장소에 폴더 및 모든 유형의 파일(HTML, CSS, 자바스크립트, 문서, 데이터, 이미지)을

저장할 수 있다.

2. 브랜치

: 깃허브 브랜치는 버전별 저장소이다. Branch는 '나뭇가지' 라는 의미인데, 여러 갈래로

버전을 분기 및 통합해 개발하는 데 사용된다.

왜 여러 버전이 생길까?

예를 들어, 처음에 한 개발자가 저장소를 만들었다고 가정해보자.

그 이후 다른 개발자들까지 가세해 각자 맡은 기능을 구현해 멋진 웹 서비스로 업그레이드하기로

했다. 그 과정에서 저장소를 각 개발자가 브랜치로 분기해 기능을 구현하고, 중간중간 각자 개발한

기능을 병합해 전체 서비스가 원활하게 돌아가도록 확인한다.

이때 처음 저장소를 메인 브랜치(main branch), 각 개발자가 분기한 소스를 서브 브랜치(sub branch)

라고 한다.

서브 브랜치를 메인 브랜치에 병합하기 전까지 서브 브랜치에 수정한 내용은 메인 브랜치에 영향을

주지 않는다.

사용자가 웹 페이지를 이용 중인데 수정 중인 화면을 보여주면 안 되기 때문이다.

만약 완성했다면 병합할 차례인데, 병합 명령을 내리면 깃허브에서 자동으로 중복 코드를 제외하고

새로운 코드를 합쳐준다.

이렇게 각 개발자가 자신의 브랜치를 만들어 코드를 작성하고 메인 브랜치로 합치는 과정을 반복하며

프로젝트를 진행한다.

기본적으로 저장소에는 main branch가 있다.

3. 클론

: 클론은 깃허브 저장소에 있는 파일들을 로컬 컴퓨터로 복사본을 만드는 작업을 말한다.

깃허브에서 생성한 저장소에 있는 파일은 배포된 파일이다.

각자 로컬에서 작업할 수 있도록 저장소에 있는 파일을 받아 코드를 작성하고 다시 저장소에 올린다.

이때 클론은 파일을 받는 과정을 말한다

다음과 같이 Git Bash에 클론 명령을 입력하면 된다.

$ git clone http://github.com/lorraine98/Test.git

클론 명령 깃허브 주소

이건 뒤에서 다시 설명하도록 하겠다.

4. 에드 → 커밋 → 푸시

: 클론은 파일을 받는 과정이다.

그러면 저장소에 파일을 올리는 과정은 뭐라고 할까?

깃허브에서는 변경 사항을 커밋(commit)이라고 한다.

Commit이 '저지르다' 라는 뜻을 가지고 있는데 우리는 깃허브 저장소에 뭔가를 저지른다 라는

뜻으로 이해하면 된다.

커밋 과정은 추가 (add) → 저질러 (commit) → 밀어 (push) 순서로 명령을 수행하는 것이다.

5. 풀(pull)

: Pull은 '당기다'라는 의미이다. 따라서 풀은 깃허브 저장소에 있는 파일을 가져오는 작업이다.

클론과 비슷한 것 같은데 이 둘은 다르다.

클론은 처음 코드를 다운로드할 때 사용하고, 풀은 그 이후에 사용한다.

클론하면 자동으로 깃허브에 있는 main 브랜치의 변경 내용을 추적한다.

그래서 풀로 변경 내용만 내려받을 수 있다.

따라서 PC와 노트북 각각에 클론을 한 이후에, 노트북으로 commit한 코드를 PC에서 불러오려면

클론이 아니라 풀을 해야 하는 것이다.

<실습 : 깃허브 사용하기>

1. 저장소 만들기

: New repository를 만드는 것인데, 프로젝트 이름과 설명을 적는 것으로 이전에 이미 해봤기 때문에

설명은 생략하도록 하겠다.

2. 클론하기

: 생성한 저장소를 내 컴퓨터에 클론해보았다.

우선, 지난번에 내가 올려놓았던 Code에서 URL을 복사한다.

그러고 나서 깃 명령행 (Git Bash)을 실행할 차례이다.

윈도우 탐색기를 실행해 저장소를 클론할 폴더로 이동 → 오른쪽 마우스 클릭 후 → Git Bash Here

를 클릭한다.

Git Bash 환경이 뜨고 'git clone '을 입력하고(clone 뒤에 space bar까지 입력) 마우스 우클릭 해 paste를

클릭하고 URL 복사한 것을 붙여넣기한다.

enter를 쳐서 실행시킨 후 복제된 파일을 확인해보자.

'3-coding-challenge' 라는 복제된 파일이 생성되었다.

파일을 열어보니 클론이 제대로 된 것 같다.

3. 파일 추가하기

: VSCode를 실행하여 클론한 저장소에 파일을 만들어준다.

클론한 저장소에 'index.html' 이라는 파일을 추가했다.

그러면 클론한 폴더에 다음과 같이 'index.html' 파일이 생성된 것을 볼 수가 있다.

지금은 파일을 하나만 생성했지만, 여러 파일을 생성해도 된다.

또한 기존에 작성한 코드를 클론한 폴더에 넣고 커밋하면 깃허브에 올릴 수 있다.

4. VSCode에 깃허브 연동하기

: 커밋을 해볼 건데 이 작업을 진행하려면 VSCode에 깃허브가 연동되어야 한다.

VSCode에서 Github를 다운로드 한다. 그러고 나서 깃허브를 연동시킨다.

왼쪽 하단에 내 계정이 보이면 성공한 것이다.

5. 커밋하기

: 이제 변경 내용을 깃허브 원격 저장소에 커밋해보자.

커밋 순서는 에드(add) → 커밋(commit) → 푸시(push) 이다.

- 에드(add) 명령을 수행한다. index.html 파일을 연다.

- index.html 파일에서 왼쪽 옵션 바에서 3번째 아이콘을 선택한 뒤,

변경 사항 옆의 + 버튼을 클릭한다.

- index.html이 '스테이징된 변경 사항' 으로 이동했다. 이제 커밋을 할 차례이다.

- 소스 제어 밑에 커밋 메시지를 작성한다.

메시지에 언더바 _는 사용하지 않는 것이 보기 좋고, 변경 내용을 간단 명료하게 담고 있어야 한다.

나는 index.html 파일을 처음으로 추가하는 것이기 때문에 'Add index.html' 로 해주겠다.

- 메시지를 작성한 뒤, 옆에 점 3개로 된 메뉴를 클릭하고 커밋 - 커밋을 선택한다.

- 다음은 점 3개로 된 메뉴를 클릭하고 푸시를 클릭한다.

- 깃허브에 접속해서 Repositories (저장소)를 클릭한다.

index.html이 보이면 성공한 것이다.

나는 성공했다 !!!!!

6. 풀하기

: 풀은 원격 저장소(깃허브)에 발생한 변경 내용을 로컬 저장소(내 PC)로 가져오는 명령이다.

예를 들어 A와 B 두 컴퓨터가 있다.

깃허브에서 A와 B가 같은 코드를 클론하고 나서, A가 수정한 코드를 커밋&푸시를 한다.

그러면 B는 A가 수정한 코드를 다시 가져올 수 있다.

이 작업을 풀이라고 한다.

아직은 혼자서 깃허브 코드를 관리하므로 풀(pull)할 일이 없다.

추후 협업하거나, 혼자이지만 여러 PC를 사용할 때 사용하게 된다.

풀은 아까 전에 점 3개로 된 메뉴를 클릭해 풀, 푸시 - 풀 항목에서 확인할 수 있다.

<핵심 요약>

1. 깃은 버전 관리 시스템이다.

2. 깃허브는 깃과 연동해 코드 버전을 관리해주고 협업을 도와주는 온라인 플랫폼이다.

3. 저장소는 파일이나 폴더 같은 리소스를 저장하는 공간이다.

4. 브랜치는 리소스를 독립적으로 관리하는 저장소를 의미한다.

5. 클론은 저장소에 있는 파일을 로컬 PC로 복제하는 것을 의미한다.

6. 깃허브에 커밋해 로컬에서 작성한 코드를 저장소로 옮길 수 있다.

add - commit - push 순서로 명령을 실행한다.

7. 깃허브에서 풀은 깃허브 저장소에 있는 파일을 가져오는 작업을 말한다.

8. Git Bash를 이용하면 명령행 환경에서 깃/깃허브를 이용할 수 있다.

*이미지 출처

: Pinterest