[macOS] GitHub repository와 Sourcetree 연결

시리즈 

1. [macOS] GitHub Repository와 Sourcetree 연결하기  ☜
2. [macOS] 페어와 GitHub을 통해 협업하고 싶어요.

이런 독자님이 읽으면 도움이 됩니다.

• CLI가 아닌 GUI로 GitHub을 이용하고 싶으신 분!
• Github 계정을 Sourcetree에 연결하고 commit 후 push를 했으나 push가 되지 않는 현상이 발생한 분!

CLI가 뭘까요?

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. ( - 위키백과 - )

 

 저는 주로 윈도우에서 cmd로 ip주소를 많이 검색했었습니다.

GUI가 뭘까요?

GUI(Graphic User Interface)그래픽 사용자 인터페이스는 사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 나타낸 것이다.
 위키백과

 

 CLI와 다르게 명령어를 입력할 필요도 없고 클릭이면 일사천리로 이루어져서 아주 편해요.

글에서 다루는 Editor와 응용프로그램

• Visual Studio Code
• Sourcetree

---

시작해볼까요? Let's get it~

• CLI가 아닌 GUI로 GitHub을 이용하고 싶은 신 분!   => 처음부터 끝까지!
• Github 계정을 Sourcetree에 연결하고 commit 후 push를 했으나 push가 되지 않는 현상이 발생하신 분! => 실습 목차 5번을 하셨는지 확인하고 하셨다면 7번을 봐주시면 되겠습니다.

실습 목차

1. GitHub repository 생성

2. Homebrew 설치

3. git 설치

4. Sourcetree 설치

5. Sourcetree 계정 사용자 인증

6. Sourcetree 로컬 저장소 생성

7. Sourcetree의 로컬 저장소와 GitHub의 원격 저장소 연결

8. 원격 저장소로 Commit 하고 Push 해보기

1. GitHub repository 생성

No	설명	사진
1	https://github.com/으로 이동해주세요~ 계정이 없으시다면 생성해주세요.
2	Create repository를 클릭해주세요.
3	원격 저장소의 이름을 지으시면 됩니다. 여러분이 생성하고 싶은 이름으로 만드셔도 좋습니다. 저는 CookingSchedule-Manager 라고 짓겠습니다.
4	원격저장소의 소개를 적으시면 됩니다.
5	Create repository를 클릭해주세요.
6	축하합니다. 첫 원격 저장소를 생성하셨습니다.

2. Homebrew 설치

WINDOW OS에서는 별도의 큰 문제없이 Git 사이트에서 설치 파일을 제공하고 있지만

Mac OS에서는 Homebrew를 통해 설치를 받을 수 있습니다.

Homebrew는 Mac OS용 패키지 관리자입니다.

NO	설명	사진
1	https://brew.sh/index_ko로 이동해주세요.
2	웹 사이트에서 Homebrew설치하기 항목 밑에 알 수 없는 코드들을 코드 옆 휴지통 같은 아이콘을 통해 복사해줍니다.
3	spotlight에서 terminal을 실행해주세요.
4	터미널창에 복사한 코드를 붙여넣기 하고 enter를 누릅니다.
5	패스워드를 입력하란 말이 나오는데요.  OS의 비밀번호를 입력하란 의미입니다. 비밀번호를 입력할때 **로 표시되지 않고 입력되지 않는 것처럼 보이지만 입력되고 있으니 편하게 입력하시면 됩니다.
6	enter를 누르시면 Homebrew 설치가 진행됩니다.
7	설치 진행중 다시한번 패스워드를 입력하란 메세지가 출력됩니다. 다시 한번 입력해주세요. 그럼 설치가 완료됩니다.
8	설치가 잘되었는지 확인해봐야겠죠? brew --version 을 입력해서 Homebrew 3.3.3이라고 출력된다면  정상 설치된게 맞습니다.

3. git 설치

No	설명	사진
1	마찬가지로 터미널 창에서 git을 설치합니다. brew install git enter를 누르면 설치가 진행됩니다.
2	마찬가지로 설치가 잘되었는지 확인해봅시다. git --version git version 2.33.1이라고 출력되네요. 정상 설치되었습니다

4.  Sourcetree 설치

No	설명	사진
1	Sourcetree 홈페이지로 이동해요~
2	Download for Mac OS X를 클릭해주세요.
3	check box를 클릭하고 Download를 클릭해줍니다.
4	브라우저 하단에서 압축파일을 풀어주세요.

5. Sourcetree 계정 사용자 인증

No	설명	사진
1	Sourcetree를 실행해주세요.
2	Sourcetree의 설정 메뉴를 클릭해주세요.
3	기본 사용자 정보를 GitHub사이트의 내 정보와 일치하게 적어줍니다.  이름: No 3-1을 참고하세요. 이메일 주소: git계정 주소를 적으시면 됩니다.
3-1	GitHub 사이트에서 로그인 정보를 보면 적혀있습니다. 저는 conqueror-G라고 되어있네요.
4	상단 메뉴 중 계정으로 이동합니다.
5	추가를 클릭해줍니다.
6	그럼 이 창이 뜨게 됩니다.
6-1	호스트를 GitHub으로 클릭해주세요.
6-2	인증방식 : OAuth이라고 되어있는데 이것은 무엇일까요? OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. - 위키백과 쉽게 말해 요즘 웹 사이트를 가입할 때 따로 회원가입 절차가 필요가 없게 되었지요. 네이버 계정으로 가입할 것인지? 구글 계정으로 가입할 것인지? 깃헙 계정으로 가입할 것인지? 자주 보셨을 겁니다. 그것이 바로 OAuth라고 합니다.신기합니다. 참조 사이트 입니다. https://showerbugs.github.io/2017-11-16/OAuth-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
6-3	사용자 이름에 계정연결을 클릭합니다.
6-4	클릭하면 웹 브라우저에서 알림이 뜨는데 Sourcetree 열기를 클릭하면 됩니다.
6-5	그다음은 프로토콜입니다. SSH로 변경해주세요. 여기서 또 모르는게 생겼습니다. 프로토콜은 무엇이며, SSH와 HTTPS는 무엇일까요? (꽤나 깊숙히 파고들어야할 내용이기에 추후 다뤄보려 합니다. 나중에 이곳에 URL을 넣어놓겠습니다.)
6-6	SSH키는 이미 제가 한번 입력해놓아서 영구등록인 모양입니다. 당연히 여러분들은 등록되어 있지 않을 것이며, 다음 스텝에서 설명해드리겠습니다.
7	터미널창으로 다시 돌아갑시다.
7-1	SSH Key 존재유무를 확인해야해요. 이렇게 입력해주세요 id_rsa.pub 파일이 있으시다면 추가로 생성할 필요가 없습니다. 7-3로 진행해주세요 ls -al ~/.ssh 없으시다면 ssh-keygen 을 입력해주세요.
7-2	(/users/conqueror/.ssh/) 디폴트 위치에 저장한다는 뜻입니다. enter를 눌러주세요.
7-3	No 6-6에 넣어야하니 이렇게 입력해주세요. pbcopy < ~/.ssh/id_rsa.pub No  6-6으로 돌아가면 자동으로 삽입되어 있을 것입니다.
8	저장을 클릭해주세요.
9	해당 계정을 디폴트 계정으로 하기 위해 하단의 디폴트 설정을 클릭해주세요. 설정이 완료되었습니다  고생하셨습니다!

6. Sourcetree 로컬 저장소 생성

No	설명	사진
1	저장소를 만들기에 앞서 데스크톱에 새로운 폴더를 생성해주세요. 바로 프로젝트를 할 폴더입니다.
2	Sourcetree에 폴더를 드래그하여 삽입합니다.
3	생성하기를 클릭합니다. 로컬저장소가 생성되었습니다. 잘 생성되었는지 확인하는 방법은 간단합니다.
4	Visual Studio Code로 이동해주세요.
5	프로젝트 폴더를 드래그 해서 프로그램 안으로 넣어주세요. 그럼 해당 폴더가 열리게됩니다.  상단 메뉴 중 터미널에서 새 터미널 클릭해주세요.
6	터미널 창에  ls -al  을 입력해주세요. 숨겨진 폴더까지 모두 볼 수 있습니다. 왜 숨겨진 폴더까지 찾아봐야할까요? 그것은 로컬 저장소가 .git이라는 숨겨진 폴더이기 때문입니다.
7	.git이 생겼다면 무사히 로컬 저장소가 생성된 것입니다. 축하합니다.

7. Sourcetree의 로컬 저장소와 GitHub의 원격 저장소 연결

6번까지 완료한 상태에서 commit을 했으나 push 자체가 되지 않았습니다. 

정확히는 push를 눌렀으나 에러 메시지가 뜨면서 중단되었습니다. 그에 대한 해결 방법입니다.

반면 에러가 나지 않는다면 이번 Step을 건너뛰셔도 좋습니다.

No	설명	사진
1	https://github.com/으로 이동해주세요. 사용자 메뉴에서 setting으로 이동합니다.
1-1	setting메뉴로 들어왔다면 좌측 메뉴 중 Developer settings 메뉴가 있을 것입니다. 클릭해주세요.
1-2	Personal access tokens를 클릭합니다. 이 토큰은 그 누구에게도 공유해서는 안됩니다!
1-3	Generate new token을 클릭해주세요.
1-4	비밀번호를 입력하라는 브라우저가 열리면 입력해주세요.
1-5	repo check box에 클릭해주세요.
1-6	Generate token을 클릭해주세요.
1-7	이 토큰은 공유하면 안되는 것이기에 사진을 찍지 않았습니다. No 2-9에서 필요합니다. 정사각형이 두개 겹쳐진 모양을 클릭하시면 복사가 됩니다.
2	소스트리로 이동해주세요.
2-1	로컬저장소를 더블 클릭합니다.
2-2	그럼 이런 창이 열리게 됩니다.
2-3	상단 메뉴 저장소 메뉴의 하위 메뉴 중 저장소 설정을 클릭해주세요
2-4	원격 메뉴로 이동합니다!
2-5	추가를 클릭해주세요.
2-6	추가 확장 통합 섹션에서 먼저 호스트 종류를 GitHub으로 변경해주세요.
2-7	사용자명을 마찬가지로 GitHub의 사용자명과 동일하게 입력해주세요.
2-8	원격이름을 origin으로 입력합니다. 나중에 branch를 위해 이렇게 설정했습니다.
2-9	URL/경로에 이렇게 입력해주세요. 제가 입력한 []는 빼주시면 되겠습니다. https://[깃헙사용자명]:[1-7에서복사한 토큰]@[GitHub repository https 주소] 예를들면  https://conqueror-G:[토큰]@github.com/conqueror-G/CookingSchedule-Manager.git  이 되겠습니다. 입력하신 후 확인을 눌러주세요.
2-10	토큰 때문에 그렇습니다. 확인을 눌러주세요.
2-11	확인을 눌러주세요. 세팅이 완료되었네요. 고생하셨습니다!

8. 원격 저장소로 Commit 하고 Push 해보기

No	설명	사진
1	Visual Studio Code에 프로젝트 폴더를 드래그해서 넣어주세요. 혹은 상단의 파일 메뉴에서 폴더 열기 메뉴를 클릭해서 프로젝트 폴더를 열어주세요.
2	탐색기를 클릭하세요.
3	새 파일을 클릭하세요.
4	README.md 파일을 생성합니다. 그리고 열린 파일에 적고 싶은 내용을 적습니다.
5	commend + s를 눌러 저장을 합니다. 저장을 하면 파일 제목 옆에 원형이 사라집니다.
6	Sourcetree에서 로컬 저장소를 더블 클릭합니다.
7	check box에 클릭을 해주세요. 클릭을 하면 스테이지에 올라가게 됩니다.
8	커밋 메세지를 작성합니다.
9	커밋을 클릭합니다.
10	커밋된 목록을 클릭합니다.
11	상단 메뉴 중 푸시를 클릭합니다.
12	어떤 원격저장소인지 확인해주세요. 하지만 이번 실습에서는 원격저장소를 origin만 만들었으므로 디폴트로 되어있을 겁니다.
13	푸시할 브랜치를 check box에 클릭 합니다.
14	확인을 클릭합니다.
15	잘 완료 됬다면 여기서 키체인 메세지창이 나타나게 되는데, 아 물론! 키체인 창 없이도 잘 될 수 있습니다. 만약 여기서 푸시가 안되고 빨간글씨가 출력된다면 저장소 주소를 다시 입력해보세요! 마지막으로 암호를 입력하고 항상 허용을 클릭합니다!
16	푸시가 완료되면 master bransh와 origin/master branch가 같이 있습니다. 혹시나 키체인 메세지가 자주 떠서 괴로우시다면 해당 로컬 저장소 터미널에서   git config --global credential.helper osxkeychain 을 입력해주세요.  고생하셨습니다!

실습하시느라 고생하셨습니다. 다음 내용도 기대해주세요~