안녕하세요, SSAFYcial 신산하입니다 : )
4월 기획기사의 주제는 Github편으로 가져왔습니다!
github가 CS영역과는 사뭇 다른데, 4월 기획기사로 쓸지말지 고민을 많이 했는데요.
요즘 본격적으로 프론트엔드와 백엔드를 배우고 배운 기술을 토대로 관통 프로젝트를 진행하면서 이 프로젝트들을 통해 공부했다는 것을 기록하고, 같은 프로젝트에 새로운 기술을 도입하는 관통 프로젝트 특성 상 버전 관리도 해보고 싶어 깃&깃허브에 관심을 갖고 있었습니다. 여러분도 그렇지 않으셨나요? ㅎㅎ
그리고 앞으로 진행될 팀 프로젝트도 있기 때문에 mm 메신저를 통해 파일 단위로 교환해서 다른 부분을 복붙하는 방식보단 깃허브로 필요한 코드만 가져오고, 변경된 부분만 확인하는 등의 스킬은 터득해주면 매우 좋을 것 같다는 생각이 들어서 4월 기획기사로 깃허브를 가져왔습니다 : )
1. 깃허브란?
깃허브는 코드를 관리하는 서비스입니다. 여기서 말하는 코드 관리는 크게 코드버전관리, 코드배포관리, 협업을 의미합니다. 그 외에도 진도관리, 이슈관리 혹은 SSAFY 스터디 중에서는 스터디 자료를 정리하는 용도로도 사용이 되고 있기도 하죠.
오늘 기사에서는 깃허브를 소스트리로 관리하는 방법에 대해서 A to Z로 알아보겠습니다!
2. Repository 생성
Repository는 하나의 프로젝트 저장소입니다. 보통 1:1 대응으로 어떤 프로젝트를 만들 때마다 1개의 repository를 생성합니다.
위 이미지에서 보시는 것처럼 "New repository"를 눌러 생성이 가능합니다.
1번 Repository name
repository 이름을 작성합니다. 대체로 프로젝트명을 작성합니다.
2번 Description
프로젝트 부가 설명을 작성합니다.
3번 Public / Private
- public : 현재 프로젝트의 코드를 모든 사람들에게 전체 공개합니다.
- private : 현재 프로젝트의 코드를 한정된 사람들에게 공개합니다. 그 사람들은 자신이 선정할 수 있습니다.
4번 Add a README file
프로젝트에 대한 설명이 들어가는 파일입니다. 2번 Description과 다른점은 4번은 repository에 파일로 들어간다는 것입니다.
5번 Add .gitignore
npm 모듈이나 환경변수에 해당하는 파일들의 경우에는 repository에 올릴 필요가 없습니다. 그럴 때 gitignore라는 파일에 올리지 않을 파일들을 정의하면 해당 파일들은 올라가지 않습니다.
6번 Choose a license
프로젝트의 라이센스가 있다면 라이센스 문서를 만들 수 있습니다. 해당 문서로 repository에 파일로 올라가게 됩니다.
위의 번호들은 repository를 만들때 사용된 '이미지 1번'의 번호들과 대응하면서 보시면 됩니다.
3. 소스트리 설치 및 연동
Sourcetree | Free Git GUI for Mac and Windows
A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac.
www.sourcetreeapp.com
GUI기반의 소스트리를 이용해 CMD창이 아닌 버튼을 이용해 소스코드를 관리해보겠습니다. 위 링크에서 소스트리를 설치하겠습니다.
'계속'버튼을 쭉 누르다가 이 창이 나오시면 멈칫하실 텐데, 그냥 아무것도 쓰지 마시고 '완료' 버튼을 누르시면 됩니다.
설치 완료 시 해당 창이 보이면 [새로 만들기 > URL에서 복제]를 눌러 저장소를 복제합니다.
1번 원본 URL
원본 URL의 경우 위에서 새롭게 만들었던 repository의 [code > Local > HTTPS] 아래 https://로 시작하는 주소를 복사합니다.
그러면 자동으로 목적지 경로와 이름이 채워집니다. 목적지 경로와 이름의 경우 내가 원하는 폴더와 이름으로 지정가능합니다. 그 후 '클론' 버튼을 눌러주면 됩니다.
상단의 로컬/원격이라는 버튼이 있습니다. 로컬은 pc에 있는 프로젝트 폴더들을 의미합니다. 원격은 깃허브에 있는 repository 리스트입니다.
1번 파인더에서 보기를 누르면 새로운 폴더가 생성된 것을 보실 수 있습니다. 이 안에는 깃허브에 있던 유일한 파일인 README.md도 있습니다.
4. 커밋 (COMMIT)
소스트리로 커밋하는 법을 알아보도록 하겠습니다. 먼저 임시로 html 파일을 생성하기 위해 VSCode를 열어 연동한 파일을 엽니다. 그 후 index.html을 생성합니다.
새로운 파일이 올라왔을 때 워크스페이스에 상태가 변화됩니다. 지금 제가 새롭게 만든 index.html이 있다고 보여주고 있습니다.
해당 파일을 커밋하기 위해 변경 사항을 필수로 적어주고 커밋 버튼을 누릅니다. 커밋하기 전에 이메일을 입력하라는 alert창이 뜨는데 사용하시던 이메일을 입력하시면 됩니다.
5. 히스토리 관리
깃허브는 우리가 커밋했을 때 그 시점을 따로 저장합니다. 때문에 히스토리 관리가 무척 중요합니다.
새로운 코드를 작성해서 커밋해봅니다.
main 영역에서 어떤 코드를 누가 언제 올렸는지 한 눈에 확인이 가능합니다.
특정 시점마다 특정 주기마다 내가 하고 있는 일들을 COMMIT으로 남겨줍니다.
만약 코드를 잘못짜서 전체 프로젝트에 영향을 미친다고 하면, 특정 시점으로 돌아가는 방향을 선택해야합니다.
이 때 커밋 주기를 자주 해두었다면, 최대한 성공적으로 코드가 돌아가는 방향으로 되돌리기를 할 수 있습니다.
코드를 되돌리기 위해선 [코드뭉치 되돌리기] 버튼을 클릭해주면 됩니다.
코드를 되돌리기 전에 동료 개발자들과 소통 과정은 필수입니다 : )
6. 깃허브 갱신 & 푸시 (Push)
4번 과정까지는 우리의 PC 즉, 로컬환경에서만 놀았기 때문에 깃허브의 원격환경에는 갱신이 되어있지 않습니다.
원격환경인 깃허브에 갱신해주기 위해 푸시를 진행합니다.
우측 상단에 푸시 버튼을 클릭합니다.
확인을 눌러줍니다.
소스트리를 처음 시작하시는 분들은 이 때 자신의 계정임을 인증하는 과정이 필요합니다.
Username의 경우 자신의 메인 github페이지의 이름입니다. 저는 아래 닉네임으로 SahhaShin이네요.
비밀번호는 깃허브 토큰이 필요합니다. 토큰이 없으시거나 토큰이 무엇인지 모르시는 분은 아래의 과정을 따라해주세요.
- 계정 Password (토큰) 발급받기
Settings로 들어갑니다.
1,2번 경로와 같이 [Settings > Developer settings > Personal access tokens > Tokens(classic)]으로 들어옵니다. 그 후 3번 버튼을 통해 새로운 토큰을 생성합니다.
Note에 토큰을 관리할 이름을 써주고, Expiration에 토큰 만료일자를 선택합니다. 저는 계속 같은 토큰을 쓸 것이기 때문에 No expiration을 해주겠습니다. 그 후 아래 Select scopes를 통해 토큰 권한 범위를 정의해줍니다. 마지막으로 토큰 생성 버튼을 눌러줍니다!
토큰 생성 시 나오는 긴 토큰 코드는 꼭 복붙해서 잘 저장해두셔야 합니다!
이렇게 계정 인증을 마치고, 푸시가 완료되었다면 원격 깃허브에도 index.html이 올라간 것을 보실 수 있습니다.
index.html을 누르면 작성된 전체 코드를 볼 수 있고, 상단에 History를 클릭하면, 코드의 변경사항을 명시해줍니다.
7. 깃허브 풀 (Pull)
깃허브에 푸시를 하면, 동료 개발자들은 변경사항과 코드를 보고 그것을 자신의 Local PC로 땡겨올 수 있습니다. 만약 자신이 2가지의 Push를 만들어냈다면, 워크스페이스의 풀 버튼에 '2' 라는 알림이 생기게 됩니다.
8. 브랜치 (branch) & 깃 플로우 전략
저희는 지금까지 master에 코드를 푸시하고, 풀을 했는데 branch라는 녀석을 사용하면 코드를 2중, 3중 등 다중으로 다방면으로 관리할 수 있게 도와줍니다. 예를 들어 어떤 프로젝트를 하더라도 v1.0, v1.1, v2.0 등 버전을 업그레이드 해나가기 마련입니다. 근데 이미 서비스가 되고 있는 곳에 바로바로 업그레이드하기란 위험 부담이 크죠. 이 때 branch를 사용하면 서비스하고 있는 코드와 개발하고 있는 코드를 따로 관리할 수 있습니다.
그리고 이 때 GitFlow라고 하는 '브랜치 관리 전략'이 활용됩니다. 브랜치를 5갈래로 나누어 관리하는 전략인데요. 크게 항상 유지되는 메인 브랜치(Master / Develop)와 보조 브랜치(feature / release / hotfix)로 나뉩니다.
- Master Branch
제품으로 출시되는 브랜치로 서비스가 되고 있는 브랜치입니다.
- Develop
다음 출시 버전을 개발하는 브랜치입니다.
주로 개발은 develop 브랜치에서 계속합니다.
이런식으로 develop 브랜치를 만들 수도 있습니다.
main 브랜치에서 develop 브랜치로 가지치겠다고 보시면 됩니다.
생성하면 정상적으로 develop 브랜치가 생성된 것을 보실 수 있습니다.
또한 develop 브랜치에 main 브랜치와 같은 파일이 그대로 복사되어있는 것을 확인하실 수 있습니다.
해당 브랜치에서 수정하는 작업은 절대 main 브랜치에 영향을 미치지 않습니다.
- Feature
기능을 개발하는 브랜치입니다.
만약 내가 어떤 기능을 개발해야하는데, 기능을 개발할 때 동료 개발자와 코드가 충돌할 위험이 있다고 한다면 develop 브랜치에서 개발을 진행하기란 위험 요소가 존재합니다. 때문에 develop 브랜치에서 또 한 가지를 뻗어 Feature 브랜치를 만듭니다.
develop 브랜치에서 기능 1 작업 브랜치를 만듭니다.
위와 같이 h3를 추가해 기능 1 개발했다는 표시를 해줍니다. 해당 수정 사항은 function1-work 브랜치에만 변경되어있고, 다른 브랜치에는 변경되어 있지 않습니다. 이제 변경사항을 팀장님 혹은 동료 개발자에게 보고합니다.
[Pull requests > Compare & pull request]에 들어가면 내가 만든 기능을 어떤 브랜치에 병합하고 싶고, 병합을 위해 컨펌을 내려달라는 요청을 내릴 수 있게 됩니다.
2번 버튼으로 내 프로젝트를 선택하고, 1번 버튼으로 내가 내 기능을 merge하고 싶은 브랜치를 선택합니다. 그 후 Write에 요청 메세지를 쓰고 4번 버튼을 눌러 request를 날리면 됩니다.
그럼 위와 같은 대화창이 열리게 되고, 어떤 문제가 발생했다면 아래 Write를 통해 코멘트를 달 수 있습니다. 혹은 정상 작동이 확인되었다면 위 초록색 버튼인 Merge pull request를 통해 2개의 프로젝트를 merge할 수 있습니다.
merge 컴펌이 완료된 모습입니다. merge가 완료되었다면, function1-work 브랜치는 이제 쓸모를 다한 셈입니다. 왜냐하면 해당 내용 전부 develop 브랜치로 들어갔기 때문입니다. 때문에 function1-work 브랜치를 삭제해도 됩니다.
- Release
이번 출시 버전을 준비하는 브랜치입니다.
develop 브랜치에서 어느정도 개발이 완료가 되었다면 Release 브랜치를 땁니다.
Release 브랜치에서 나오는 서비스 버전을 Main 브랜치로 merge 시킵니다.
- Hotfix
이미 출시된 버전에서 발생한 버그를 수정하는 브랜치입니다.
급하게 빨리 수정해야 할 때 쓰이는 브랜치입니다.
급한만큼 Delvelop > Feature 순으로 차근차근 브랜치를 딸 여유가 없기 때문에 Main 브랜치에서 바로 따서 에러를 수정합니다.
Hotfix에서 수정된 코드는 바로 Main으로 merge 됩니다.
9. 협업자 추가하기
setting창>Manage access를 클릭해주세요.
비밀번호를 입력하면 다음과 같은 창이 뜨는데 Invite a collaborator를 눌러 협업자를 초대해주시면됩니다.
그 후 마지막으로 다음과 같이 협업자로 초대한 사람들에게 이메일이 가는데 꼭 View invitation버튼을 눌러주셔야 원격저장소로 접근이 가능해집니다.
오늘 글이 여러분의 깃허브 관리법에 도움이 되었으면 좋겠습니다 : )
cmd창으로 깃허브를 관리하는 방법을 궁금해하시는 분들을 위해
저의 인스타에는 cmd로 깃허브 하는 방법을 올려놓도록 하겠습니다!
Instagram의 신산하님 : "[4월 기획기사] [CS정리는 내가 할게, 면접은 누가볼래? - GITHUB편] Github 어디
www.instagram.com
싸피 여러분 지나가는 4월도 잘 마무리하시고,
마의 5월! 잘 대비해봅시다 ㅎㅎ
화이팅!
10. 출처
1) 우아한 형제들 기술 블로그
https://techblog.woowahan.com/2553/
2) 개발자의품격 유튜브
'대외활동 > SSAFYicial' 카테고리의 다른 글
| [TMI] 대전을 고민하시는 예비 SSAFY인들을 위한 1학기 리얼 후기 (with 타지생활) (12) | 2023.05.13 |
|---|---|
| [CS 정리는 내가 할게, 면접은 누가볼래? - 운영체제편] 쓰레드(Thread) 이름만 들어보신 분? (0) | 2023.05.13 |
| [CS 정리는 내가 할게, 면접은 누가볼래? - 데이터베이스편] 실제 프로젝트를 통해 알아보는 데이터베이스 기초! ENTITY TITI FRAGILE X 2~ (2) | 2023.03.12 |
| [TMI] 내가 퇴사하고, SSAFY한 이유, "난 아직 젊다!" (6) | 2023.03.11 |
| [CS 정리는 내가 할게, 면접은 누가볼래? - 디자인 패턴편] 6가지 디자인 패턴 총정리! (0) | 2023.02.24 |
