Intro-
나같은 초심자가 깃과 깃험을 처음 배우다가는 홧병나서 몸져 앓아눕기 쉽다.
뭐가 어떻게 돌아가는건지 왜 이게 안되는건지. (에서 왜 이젠 되는게 없는지 까지 간다...)
하지만 이는 처음부터 깃과 깃헙을 비롯한 모든 생태계를 한꺼번에 받아드리려고 해서 오는 부작용이고
깃의 기초 동작 원리만 잘 깨우치면 사실 가지치기 하면서 그 다음의 영역은 어렵지 않게 받아드릴 수 있다.
그래서 내가 답답해서 만들어 본 '5살에게 가르치는 깃'
가끔 이해가 안 될 땐 그냥 외우는것도 능력이다.
하지만 이정도는 이해하고 써야된다. 그래서 5살에게 가르치는 깃이다.
1.1 깃 설치 및 셋팅
전제조건: 깃이 다운받아져 있다는 전제 하에 글을 작성합니다.
내 컴퓨터 스펙: 맥 M1, iTerm2 사용
맥: git이 자동으로 설치되어있다. iTerm(터미널)도 기본으로 깔려져 있는데 iTerm 2버전은 다운받아야 한다.
iTerm 2 다운받으러 이동하기 https://iterm2.com
윈도우 : git을 따로 다운받아야 한다.
설치나 추가셋팅(zsh 등)같은건 내가 도움을 많이 받았고 아주 쉽게 정리되어있는 얄코님의 링크를 첨부한다.
맥 사용자를 위한 git 설치법 https://www.yalco.kr/_03_mac_terminal/
윈도우 사용자를 위한 git 설치법 https://www.yalco.kr/@git-github/1-2/
1.2 깃에서 오로지 생각해야 할 것 2개
자 설치까지 끝났다면, 시작해보자.
일단 깃헙이 뭔지, 깃과 깃헙이 어떻게 다른지는 생각하지 말자.
일단 깃이 중요하니까 깃이 뭔지부터 알아보자.
깃을 처음 접했다면 알아야 할 두가지 주요 컨셉이 있다.
- 깃은 당신이 치는 코드의 '메모리 카드' 이다.
- 깃은 당신의 컴퓨터 안에서만 일어나는 일이다. 다른 누구와도 연결되어있지 않다.
자 이제 이 주요 컨셉을 가지고, 깃 사용을 시작해보자.
2.1 깃 기초 사용법 - 내 프로젝트에 쓰일 폴더와 파일 생성하기
당신이 혼자 웹사이트를 만드는 프로젝트를 시작한다고 상상하고 따라와야 한다. 상상해야 이해가 쉽다.
시작에 앞서서 당신은 웹사이트를 만드는 과정을 저장하고싶다.
그렇게 함으로써, 중간중간에 뭔가를 말아먹었을 때 말아먹기 전으로 돌아갈 수 있도록 말이다.
(더 이상의 용도는 지금은 생각하지 않기로 한다.)
자 그럼 일단 터미널을 열어보자.
이렇게 보인다. 원래 이렇게 생겼으니 익숙해지자.
그럼 이제 프로젝트에 쓰일 폴더를 만들어보자.
mkdir = Make directory 의 약자이다. mkdir 한 칸 띄고 당신의 프로젝트 이름(폴더명)을 쓰고 엔터를 쳐라.
엔터를 누르면? 내가 보는 화면에서 아무일도 일어나지 않는다.
바로 이게 초심자가 당황하는 부분. 된거야 뭐야?
의심하지 마라.
그 폴더 안으로 이동이 되는지 보면 된다.
이동은 cd 한 칸 띄고 방금 만든 폴더 이름을 쳐주면 된다.
cd=change directory의 약자이다.
그럼 딱 봐도 눈치껏 내가 project_1폴더 안에 들어와있다는걸 알 수 있다.
(당신의 터미널에서는 저 파란색 표시가 있지 않을 수도 있다. 이런 터미널과 관련한 다양한 추가설정들은 '맥 터미널 꾸미기' , 'oh-my-zsh'등등을 키워드로 검색해보면 된다.)
내가 지금 어디에 있는지는 맨 위의 배너에서도 확인가능한데,
이제 나는 project_1 이라는 폴더 안에 들어와있다.
이제 이곳에서 프로젝트에 쓰일 index.html이라는 파일을 만들어보자.
touch 뒤에 index.html 이라는 파일명을 쳐주고 엔터를 눌렀다.(touch가 왜 touch인지는 궁금해하지 말자. 그냥 그런갑다~)
역시나 이곳에서는 아무일도 일어나지 않는다. (ls 라고 치면 폴더 안에 있는 파일 list가 뜬다.)
하지만 실제로 폴더를 찾아 들어가면 안에 파일이 잘 생성되어 있는 것을 볼 수 있다.
요약:
mkdir 한 칸 띄고 폴더이름 쳐서 프로젝트에 쓰일 폴더생성하기.
cd 한 칸 띄고 폴더이름 쳐서 방금 당신이 만든 폴더로 이동하기.
touch 한 칸 띄고 파일이름 쳐서 새로운 파일 생성해보기.
2.2 깃 기초 사용법 - 깃에게 이 프로젝트 관리하라고 시키기
자 이렇게 폴더가 생성되었으니, 본격적으로 깃을 이용해서 이 프로젝트를 관리해보자.
이제부터는 앞에 'git'이라고 함께 쳐줘야 하는 경우가 많은데, 알라딘의 요술램프에서 '지니'를 부르는거랑 똑같다고 생각해라.
폴더와 파일 만드는거는 내가 내 컴퓨터 안에 만드는거지만, 그걸 깃에게 관리하라고 시키는거니까 git을 한번 불러줘야 한다!
git init 이라고 터미널에 쳐본다. (git 한 칸 띄고 init)
맨 밑에 Initialized empty Git repositoty in /User/zzihyun/project_1/.git 이 보이는가?
당신이 방금 git init을 침으로써 '깃, 이 폴더 니가 관리 해줘!' 라고 명령을 해줬기 때문에
깃이 반응해서 'ㅇㅋ 이제부터 이 폴더 내가 관리할게.' 라고 말하는거다.
저기 보이는 master는 당신이 이제부터 관리하게 될 시간여행의 이름이다.
이 master라는 이름은 기본적으로 지정되어있다. 하지만 최근 master가 가지고 있는 의미가 문화적으로 예민한 문제 (노예시절의 master와 slave관계에서 오는 종속적 의미)와 닿아있어 'main'으로 바꿔서 사용하기를 권장하는 추세이다. 저 사진 속 긴 노란색 영어들은 깃에서 '왠만하면 main으로 이름 바꿔 써~ 바꾸는 방법은 이거야~' 라고 말해주는 거임.
이제 당신을 도와주는 시간여행자의 이름이 main으로 바뀐 것을 확인할 수 있다.
여기까지 잘 따라왔으면, 이제 준비는 끝났다.
3. 1시간여행의 시작 - 내가 원하는 순간을 저장해보기
이제 프로젝트를 진행하면서, 내가 원하는 곳에 언제든지 돌아올 수 있게 순간순간을 저장(커밋)하는 방법을 알아보자.
아래 두 명령어는 외워야 하는데, 어차피 앞으로 자주 사용하며 외워질 것들이다.
- add .
- commit -m '남기고싶은 메세지'
add .
실제로 무슨 내용을 저장하고싶은건지 말해주는거다. add 뒤에 따로 내가 저장하고싶은 폴더만 지정해 줄 수 있으나, 지금은 거기까지 생각하지 않기로 한다.
add 한 칸 띄고 점을 찍음으로서, 이 폴더 안에서 발생된 모든 변경사항들을 저장하고싶다고 말해줄 수 있다.
commit -m ‘남기고싶은 메세지’
실제로 내가 add를 사용해서 지정한 내용들을 실제로 메모리에 commit한다(등록하다,저장하다,반영하다정도의 느낌) 라고 생각하면 된다. -m 은 어떤 메세지(message)를 남길건지? 정도로 이해하면 된다.
결국은 commit 한 칸 띄고 -m 한 칸 띄고 '남기고싶은 메세지' (작은따옴표, 큰따옴표 상관없다) 를 적어주면,
지금까지 당신의 작업이 담긴 파일들이 main이라는 시간여행자에게 '남기고싶은 메세지' 이름으로 저장 완료되었다!
아까 폴더에 index.html파일을 만들었던 것을 기억하는가?
지금 이 상태를 add . 를 쳐줌으로서 지금까지 있었던 모든 변화들을 저장하고싶어! 라고 말해준 다음
이후 commit -m 'first-commit' 라고 커밋을 해주겠다. (commit 한칸 띄고 -m 한 칸 띄고 '메세지')
자, 사실 1 file changed라는 말을 봐도 이게 실제로 된건지 안된건지는 잘 모르겠다.
그럴때는 git log (깃, 로그를 보여줘!) 라고 명령하여 로그(기록)을 열어볼 수 있다.
어마무시한 길이의 commit 이름으로 first-commit이 기록되어있다.
이제 열심히 작업을 하다가 또 저장하고싶은 순간이 왔다?
그럼 그 순간마다 터미널을 열고 add . 와 commit -m '남기고싶은메세지' 를 반복해주면 된다.
여기서는 이해를 위해 이건 망했어.. 돌아가자! 라는 문구를 추가하고 다시 커밋을 해주겠다.
이런식으로 내가 저장하고싶은 순간순간을 계속 commit해주며, 프로젝트를 진행한다.
3.2 깃의 꽃 - 원하는 곳으로 시간여행을 해보자
자, 프로젝트를 진행하다가 뭔가 꼬였다. 그래서 과거 한 순간으로 돌아가고싶다.
지금의 경우에는 이건 망했어... 돌아가자! 의 변화를 주었던 second-commit 이전의 상태로 돌아가고싶다.
그리고 여기서, 과거로 돌아가는 방식은 크게 두 가지, revert와 reset으로 나뉜다.
3.2.1 revert - 이제까지의 과거기록은 남겨둔 상태로, 원하는 시점으로 되돌리기
revert는 second-commit에서 줬던 변화를 정확히 반대로 주는 커밋을 하여,
과거의 모든 기록들은 남겨둔 상태로 내가 되돌리고싶은 시간으로 되돌아간다.
말로 들으면 헷갈리니 직접 해보자.
나는 이건 망했어! 글을 추가했었던 두 번 째 커밋을 revert 하고싶다.
그때는 log에 들어가서, 취소하고싶은 commit의 이름을 복사한다.
이후 로그 밖으로 나와서, git 한 칸 띄고 revert 한 칸 띄고 복사한 커밋의 이름을 붙여넣기 하고 엔터해준다.
(지니야, e629230c095 revert해줘!)
그럼 아래와 같이 이건 무슨 메세지로 저장할건지 말해달라는 페이지가 뜬다.
:wq 라고 치고 엔터를 누른다. 이는 원래 메세지 (여기서는 second-commit) 그대로 저장할게~ 라는 뜻이다.
그리고 다시 로그를 들어가보자.
로그 맨 위에 "second-commit" 이름으로 Revert가 진행되었다는 하나의 새로운 커밋이 생긴 것을 볼 수 있다.
내가 선택했던, 취소하고싶은 커밋과 정확히 반대되는 변화를 주는 '새로운 또 하나의 커밋'이 발생한거다.
revert가 잘 되었는지 확인하기 위해 index. html 파일을 열어보자.
이건 망했어... 돌아가자! 가 없어진 상태 (first-commit의 상태)로 온 것을 볼 수 있다.
revert의 특성 중 한가지는, 내가 지웠던 과거 행적이 그대로 남아있기 때문에, 다시 revert를 사용하여 망했던 시점으로 또 돌아갈 수 있다는 것이다.
3.2.2 rest - 과감하게, 돌아갈 과거 이후의 모든 행적은 삭제해버리자
reset은 내가 원하는 시점으로 돌아가고 그 이후의 커밋(로그)은 모두 삭제해버린다.
그렇기 때문에 revert처럼 취소한 걸 다시 복구하고싶다고 돌아올 수 있는게 아니다.
협업시에는 그동안 계속 commit을 통해 변경과정을 저장해두었을텐데 그 과정이 통째로 사라지는거니 유의해야 한다.
revert에서는 내가 취소하고싶은 commit 이름을 복사해주었다면,
reset에서는 내가 돌아가고싶은 commit 이름을 복사해준다.
로그를 열어서, 내가 돌아가고싶은 commit (여기서 first commit) 이름을 어느정도 복사해준다.
그 다음 git 한 칸 띄고 reset 한 칸 띄고 복사한 커밋의 이름을 붙여넣기 해주고 엔터.
(지니야, 1d7894b9 시절로 리셋해줘!)
엔터를 치고 로그를 다시 열어보자.
이제 돌이킬 수 없다. (실은 있지만 지금은 이해를 위해 없는거라고 생각하자.)
first-commit 이후 모든 커밋들은 사라졌다.
마찬가지로 잘 된건지 파일을 열어보자.
이렇게 결과만 놓고 보았을 때는 revert 과reset이 같지만, log를 열어보았을 때 내가 원하는 시점으로 다시 돌아갈 수 있는지 없는지가 가장 큰 차이점이라고 볼 수 있다.
revert는 여전히 로그가 남아있기에 원하는 커밋으로 갈 수 있고,
reset은 되돌린 시점 이후는 사라진 과거가 되기 때문에 돌아갈 수 없다는 것!
4. 정리
오늘 글에서는
- 깃으로 폴더와 파일 만드는 법, (mkdir / cd / git init)
- 커밋하는 법, (git add . / git commit -m '메세지' / 로그보기 git log)
- 망했을 때 되돌아가는 법 (git revert 커밋이름 / git reset 커밋이름)
을 정리해보았다.
사실 이게 깃의 가장 기초이자 핵심기능이기 때문에 이 부분을 이해하는게 가장 중요하다고 생각한다.
이걸 잘 이해하고 활용할 수 있다면, 앞으로 필연적으로 만나게 될 branch(가지치기) 개념이라던지
commit한 내용들을 깃헙에(드디어 나왔다!) push해서 올리는 방법은 그리 어렵지 않게 습득할 수 있으리라 생각된다.
5. 하고싶은 말(일기에 가까운.)
나와같이 뭐가 어떻게 돌아가는건지 아예 감도 오지 않는 사람에게 도움이 되었으면 해서
또 내가 한번 더 이해하기 위해 글을 작성했다.
깃과 깃헙으로 몇 날 며칠 삽질하며 느낀 점 한가지는,
- 깃은 생각보다 친절하다
- 결국 된다
라는거다.
우선 깃에서 뭔가 내 뜻대로 안되고 긴 영어와 함께 오류가 날 때, 당황하지 말고 깃이 뭐라고 말해주는지 천천히 읽어보자.
생각보다 친절하게 '지금 뭐가 문제니까, 뭐를 한번 알아보던지 아니면 이거 그대로 복사붙여넣기 해 봐.' 라고 알려준다.
당신이 깃을 배운다는 뜻은 어찌됬던지 컴퓨터랑 친해지고 싶은 사람이라는 의미인데, 컴퓨터가 뭐라고 하는지 들어야 한다.
검색으로 문제를 해결하면 기분이 좋지만, 검색 없이 컴퓨터와 대화만을 통해서 문제를 해결하는 기분은 정말이지 짜릿하다.
하지만 당연히 우리는 5살이라 해결이 어렵다. 그때는 에러 메세지를 구글에 복붙~
두번째로 죽어도 해결 안될 것 같고 머리 터질거같은 문제도 결국엔 된다.
사실 필자는 부트캠프를 진행하고 있어서 그냥 바로 붙잡고 가르쳐달라고 하면 친절하게 알려주실 멘토님 및 강사분들이 계신다.
그런데 '질문을 잘 하는 주니어개발자' 가 되고싶어서 '내가 어떤걸 하려고 했고 어떤 오류가 났으며 이런 해결책을 시도를 했는데 안되었다~' 라고 정리를 하는 과정에서 생각보다 많은 문제가 스스로 해결됨을 경험했다.
그러니 꼬여서 안되는 문제들은, '나는 질문을 잘 하는 개발자다'라고 스스로를 브레인워시하면서 처음부터 안됬던 과정들과 내가 무엇을 시도했는지 쭉 정리해봐라. 정리하는 과정에서 해결되면 스스로 문제를 해결했으니 성장한거고, 해결이 안되었다 해도 잘 정리된 질문을 할 수 있어서 좋지 아니한가?
오늘도..개발자 꿈나무 파이팅!
'Front-End Developer > Computer Science' 카테고리의 다른 글
규모가 크지 않은 팀프로젝트의 git-flow전략(+인프런 강의영상) (0) | 2022.06.21 |
---|---|
면접관님: 메세지 큐와 이벤트루프가 뭔지 아시나요? (+ 유투브) (2) | 2022.06.15 |
면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브) (0) | 2022.06.15 |
node nodemon 설치시 code E404오류 해결 (0) | 2022.04.15 |
URL, IP, PORT를 쉽게 표현해보자. (0) | 2022.04.02 |