Hello It's good to be back ^_^

[ECC-프론트엔드 2팀] 2주차 스터디 본문

Study/프론트엔드

[ECC-프론트엔드 2팀] 2주차 스터디

HongYeon 2024. 9. 29. 20:37
교재: Do it! 5일 만에 끝내는 깃&깃허브 입문 4장 ~ 5장

공부한 페이지: pp. 125-202

실습한 내용: https://github.com/HongYeonLee/ECC-Frontend-Study

 

GitHub - HongYeonLee/ECC-Frontend-Study: ECC 49기 FW 프론트엔드 2팀 이홍연 스터디

ECC 49기 FW 프론트엔드 2팀 이홍연 스터디. Contribute to HongYeonLee/ECC-Frontend-Study development by creating an account on GitHub.

github.com

 

협업 연습용 레포지토리

https://github.com/HongYeonLee/project

 

GitHub - HongYeonLee/project

Contribute to HongYeonLee/project development by creating an account on GitHub.

github.com


 

목차

  • 4-1 원격 저장소와 깃허브
  • 4-2 깃허브 가입하기
  • 4-3 지역 저장소를 원격 저장소에 연결하기
  • 4-4 지역 저장소와 우너격 저장소 동기화하기
  • 4-5 깃허브에 SSH 원격 접속하기

 

  • 5-1 서로 다른 컴퓨터에서 원격 저장소 함께 사용하기
  • 5-2 원격 브랜치 정보 가져오기
  • 5-3 협업의 기본 알아보기
  • 5-4 원격 저장소에서 협업하기

 

4-1 원격 저장소와 깃허브

지역 저장소(내 컴퓨터)에서 작업한 내용은 파일이 날라가면 복구할 수 없으니 원격 저장소에 백업을 해두는 것이 좋다.

이때 대표적인 원격 저장소 서비스가 바로 깃허브이다.

 

 

4-2 깃허브 가입하기

https://github.com/HongYeonLee

 

HongYeonLee - Overview

이홍연. HongYeonLee has 13 repositories available. Follow their code on GitHub.

github.com

기존에 만들어둔 깃허브 계정을 이용했다.

 

push (푸시) : 지역 저장소의 커밋을 원격 저장소에 보내는 것

pull (풀) : 원격 저장소의 커밋을 지역 저장소로 가져오는 것

 

 

4-3 지역 저장소를 원격 저장소에 연결하기

git remote add origin 원격 저장소 주소 : 지역 저장소와 원격 저장소를 연결한다. 원격 저장소의 주소를 매번 쓰기에는 복잡하니 앞으로 origin으로 부르기로 한다

git remote -v : 지역 저장소와 원격 저장소가 연결되었는지 확인해준다

터미널 창의 $를 프롬프트라고 부른다

로컬과 원격이 연결된 것을 볼 수 있다

 

4-4 지역 저장소와 원격 저장소 동기화하기

git push -u origin main : 지역 저장소의 브랜치를 원격 저장소(origin)의 main 브랜치로 푸시하는 명령. -u 옵션은 지역 저장소의 브랜치와 원격 저장소의 브랜치를 연결하는 것으로 처음 한 번만 사용하면 된다.

지역 저장소에서 푸시한 내용이 원격 저장소에도 반영된 것을 확인할 수 있다

git push : 한번이라도 원격 저장소에 푸시를 했다면 이후로는 git push를 이용해 간단하게 푸시할 수 있다

깃허브에서 커밋 해시를 클릭해 커밋 내용을 상세히 볼 수도 있다

 

 

원격 저장소에서 직접 커밋하기

1. Add file -> Create new file

 

 

2. 파일 이름, 소스 파일 내용을 작성 후 Commit Change 누르기

 

 

3. 원격 저장소에 새로운 커밋이 추가된 것을 볼 수 있다

 

4. 지역 저장소에서 pull 하기

 

git pull 원격 저장소 이름 지역 저장소의 브랜치 이름 : 원격 저장소의 내용을 지역 저장소에 반영한다. 여기서 원격 저장소의 이름을 origin으로 지정해뒀고 지역 저장소의 브랜치가 main이라면 간단히 git pull만 작성해도 된다.

 

 

깃허브 알아보기

 

 

4-5 깃허브에 SSH 원격 접속하기

SSH :

secure shell의 줄임말로, 보안이 강화된 안전한 방법으로 정보를 교환하는 방식을 말한다. 프라이빗 키와 퍼블릭 키를 한쌍으로 묶어서 컴퓨터를 인증한다. 이 두 키를 이용해 사용자의 컴퓨터를 인증한다.

 

 

ssh-keygen -t ed25519 -C "이메일 주소" : ssh key 만들기

홈 폴더에 .ssh 폴더가 만들어지고 그 안에 ssh 키가 두개 만들어진 것을 확인할 수 있다

끝에 아무것도 안 붙은것이 프라이빗 키, .pub이 붙은 것이 퍼블릭 키이다.

프라이빗 키는 사용자 시스템에 보관해두고, 퍼블릭 키는 깃허브에 등록해둔다

 

eval "$(ssh-agent -s)" : SSH 에이전트 실행

ssh-add ~/.ssh/id_ed25519 : 프라이빗 키 등록

사용자 컴퓨터에 만들어진 퍼블릭 키를 깃허브에 전송한다

프라이빗 키와 퍼블릭 키는 한쌍이므로 두 키가 서로 맞으면 사용자 컴퓨터와 깃허브 저장소가 연결된다

 

clip < ~/.ssh/id_ed25519.pub : 퍼블릭 키를 클립에 저장한다

깃허브 페이지로 이동해서 Setting → SSH and GPG keys → Title을 적고 Key 값에 방금 복사한 내용을 붙여 넣는다 → Add SSH key

 

 

SSH 주소로 원격 저장소 연결하기


1. 연결 방식에서 SSH를 눌러주고 옆의 주소를 복사해준다.

2. 복사한 주소를 지역 저장소를 원격 저장소와 연결할 때와 동일한 명령어에 붙여 넣어준다

3. git remote -v를 이용해 확인해보면 서로 연결된 것을 볼 수 있다

 

동일한 방식으로 커밋과 푸시를 해주면 SSH 방식으로도 원격 저장소에 푸시된 것을 볼 수 있다

 


 

5-1 서로 다른 컴퓨터에서 원격 저장소 함께 사용하기

클론 (clone) : 원격 저장소의 내용을 지역 저장소로 똑같이 가져오는 것을 의미한다

 

1. 클론할 레포지토리에서 Code 버튼을 누른 후 HTTPS 주소를 복사한다

 

2. 지역 저장소로 만들 곳에 디렉토리를 만들고 "git clone 원격 저장소 주소"를 입력해 클론한다

git_home이라는 새로운 디렉토리에 원격 저장소의 파일들이 전부 클론된 것을 확인할 수 있다

 

 

 

git_home에서 push, git_office에서 pull

 

같은 레포지토리를 클론한 git_home 디렉토리와 git_office 디렉토리가 있을 때, git home에서 작업을 한 뒤 원격 저장소에 push하면 git_office에서는 git pull을 이용해 수정된 내용을 받아올 수 있다. 당연히 반대도 가능하다.

서로 다른 지역 저장소에서 push와 pull를 자주하면 어떤 컴퓨터에서 접속하든 항상 최신 소스를 유지할 수 있다.

 

5-2 원격 브랜치 정보 가져오기

지역 저장소가 원격 저장소보다 커밋이 앞설 때

 

git status를 입력하면 push를 입력해 지역 저장소의 내용을 원격 저장소에 올리라고 한다

 

push를 해준 후 로그를 확인해보면 지역 저장소와 원격 저장소가 같은 커밋을 가리키는 걸 확인할 수 있다

 

git fetch : 원격 저장소의 수정할 내용을 반영하지 않고 가져와 보여주기만 한다

git diff HEAD orgin/main : HEAD(지역 저장소의 현재 최신 커밋)와 origin/main (원격 저장소의 현재 최신 커밋)간의 차이를 보여준다

 

git merge origin/main : 원격 저장소에(origin/main)에서 패치해 가져온 커밋을 현재 지역 저장소에 합친다

 

 

5-3 협업의 기본 알아보기

  1. 기본적으로 팀 단위의 프로젝트를 진행할 때, 하나의 원격 저장소를 각각의 팀원들이 지역 저장소에 클론한다.
  2. 팀원 별로 브랜치를 만들어 각각 커밋과 푸시, 풀을 반복한다.
  3. 자신이 맡은 역할이 끝나면 main 브랜치에 자신의 브랜치를 병합한다. 이를 위해 풀 리퀘스트 (pull request)를 한다.
  4. 풀 리퀘스트를 요청하면 다른 팀원들이 코드 리뷰를 진행한다. 문제가 없으면 머지하고 있으면 수정 후 다시 풀 리퀘스트 한다.

 

 

5-4 원격 저장소에서 협업하기

  • 깃허브에서 레포지토리를 만들 때 Add a README file을 추가해야 main 브랜치가 추가된 점에 유의하자

 

공동 작업자 추가하기

1. 레포지토리를 하나 만든 후 오른쪽 위에 Settings를 클릭한다.

 

 

2. 왼쪽 위의 Collaboration을 눌러준 후 Add people을 클릭한다.

 

 

3. 초대하고자 하는 사람의 아이디나 이메일을 입력해 초대장을 보내고 상대방이 초대장을 수락하면 된다.

 

 

프로젝트 관리하기 - 팀장 역할

1. 상단의 프로젝트 탭으로 이동후 오른쪽의 New project 버튼을 클릭한다.

2. 원하는 템플릿을 선택한다.

 

 

3. 프로젝트 이름을 적고 Create project 버튼을 클릭한다.

 

4. 하단의 Add item 버튼을 클릭해 각각의 영역에 맞는 작업을 추가할 수 있다.

 

 

5. 항목 옆의 ... 버튼을 클릭해 이슈로 전환할 수 있다. 이슈를 할당할 레포지토리를 선택한다.

 

project 레포지토리의 이슈로 등록되었다

 

 

6. 해당 레포지토리의 이슈탭에 들어가 이슈로 전환된 것을 확인할 수 있다. 오른쪽의 Assignees에서 원하는 팀원들을 할당할 수 있다.

 

 

브랜치 만들기 - 팀원 역할

1. 할당받은 이슈 탭에 들어가 오른쪽 밑의 Create a branch를 클릭한다

 

2.생성할 브랜치의 이름을 적고 Create branch 버튼을 클릭한다

 

3. 지역 저장소에서 해당 레포지토리를 클론후 plan 브랜치로 전환한다

 

 

4. 작업을 한 뒤 커밋 후 원격 저장소에 push 한다

 

 

풀 리퀘스트 요청하기

1. push한 해당 브랜치로 이동 후 상단의 Compare & pull request 버튼을 클릭한다

 

2. 풀 리퀘스트의 제목과 설명을 작성한다. 오른쪽에 Reviewers에 팀원을 할당할 수도 있다. 하단에는 해당 브랜치에서 커밋한 내용을 볼 수 있다. 작성을 마치면 Create pull request 버튼을 클릭한다

 

 

3. 팀원으로서 해야하는 풀 리퀘스트가 완료된다.

 

 

풀 리퀘스트 검토하고 브랜치 병합하기 - 팀장/리뷰어 역할

1. 상단의 Pull requests 탭으로 이동한다

2. 상단의 Files changed 탭을 클릭해 수정 사항을 확인할 수 있다

 

3. main 브랜치에 병합해도 되겠다고 생각하면 Merge pull request 버튼을 클릭한다. 내용을 수정하고 싶으면 수정 후 Confirm merge를 클릭한다

 

 

4. 병합이 성공적으로 진행되었다. 원한다면 Delete branch 버튼을 클릭해 해당 브랜치를 바로 삭제해도 된다

 

 

'Study > 프론트엔드' 카테고리의 다른 글

[ECC-프론트엔드 2팀] 3주차 스터디  (2) 2024.10.10
[ECC-프론트엔드 2팀] 1주차 스터디  (1) 2024.09.27