깃/깃허브 협업 기능 및 명령어를 실제 업무에서 발생할 법한 시나리오 기반으로 실습해봅니다. 팀 프로젝트 내에 요구사항이 등록되고, 해당 요구사항이 개발되어 반영되는 과정을 실제로 따라해봅시다.
6.1 프로젝트 소개
실습을 진행할 프로젝트를 간단히 알아봅시다. 이번 실습에서는 프로젝트의 이슈 관리를 위해 깃허브 프로젝트 보드의 자동화된 칸반automated kanban을 사용합니다. 이 실습을 진행하기 위해 등장하는 인물에 대해 간략히 설명합니다. 기호랑 희진은 한 팀으로 동일한 프로젝트에서 협업하고 있습니다.
기호 계정(must-have-developer)은 1단계에서 생성해 사용했죠? 미정 계정은 여러분 개인 계정으로 대체해서 사용하시면 됩니다. 희진 계정(must-have-developer-2)은 이번 장에서 함께 만들어볼 겁니다.
6.1.1 현재 프로젝트 확인하기
실습을 진행하기 전, 현재 프로젝트의 애플리케이션 상태를 확인합시다. 코드는 다음과 같습니다.
<html>
<head>
<title>운영팀 웹 어드민 시스템 v1</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>운영팀 웹 어드민 시스템 v2</h1> <p>Welcome to 운영팀 웹 어드민 시스템 v1</p>
</body>
<footer>
<p>연락처: 1111-2222</p>
</footer>
</html>To Do 01 mastering-git-github 프로젝트를 열고 터미널에서 다음 명령어를 실행하여 express 서버를 실행합니다.
mastering-git-github % npm start
To Do 02 웹 브라우저를 열고 localhost:3000/에 접속하여 애플리케이션을 확인합니다.
STEP 1 6.2 협업 시나리오 준비 작업
이번 협업 시나리오에서는 3장에서 사용한 mastering-git-github 저장소를 사용합니다. 본격적으로 진행하기에 앞서 협업자 계정을 등록, 프로젝트 보드 생성, 이슈 라벨 생성 작업을 진행해 봅시다. 준비 작업에 대한 상세한 내용은 4장 ‘협업을 위한 깃허브 기능 살펴보기’를 참고하세요.
To Do 01 협업자 계정을 등록합니다.
본 실습을 위해 깃허브 mastering-git-github 원격 저장소에 must-have-developer-2 계정을 협업자Collaborator로 미리 등록합니다. 4장에서 학습한 것처럼 깃허브 원격 저장소의 협업자는 ❶ → ❷ → ❸ 메뉴를 이용하여 등록할 수 있습니다.
To Do 02 깃허브 mastering-git-github 원격 저장소에서 ❶ → ❷ 를 클릭합니다. ❸ 을 ‘Operation v1’으로 채우고 → ❹ 에서 Automated kanban 선택 → ❺ 를 클립합니다. (새로 생성된 보드에 기본 제공되는 이슈를 지워주세요).
To Do 03 이제 operation이라는 새로운 이슈 라벨을 생성합니다. 4장에서 학습한 것처럼 원격 저장소의 탭을 통해 생성하거나 이슈 생성 화면의 항목에서 생성하면 됩니다. 여기서는 ❶ → ❷ → ❸ 을 클릭하고 → ❹ 에 ‘operation’을 입력하고 → ❺ 을 클릭해 생성했습니다.
STEP 2 6.3 우리팀 저장소에 이슈 등록하기 : 개발자 기호
• 메인 페이지 설명 추가 : 접근 권한이 필요하신 분은 운영팀에 문의해주세요.
• 메인 페이지 연락처 추가 : 이메일 주소
• 메인 페이지 연락처 추가 : 이메일 주소
현재 기호는 작업 중인 일이 있어서 프로젝트 원격 저장소에 이슈를 등록하여 동료들에게 공유하기로 결정했습니다. 참고로 기호가 속한 팀은 깃허브 원격 저장소에 자동화된 칸반 유형의 프로젝트 보드를 생성하여 일을 관리하고 있습니다. 또한, 메인 페이지의 내용을 간단히 수정하는 요구 사항이기 때문에 2가지 요구사항을 1개의 이슈로 처리하기로 했습니다.
다음과 같은 순서로 진행합니다.
❶ 원격 저장소에 이슈 생성
❷ 프로젝트 보드에서 생성된 이슈 확인
❷ 프로젝트 보드에서 생성된 이슈 확인
깃허브 원격 저장소에 이슈를 생성합시다.
To Do 01 깃허브에 mastering-git-github 원격 저장소에서 ❶ → ❷ 를 클릭합니다.
To Do 02 기호는 ❶ 제목과 ❷ 내용을 작성한 후 → ❸ 를 클릭해 팀 관리자인 미정에 게 이슈를 할당했습니다(미정은 이슈를 확인 후, 개발을 진행할 팀원에게 해당 이슈를 다시 할당하겠죠?). 또한, 기호는 해당 이슈가 운영팀에서 전달됐기 때문에 ❹ 에서 operation 라벨을 → ❺ 에서 현재 업무를 관리하는 프로젝트 보드인 ‘Operation v1’을 선택합니다. ❻ 를 클릭해 이슈를 생성합니다.
그러면 다음과 같은 화면이 보입니다.
이슈를 생성하면서 프로젝트 보드를 지정했기 때문에 ❼ → ❽ 을 클릭하면 생성된 이슈를 바로 확인할 수 있습니다.
이제 팀의 의사결정을 기다리면 됩니다. 기호는 편한 마음으로 진행 중인 개발을 마무리하기로 합니다.
STEP 3 6.4 우리팀 저장소에 이슈 개발 후 반영하기 : 개발자 희진
희진은 작업 중인 개발을 마무리해서 다음 업무를 찾기 위해 프로젝트 보드에 접속합니다. 기호가 등록한 이슈가 개발자에게 할당되어 있지 않은 걸 발견했습니다. 본인이 처리하려고 마음을 먹었습니다. 희진이 어떻게 처리하는지 따라가 봅시다.
작업 순서는 다음과 같습니다.
1 원격 저장소 프로젝트 보드에서 미해결 이슈 확인
2 원격 저장소를 지역 저장소에 복제 : git clone
3 새로운 작업 브랜치 생성 및 코드 수정 : git branch, git add, git commit, git push
4 풀 리퀘스트 생성 및 동료들에게 검토 요청
2 원격 저장소를 지역 저장소에 복제 : git clone
3 새로운 작업 브랜치 생성 및 코드 수정 : git branch, git add, git commit, git push
4 풀 리퀘스트 생성 및 동료들에게 검토 요청
To Do 01 깃허브 mastering-git-github 원격 저장소에서 ❶ → ❷ 을 클릭합니다.
To Do 02 Todo에서 진행되지 않은 이슈 ❶을 클릭해 ❷ 내용을 확인합니다.
To Do 03 버튼을 클릭하여 이슈 상세 정보를 확인합니다.
To Do 04 이슈 상세 정보에서 를 클릭해 희진 본인으로(must-have-developer-2) 변경하여 팀원들에게 본인이 진행하는 중임을 알립니다.
To Do 05 ❶ → 을 클릭합니다. ❷ 에 있는 해당 이슈를 마우스로 드래그하여 → 작업 상태열에 드롭합니다(팀원들에게 작업이 시작되었음을 알리는 겁니다).
To Do 06 원격 저장소의 프로젝트를 지역 저장소에 복제합니다.
mastering-git-github 원격 저장소는 기호가 생성하고 관리했습니다. 즉, 희진의 지역 저 장소에는 아직 해당 프로젝트가 존재하지 않는 상황이죠. 그래서 희진은 해당 원격 저장소를 git clone 명령어로 지역 저장소에 복제합니다(2.6절 ‘원격 저장소 복제’ 참고)
❶ 원하는 위치에 git-github-programming-2 루트 디렉터리를 생성합니다.
❷ 깃허브 원격 저장소의 주소를 복사합니다.
❷ 깃허브 원격 저장소의 주소를 복사합니다.
❸ 터미널 창을 열고 ❶에서 생성한 위치에서 git clone 명령어를 실행합니다.
git-github-programming-2 % git clone https://github.com/must-have-developer/ mastering-git-github.git Cloning into 'mastering-git-github'... remote: Enumerating objects: 61, done. remote: Counting objects: 100% (61/61), done. remote: Compressing objects: 100% (38/38), done. remote: Total 61 (delta 23), reused 55 (delta 19), pack-reused 0 Unpacking objects: 100% (61/61), done.
이제 희진은 지역 저장소에 mastering-git-github 원격 저장소 복제를 완료했습니다. 비주얼 스튜디오 코드에서 해당 프로젝트를 열고 다음 작업을 진행합시다.
To Do 07 이제 실습 프로젝트의 터미널 창을 열고 해당 이슈를 처리할 작업 브랜치를 생성 후 이동합니다.
❶ 새로운 브랜치를 생성합니다.
mastering-git-github % git branch feature/change-main-content
❷ 생성한 브랜치로 작업 브랜치를 변경합니다.
mastering-git-github % git checkout feature/change-main-content Switched to branch 'feature/change-main-content'
To Do 08 이슈에 작성된 요구사항에 맞게 index.html 파일에서 ❶과 ❷ 코드를 추가합니다.
<html>
<head>
<title>운영팀 웹 어드민 시스템 v1</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>운영팀 웹 어드민 시스템 v2</h1>
<p>Welcome to 운영팀 웹 어드민 시스템 v1</p>
<p>접근 권한이 필요하신 분은 운영팀에 문의해주세요.</p> <!-- 1 -->
</body>
<footer>
<p>연락처: 1111-2222</p> <p>operator@abc.com</p>
</footer>
</html>To Do 09 코드 수정을 완료했으니 새로운 커밋을 생성합니다.
❶ 수정한 파일을 추가합니다.
mastering-git-github % git add .
❷ 새로운 커밋을 생성합니다.
mastering-git-github % git commit -m "Change content in main page" [feature/change-main-content 886cd75] Change content in main page 1 file changed, 2 insertions(+)
To Do 10 이제 동료들의 피드백을 받기 위해 작업 브랜치를 원격 저장소에 반영합니다.
mastering-git-github % git push origin feature/change-main-content Enumerating objects: 7, done. Counting objects: 100% (7/7), done. Delta compression using up to 4 threads Compressing objects: 100% (4/4), done. Writing objects: 100% (4/4), 497 bytes | 497.00 KiB/s, done. Total 4 (delta 2), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (2/2), completed with 2 local objects. remote: remote: Create a pull request for 'feature/change-main-content' on GitHub by visiting: remote: https://github.com/must-have-developer/mastering-git-github/ pull/new/feature/change-main-content remote: To https://github.com/must-have-developer/mastering-git-github.git * [new branch] feature/change-main-content -> feature/change-main- content
To Do 11 무사히 원격 저장소에 반영되었으니 깃허브에서 풀 리퀘스트를 생성합니다. ❶ [Pull requests] → ❷ [New pull request]를 클릭합니다.
❸ 기준 브랜치(main)와 작업 브랜치(feature/change-main-content)를 선택한 뒤
❹ 를 클릭합니다.
❺ 아이콘을 클릭→ ❻ 팝업창에서 관련 이슈(메인 페이지 실행 및 연락처 추가)를 클릭해 본문에 참조합니다. ❼ 클릭 → ❽ 리뷰할 동료(must-have-developer)를 지정합니다. ❾ 를 클릭합니다.
에서 기호로 지정했습니다. 추가로 풀 리퀘스트 생성 시 본문에서 #을 입력하면 아이콘을 누르지 않고도 관련된 이슈를 참조하도록 작성할 수 있습니다.
To Do 12 풀 리퀘스트와 이슈를 연결해보겠습니다.
❶ 클릭 → ❷ 해당 이슈를 클릭(메인 페이지 설명 및 연락처 추가)합니다.
❸ 클릭 → ❹ 생성한 풀 리퀘스트(Change content in main page)를 클릭합니다.
이렇게 이슈와 관련된 풀 리퀘스트를 연결하면, 해당 이슈가 어떻게 진행되고 있는지를 동료들에게 공유할 수 있습니다.
이제 남은 일은 기호의 피드백을 받고 해당 풀 리퀘스트를 기준 브랜치에 병합하여 반영하는 일입니다.
STEP 4 6.5 풀 리퀘스트 검토 및 승인
❶ 기호 : 희진이 생성한 풀 리퀘스트 검토
❷ 희진 : 기호에게 승인받은 풀 리퀘스트 변경 내역 병합
❸ 원격 저장소의 최신 변경 내역 반영 : gitpull
❷ 희진 : 기호에게 승인받은 풀 리퀘스트 변경 내역 병합
❸ 원격 저장소의 최신 변경 내역 반영 : gitpull
To Do 01 기호는 ❶ 클릭 → ❷ 희진이 생성한 풀 리퀘스트(Change content in main page)를 클릭합니다. ❸ 변경된 코드를 확인 후 → ❹ 를 클릭합니다. ❺ 리뷰한 내용을 적습니다. ❻ 를 클릭하여 풀 리퀘스트를 승인합니다.
To Do 02 희진은 이제 승인받은 풀 리퀘스트를 기준 브랜치에 병합합니다.
❶ 클릭 → ❷ 희진이 생성한 풀 리퀘스트(Change content in main page)를 클릭합니다.
❸ 를 클릭합니다.
❹ 검토 내용을 확인하고 → ❺ 를 클릭해 코드를 병합합니다.
풀 리퀘스트에 관련 이슈를 연결했기 때문에 병합이 완료되면 자동으로 해당 이슈가 닫힙니다. 또한 다음 그림과 같이 해당 프로젝트 보드에서도 자동으로 작업 상태열로 이동 합니다.
To Do 03 새로운 기능이 원격 저장소의 기준 브랜치에 반영되었으니 지역 저장소의 기준 브랜치에도 반영하며 작업을 마무리합니다.
❶ 지역 저장소에서 기준 브랜치로 작업 브랜치를 변경합니다.
❷ 원격 저장소의 최신 변경 내역을 가져옵니다.
❷ 원격 저장소의 최신 변경 내역을 가져옵니다.
mastering-git-github % git checkout main Switched to branch 'main' mastering-git-github % git pull origin main remote: Enumerating objects: 1, done. remote: Counting objects: 100% (1/1), done. remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (1/1), 651 bytes | 651.00 KiB/s, done. From https://github.com/must-have-developer/mastering-git-github * branch main -> FETCH_HEAD 23ffe40..763a458 main -> origin/main Updating 23ffe40..763a458 Fast-forward public/index.html | 2 ++ 1 file changed, 2 insertions(+)
❸ 지역 저장소의 커밋 내역을 확인합니다.
mastering-git-github % git log --pretty=oneline --graph * 763a4581790a6f07a52afb3294ad69648ee487ca (HEAD -> main, origin/main) Merge pull request #3 from must-have-developer/feature/change-main-content |\ | * 886cd7588ea7aa9dff9720b160b1e677e4bf7aa4 (origin/feature/change-main- content, feature/change-main-content) Change content in main page |/ * 23ffe4040d7c707924bcd293efa9441ae95661e1 Merge pull request #1 from must-have-developer/feature/body-change |\ | * e29b7fd7c01b110c97b7c4d1a16bff16297aa00c (origin/feature/body-change, feature/body-change) Change body | * 9b5285ac6a1dff67ec7c7ca4b64514c211e85625 Resolve conflicts | |\ | | * 3cfb8c6c4f676474d47470c3e9bc55875754da20 (test/remote-branch) Change 06장 시나리오 깃&깃허브 협업 기능 실습하기 223 header | |/ |/| | * 237039c5abbd9b7f534abfd0810aeb47af337827 Merge branch 'test/local- branch' | |\ | | * b6a164330378e22235d3cb5a49557fc9849a76cd (test/local-branch) Change header | |/ |/| | * 856ce3d46f12bb631b2d343346d960ea9315750a (test/fast-forward) Change title |/ * 255eb26c90bce40d348eeee7d1ebc8f71565115b (origin/test/remote-branch, origin/test/local-branch) Add hotline to main page * 83eacd81833cca3a5be10313009655b4da21028e Change the title of main page * 39c6f390d12a489c55f21cd318cbf22897ecc4d6 Add initial files and .gitignore
원격 저장소에서 반영된 새로운 기능이 최신 커밋으로 등록되었습니다.
To Do 04 수정 사항이 홈페이지에 잘 반영되었는지 확인할 차례입니다. mastering-git-github 프로젝트를 열고 터미널에서 다음 명령어를 실행하여 express 서버를 실행합니다. 그 후, 웹 브라우저를 열고 localhost:3000/에 접속하여 애플리케이션을 확인합시다.
mastering-git-github % npm start
수정사항이 잘 반영되었네요. 지금까지 하나의 프로젝트에서 여러 개발자가 협업을 진행할 때 이슈 생성을 시작으로 기능이 개발되어 반영되기까지의 과정을 실습했습니다. 기호 희진 미정 모두 고생했어요.
