Git과 GitKraken에 대해서

현조형님·2022년 5월 3일
2

This is Study-Memo

목록 보기
1/1

Git에 대해서

대학교 과제를 할 때,
중간과제, 중간과제최종, 중간과제최최최종, 중간과제진짜최종...
이렇게 저장해본 경험... 다들 한 번쯤은 있으시죠?

파일에 내용을 추가하거나 수정하면서 새로운 파일을 만드는걸
고급진 단어로 "버전 관리"라고 합니다.

Git은 바로 "버전 관리"를 도와주는 시스템입니다! wow


어떤 코드가 삭제되고 추가되었는지 기록하고 저장해줍니다.

저희는 개발을 공부할 때 Github라는 서비스를 사용합니다.

step 1. 저희는 코드를 작업하고 git을 Github(인터넷, 원격 저장소, remote)에 올려두고
step 2. 내 컴퓨터(로컬 저장소, local)에 그 파일을 다운받아서 작업하고
step 3. 작업 이후 수정한 내용에 대해서 변경된 파일을 다시 Github로 올리기

이렇게 3-step으로 git을 관리합니다.
파일은 내 컴퓨터에만 저장된 것이 아닌, 인터넷 상에 올렸기 때문에 모두가 접근할 수 있으므로 다른 팀원들과 협업이 가능합니다!
팀원이 Github에 들어가서 해당 폴더를 다운받으면 바로 작업 시작 ON.

git을 관리할 때 해당 파일을 관리한다, 추적한다(track)라는 표현을 사용하는데요!
프로젝트 작업폴더에는 크게 2가지로 Tracked 파일, Untracked 파일 이렇게 존재합니다.

  • Tracked File (관리대상이 된 파일, 추적되고 있는 상태)
    - Unmodified : 파일 내용 수정이 되지 않은 상태
    - Modified : 파일 내용이 수정된 상태
    - Staged : commit 으로 Git 저장소에 기록될 준비가 된 상태
    (??? : 준비됐어, 커밋? 물론이지, 깃.)

  • Untracked File (관리대상이 아닌 파일, 추적이 안된 상태)

Visual Studio Code 하단에 git bash 창을 열어서
명령어 git status를 입력하면 작업폴더에 있는 파일들의 상태 status를 보여줍니다.
파일 INTRODUCE_MYSELF.md는 예전에 제가 git 관리를 해서 관리대상이 된 파일이고, 내용이 수정된 상태라서 Modified로 보여집니다.
파일 practice.md는 제가 방금 새로 생성해서 git 관리가 되지 않아 추적이 안된 상태, Untracked File로 보여지는 것을 확인할 수 있습니다.


이제 추적을 해보겠습니다...! 두근
명령어 git add . 을 누르면 모든 파일을 추적하도록 명령합니다.

만세
이쁜 초록색 글씨로 Changes to be Commited가 보입니다.
이는 Untracked -> Tracked로 상태가 된 것입니다!!
추적됨과 동시에 바로 commit이 가능합니다. 즉 Staged 상태..!
다시 한 번 REMIND : 준비됐어, 커밋? 물론이지, 깃.

명령어 git commit -m "lol" 로 commit을 올리고
명령어 git push로 push가 잘 반영된 것을 확인할 수 있고!
앞과정을 모두 끝냈기 때문에 다시 한 번 git status로 현재 파일들의 status를 확인하면, 변경된 파일이 없다고 nothing to commit, working to clean이라는 메세지가 출력됩니다.

참고로 Github에 올리고 싶지 않은 파일, 추적을 하고 싶지 않은 파일은 따로 .gitignore 파일에 따로 파일 및 디렉토리명 리스트를 샤샤샥 적으면 track 대상에 제외됩니다.
남들에게 공개하면 큰일나는 중요한 파일이나, 다음 멋사 FE팀 세션 때 React.js를 공부할 때 /node_modules 폴더처럼 파일이 엄청 많을 때 유도리있게 알잘딱깔센으로 유용하게 잘 제외하면 됩니다.

우리 인하대학교 멋쟁이 사자처럼 10기 아기사자들은 주목...!
운영진들끼리 CLI 쓰자 깃크라켄 쓰자,, 그런 대화를 들은 적이 있을겁니다.
CLI, 깃크라켄 모두 git을 관리할 수 있도록 도와주는 도구입니다.

  • CLI (Command-Line Interface)
    쉽게 말해서 Visual Studio Code(VSC)에서 하단에 온갖 명령 command를 입력하던 검정색 창입니다.
    git commit -m "first commit"
    git push origin master
    이런 명령어를 입력하던 거기가 맞습니다.

저는 CLI를 더 선호하지만 명령어만 입력하기 때문에 종종 헷갈릴 때도 있습니다. 안그래도 git이 뭔지 이해가 가물가물한데 눈에 보이지도 않은 이상한 명령어를 계속 입력하니까요.

그래서 올해 저희 Front-End 세션에서는 깃크라켄이라는 도구를 위주로 사용하기로 결정했습니다.

깃크라켄(GitKraken)은 기존 CLI에서 이뤄지는 git 작업(명령)을 사용자 user인 저희한테 익숙한 그래픽가 버튼으로 시각적으로 샤샤샥 보여주는 git GUI 툴입니다.

  • GUI (Graphical User Interface) 사용자가 편리하게 사용할 수 있도록 기능을 알기 쉬운 버튼 등 시각적으로 샤샤샥 잘 만든 그래픽

깃크라켄은 눈에 보이지 않은 것들을 시각화해서 표현해주기 때문에 git branch, remote 원격저장소, merge 등등 어려운 git 개념을 직관적으로, 친숙하게, 눈에 보이게 다가갈 수 있습니다!

대충 이렇게 생겼습니다.
하단은 저희 인하대 멋사 10기 FE팀 분들이 과제를 제출할 때 레포지터리의 모습입니다.
신상보호를 위해서 안전하게 강력한 빨간펜으로 모자이크처리했습니다!

저희는 과제를 제출할 때 깃크라켄을 사용하는데 git도 어려운데
저도 그렇고 대부분 익숙하지 않은 툴을 사용해서 다소 헷갈리는 부분이 많습니다!
그래서 다시 step-by-step으로 정리 들어갑니다.

0. Github 조직 Organization 파악
인하대 멋사 10기 '조직' 내부에 여러 레포지토리가 존재합니다.
FE팀 주차별 과제뿐만 아니라 BE&PD팀의 과제 레포지토리 또한 존재합니다.

저희는 명예 FE팀이니까 매주 진행하는 과제를 제출하는 레포지터리로 갑니다. (저는 설명을 위해 지난 주에 진행한 1주차 레포를 사용하겠습니다)

1. Fork
레포 'fe-week1'는 저희 조직에 소속된 저장소입니다.
Fork를 사용하면 지금 보고 있는 저장소를 내 계정 (hyunjoebrother)로 포크로 집어서 복사합니다!

저는 제 계정으로 Fork할 때 레포명을 조직 소속 레포랑 헷갈릴까봐 뒤에 -fork라는 이름을 추가했습니다.
같은 레포명으로 설정하면서 여기서 많이들 헷갈리시더라고요,,,
좀따가 말씀드리겠습니다

다음처럼 제 계정에 가면 fork한 레포가 잘 지내고 있는 걸 확인할 수 있습니다! 만세

2. Clone
Fork를 잘 끝냈으면, Github에 있는 내 저장소를 내 컴퓨터로 복사를 합니다. clone을 만드는 거예요
이제 GitKraken을 살짝 실행해볼까요?
쉽고 빠르게 다음처럼 메뉴를 샤샤샥 눌러봅시다.

다음으로
Clone할 저장소를 선택! (로컬, 컴퓨터 폴더 위치!)

여기서 잠깐 주목.
이 때 저희가 Fork한 저장소 이름을 선택해야합니다.
즉, 우리 인하대 멋사 조직이 아니라 본인 계정에 있는 -Fork 레포입니다!

저장소를 찾을 때 목록에서 인하대 멋사 조직 레포 또한 있기 때문에 아까 Fork할 때 이름을 동일하게 설정했을 때 많이들 헷갈려서 과제를 수행하지 못한 경험이 있습니다 ㅠㅠ (그 사람이 바로 저예요)
하단 사진은 인하대 멋사 10기입니다. 이거 누르면 큰일나요

Clone을 완료하면 아까 저희가 지정한 폴더에 가면
이렇게 짜잔하고 fe-week1-fork 디렉토리가 생성되었음을 확인할 수 있습니다!

3. 과제 수행 ON
이제 저장소가 Clone되어 우리 컴퓨터에 저장되었습니다.
여기서 평소처럼 VSC로 코드를 작업하고 저장하세요!
그리고 다시 우리의 깃크라켄으로 가봅시다.

저도 sample Code 몇 개를 만들어봤어요 ㅎㅎ
심심해서 sample.md와 inha.md 파일을 추가했습니다.

4. 과제 제출 ON
이제 과제 제출하러 가보자고요~
깃크라켄 우측창에 익숙한 단어가 보입니다!
저희가 앞에서 샤샤샥 배운 File Status와 Track에 대해서 기억나시죠??

지금 저희는 파일내용을 수정하고 저장한 'Modified" 상태인 파일 2개를 확인할 수 있습니다.

CLI창에서는 git add .으로 모든 파일을 추적하도록 명령합니다.
그 명령어 버튼이 깃크라켄에서 "Stage all changes"입니다!

이렇게 짜잔! 수정한 파일들이 "Staged" 상태가 되었습니다.
이때 머리 속에 스쳐 지나가는 한 문장,,,
"준비됐어, 커밋? 물론이지, 깃."

commit 메세지를 수줍게 한 마디 남겨줍시다.

여기서 잠깐, 개발자 talk를 하자면
프로젝트를 할 때 팀원들과 협업을 하기 때문에 commit 메세지에는 아무말이 아니라 나름의 작성 규칙이 있습니다.
예를 들어서 menu 기능 구현, button 기능 구현, header 추가 등등 팀원들이 알아볼 수 있도록 작성합니다!
커밋 메세지 규칙에 대해서는 다음에 인하대 멋사 FE세션에서 알려드릴게요! ><

이렇게 잘 commit된 것을 확인할 수 있습니다.
저희는 commit만 하면 끝이 아니죠.
내 컴퓨터에서 commit된 변경 이력을 내 Github의 저장소에 업로드하는, PUSH를 눌러줍니다. (상단 메뉴에 버튼있어요)

참고로 깃크라켄 우측창 총정리하면 이렇게 이해하시면 됩니다!

5. Pull Request (PR)

제 계정의 Github 저장소에서 변경된 내용을 저희가 Fork해온 원본 인하대 멋서 10기 조직 내의 오리지널 Github 저장소에 연락을 해야합니다.
저는 고쳤는데 말을 안하면 모르니까 보고를 해야죠
"저는 이렇게 내용을 수정했는데, 이 수정 내용을 원본 저장소 (멋사10기 조직)에 반영해주세요!" 라고 요청, Pull Request를 남깁니다!

제 Github 계정의 저장소에 들어가면 이렇게 알림이 보입니다.
Push가 되었기 때문에, 비교를 하고 원본 저장소에 PR을 보내라는 뜻입니다!

여기서 주의!

step 1. base 클릭
step 2. 본인 (멋사 10기 아기사자) 이름 선택
step 3. compare : 본인이 작업한 브랜치 (보통 master 또는 main)
step 4. Create Pull Request ON

하단에 PR 내용에는 주로 본인이 작업한 과정에 대한 설명을 간단하게 작성합니다!


6. END

짜잔
이렇게 PR이 잘 올라감을 확인할 수 있습니다!!

코드 상 branch 상으로 충돌conflict가 발생하지 않으면
Merge Pull Request라는 버튼이 초록색으로 활성화되면서 성공적으로 과제를 제출하시게 됩니다!!!!
Merge 버튼은 저희 운영진이 합니다ㅎㅎ



우리 인하대 멋사 10기 아기사자분들 파이팅파이팅입니다! git은 원래 에러도 많이 나고 충돌도 많이 나고 항상 난리나는 친구들이니까 혹시 계속 막혀도 당황하지마시고 운영진한테 바로 질문해주세요👍
profile
Seize the Day👩‍💻🔥⏳🐈🐕🙃

1개의 댓글

comment-user-thumbnail
2022년 5월 3일

오 앞으로 fork 할 때 repo name 끝에 -fork 붙여봐야겠어요. 이건 생각 못했었네요 👍

답글 달기