원격저장소로 프로젝트 관리하기 : Github Desktop

 

안녕하세요 콥스랩 기술블로그입니다!

오늘 알아볼 내용은 github desktop이라는 프로그램을 이용하여 내가 진행중인 프로젝트 혹은

다른 사람들과 함께 작업하는 프로젝트를 관리하는 방법에 대해 알아보겠습니다.

 

 

 

1. 들어가며

이런 상상을 해볼까요

철수는 평소에 자신의 사무실에서만 회사일을 작업합니다.

그러다 철수가 할 일이 너무 많아져 이제는 집에서도 작업을 하게 생겼습니다. (불쌍한 철수..)

자, 철수는 어떻게하면 회사에서 하던 작업물을 집으로 가져올 수 있죠?

그리고, 철수는 어떻게하면 사무실에 가지 않고도 자신의 상사에게 작업물을 컨펌받을까요?

 

당장 떠오르는 생각 몇 가지가 있어요.

첫 째, USB에 작업물을 담아서 집에 가져온다 → 작업 후 이메일로 컨펌받는다.

둘 째, 작업물을 압축하여 내 메일로 보낸다 → 집에서 다시 다운로드한다 → 작업 후 이메일로 컨펌받는다.

 

음.. 물론 가능은하죠?

근데 위와 같이 작업을했을 땐 다음과 같은 문제점이 있을 거예요.

 

첫 째, 내가 집에서 작업한 파일들을 다시 USB나 메일로 보내어 회사에서 다시 다운로드 받는다.

이후 집에서 작업할 땐 이런 과정을 반복해야한다.

 

둘 째, 내가 집에서 작업한 파일과 회사에서 작업한 파일을 계속 합쳐가며 일해야한다. 만약, 수정된 파일이 있을 경우 어떤 파일이 있는지 회사 작업물과 내 집 작업물을 비교해가며 교체해야한다.

 

셋 째, 내 작업물을 컨펌해주는 사람도 번거롭게 계속 이메일을 확인해야한다.

 

 

 

 

 

2. GitHub?

 

그런데 우리는 위의 철수처럼 번거롭게 작업할 필요가 없습니다.

GitHub과 같은 플랫폼에 있는 원격저장소를 활용하면 되기 때문이죠!

원격 저장소(Remote Repository)는 코드와 파일을 저장하고 공유하는 데 사용되는 중앙 서버입니다.

쉽게말해 USB대신 이제는 인터넷에다 저장하는 것입니다. 그러면 한결 편리해졌죠?

근데 GitHub은 단순히 코드와 파일만 저장하고 공유하는 기능만 있는 것이아닙니다.

GitHub은 ‘Git’이라는 분산버전관리 시스템을 이용하여 소스 코드 및 파일의 변경사항까지

추적하고 관리해줍니다.

결과적으로 철수는 다음과 같은 스텝을 통해 위의 문제를 해결할 수 있습니다.

 

1. 원격 저장소와의 연동: GitHub을 사용하면 프로젝트를 원격 저장소에 업로드하고 동기화할 수 있습니다. 이를 통해 철수는 회사에서 작업한 내용을 원격 저장소에 저장하여 집에서 해당 내용을 가져올 수 있습니다. 이렇게 함으로써 철수는 USB나 이메일을 이용하지 않고도 작업물을 효율적으로 공유할 수 있습니다.
2. 브랜치 관리: GitHub을 통해 철수는 새로운 브랜치를 생성하고 작업을 진행할 수 있습니다. 이를 통해 여러 기능을 동시에 개발하거나 수정 작업을 분리하여 진행할 수 있습니다. 또한, 브랜치를 합치는 과정에서 변경 충돌이 발생하면 GitHub은 충돌을 감지하고, 변경 내용을 비교하여 철수가 수동으로 충돌을 해결할 수 있도록 도와줍니다.
3. 커밋과 푸시: 철수는 GitHub Desktop을 사용하여 커밋을 생성하고 원격 저장소로 푸시할 수 있습니다. 이를 통해 철수가 집에서 작업한 내용은 커밋으로 기록되고, 해당 커밋을 원격 저장소에 푸시하여 다른 사람들과 공유할 수 있습니다. 이로써 철수는 작업 내용을 정확히 추적하고 필요한 경우 이전 상태로 되돌릴 수 있습니다.
4. 협업과 리뷰: GitHub은 다수의 사용자가 함께 작업하고 코드를 검토하는 데에도 효과적입니다. 다른 사람들은 철수의 원격 저장소를 확인하고 변경 내용을 리뷰할 수 있습니다. 리뷰어는 변경 내용에 대한 의견이나 수정 요청을 철수에게 전달할 수 있으며, 이를 통해 효율적인 협업과 품질 관리를 할 수 있습니다.

 

 

위의 스텝을 따름으로써 철수는 집과 사무실 간의 작업물 전달이 간편해지고, 변경 내용의 추적과 병합이 원활해지며, 협업과 리뷰 과정이 효율적으로 이루어질 수 있습니다.

위의 스텝을 보시면 ‘브랜치’, ‘커밋’, ‘푸시’ 등의 용어들이 있는데요, 이는 Git에 대한 개념들입니다.

아직 Git 개념이 없는 분들에게 설명해드리자면 다음과 같습니다.

 

브랜치 : 브런치가 아니라 브랜치입니다. ‘가지’죠? 나무에서 가지가 자라나는 것처럼 내 작업물에서 가지를 치는 것입니다. 예를 들어 이런경우가 있죠. 내가 현재까지 일하고 있는 작업파일 A가 있는데, 새로운 작업 공간 B를 만들고 싶은거예요. 그러면 우리는 A에 있는걸 복사한다음에 내 다른 워킹 디렉토리에 붙여넣기를 하겠죠? 이렇게하면 A와 B는 독립적인 작업공간이 되므로 서로 영향을 주지 않게 됩니다. 브랜치가 이런 개념이라고 생각하면 될 것 같아요.

 

커밋 : 쉽게말해 내 현재 작업물을 스냅샷 찍어놓는 것입니다. 내 작업물을 스냅샷 찍고 그 내용들을 저장합니다. 그 이후 이어서 작업을 하면 스냅샷과 현재 내 작업물 간에 변화 혹은 차이가 있겠죠? 그러면 Git은 이러한 변화를 감지해줍니다.

 

push&pull : push를하면 내가 로컬에서 commit한 것을 Github과 같은 원격저장소로 전송하여 업로드됩니다. 철수는 사무실에서 원격저장소에 push한 이후, 집에와서 pull합니다. 즉, 원격저장소에 데이터를 전송하고 내려받는 것입니다. 이를 통해 로컬과 원격저장소 간 데이터를 연동하는 것입니다.

 

물론 위의 설명이 아직 Git의 개념을 충분히 설명하진 못했습니다. 그러나 이러한 개념 부분 등은 나중에 따로 다뤄보기로하고 일단은 우선 위기에 빠진 철수를 구하러 가보겠습니다.

 

 

 

 

3. 원격저장소 연동(번거로움에 빠진 철수 구하기)

자 그럼 바로 시작해보겠습니다. 처음부터 끝까지 하나하나 다 보여드릴테니,

처음 하시는 분들은 천천히 따라서 해보시기바랍니다.

 

1) GitHub 회원가입 : https://github.com/

사진처럼 github에 들어가셔서 우측 상단에 있는 “Sign up”을 통해 회원 가입을 해줍시다.

 

 

 

 

 

2) 원격저장소 만들기

아이디를 만든 후 로그인을 합니다.

좌측에 초록색 버튼으로된 “Create repository”를 눌러줍니다.

그러면 아래와 같은 화면이 나오는데요.

 

 

• Repository name : 내가 만들 원격 저장소 이름입니다. 프로젝트 명을 입력해도 되겠죠? 저같은 경우 First-Project라고 입력해보겠습니다.

 

• Description : 해당 레포지토리에 대한 간단한 설명을 적는 공간입니다. “첫 번째 프로젝트입니다.”라고 적어볼까요?

 

• Public / Private : 내 저장소를 전체공개할 것인지 혹은 내가 권한을 준 사람에게만 공개할 것인지 선택합니다. 일단은 Private을 선택해봅니다.

 

• Add a READEME file : 일반적으로 프로젝트의 기본 정보, 사용 방법, 필수 요구 사항, 예제 코드, 라이선스 정보 등을 포함합니다. 프로젝트의 구성과 목적에 따라 추가적인 내용이 포함될 수도 있습니다. 체크를 하고 넘어갑니다.

 

• Add .gitignore : Github을 통해 버전을 관리하고 파일의 변화를 추적해준다고 했죠? gitignore은 추적을 하지 않을 파일 혹은 디렉토리들을 적어놓는 공간입니다. 일단은 아무 것도 건드리지 않고 넘어갑니다.

 

• Choose a liscence : 내가 만든 레포지토리에 작업물에 대한 사용 권한, 배포 조건, 저작권 등을 명시하는 규약입니다. 일단은 넘어갑니다.

 

이후 우측 하단 Create repository 버튼을 눌러줍니다.

 

짜잔! 드디어 우리의 첫 번째 원격저장소가 생성되었습니다!

철수는 이제 여기 원격저장소를 통해 집과 사무실에서도 전혀 번거로움 없이 작업을 할 수 있게 되었습니다.

 

 

 

 

 

 

3) GitHub Desktop 다운로드

자 이제 원격저장소를 만들었으면 내 로컬 컴퓨터와 원격저장소를 서로 연결시켜야합니다.

철수의 경우 집과 사무실 모두에서 각 로컬 컴퓨터를 위 원격저장소와 연결해야겠죠.

두 가지 방식이 있습니다. 첫 번째는 git-bash 등의 터미널을 통해 cli로 조작하는 방법이 있고, 두 번째는 github desktop과 같은 소프트웨어를 통해 gui로 조작하는 방법이 있습니다.

결론부터 말씀드리면 cli가 훨씬 더 많은 기능이 있습니다. 하지만 명령어를 통해 조작하는 방식이 이숙하지 않은 분들을 위해 우리는 GitHub desktop을 이용하여 gui로 조작해보겠습니다.

 

https://desktop.github.com/

위의 사이트를 방문하여 나의 운영체제에 맞는 것을 다운로드합니다.

다운로드가 완료되었다면 조금 전 우리가 만들었던 깃헙 레포지토리로 이동합니다.

내 레포지토리 주소를 복사해줍니다.

 

 

 

 

 

 

 

4) 내 로컬과 연동하기

자 이제 내 컴퓨터로 돌아옵니다.

바탕화면에 폴더를 하나 만들어줄건데요. 어떤 폴더냐면, github 원격저장소에 있는 repository들을 저장할 공간을 내 로컬 컴퓨터에 만들어 줄 겁니다.

“gitRepo”라고 폴더를 만들어볼까요?

 

이후 Github Desktop을 열어줍니다.

 

 

좌측 위 File > Options > Account> Sign in을 통해 깃헙 로그인을 해줍니다.

만약 첫 화면에 Clone Repository가 있다면 바로 clone repository를 눌러주시고,

clone repository가 보이지 않으신다면 아래와 같이 진행해주시면됩니다.

 

 

 

좌측 상단에 보이는 화살표를 누른 후,

 

 

 

Add 화살표를 누른 뒤에 Clone repository를 누릅니다.

 

 

그 이후 URL 탭을 눌러 우리가 복사했던 주소를 넣어준 뒤,

Choose를 눌러 바탕화면에 만들어준 gitRepo를 설정해줍니다.

 

 

 

 

 

 

 

그러면 gitRepo 폴더에 “First-Project”라는 폴더가 생겼습니다!

이 폴더는 여러분의 로컬저장소 역할을 합니다. git을 통해 해당 폴더에 있는 코드들을 관리해줄겁니다. 변화를 감지하고 커밋을 통해 버전을 저장합니다.

GitHub Desktop을 열어보면 좌측 위 Current repository에도 역시 First-Project가 설정 되어있습니다.

자 그러면 이제 여러분의 깃헙 원격저장소와 로컬 저장소가 연결되었습니다.

First-Project 폴더에 들어가보시면 READEME라는 파일이 있는 것을 알 수 있죠. 왜 있을까요? 깃헙 원격저장소를 clone했으니 당연히 원격저장소 내에 있는 파일이 같이 clone된 것입니다.

 

 

 

 

 

5) 집에서 작업한 파일을 원격저장소에 올리기

자 그럼 이제 철수는 집에서도 작업을 할 수 있게 되었습니다!

한 번 테스트를 해볼까요?

코드 에디터(저의 경우 VSC)를 켜봅시다.

Workspace에 우리 로컬저장소를 추가해주면

gitRepo(깃헙으로부터 clone할 레포지들을 저장할 곳), First-Project(원격 저장소 중 하나인 First-Project와 연동할 로컬 저장소, 내 코드변화를 감지해줌)가 보입니다.

 

First-Project 폴더 안에 main.js를 만든 뒤, “main브랜치에서 만들었습니다.”를 입력해봅시다.

 

 

이후 GitHub Desktop을 열어줍니다.

 

 

그러면 이와같이 새로 생성된 파일과 그 내용이 보이죠?

Changes는 내 로컬 저장소에서 Commit한 스냅샷과 현재 내 워킹 디렉토리 간에 변화된 부분을 추적해줍니다. Commit은 쉽게말해 내가 현재 내 디렉토리에 있는 파일들을 줄지어 놓고 스냅샷 찍는 거예요. Changes는 Commit할 파일들을 선별해주는 곳이라 생각하면 편합니다. 파일 옆 체크표시를 활성화/비활성화하여 스냅샷 찍을 파일이나 디렉토리들을 지정/해제하는 거죠. 그 이후 Commit을 누르면 내가 선택한 브랜치(현재로는 main 브랜치)에 스냅샷을 남기는 것입니다. 사실 이를 이해하기 위해선 조금 더 자세한 설명이 필요한데, 오늘은 우선 로컬저장소와 원격저장소 간에 데이터들을 주고받는 것만 말씀드리고 나중에 한 번 특집으로 다뤄보겠습니다.

자 화면에 보이는 것과 같이 Commit 버튼을 눌러줍니다. 그리고 위에 메시지창이 보이는데요, 내가 Commit한 내용(즉, 변화된 파일들이나 코드)에 대해 간략한 제목과 설명을 적는 것입니다.

자 커밋을 하면 이런 화면이 나옵니다.

 

어라? Changes 부분이 비어있네요. 아까 제가 말씀 드렸죠? Changes는 내 워킹 디렉토리와 내 로컬저장소에 커밋한 스냅샷과의 차이를 보여준다고요. 즉, 제가 방금 커밋을 함으로써 현재 로컬 저장소의 기준이 되는 스냅샷은 바로 main.js 파일을 추가한 그 스냅샷이 되는거죠. 그렇기 때문에 워킹 디렉토리와 차이가 없는 것입니다. 자 이제 다시 깃허브 내에 있는 원격저장소를 봐볼까요?

어라라? 분명 저는 main.js라는 파일을 만들었는데 새로고침을 해도 원격저장소에 main.js라는 파일 추가가 안 되었네요? 다시 GitHub Desktop을 열어봅니다.

Commit을 했는데도 원격저장소에 반영이 안 된 이유는요, 저 commit은 단순 내 로컬저장소 내에 스냅샷을 찍는 것입니다. 원격저장소에 내 commit을 보내기위해선 사진 속 Push origin 버튼을 눌러야하는거죠. 자 한 번 눌러보겠습니다.

그랬더니 main.js라는 파일이 생겼고, 2 commits로 추가가 되었습니다!

자 그러면 이제 다른 사람들도 저기 원격저장소에 있는 main.js를 볼 수 있겠죠.

 

6) 원격저장소로부터 변화된 파일 갖고오기

자, 그러면 이런 경우를 생각해볼게요.

철수와 같이 협업을 하는 영희라는 친구가 있다고 해보겠습니다.

둘 다 위의 First-Project 레포지토리를 공유하고 있다고 가정할게요.

영희도 자기네 집에서 작업물을 Push하지 않겠어요?

그런 상황을 한 번 연출해보겠습니다.

 

이번엔 제 로컬에서 파일을 생성해서 GitHub에 push하는 것이 아니라,

GitHub 자체에서 파일을 만들어볼게요. 그래야 영희가 Push한 것과 동일한 효과가 있을테니까요.

자 이런식으로 YoungHee.js파일이 만들어졌고, commit도 이제 3 commits가 되었네요?

GitHub Desktop을 열어봅니다.

아무 변화가 없죠? 근데 가운데 상단에 있는 Fetch origin을 눌러볼까요?

어라? 이제 Pull origin으로 바뀌었네요?

Pull origin을 눌러봅니다.

내 로컬저장소에 이제 YoungHee라는 파일이 추가되었습니다! 그리고 Pull을 함과 동시에 Commit이 자동으로 되어 이제 current commit은 바로 main.js, READEME, YoungHee.js를 포함한 스냅샷이 되겠죠. Fetch origin을 통해 원격저장소에서 변경된 부분이 있는지를 판단한 후, Pull을 통해 변경된 내용을 갖고오는 것입니다. 자 이렇게해서 철수는 영희와 협업을 할 수 있게 되었습니다.

 

4. 마치며

자 드디어 철수는 원격저장소를통해 로컬에서도 데이터를 주고받을 수 있게 되었고, 영희와도 협업할 수 있게 되었습니다. 아직 버전관리, 브랜치 관리, 충돌 관리 등등의 많은 개념들이 남아있는데요. 이러한 개념들은 나중에 한 번 알아보도록 하겠습니다.

나 혼자 작업을 한다고했을 때는 push와 pull만 알아도 일단은 큰 문제는 없겠죠?

철수야.. 집에서도 작업 잘 해야한다?^^

 

이상으로 오늘의 포스팅을 마치겠습니다. 감사합니다.

모든 교육 & 프로젝트 문의는 tfkeras@kakao.com