What is Git

#5.0 What is Git

코드 파일은 단지 text 파일인데 text 파일은 쉽게 관리할 수 없습니다. 때문에 코드를 작성하고 테스트 하는 과정을 반복하는 것은 프로그래머를 지향하거나 팀으로 작업할 경우, 규모가 있는 프로젝트를 수행할 경우 좋은 방법이 아닙니다.

코드가 긴 경우(파일이 큰 경우)에는 파일의 히스토리(처음에 뭘 작성했는지 나중에 뭘 추가했는지 등 변경 내역)을 알고 있어야 하는데 이 때 git을 사용하는 것이 도움이 됩니다.

git

1. 어떤 종류의 파일이든지 원하는 파일의 변경된 내용을 확인 할 수 있습니다.
2. programming에서 주로 사용되는 도구로 text 파일의 변경내역을 확인 할 수 있도록 도와줍니다.
3. code에 주로 사용되는 도구지만 git은 파일을 binary fotmat(ex.0101010)으로 인식하기 때문에 text 파일 뿐만 아니라 excel, image, song 등 다른 파일 형식에도 변경내역을 추적하는 데 사용할 수 있습니다.
4. git은 파일을 계속 추적(Tracking)하는 것입니다.
5. git은 무료이며 git-scm.com 에 접속한 후 mac 또는 windows 용으로 다운로드 받으면 됩니다.
6. git은 version control을 위한 가장 기본적인 것이기 때문에 큰 기업들에서도 git을 사용하고 있습니다.
7. Subversion, CVS, Perforse, and ClearCase 같은 다른 version control system도 있지만 대부분 사용하지 않습니다.

git으로 파일을 계속 추적한다면 우리 컴퓨터는 문제 없이 이 파일에 우리가 했던 변경된 내역을 관리할 수 있습니다. 하지만 내 컴퓨터에서 코딩하고 git을 이용해서 파일을 관리하고 있던 중에 컴퓨터를 분실하게 되면 파일 뿐만 아니라 변경한 기록도 사라지게 됩니다.

이런 경우를 대비해서 github가 있습니다.

github

1. 변경내역을 업로드합니다.
2. inconito 모드로 github에 접속하고 github에 변경내역을 올립니다.

git과 gihub의 차이점

1. git은 계속 추적하면서 변경내역을 관리해주고 github에는 그 변경내역을 업로드합니다.
2. git은 파일의 변경내역을 계속해서 추적해주는 version control system이고 github는 파일 내역과 파일들을 올려주는 공간입니다.

git은 디렉토리에서 모든 파일을 참조할 수 있습니다.

.맥os나 윈도우에는 보이지 않는 임시파일이 있습니다.

임시파일을 github에 업로드하고 싶지 않을 경우 커밋에서 이 파일을 제외하면 됩니다.

모든 커밋에서 이 파일을 업로드 하고 싶지 않다고 기억하기는 어렵습니다.

그 경우 .gitignore이라는 새로운 파일을 만듭니다.

.gitignore

1. 무시하고 싶은 파일 이름을 기록하는 파일입니다.
2. 어떤 종류의 파일 이름이라도 작성할 수 있습니다.

#5.1 What is Github

github 접속방법

1. 운영체제에 맞게 git을 다운로드 한 다음 github사이트로 접속합니다.
2. 계정이 없다면 만들고 있다면 로그인을 합니다.
3. 로그인을 하면 Dashboard 로 접속하게 됩니다.

repository(저장소)

1. 코드를 넣을 폴더. 코드의 변경내역과 그 히스토리를 갖고 있는 폴더를 뜻합니다.
2. repository에는 public(공개된) repository과 private(비공개)가 있습니다. private(비공개) repository는 다른 사람이 아닌 본인만 볼 수 있습니다.
3. 큰 폴더 안에 다른 많은 폴더들로 구성되어 있습니다. 이것은 가장 기초적인 version control로 컴퓨터의 디렉토리를 복사한 것과 같습니다.

commit

1. 파일의 히스토리를 볼 수 있습니다. 히스토리에서는 각 commit마다 날짜가 찍혀있는 것을 볼 수 있습니다. commit은 시점(파일의 버전을 저장하고자 하는)을 뜻합니다.
2. commit의 좌측에는 “-”와 옅은 빨간색 줄이, 우측에는 “+”와 옅은 초록색 줄이 있습니다. 이는 좌측의 코드에서 우측의 코드로 변경되었다는 것을 의미합니다.

github

1. 파일의 변경사항을 탐색한 내용(git)을 볼 수 있습니다.
2. 실수를 할 경우 이전 시점의 버전으로 되돌릴 수 있습니다.

#5.2 Creating a Github Repository

repository 생성 방법

1. 컴퓨터에 폴더를 만든 다음 그 폴더를 github에 올리는 방법

2. 처음부터 github 내에 repository를 만들어 주는 방법

   1. [new Repository] 버튼 클릭 ➡️ Owner - 계정 선택

   2. repository name - repository 이름

      (공백 없이 소문자로 작성. 폴더 이름이자 github repository 이름)

   3. Description - repository에 대한 설명

   4. Public or Private - 공개(다른 사람들이 코드를 볼 수 있고 코드에 문제가 발생할 경우 나에게 링크를 보내 줄 수 있음. 오픈소스) / 비공개(다른 사람이 도움을 줄 수 없음)

   5. Initialize - 체크 해제 ➡️ [Create Repository] 클릭

   6. 하기 위해서는 github desktop(초보자들이 github와 작업하기 위한 도구)를 운영체제에 맞게 다운로드 및 실행

   github desktop

   github에 있는 폴더와 같은 폴더를 컴퓨터에도 생성합니다.

   1. 초보자들이 github와 작업하기 위한 도구. 운영체제에 맞게 다운로드
   2. [sign in to github.com] 버튼 클릭 ➡️ 계정 접근 권한 부여 ➡️ 비밀번호 입력
   3. github desktop에서 열기 클릭
   4. Configure Git - continue 클릭
   5. Make Github Desktop Better cancel 버튼 클릭
   6. [Clone a repository from the Internet] (인터넷에 있는 repository 복제하기) 클릭 - 생성한 repository 클릭 - Local Path(경로) 변경(찾기 쉬운 경로 권장. VSC에서도 사용) - Clone 클릭

   #5.3 Making Our First Commits

   README 파일 생성

   1. visual studio code 실행 > 폴더(github desktop으로 만든 폴더) 드래그해서 vsc에 놓습니다.
   2. README.md 파일 생성 (확장자는 markdown)- 서식이 있는 문서. 모든 repository가 가지고 있어야 하는 파일입니다.
   3. “#” - 마크다운에서 제목을 만들 때 사용하며 타이틀을 입력합니다.

   commit(repository의 버전을 저장하는 시점) 생성

   1. vsc 에서 파일 저장
   2. github desktop에서 파일 선택(체크)
   3. github desktop commit 타이틀 입력 필수 - 적지 않을 경우 Commit to master 클릭이 불가능하며 description은 생략 가능합니다.
   4. Commit to master 클릭 (git)
   5. publish branch 클릭 > pushing to origin (github)
   6. github에서는 기본적으로 README.md 파일을 보여줍니다.

#7.0 Branches on Git

우리가 웹사이트를 배포하기 전에 배워야 할 것이 있습니다. 바로 Git branch라는 개념을 배울 것입니다. 기록에 commit한 것들(만들고 수정한 모든 것)이 있습니다. 여기서 가장 흥미로운 것은 branch입니다. Git에서 branch는 코드들의 평행세계라고 볼 수 있습니다. git branch를 검색하면 Git에서 branch에 대한 좋은 예시를 볼 수 있습니다.

여기 가운데 있는 branch가 master branch이고 Git은 어떤 commit이라도 받을 수 있게 해줍니다. 어떤 commit이라도, 거기부터 다른 프로젝트(master branch와는 또 다른 프로젝트)를 시작할 수 있습니다. 대부분 사람들은, master branch에는 stable한(잘 작동하는 것으로 어느정도 검증이 된) code를 올립니다. 그리고 실험하고 싶거나 새로운 기능을 추가할 때, 새로운 branch를 만듭니다. 위 사진을 보면 ‘Branch 1’과 ‘Branch 2’가 똑같은 commit에서 시작합니다. 이전에 있는 commit들은 똑같고 이후로 Branch 1, Branch 2, master branch 이렇게 나뉘는데 이것들은 서로 다른 두 개의 commit을 각각 가지고 있습니다. 그럼 앞에서 보던 것이랑 달라지는 것을 확인할 수 있습니다. 이 것이 Branch입니다. Branch(가지)라고 불리는 이유는 나무같이 생겨서인데, 같은 베이스에서 시작하지만, 한 부분에서 완전히 달라지게 되고 각자 다른 삶을 살아가는 것입니다.

그렇다고 branch들이 계속 나뉘어져 있는 것은 아닙니다. 원하면 branch를 만들었다가 다시 합칠 수 있기 때문입니다.

예를 들어, commit이 한 개 있고, commit 한 번 더 하고, 그리고 branch를 만듭니다. 그리고 여기서 어떤 짓을 해도 상관없습니다.(새로운 기능을 실험하는 거입니다.) 그 때 여기서 stable 코드는 수정되지 않는 것입니다. 그러니까 완전 평행 세계를 만든 것입니다. 그리고 작업이 끝나면 다시 돌아와서 merge하면 됩니다. 이 과정을 우리는 merge라고 부릅니다.

여기 maste branch가 있고 우리가 여기 있다고 칩시다. master에서 이제 우리는 새로 branch를 만들고 작업할 것입니다. 그리고 작업이 끝나면 여기에서 merge합니다. master에서 달라진 것을 합치는 것입니다. 우리가 만든 하나의 branch에서 작업한 것을 publish 할 수 있습니다.

먼저, #no-mobile의 span에서 too를 바꾸는 작업을 통해 어떻게 branch들이 실제로 작동하는지 봅시다.

github desktop에서 branch를 보면 master하나만 있습니다. 여기서 experimental이라는 새로운 branch를 만들어 줍니다. master와 experimental은 바뀐 것이 없습니다. experimental - history로 가면 확인할 수 있습니다. master와 같은 기록을 가지고 있습니다.

experimental branch에서 해보고 싶은 게 있는데

먼저 #no-mobile의 span에서 too를 super로 수정해줍니다. 이것은 experimental branch에 있습니다. 이것을 커밋으로 만들겠습니다. commit to experimental을 클릭하고 history를 보면 experimental에서 commit을 확인할 수 있습니다. master에는 이 commit이 없다는 것을 확인할 수 있습니다.

코드를 확인해 봅시다. 여기에서는 페이지에서 새로고침을 하면 super big이라고 표시됩니다. 그런데 master 브랜치를 클릭하고 VS Code를 확인하면 too로 바뀐 것을 확인할 수 있습니다. 다른 코드는 다 똑같은데 Git은 똑똑해서 변화된 것만 찾아줍니다. experimental를 클릭하고 새로고침을 하면 super라고 표시되는 것을 확인할 수 있습니다. 물론 이것은 commit을 만들어야만 적용된다는 것을 알아둬야 합니다. 그냥 VS Code에서만 코드를 수정하면 이것은 Changes에 기록되고 experimental에 적용할 지, master에 적용할 지 선택할 수 있습니다. Current Branch를 클릭하면 현재 Branch를 바꿀 수 있는데 experimental에 저장할 건지, master에 저장할 것인지 변경사항을 저장할 branch를 고를 수 있습니다. 꼭 알아두어야 할 것은 변경사항을 commit해야만 합니다.

우리는 too와 super 두 가지 버전의 코드를 가지고 있습니다. 그리고 Git으로 버전을 왔다갔다 할 수 있습니다. Git 덕분에 버전이 달라도 파일 하나만 가지고 있으면 branch에 따라 파일 내용을 왔다갔다 할 수 있게 됩니다.

friends.html 파일은 하나뿐이고 브라우저에서도 확인 할 수 있습니다. VS Code를 안 쓰고 branch만 바꾸어도 브라우저는 우리가 branch를 바꾼 것을 알고 있습니다.

여기서 알 수 있는 것은 experimental branch는 master branch 앞에 하나의 commit이 붙은 branch라는 것입니다. master branch에는 저 commit이 없습니다. experimental branch에는 하나의 commit이 더 있습니다. master는 experimental 이전에 있는 것입니다.

master branch를 클릭하고 branch - Merge into Current Branch를 누릅니다. 그리고 experimental을 누르면 experimental에서 master로 commit을 merge한다고 표시됩니다.

즉, experimental에서 master로 하나의 commit을 가져오는 것입니다. master가 이제 ‘too → super’라는 커밋을 가지고 있습니다. 그리고 experimental로 가면 똑같은 커밋을 가지고 있습니다.

#7.1 Publishing on Github Pages

우리가 branch에 대해 배운 이유를 알려주겠습니다. github에서 branch를 가지고 있으면 특별한 이름이 붙여진 특별한 branch를 가지고 있으면 github에서 공짜로 Static 호스팅을 할 수 있도록 해줍니다. 즉, 누구나 자신의 웹사이트를 무료로 업로드할 수 있고, 그러면 Github에서 공짜 url을 제공해 줄 것입니다.

static website는 HTML, CSS, JavaScirpt로만 이루어진 사이트를 의미합니다. 물론 front-end만 가능하고 back-end는 다룰 수 없습니다.

Github가 우리에게 무료로 static website를 제공하는 것입니다.

첫째로 branch를 만들어야 합니다.

그리고 이 branch의 이름은 ‘gh-pages’라고 꼭 해두어야 합니다. 이것은 필수 사항입니다. 어떤 코드이던지 ‘gh-pages’라는 branch는 publish 될 거라는 의미입니다.

그리고 우리 저장소는 Public 상태여야 합니다. private 저장소로 가지고 있으면 publick 웹사이트로는 만들 수 없습니다. public 저장소여야만 하고 branch 이름은 필수적으로 ‘gh-pages’여야 합니다. page나 대문자로 오타를 내서도 안됩니다.

gh-pages로 create branch를 해주고 publich branch를 눌러줍니다.

‘gh-pages’ branch에 어떠 코드가 있던지 그 코드는 Github 무료 호스팅으로 온라인으로 업로드 될 것입니다.

url을 확인하려면 github.com으로 가서 자신의 repository로 들어가면 두 개의 branch가 존재합니다. branch를 클릭하면 하나는 gh-pages 그리고 다른 하나는 master입니다. code - environments에서 github-pages를 눌러보면 deployments가 있습니다. view deployment를 클릭하면 작업한 파일을 url로 확인할 수 있습니다.

youjungson.github.io/kokoa-clone-2022

유저네임.github.io/저장소이름

**#7.2 Updating Github Pages**

Github 페이지를 어떻게 업데이트하는지 알아보겠습니다. Github 페이지에서 수정하고 싶은 것(코드)이 있다면 수정사항이 있을 때 먼저 해야 할 것이 있습니다. 먼저 제일 기본적인 branch인 master branch를 클릭합니다. Master에 있을 때, 바꾸고 싶은 것은 뭐든 바꿀 수 있습니다.

super를 too로 수정하고 이모티콘을 넣어보겠습니다. master branch 에서 수정했고 master branch에서 commit을 할 것입니다. commit이름은 우는 이모티콘으로 하겠습니다. 모든 수정은 master branch에서 하겠습니다. Commit to master 버튼을 클릭해줍니다. 웹사이트를 업데이트 하기 위해서는 github-pages branch도 업데이트 해야 합니다. master branch에서 수정하고 origin에 push도 했지만 github pages branch를 업데이트 하지 않았다면 url로 접속해도 아무런 변화가 없을 것입니다.

기억할 점은 코드의 업데이트는 master에서 하되 뿐만 아니라 ‘gh-pages’에도 업데이트 해주어야 합니다. 이제 gh-pages로 가서 branch 탭을 누르고 update from master를 클릭합니다. 이것은 master에 있는 모든 commit들을 가져오겠다는 것을 의미합니다. gh-pages로 모든 commit을 가져오는 것입니다.

다시 branch 탭으로 가서 update from master를 클릭합니다. gh-pages에 master가 merge되었다고 표시됩니다. 그리고 gh-pages는 우는 이모티콘 커밋 하나를 가지고 있는 것이 보입니다. 이제 gh-pages branch를 github.com에 올리기 위해서는 push를 해야 합니다. 이제 웹사이트가 성공적으로 업데이트 됐을겁니다.

Deployment - View deployment를 누르고 새로고침을 하면 변경된 내용을 확인할 수 있습니다.

코드를 수정하고 싶으면 먼저 master로 이동합니다. Master에서 수정할 부분은 Visual Studio code를 이용해 수정합니다. 수정한 부분을 저장하고 master에서 Commit합니다. Master에 Commit을 만들면 이제 gh-pages로 이동합니다. gh-pages로 와서 branch 탭으로 들어간 다음 Update from master를 클릭합니다. 그러면 이제 master의 commit들을 gh-pages로 가져옵니다. 그 다음 변경사항을 publish해야 합니다.

push버튼을 눌러줍니다. 그러면 변경사항을 github 페이지에 업로드하게 됩니다. github 사이트에서 잘 동작하는지 확인할 수 있습니다.

먼저 master로 가서 ㅠㅠ를 지우고 master 상에서 뭐가 됐든지 변경사항을 업데이트하고 origin에 push합니다. gh-pages branch로 이동해서 branch- update from master를 클릭합니다. 여기서 다시 push를 해줍니다. master, gh-pages 모두 push 했기 때문에 새로고침하면 잘 됩니다. 그러면 github deployments에 세번째로 나옵니다. 무료 서비스이기 때문에 시간이 걸릴 수도 있다는 것을 감안해야 합니다. 웹사이트에서 새로고침하면 확인 할 수 있습니다.

수정하고 싶으면 master에서 commit을 만들고 push하고 gh-pages로 가서 branch- update from master - push

대문자가 포함된 파일이나 폴더가 없다면 모든 것이 잘 작동할 것입니다.