FE - Github 협업

모든 팀원은 각자 본인이 전용으로 사용하는 branch를 가지게 되며 작업 내용은 각자 branch에 올린다. 팀장이 팀원이 작업한 내용을 확인하고 main branch에 merge한다. 각 팀원은 통합된 main branch를 pull받아 최신화하는 방식으로 작업한다. 

 

0. Extentions

PR 생성할 수 있는 확장 프로그램 설치

 

 

1. 팀장 기본 작업

1-1. Project 생성

FE - 프로젝트 생성

FE - 프로젝트 생성

위 글에서 "1. 프로젝트 생성" 까지 진행하여 VSC에서 프로젝트 폴더 오픈한다.

 

1-2. Github Repository 생성

 

1-3. repository에 팀원을 Collaborators에 추가

Settings > Collaborators 메뉴에서 [ Add people ] 버튼 클릭

 

 

 

Modal 창이 나타나면 팀원의 Github 아이디를 입력한다.

 

 

팀원을 찾았다면 [ Add 아이디 ] 를 클릭하여 추가한다.

 

 

1-4. 각 팀원에 맞게 Branch 생성

[ 디폴트 브랜치 ]클릭  >  [ View all branches ] 클릭

 

 

[ New branche ] 클릭

 

 

원하는 branch 이름(팀원 이름 권장)을 작성하고 Source는 [ main ] 으로 선택 후 [ Create new branch ] 클릭

 

 

1-5. Project Repository 연동

Github Repository, [ Code ] 메뉴를 클릭 후 URL을 복사한다.

 

VSC, View > Terminal (단축키 Ctrl + `) 으로 터미널 창 활성화

 

 

터미널 창에서 아래 명령어 실행

# Git 초기화
> git init

# Git remote URL 연결
> git remote add origin [복사한 Git Repository URL]

# 라이브러리 설치
> npm install

 

1-6. .gitignore 세팅 및 push

중요!!!! package-lock.json 내용 추가

.gitignore 파일을 열어  git에 올리고 싶지 않은 파일 및 폴더의 경로를 추가한다. "package-lock.json" 추가

 

Comment를 입력하고 [ Commit ] 버튼을 클릭한다.

 

CHANGES 칸의 [ ●●● ] 를 클릭 후 [ Push ] 메뉴를 클릭한다.

Github Repository에 Push가 되었는지 확인

 

1-7. Branch Checkout

# Git Branch 리스트 확인
> git branch -a

# Git Branch 변경
> git checkout [branch 이름]

# 변경된 Git Branch 확인
> git checkout
혹은
> git branch
로 확인

 

 

2. 팀원 기본 작업

2-1. Clone Project

 

CMD, 프로젝트를 클론할 경로로 이동

아래 명령어를 실행하여 프로젝트를 클론한다.

# 생성할 폴더명을 생략하면 Repository 이름으로 폴더가 생성됨
> git clone [Repository URL] [생성할 폴더명]

클론한 폴더를 VSC로 오픈한다.

 

2-2. Branch Checkout

VSC, View > Terminal (단축키 Ctrl + `) 으로 터미널 창 활성화

 

# Git Branch 리스트 확인
> git branch -a

# Git Branch 변경
> git checkout [branch 이름]

# 변경된 Git Branch 확인
> git checkout
혹은
> git branch
로 확인

 

3. 코드 작업

3-1. 작업 내용 commit

작업 마디 마다 commit 처리

Comment 내용 작성 후 [ Commit ] 버튼 클릭

 

3-2. Git push, PR 생성

작업이 완료되면 Push 처리

CHANGES 칸의 [ ●●● ] 를 클릭 후 [ Push ] 메뉴를 클릭한다.

 

Github 메뉴에서 PR생성 버튼을 클릭

 

BASE칸을 선택하면 Branch 선택 창이 나타난다. main을 선택

 

BASE가 main branch로 변경되었는지 확인. 설명부분 적을 내용 있으면 작성하고 [ Create ] 버튼 클릭

 

4. 팀장 merge 작업

3-1. 팀원이 PR을 생성하지 않은 경우

Github Repository, [ Pull request ] 메뉴 선택, [ New pull request ] 버튼 선택

 

해당 팀원의 branch 선택

 

commit 내용 확인 후 [ Create pull request ] 버튼 클릭

 

필요시 설명 작성 후 [ Create pull request ] 버튼 클릭

 

 

3-2. 팀원이 PR을 생성한 경우

Github Repository 화면에서 [ Pull requests ] 메뉴 아래 팀원이 생성한 PR을 클릭한다.

 

 

3-3 공통 내용

[ Merge pull request ]를 클릭한다.

 

 

추가할 설명이 있다면 작성을 하고 [ Confirm merge ] 버튼을 클릭하여 merge 진행

 

 

merge가 진행되면 main branch에 팀원이 작업 내용이 반영된다.