NOW OR NEVER

[7주차] 1. Git & Github 정리 완성 본문

강의/제로베이스 프론트엔드 99일

[7주차] 1. Git & Github 정리 완성

LAURA 2021. 9. 13. 22:29
반응형

Git & GitHub

GitHub에 코드를 올리는 과정

1. git을 쓸 컴퓨터 프로젝트 폴더에 git을 쓸거라고 명령
2. 코딩
3. git add: 변경한 파일 중 올리기 원하는 것만 선택 ex) 열개 파일 변경시 세개만 올리고 싶을시
4. git commit -m “설명” :선택한 파일을 한 덩어리(commit)로 만든 후 그 덩어리에 대한 설명을 적어주기(이것을 GitHub에 올리는 것이다) ex) 메인화면 클릭 버그 고치기
5. GitHub 사이트에서 프로젝트 저장소 만들기(블로그 만드는 것과 동일)
6. git remote add : git을 쓸 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기
7. git push : 내 컴퓨터에 만들었던 덩어리 GitHub에 올리기

익히기

CLI(Command Line Interface)

만든 버전 GitHub에 올리기

  • GitHub 사이트에서 프로젝트 저장소 만들기(블로그 만드는 것과 동일)
  • git remote add : git을 쓸 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기
  • git push : 내 컴퓨터에 만들었던 덩어리 GitHub에 올리기
  • 로컬 저장소와 원격 저장소
    • 로컬 저장소에 버전 올리는 것은 개인이 사용하는 데 전혀 문제가 없지만 사람들과 같이 원격으로 버전 관리를 할 수 있게 하려면 로컬 저장소에 만든 버전을 원격 저장소에 올리기만 하면 된다. 그 올리는 명령어가 push 이다.
  • 원격 저장소 github에서 만들고 커밋 푸시하기
  1. github에 로그인 해서 저장소 생성
  2. git remote add 원격(remote)저장소이름 https://github.com/아이디/repository이름.git or ssh주소: 내 컴퓨터에서 올릴 폴더에 github 저장소 주소 알려주기
    • git bash로 할 경우 올릴 폴더에 오른쪽 마우스 클릭해서 git bash here 클릭
  3. git push 원격저장소이름 브랜치이름(ex)master(기본)) : 만든 커밋 푸시하기
    • 프로토콜 문제로 ssh 키(C:\Users\User.ssh/id_rsa.pub) 생성 후 깃허브에 등록해서 ssh를 통해 올리게 됨 하…….
  4. github에서 올라간 커밋 확인
  • GitHub 용어
  • repository : 큰 단위의 폴더이고 여러가지 코드 모아놓음
  • gist : 코드 조각을 올리고 싶을 때 사용
  • new repository : 새로운 저장소 만들기
    • public : 모두에게 공개
    • private : 나에게만 공개
    • initialize this repository with a README : 이 저장소를 만들 때 README.md 파일도 같이 만들 것인가
    • README.md : 깃허브 저장소에 처음 들어갔을 때 이 소스코드가 무엇을 하는지 저장소에 온 사람들이 어떤 정보를 읽었으면 좋은지 써놓는 파일으로 꼭 써주는 것이 좋다 ex) 오픈 소스라고 치면 오픈 소스 설치 방법, 오픈 소스가 지원하는 범위, 오픈소스의 documation, 라이선스 등 작성
    • add .gitignore : 이 폴더는 로컬에서만 써야하고 비밀 패쓰워드가 있어서 절대 노출되면 안될 때 추가하는 것이다. 아니면 node 프로젝트를 하게 되면 외부 라이브러리를 굉장히 많이 쓰게 되는데 그 외부 라이브러리를 굳이 깃허브에 올릴 필요 없으니까 여기서 node modules라는 폴더를 선택해 추가하면 된다.(node modules라는 폴더의 외부 라이브러리가 모두 저장되므로)
    • add a license : 이 코드를 어떤 제한 까지 쓸 수 있는 지의 라이선스 추가
    • 저장소를 만들고 보면 quick setup 페이지에 git remote add 저장소 이름 옆에 저장소 url 적혀있음
    • import repository : 저장소 가져오기
    • new organization : 예를 들어 학교 팀플 할 때 그 팀이름으로 organization 만들 수 있음

다른 사람이 만든 저장소(버전) 받아오기

  • Clone 클론: 원격 저장소를 내 컴퓨터에 받아오기
    • 원격 저장소의 코드를 내 컴퓨터에 받아올 수 있고 로컬 저장소(.git 폴더)과 url도 자동 생성해서 commit시 해당 repostitory로 올라가게 할 수 있다.
    • 하는 법 : git clone 받아올 repository 저장소 url(https//github.com/아이디/이름.git) 입력
    • github에서 download zip 할 경우 로컬 저장소가 생기기 않음
    • 따로 지정된 폴더 안에 clone 하고 싶을 경우 git clone 받아올 repository 저장소 url(https//github.com/아이디/이름.git) . 이렇게 입력(url 띄어쓰기 후 .이 붙는다는 게 다름)하면 내 컴퓨터의 해당 저장소 이름으로 새로운 폴더가 만들어져 clone 하는 것이 아닌 지정된 폴더 안에 clone 할 수 있다
    • git으로 관리되고 있던 프로젝트를 깃허브에 올렸던 거를 클론으로 내 컴퓨터에 받아오고 그렇게 받아온 폴더에서 새로 커밋을 추가해서 사이트에 올리기 가능
  • Pull 땡기다(git pull 원격저장소이름 브랜치이름)
    • 원격 저장소의 데이터 가져오기, push의 반대
    • 원격저장소로부터 업데이트 된 데이터를 이 명령어를 통해 받아올 수 있다.
  • Push 밀다(git push 원격저장소이름 브랜치이름)
    • 원격저장소에 푸시권한(내 저장소repository에 그사람 계정 추가)이 있는 경우에만 커밋을 만들어서 푸시 가능(누구나 다 푸시 가능하면 원격저장소가 더러워지기 때문)
    • 다른 사람이 내 repository에 기여할 경우 repository의 settings에 가서 manage access 메뉴에서 collaborator에서 계정을 추가해야 한다. 그 계정의 주인이 accept를 누르면 그 repository에 push할 수 있는 권한을 갖게 된다.

다지기(GUI : Graphic User Interface)

우리가 배울 것

  • git gui인 소스트리로 로컬 저장소 추가
  • add와 commit이 무엇인지 스테이지 개념과 같이 이해
  • branch로 평행세계 나누기
  • merge로 두 branch 합치기
  • 두 branch가 충돌(conflict) 났을 때 해결하기
  • 예의바른 병합 요청(pull request) 보내기
  • 남의 저장소 통째로 복제하기: Fork
  • 소스트리 설치 방법
    1. 소스트리 홈페이지에서 소스트리 다운로드
    2. install 단계에서 bitbucket으로 로그인 선택
    3. registration 단계에서 git과 mercurial(git과 유사한 것) 다운로드 같이 할거냐고 물어볼 때 mercurial 체크박스 풀기
    4. preferences 단계에서 git 계정 정보 입력
  • 소스트리 로컬 저장소 추가 add로 추가할 폴더 선택해서 추가, 또다른 로컬저장소 추가하고 싶을 땐 탭 추가해서 거기서 또 add로 추가

add와 commit

  • 아이돌 데뷔를 생각하면 아이돌 연습생 데뷔조 토끼와 거북이가 있다면 거북이만 스테이지에 올리는 것은 거북이만 git add 된것, 그 다음에 스테이지에 올라간 사람 즉 거북이만 사진을 찍는 것이 git commit이다. 그 다음에 참새 연습생도 아이돌 연습생 데뷔조에 들어오게 된다. 데뷔조에 있던 토끼와 이 후 들어간 참새도 스테이지에 후에 올라가게 된다.(거북이는 아무미동도 없이 그대로 있다) 그다음에 commit을 하게 되면 거북이 토끼 참새가 스테이지에 올라간 사진만 남게 되는 것이다. 그리고서 춤 연습을 더한 거북이와 참새를 스테이지에 다시 올려 commit 하면 토끼는 기존 commit과 같은 상태인데 거북이와 참새는 새로운 버전인 것을 볼 수 있다.하는 방법
    1. git으로 추적하는 파일의 4가지 상태 : untracked(추적안됨). tracked(수정없음, 수정함, 스테이지 됨)
    2. 작업 공간(working directory)에 있는 수정함, 추적안됨 파일을 스테이지에 올린다(수정없음은 add 불가 : 수정을 안해서 add할 껀덕지가 없음). 스테이지됨으로 변경
    3. commit을 하면 수정없음 상태로 돌아가서 다시 파일에 변경사항을 만들 수 있게 된다

add

  • git add 파일명
  • 내가 변경한 파일 중 원하는 것만 선택하는 것
  • git으로 아직 추적되지 않은 파일을 add할시 그 파일 상태가 stage됨으로 바뀜(즉 add는 파일들을 로컬 저장소 폴더(.git) 안 stage로 올린다는 뜻)

commit

  • git commit -m”설명”
  • 선택한 파일을 한 덩어리로 만들고 설명을 적어주는 것
  • 변경사항 만의 모음이 아닌 하나의 최종 코드 모음이다.
  • 방금 add한 파일들만 commit 하는 것이 아닌 stage 안에 들어 있는 모든 파일들을 commit함. 이렇게 commit한 후의 파일들의 상태는 수정 없음으로 되돌아감. 수정없음으로 돌아간 파일들은 다시 수정할 수 있게 된다. commit한 파일들은 push로 원격저장소(github)에 올릴 수 있다.
  • 수정없음 파일은 stage에 계속 올라가 있다. 그래서 수정없음 상태의 파일도 함께 commit 하게 됨 하지만 변경없음으로만 올라감
  • svn과 git의 차이점: svn은 이전 commit과의 변경사항만 저장한다. 그래서 하나의 commit 당 용량은 git보다 훨씬 더 가볍지만 한 버전을 보려면 맨 처음 commit부터 거슬러 올라가서 뭐가 바뀐지를 계산을 다해야해서 속도가 느렸다. git은 변경된 파일은 새로 모두 저장하는 데 변경되지 않은 파일은 그냥 변경되지 않았다라고만 저장한다. 그래서 git은 바로 이전 commit만 보면 돼서 속도가 굉장히 빠르다.

소스트리에서 add, commit, push, pull

github 계정 추가 방법

  • 도구>옵션>인증>계정 추가>계정 클릭>Default account for github.com : 예 로 설정(소스트리에서 default 계정으로 쓰게 설정)

history

  • 원격저장소이름/브랜치이름 : github에도 있는 것
  • 브랜치이름 : 내 컴퓨터에만 있는 것
  • 원격저장소이름/브랜치이름, 브랜치이름 동일 선에 있게 하려면(로컬 저장소 변경된 내용 올려github 원격 저장소 내용도 동일하게) push를 통해 구현

add

  • 소스토리 로컬 저장소에서 커밋하지 않은 변경사항을 원격 저장소로 올리려면 커밋에 들어가서
    스테이지에 올라가지 않은 파일 내에 속한 올리고자 하는 파일 옆의 +를 누른다.(모든 파일 올릴시 모든 스테이지 올리기 클릭)
  • 오른쪽 페이지에서는 파일의 변동사항을 확인할 수 있다
  • 하단에 커밋 작성

pull

  • 깃허브 원격저장소에서 바뀐 내용을 내 로컬 저장소에도 적용

브랜치 branch

  • git branch 브랜치이름 : 해당 브랜치를 현재 시점에 만들어라
  • git checkout 브랜치이름 : 해당 브랜치로 이동해라
  • main(master) 브랜치로 이동한 다음 새로운 브랜치를 만들고 새로운 커밋 입력시 진짜 분기가 나뉘게 됨
  • feat/브랜치이름 : 만든 브랜치 중에서 feat가 붙은 것들만 모아서 볼 수 있는 기능(브랜치가 많아질 때 굉장히 유용한 기능)
  • 가지
  • 여러줄로 커밋 작성
  • 한 줄로 작업하면 충돌이 날 수 있음 예를 들어 똑 같은 코드를 동시에 고칠 가능성이 있어 충돌 가능
  • 여러 줄로 쌓고 합치기 가능
  • 화살표 같은 것
  • 여러의 브랜치가 하나의 커밋을 가리키고 있을 수 있다.
  • HEAD : 내가 지금 작업하는 로컬 브랜치를 가리킴
  • 현재 작업하고 있는 브랜치를 소스트리에서 확인하고 싶으면 좌측 sidebar 브랜치 메뉴에서 유독 두꺼운 글자를 가지고 있는 브랜치가 현재 작업 브랜치이다.
  • gui 좌측 sidebar의 브랜치 메뉴에 보이는 브랜치들은 로컬 저장소에 있는 브랜치만 보여준다.(원격에서 이동하고 싶은 브랜치 더블 클릭하면 체크아웃이 되면서 그 브랜치로 이동한다)
  • 브랜치에서 작업이 끝나고 main(master)에 합치고 싶을 때
    • 합집합을 생가하면 됨)
    • 합치고 싶은 branch : compare 브랜치
    • merge의 대상이 되는 branch : base 브랜치(ex main, master)
    • 먼저 base가 될 브랜치로 이동>git merge 브랜치(compare) : 이 브랜치와 base 브랜치와 합치고 싶다
    • 즉 base branch에 compare branch 내용을 반영한다.(그 반영된 모습이 머지 커밋이다. 합칠 때마다 머지 커밋 생성)
    • gui sidebar 브랜치 메뉴에서 base branch를 더블 클릭해 이동한다음 거기서 병합할 branch 오른쪽 클릭해서 병합 선택>push

Conflict

  • 합치려는 두 버전(base ,compare)이 같은 곳을 수정했다면 충돌 발생

수동으로 그 부분을 동일한 내용으로 고쳐줘야 함(< = > 부분을 다 지우고 맞는 내용을 판단하고 그 내용으로 수정) -> 새로운 머지 커밋 생김

<<<< HEAD 현재 있는 브랜치 변경사항

========================

>>>>브랜치이름 그 브랜치 변경사항

  • gui 에서 complict 난 파일은 커밋하지 않은 변경사항을 누르면 스테이지에 올리지 않은 파일에서 볼 수 있다. 그럴 때 vs code에서 git panel(돋보기 아래 메뉴)을 누르면 충돌난 내용을 볼 수 있다
  • vs code에서 충돌 났을 때 나오는 버튼 accept, cuttent change 등은 편리기능으로 어떤 change만 남길거냐 라는 명령을 내릴 수 있다.

Fork

  • collaborators 기능을 사용하지 않고도 오픈 소스에 기여를 할 수 있는 기능
  • 저장소를 통째로 복제
  • 만약 푸시를 망치고 이상한 커밋을 하더라도 원본 저장소의 사람들은 그것을 모르기 때문에 더 자유롭게 커밋, 푸시 가능
  • collaborator가 아니더라도 새로 커밋과 푸시를 할 수 있다
  • fork>clone(gui에서 탭 만들고 clone 클릭 후 소스 경로에 clone 할 저장소 주소 입력, 목적지 주소 그 clone을 다운받을 폴더 주소 입력)>clone 받은 폴더 열어서 작업
  • 브랜치와의 차이점
    : 두가지 모두 코드를 협업하기 위해 분기점을 나누는 방식이지만 특성이 다르므로 내 프로젝트에 맞게 사용
  의의 편리한 점 불편한 점
브랜치 하나의 원본저장소에서 분기를 나눈다 하나의 원본저장소에서 코드 커밋 이력을 편하게 볼 수 있다 다수의 사용자가 다수의 브랜치를 만들면 관리하기 힘들다(react의 경우)
포크 여러 원격저장소를 만들어 분기를 나눈다 원본저장소에 영향을 미치지 않으므로 마음껏 코드를 수정할 수 있다. 원본 저장소의 이력을 보려면 따로 주소를 추가해줘야 한다.

Pull request

  • 원본 저장소에 코드를 올릴 권한이 없을 떼 이커밋과 저 커밋을 합치는 걸 허락해달라는 편지 같은 것이다.
  • 머지하고 싶은 두 브랜치를 선책하고 어떤 변경을 했는지 제목과 내용에 작성
  • 단일 저장소에서 보낼 수도 있고 포크한 저장소에서도 보낼 수 있음
  • base : 머지를 당할 브랜치, compare : 새로 만든 브랜치
  • 코드를 함께 작성하는 팀원 있을 시 최대한 직접 머지하는 것은 피하고 모든 머지를 풀 리퀘스트를 통해서 하는 것이 좋다. 왜냐하면 동료가 내 풀 리퀘스트를 보고 코드를 리뷰해 줄 수 있기 때문이다.
  • 동료 풀 리퀘스트에 수정이 필요하면 댓글을 달아 change request를 보낼 수도 있다
  • 보통 신입 개발자의 경우 풀 리퀘스트를 사수에게 보내면 사수님이 댓글을 30개 이상 많이 달아줄 수 있다
  • 오픈소스에 기여할 때는 무조건 풀 리퀘스트 보내야 함. contribution guidline 기여 문서 반드시 확인하고 보내기! ex) https://reactjs.org/docs/how-to-contribute.html
  • 내 저장소엔 pull request는 저장소 pull request 메뉴에서 확인 가능
    • 코드 리뷰는 file changed 눌러서 review changes 선택하면 comment(댓글만)/approve(pull request 승인)/request changes(좀 아쉬워서 이런 것들 고쳤으면 좋겠다) 중 하나 선택해서 작성 가능
  • change 하고 싶은 코드 + 부분 눌러서 바로 댓글 달 수 있음
  • merge pull request 누르면 pull request로 보낸 코드가 바로 머지됨
  • 프로필 클릭 후 overview에서 pinned에서 pull request 받아 들여진 저장소가 보임(customize pinns에서 보일 저장소 관리할 수 있음)git flow - 브랜치 관리하기
  • 브랜치 관리하는 전략
  • 주의점 : main(dev, master), release 브랜치에는 직접적으로 커밋하지 않고 풀 리퀘스트를 통한 머지로 함
  1. 보통 브랜치 만들 때는 feat/기능이름 으로 한사람이 개발하는 기능 브랜치 만듦 or 버그는 fix/버그이름, 급한 버그를 고쳐서 배포하는 경우는 hotfix/급한버그 이렇게 하면 어떤 기능을 하는 브랜치인지 한번에 알 수 있다.
  2. feat 브랜치에서 작업이 끝나면 무조건 main(deg, master) 브랜치에 pull request를 보내서 코드를 머지 시켜야 함
  3. main 브랜치에서 큰 작업이 모두 머지되면 실서버에 배포(바로 배치x, release 브랜치 혹은 latest 브랜치를 새로 만들고 그 브랜치로 머지시킨다. 그래서 실서버에 배포하는 것은 release 브랜치 혹은 latest 브랜치가 된다.)

git 키워드

  • rebase : 묵은 커밋을 새 커밋처럼 조작하고 싶을 때 사용, conflict 안나는 상태로 커밋 생성 가능
  • amend : 깜박하고 수정 못한 파일을 방금 만든 커밋에 살짝 추가(새로 또 커밋 안만들고)
  • cherry- pick : 커밋 변경점만 떼서 현재 브랜치에 붙이는 기능
  • reset : 옛날 커밋으로 시간 돌리고 싶을 때 사용, 많이 사용됨(과거 커밋 클릭 후 reset 누르고 강제 push 시키면 원격 저장소에서도 과거 커밋으로 보여지게 됨)
  • reverse : history를 날리지 않고 특정 커밋의 변동사항만 되돌리는 것이다
  • stash : 많이 사용, 커밋을 만들 준비가 안된 상태에서 working directory를 비워야 하는 상황이 왔을 때 내 모든 변경사항을 잠시 어느 폴더 같은 곳에 담아 놓고 일을 다 처리 후 stash에서 꺼내오는 것이다.

Tips

  • origin은 깃허브 원격저장소(remote) 닉네임 같은 것
  • github desktop보단 소스트리를 사용하면 좋은 이유 : github desktop에는 마술들이 많음, CLI에서 배운 명령어들을 github desktop 버튼 하나만 누르면 한번에 다 되도록 해서 다 컨트롤하지 못한다는 느낌을 받을 수 있음
  • ssh 참고
    https://zzang9ha.tistory.com/319
    https://syung05.tistory.com/20
  • 상위 폴더로 올라가는 명령 : cd .. 는 바로 위 상위 폴더이고, cd ../폴더명는 해당 폴더명의 상위 폴더로 올라감
  • 폴더로 들어가는 명령 : cd 들어갈폴더명/
  • 지우는 명령 : rm -rf 파일 혹은 폴더명/
  • fetch : 새로고침 같은 것
  • git checkout : 로 이동해라(는 commit, branch 등이 해당)
  • vs code에서 돋보기 밑 버튼 누르면 무엇이 변경됐는지 확인 가능, 거기서 변경사항 파일 옆 플러스 누르면 스테이지로 올라감 그러고서 그 파일 위쪽에 커밋내용 쓰고 체크 모양 표시 누르면 커밋됨 그다음엔 하단 바 왼쪽을 보면 새로고침 모양 버튼이 있는데 그걸 누르면 pull/push 가능해짐
  • collaborator 추가 방법 저장소의 settings 들어가서 collaborators 메뉴 클릭 후 원하는 사람 id 검색해서 추가
  • LGTM = Looks good to me 좋아보인다, github 외부 오픈 소스에 contribution 할 때 많이 쓰는 단어

프로토콜 문제 해결

1. 문제

  • git push 명령어 사용 도중 http 프로토콜 문제가 발생

2. 해결 시도 1

  • http는 포트번호를 어떻게 해야할 지를 모르겠어서 ssh로 해보기로 결심. ssh를 발급받은 다음 그걸 github에 등록하고 소스트리와 gitbash에서 사용할 수 있도록 했다. 그런데도 계속 프로토콜 오류가 발생하면서 push가 안됐다

3. 문제점 발견

  • 원격저장소 이름을 두 번 지정
  • 원격저장소 이름 지정해놓으면 깃허브 그 아이디 내 로컬 저장소 다 이 원격저장소 이름으로 이용 가능

4. 해결 시도 2

  • git init을 했던 모든 로컬 저장소 삭제
  • git clone을 통해 새로운 저장소 받음
  • 원격 저장소 이름 있는지 확인 후 다시 지정
  • ssh도 지우고 깃허브 등록
  • 새로운 저장소를 push pull 시도

5. 해결!

  • http/ssh 모두 다 가능, 소스트리도 가능
Comments