React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 3 (Git을 사용해보자)

Git을 사용해 버전 관리를 해보자!

이전 게시글에서 자동완성 기능을 만들어 보았는데 일부분 기능 구현이 되었으니 Git을 사용해 버전 관리를 해보려 한다.

 

Git이란 무엇이냐... 분산 버전 관리 시스템중 하나인데 이것에 대해서는 인터넷에 이미 굉장히 많은 글들이 친절히 알려주고 있으니 생략하도록 하겠다. 검색을 해 보시길 권장드림.

그래도 검색을 하기 귀찮아하시는 분들을 위해... 

내가 공부할 때 자주 보는 드림코딩 채널의 Git에 관련된 링크를 남겨 놓도록 하겠다.

 

https://www.youtube.com/watch?v=lPrxhA4PLoA&t=29s - Git, Github이 무엇일까.

https://www.youtube.com/watch?v=Z9dvM7qgN9s&t=2378s - Git 초기 설정 및 Commit 해보기

 

간단히 정리해보자면 Git을 사용하는 이유는 다음과 같다.

• 효율적인 협업이 가능함.
• 버전 및 배포관리 하기에 용이함.

우선 내가 알고있는 내용을 끄적여 보자면

코딩을 하다가 중간에 그 순간의 버전을 저장시킨다. 이후 쭉 작업을 하다가 버그가 발생하거나 그때 그 버전이 필요하다! 하면 그 지점으로 돌아갈 수 있다.

 

그렇다면 그 지점을 저장하는 법을 알아야 될텐데 그 방법과 추가적으로 Github의 내 코드들의 저장소인 Repository에 연결하는 법까지 간단히 기록해보겠다.

Git 설치 방법은 위의 링크로 설명을 들을 수 있음.

 

Git commit 하기

git에 관한 사용법 및 명령어는 굉장히 많고 다양한데 나도 그 부분은 공부를 지속적으로 해야 되는 부분이고

일단 내가 사용하는 commit하는 방법은 굉장히 간단하다.

 

우선 해당 위치로 들어가야

터미널에서의 현재 위치를 내가 사용하고 있는 폴더에 맞추는 것이 중요하다. 그렇지 않으면 엄한 곳에 commit이 되어 쓸모없게 돼버릴지도...

터미널에서 특정 위치로 한 단계 들어가는 법은

cd를 이용하면 된다. 예를 들어

이번 프로젝트를 나는 '냉장고 털기'라는 폴더에 작업을 하고 있는데 create-react-app으로 프로젝트를 생성하면서 refrigerator라는 폴더가 하나 더 생겼다.

현재 내가 '냉장고 털기'에 있었으므로 터미널을 통해 refrigerator로 들어가야 하는데 이때 명령어는 다음과 같다.

cd refrigerator

그러면 현재 위치는 ./냉장고털기/refrigerator 가 된다.

이처럼 cd는 현재 위치의 하위 폴더로 한 단계 들어갈 때 사용한다.

 

git init

해당 위치로 이동하였으면 git 저장소 생성을 위한 초기화를 진행하여야 한다. 간단하게 터미널에 git init을 입력하면 된다. 명령어를 입력하면 파일이 저장되어 있는 폴더에 들어가 보면 .git 이라는 폴더가 생성되어 있는 것을 확인할 수 있다. ( 숨김으로 표시되어 있으니 파일 보기를 숨김표시로 설정하면 확인할 수 있음).

이렇게 하면 git을 이용할 준비가 되었다.

 

 

git status

원하는 위치로 이동하였으면 내가 새롭게 Commit 할 데이터가 있는지 확인을 해야 한다. 

Commit 할 내용도 없는데 Commit 해버리면 의미가 없어지게 되니 말이다.

그 확인 명령어는 git status 이고 실행하면 다음과 같은 메시지를 받을 수 있다.

해당 파일이 아직 commit 되지 않았다는 메시지

최근 API작업을 하면서 위의 빨간 글씨의 파일들을 수정하였는데 해당 파일이 아직 commit 되지 않았다는 메시지이다.

그러면 '아 이것들이 커밋 가능한 내용이구나' 한번 쓱 봐주고

commit 할 파일에 추가를 해주어야 한다. 하단에 git add 하세요 라고 친절하게 쓰여있는 것이 보일 텐데

맞다 git add 를 이용하여 파일을 추가해준다.

 

 

git add

$ git add src/service/naver_search.js // 특정 파일 추가
$ git add * // 모든 파일 추가
$ git add . // 모든 파일 추가

$ git add src/service/naver_search.js 와 같이 파일 경로와 파일명을 적어주면 되는데

나 같은 경우는 변경된 모든 파일을 추가할 것이기 때문에

$ git add * 를 입력하여 모든 파일을 추가하였다.

$ git add . 도 모든 파일을 추가하는 명령어라고 하는데 써보진 않았음..

Commit을 원하는 파일을 모두 추가한 후 확인을 한번 더 해보고 싶다면 git status 명령어를 이용하자.

 

git commit

이제 진짜 Commit을 해보자. Commit을 하는 명령어는 무엇일까? 맞다 commit이다.

$git commit -m '나중에 이 버전을 알기 쉽게 설명을 적는다'

찾아보니 -m의 m은 메시지의 약자라고 한다.

이렇게 설명을 적어놓으면 해당 버전을 알아보기가 쉽다. 

이전에는 무식하게 만들고 commit 하고 반복만 하느라 commit 내역과 설명을 들여다볼 기회가 없었는데 최근에 Sourcetree를 한번 사용해 보면서 내가 commit 한 내역들을 볼 기회가 있었다.

Sourcetree에서의 commit 내역

위에 보이는 것처럼 적어 놓은 설명대로 잘 저장되어있는 모습.

설명을 잘 적어 놓아야 나중에 찾기 쉬울 것이다.

일단 위의 사진은 내가 적어놓은 것들인데 가독성도 그렇고 설명을 좀 대충적은 감이 없지 않아 있다고 느낀다.

이렇게 하면 commit은 끝. 

 

이어서 repository에 연동하는 방법을 알아보자.

 

Repository에 연결해보기

연결을 하기 위해선 원격 repository를 만들어 놓아야 한다. 원격 repository는 다르게 말하면 말 그대로 원격저장소인데, 보통 github에 원격 저장소를 만들어 남들과 코드를 공유할 수도 있고 협업을 할 때에도 해당 저장소를 사용하면서 완성도 높은 프로젝트를 진행해 나갈 수 있다.

 

나는 refrigerator라는 repository를 만들어 두었다. 그런 후 해당 repository의 URL을 복사해둔다.

다음은 git remote에 자주 쓰이는 명령어들이다.

$ git remote -v // 연결 URL 확인
$ git remote add origin 'repository URL (아까 복사해둔것)' // URL 연결하기
$ git remote remove repository이름 // 연결 끊기

현재 저장소가 연결되어 있다면 git remote -v 명령어를 통해 연결되어 있는 저장소 URL을 확인할 수 있다. 하지만 처음 연결하는 것이라면 해당 명령어로 아무 결과도 나오지 않을 것임.

git remote add origin '아까 복사해둔 URL'을 입력하면 해당 repository로 연결되는 모습을 볼 수 있다.

여기서 origin이 무엇이냐. origin이란 최초로 연결시킨 저장소를 의미한다. 나 같은 경우에는 refrigerator가 origin이 된다.

연결을 끊고 싶다면 $git remote remove repository이름 을 입력하면 되는데 나 같은 경우에는 저장소가 origin 이므로 git remote remove origin을 하면 되겠다.

 

마무리

git을 사용함에 있어서 굉장히 많은 명령어가 존재한다. 위에 제시한 명령어 외에 내가 알고 있는 것들로는 push, pull, merge(사용해보지는 않음) 등이 있는데 실무에서 협업을 하게 된다면 굉장히 많이 사용하는 시스템이기 때문에 미리미리 공부를 해 놓아야 나중에 헤매지 않겠다 라는 생각을 글을 적으면서 다시 한번 해보았다.

참... 아직 모르는 것들이 너무 많은 것 같다.