깃 & 깃허브 사용하는 기본적인 방법 (mac os terminal 기반)

·2022년 11월 9일
12
post-thumbnail

사용하는 운영체제에 따라 깃을 설치했고 깃허브에 가입했다는 전제로 진행합니다.
아직 준비가 안 됐다면 깃을 설치하고 깃허브에 가입하세요.

Intro. 알아야 할 기본 개념

깃과 깃허브의 관계

"깃 설치해서 지금 컴퓨터에서 쓰고 있는데, 왜 깃허브 계정에는 그 프로젝트 폴더가 안 보일까?"
"깃허브에서 레파토리지 만들었는데, 내 컴퓨터에는 어떻게 가져오는 거임? 연동되는 거 맞음?"

깃과 깃허브를 처음 사용하면 이런 생각이 듭니다... 하지만

깃과 깃허브는 엄밀히 말해 같지 않습니다. 깃을 설치했다고 깃허브를 사용할 수 있는 것이 아닙니다. 깃허브를 가입했다고 해서 깃을 사용할 수 있는 것도 아닙니다. 그 둘은 연동되는 것뿐이지 다른 것입니다.

깃은 버전 관리 프로그램입니다. 깃을 사용하면 로컬 환경, 다시 말해 자신이 사용하는 컴퓨터의 하드디스크 어딘가에 저장된 프로젝트를 손쉽게 관리할 수 있게 해주는 툴입니다.

깃허브는 '깃의 허브'입니다. 다시 말해서 로컬에서 깃으로 관리하고 있는 저장소(aka 그냥 프로젝트 폴더라고 생각해도 됩니다)를 인터넷에서도 사용할 수 있도록 하는 클라우드 서비스 같은 거죠. 그런데 구글 드라이브 같은 클라우드 서비스는 따로 버튼을 누르거나 명령어를 입력하지 않아도 무조건 동기화되는데, 깃허브는 그렇지 않습니다.

우리는 깃으로 관리하는 로컬 저장소를 깃허브에서 레파지토리라고 불리는 원격 저장소에 수동으로 연결해야 한다는 것. 파일을 만들거나, 수정하거나, 삭제했다면 또다시 수동으로 변경사항을 적용시켜줘야 하는 것입니다. 이것이 핵심이죠. 버전 관리 시스템인데 자동으로 무조건 동기화된다면 조금 곤란하겠죠?

깃의 구조

깃의 구조는 크게 3분할 되어 있다고 보면 편합니다.
1. working directory (내 로컬 폴더)
2. staging area (작업한 파일을 잠깐 대기시키는 가상의 공간)
3. .git directory (진짜 다 끝났으면 여기로 이동시켜 프로젝트 버전 업!)

위 이미지의 흐름대로 파일은 working directory에서 .git까지 이동합니다.
각 단계에서 다음 단계로 가려면, 명령어를 이용해야 하고
이것이 파일을 드래그에서 드랍하면 바로 동기화되면 클라우드 서비스와는 다른 점입니다.

Step 0. 세팅하기

유저 정보 입력하기

git config --global user.name "깃허브계정이름" 넣고 엔터
git config --global user.email "깃허브가입할때이메일" 넣고 엔터

그리고 정보가 잘 들어갔는지 아래 명령어를 쳐서 확인합니다.
git config --list

레파지토리 만들기

깃허브 홈페이지에 들어가면 레파지토리를 생성할 수 있습니다.
생성 옵션은 아무것도 건드리지 말고 그냥 생성하면 됩니다.

Repository name에 프로젝트 이름을 적든 상황에 맞게 작명하세요.
일단은 만들어두기만 하면 됩니다.

갓 생성한 레파지토리는 아직 제 기능을 못하는 상태입니다.
레파지토리의 힘은 잠시 후에 확인해보죠!

Step1. 로컬에서 git 사용하기

git으로 관리할 폴더 선택하기

깃을 터미널에서 사용하려면 몇 가지 터미널 명령어를 알아야 하지만,
깃을 사용하는 데는 그리 많은 게 필요하지 않아요.

  1. 깃으로 관리하고 싶은 폴더가 있는 경로로 이동해요. (폴더가 없는 경우 만듭니다)
    cd 폴더명을 사용해 원하는 경로로 이동하고,
    mkdir 폴더명을 사용해 내가 있는 현재 경로에 폴더를 만듭니다.
    ls를 사용하면 현재 경로에 있는 폴더나 파일을 확인할 수 있어요.
  2. git init을 치고 엔터!
    현재 위치한 폴더를 git으로 관리하겠다는 뜻입니다.
    이번엔 ls -al를 사용해 .git 폴더가 만들어졌는지 확인하세요.
    .git이 뜬다면 성공입니다!

여기까지만 해도 깃을 사용해 버전 관리를 하는 데 아무런 지장이 없습니다.
하지만 방금 만든 로컬 폴더를 깃허브에서도 확인하고 싶다면,
연동해주는 작업이 필요할 뿐이죠.

Step2. 내가 원하는 로컬 폴더를 깃허브에 연동하기

레파지토리(원격저장소)에 내 로컬 폴더 연동하는 법

깃허브 홈페이지에 들어가 Step0에서 생성한 레파지토리로 들어가봅니다.
여기서 code 버튼을 누르면 아래와 같은 창이 튀어나옵니다.

맥의 경우에는 https 주소로 진행하면 막힙니다. (보안 상의 이유라고 들었어요)
만약 아직 ssh 키를 발급받아 깃허브 계정에 연결시키지 않았다면
이 문서를 참고해 ssh 발급 및 등록을 먼저 해주세요

  1. 창에 뜬 레파지토리 주소를 복사합니다.
  2. 다시 터미널로 돌아와 아래 명령어를 입력합니다.
    git remote add origin 복사한주소
  3. git remote -v를 입력하고 엔터, 아래처럼 fetch, push 부분이 확인되면 연결된 거예요.

자 이제, 내 로컬에서 작업한 것을 깃허브에서도 확인할 수 있게 되었습니다.
물론 수동적으로 명령해줘야만 하지만요.

이제 본격적으로 git을 사용해보겠습니다.

Step3. 실제로 깃 사용하기

파일 만들기

터미널을 이용해 다시 깃으로 관리할 폴더로 다시 들어갑니다. (cd 폴더명을 이용해 이동하세요)
터미널 명령어를 이용해 이 폴더에 파일을 하나 만들어봅니다.

  1. touch 파일명.확장자를 이용하면 파일명.확장자라는 파일이 만들어집니다.
  2. echo 텍스트 > 파일명.확장자를 이용하면, '텍스트'라는 내용을 가진 파일을 만들 수 있어요.

내가 만든 파일을 깃허브에서 확인하는 법

방금 만든 파일은 '로컬'에 만들어진 파일이니까 당연히 깃허브에는 아직 없습니다.
아까 로컬 폴더와 레파지토리(원격저장소)를 연결했지만 말이죠.
깃허브에서도 내 파일을 보려면
add -> commmit -> push 3가지 단계를 거쳐야 합니다.

연습

  1. 먼저 0.txt라는 연습 파일을 하나 만들어봅니다.

touch 명령어로 만들고 ls 명령어로 확인하세요.

  1. git add로 파일을 staging area로 보냅니다.

git add 파일명.확장자를 이용합니다. 지금 경우에는 git add 0.txt가 되겠습니다.
명령어가 잘 먹혔는지 확인합니다.
git status 명령을 입력하면 git의 현 상황을 볼 수 있는데,
Change to be committed 아래 있는 파일이 스테이징 에어리어에 있다는 뜻이에요.

  1. git commit으로 파일을 .git directory로 보냅니다.

git commit을 입력하면 스테이징 에어리어에 있는 파일들이 커밋됩니다.
참고로 git commit -m, "커밋메시지"를 이용하는 편이 훨씬 편합니다.

커밋이 잘 됐는지 확인하고 싶을 때는
git log 명령어를 입력하면 됩니다!

작성자, 커밋 날짜, 커밋메시지를 볼 수 있습니다!
(q를 누르면 다시 터미널 창으로 돌아갑니다)

분명 연동을 해놨지만,
commit을 해도 아직 깃허브 레파지토리에는 적용이 안되어 있을 거예요.
깃허브에서도 변경 사항을 보려면 push를 해야 됩니다!

  1. git push를 이용해 깃허브 레파지토리로 업로드하기
    git push -u origin 브랜치이름을 이용하면 됩니다. 지금 위치한 브랜치 이름이 main이니 이번 경우에는 git push -u origin main이 되겠군요! 아래 이미지처럼 나오면 성공!

이제 깃허브 레파지토리에 가면 0.txt 파일이 뜬 걸 확인할 수 있습니다.


마치며

push를 이용해 로컬 파일을 깃허브 레파토지리에 업로드한 것처럼
pull을 이용해 레파지토리에서 로컬 폴더로 파일을 다운로드할 수 있습니다.

깃허브 레파지토리에서 직접 파일을 추가하거나, 협업을 하지 않는 이상 pull을 사용할 일은 적을 것 같습니디만 다음 게시글에서는 협업을 할 때 pull을 이용하는 방법, 그리고 pull request를 보내는 방법을 적어보려고 합니다.

공부하는 사람이 적은 부족한 글입니다. 이 문서를 너무 신뢰하지는 마세요.


참고자료 : https://www.youtube.com/watch?v=Z9dvM7qgN9s&t=1185s
profile
⛰ 프론트엔드 개발 공부 블로그

0개의 댓글