[6주차] 5. Git & GitHub (~CLI 첫번째 버전 만들기)

Git & GitHub

Git & GitHub 필요한 이유

• git 전에는 svn이라는 버전관리 있었는데 철학은 동일한데 구현방법과 사용방법이 많이 다르다. 그래서 git이 더 고급지게 구현해서 git을 많이 사용하는 추세
• 효율적인 개발 협업 가능
• 클라우드 저장소의 경우 github 말고도 gitlab이나 BitBucket 같은 서비스들이 많은데 사용자 수가 제일 많은 github 사용하는 것이 좋음

---

버전 관리

• git은 두 명의 개발자가 하나의 서비스를 만들 때 따로 조금씩 작업하다가 내가 원할 때 코드를 합칠 수 있고 백업도 쉽게 할 수 있는 방법이다.
• 버전관리: 코딩을 할 때 ctrl+z를 사용해 이전 상태로 되돌리는 것이 아니라 원하는 시점마다 깃발을 꽂고 즉 버전을 만들고 이들 간에 자유롭게 돌아다닐 수 있게 된다. 여기서 내가 만들 버전 뿐만 아니라 동료가 만든 버전으로 이동할 수 있고, 동료와 내 버전을 비교해서 최신본으로 코드를 업데이트도 할 수 있다.

---

git 사용시 필요한 것들

• 저장 공간만 있다면 어디서나 사용 가능 하다 ex) 개인 컴퓨터, usb, 회사 서버, 클라우드(전세계 사람들과 공간과 시간 제약없이 협업 가능 ex) GitHub, GitLab, BitBucket 등)

---

git을 사용하는 두가지 방법

• 개발자마다 선호하는 방법이 다르다.
• 때에 따라 방법 적절히 사용하면된다.

1. CLI(Command Line Interface)

• 검은화면에 흰글씨로 명령어를 쳐서 작성하는 일반적인 방법
• 몇몇 필수불가결한 작업들이나 CLI에서 처리하기 편한 작업들 주로 처리
• git이 제공하는 모든 언어 사용 가능
• 처음 시작하는 사람에게 어려움
• git이 가시적인 부분이 많은데 흰글씨의 명령으로 확인하기엔 불편한 점이 많다.

2. GUI(Graphic User Interface)

• CLI를 좀 더 편하고 가시적으로 하기 위해서 소스 트리 같은 GUI 만들어짐
• 대부분은 GUI 통해 처리
• 버튼을 눌러서 우리가 원하는 명령을 수임하는 것
• 처음 하는 경우 더 개념을 잘 이해 할 수 있다.
• 중급자들도 그래프나 코드 변경사항이 더 가시적으로 보여서 선호하는 사람이 많다.

---

GitHub에 코드를 올리는 과정

1. git을 쓸 컴퓨터 프로젝트 폴더에 git을 쓸거라고 명령

2. 코딩

3. git add: 변경한 파일 중 올리기 원하는 것만 선택 ex) 열개 파일 변경시 세개만 올리고 싶을시

4. git commit -m “설명” :선택한 파일을 한 덩어리(commit)로 만든 후 그 덩어리에 대한 설명을 적어주기(이것을 GitHub에 올리는 것이다) ex) 메인화면 클릭 버그 고치기

5. GitHub 사이트에서 프로젝트 저장소 만들기(블로그 만드는 것과 동일)

6. git을 쓸 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기

---

Git & GitHub 환경설정

Git 설치

• git 설치 확인 : 윈도우의 경우 명령프롬프트 > git 치기
• 설치 http://git-scm.com/download/win
• 설치 시 유의사항
• 다운로드 창 select components에서 git bash 꼭 체크
• choosing the default editor 에서 visual studio cod as git’s default editor 선택
• adjusting PATH : 3rd-party software
• 나머지는 기본값으로 설치
• Git Bash : 기본 터미널과 동일한데 다만 git을 좀더 편하게 사용할 수 있음
• 명령 프롬프트에서도 git 사용 가능

Visual Studio Code 설치

• 마이크로소프트에서 제작한 무료 코드 에디터
• 문법 강조, 코드 자동완성, git 연동 등 유용한 기능이 많다.
• 오픈 소스여서 많은 사람들이 contribute해서 많은 기능들이 존재
• https://code.visualstudio.com/ 에서 맞는 버전을 다운로드해서 설치GitHub
• git으로 버전 관리한 코드를 올릴 수 있는 클라우드 서버
• Git 호스팅 사이트 종류

GitHub

• git으로 버전 관리한 코드를 올릴 수 있는 클라우드 서버
• Git 호스팅 사이트 종류

git 호스팅 사이트	모기업	특징	가격
GitHub	GitHub Inc (MS에서 인수)	사용자 2800만의 명실상부한 세계 최대 규모 Git 호스팅 사이트	공개 저장소 생성 무료, 비공개 저장소는 작업자 3인 이하인 경우에는 무료, 설치형(본인 서버 코드 저장할 수 있고 git 편의기능 사용 가능) 버전인 Enterprise는 월 21달러
GitLab	GitLab Inc	NASA, Sony 등 10만개 이상의 조직이 사용, GitLab 자체가 오픈소스인 특징	공개, 비공개 저장소 생성 무료
BitBucket	BitBucket Inc	사용자 600만명, 지라(Jira)와 연동 쉬움	5명 이하 팀이면 공개 및 비공개 저장소 무료

---

익히기

CLI(Command Line Interface)

• 맨 윗줄 ~로 끝나는 것은 내 컴퓨터의 루트 폴더(최상위 폴더)

명령어

• pwd : 현재 폴더
• ls : 현재 폴더에 어떤 파일과 폴더 있는지 확인
• ls -al : 숨긴 파일 까지 볼 수 있는 옵션(.git 폴더 확인 가능)
• cd(change directory) 변경할 폴더 : 원하는 폴더로 들어가기
  • 폴더 이름을 적다 tab 키를 치면 자동 완성됨 : 폴더 명 잘못 입력할 오류 줄어듦

git 초기화

• 이 폴더 안에서 git으로 버전관리 하고싶다(원하는 폴더에 git 초기화: git init)
• .git 숨김폴더(git 초기화시 생성)가 로컬 저장소로 여기서 버전관리 할 수 있다. 이 숨겨진 폴더는 직접적으로 조작할 수 없고 명령 프롬프트 통해서 조작할 수 있다. 이 로컬 저장소에는 내가 만든 버전 정보, 원격 저장소 주소 등이 저장됨
• 원격 저장소에서 만든 git 프로젝트(react 등)을 받아오면 자동으로 로컬저장소(.git 폴더)가 생김
• 주의할 점: 한 폴더에 하나의 로컬 저장소만 유지해야 함
• 초기화 후 메시지 Initialized empty Git repository in 경로 : 해당 경로에 빈 로컬 저장소를 만들었다는 뜻

git init

 

---

첫번째 버전 만들기

Commit 커밋

• 덩어리
• 하나의 버전
• 만든 버전 간의 시간여행 가능
• 의미있는 변동사항을 묶어서 만든다.
  • 예를 들어 버튼 클릭 버그를 고치는 데 5가지 파일을 수정했다면 그 5가지를 묶어서 하나으ㅏ 커밋으로 만든다. 이렇게 해야지 동료 개발자(혹은 미래의 나)가 버튼 클릭 버그를 고치는 데 어떤 파일을 수정했는지 손쉽게 파악 가능(commit history를 보고 왜 이 코드를 고쳤는지 만들었는지 확인 가능)
  • 중구난방으로 하다가 다 올리면서 백업용도로만 쓰면 그것은 의미있는 버전 관리가 아니다.
• 옛날에 짰던 코드를 다 까먹을 수 있으니 커밋 메시지 적는 게 귀찮더라도 조금의 시간을 들여서 작성하는 게 좋다. 그래야 나중에 후회하지 않는다.
• 중요! : 커밋은 기차처럼 쌓여서 내 커밋이 각각 독립적이게 모든 파일을 저장하고 있긴 하지만 그 커밋들이 연결되어 있기에 그 전과 다른 change가 그 전전과 다른 변경사항이 뭐가 일어났는지 편하게 볼 수 있다.(commit graph, 밑에서부터 시작해서 제일 위가 최신이다.)

1. git add

• commit으로 만들길 원하는 파일만 선택하는 명령어
• 예를 들어 페이지 1,2,3 작성 후 페이지 1,2만 올리고 싶을 때 이 명령어 써서 1,2만 저장소에 올릴 수 있다.
• git add . 일시 전체 파일 추가 가능

git bash에서 git add 명령

2. git commit -m “프로젝트 설명 파일 추가”

git bash에서 git commit -m “설명” 명령

• 1 file changed, 3 insertions는 1개의 파일이 추가됐고 3줄의 코드가 추가되었다는 뜻

3. git log

• commit 상태 및 생성 여부 확인

git bash에서 git log 명령

---

Tips

• html에서 html:5 입력시 html5 기본 구조 나옴

---

6주차 후기 : 그동안 만든 github clone coding을 과제로 제출했다. header 에서 토글 버튼 만들고서 그 버튼을 클릭하면 sign-group에 있는 메뉴들이 나와야 하는데 그게 나오긴 나오는데 visual section 뒤에 가려져서 잘 보이지 않았다. \가 잘못 써져있나 확인도 하고 선택자를 잘못 썼다 확인도 했는데 내가 보기엔 문제가 없는데 구현이 안됐다. 결국 강사님의 도움을 받기로 하고 일단 그거 빼고는 잘 구현된 파일들을 모아 제출하였다. 강사님 답변이 오는대로 다시 구현해 볼 생각이다.