TIL 23-10-24
팀 프로젝트 협업하기
오늘 한 일
- github으로 프로젝트 협업 준비
- github 연습하기
들어가며
내배캠 React 3기 4주차 팀 과제가 시작되었다. 본격적인 개발 이전에 프로젝트 셋업, github 협업 방법 등을 정리해보았다.
github으로 프로젝트 협업 준비
1. Organization 생성 (팀장)
Organization은 쉽게 말해 단체 계정이다. 사용하는 이유는 개인 계정을 사용해 저장소를 만들어 협업하면 해당 저장소를 소유자 한 명에게 의존하게 된다. => 계정의 소유자만이 관리 권한을 갖는다.
Organization을 사용하면 팀 멤버의 역할과 권한을 관리할 수 있다. 팀원들은 저장소에 대해 공동 접근 권한을 가지며, 팀의 목표에 따라 작업을 조직화하고 협업할 수 있다. 멤버들의 권한을 설정해 접근 가능한 저장소와 특정 작업에 대한 권한을 제한할 수도 있다.
2. 팀원 초대하기 (팀장)
Perple 탭에서 Invite member 버튼을 눌러 github 아이디로 팀원을 초대한다.
(+) 참여중인 Organization을 프로필에 띄우려면 Organization visibility을 public으로 변경한다.
3. 저장소 만들기 (팀장)
우선 github 연습을 위한 git-test 저장소부터 만들었다. setting에 가서 좌측 Access 탭에서 Collaborators and teams으로 이동해 권한을 설정해야 한다. 팀원들의 기본 권한을 ‘Write’로 설정한다. (git 연습하는 중에 write 권한이 없어서 에러가 났었다.)
4. 프로젝트 초기 세팅
프로젝트 시작 전에 팀원들과 동일한 작업환경을 맞추기 위해 한명이 초기 세팅을 진행한다.
4-1. 디렉토리 구조 설계 (팀장)
html, css, javascript 관심사 분리
-
.github: Issue, pr 템플릿 -
assets: 정적인 멀티미디어 파일들 (이미지, 아이콘 등) -
src: 자바스크립트 파일 -
style: 스타일 관련
📦 movie-app
┣ 📂.github
┃ ┣ 📂ISSUE_TEMPLATE
┃ ┃ ┣ 📜---bug-report.md
┃ ┃ ┗ 📜---feature-request.md
┃ ┗ 📜PULL_REQUEST_TEMPLATE.md
┣ 📂assets
┃ ┣ 📜bg.jpg
┃ ┣ 📜favicon.ico
┣ 📂src
┃ ┗ 📜script.js
┣ 📂style
┃ ┣ 📜reset.css
┃ ┗ 📜style.css
┣ 📜.prettierrc
┗ 📜index.html
4-2. 코딩 컨벤션 설정 (팀장, 팀원)
코드 포매터란 정한 코딩 컨벤션(코드 작성 스타일 규칙)에 따라 코드 스타일을 알아서 정리해주는 도구. 협업을 위해 코드 스타일을 지정하고, 이를 일관성 있게 맞추기 위해서는 필수!!
VSCode의 extension 'Prettier' 설치하기 (팀장, 팀원).
그리고 root 디렉토리에 prettier 설정 파일을 만든다. (팀장)
// .prettierrc
{
"tabWidth": 2, // 탭 너비를 조정
"semi": true, // 문장 끝 세미콜론
"singleQuote": true, // 홑따옴표
"trailingComma": "all", // 후행 쉼표
"printWidth": 80, // 한 줄 최대 글자수
"useTabs": false, // 탭 사용
"endOfLine": "crlf" // EoF 방식
}
4-3. 원격 저장소에 push (팀장)
팀원들이 원격 저장소의 초기 프로젝트를 공유할 수 있도록 push한다. 이때, git-flow 브랜치 전략을 쓰기 위해 main 브랜치에서 develop 브랜치를 생성한다.
5. 저장소 복제 (팀원)
Github의 해당 저장소를 로컬에 clone 하기. 원격 저장소의 파일을 내 컴퓨터에 가져오는 것.
git clone [repository_url]
git clone: 원격의 Git 저장소를 로컬에 복제해오는 명령어
clone을 했다면 로컬에는 main(default) 브랜치 하나뿐이다. 원격 저장소의 develop 브랜치를 가져와야 한다. 아래 명령어를 수행하면 로컬에 develop 브랜치가 생성된다.
git checkout -t origin/develop
다른 원격 브랜치를 가져오고 싶다면?
$ git branch -r// 원격 저장소의 branch 리스트
$ git checkout -t origin/[branch_name]// 원격 저장소의 branch 가져오기
이제 프로젝트 준비는 마쳤다. 연습하기.
git 연습을 위한 저장소를 하나 생성한다. 그리고 위에 작성한 모든 과정을 거치고 각자 vscode에서 git 명령 입력할 준비만 남은 상태.
1. develop 브랜치에서 feature 브랜치 생성하기
모두 원격 develop 브랜치를 가져온 환경에서 시작했다.
$ git branch: 로컬 branch 목록 출력
develop 브랜치에서 feature 브랜치를 생성하고 이동한다.
$ git checkout -b feature/search: ‘feature/search’ 브랜치를 생성하고 이동
2. feature 브랜치에서 작업하고 add, commit, push
기능 개발을 하고 변경 사항을 저장소에 반영해야 한다.
$ git add . // 저장소에 올릴 파일 선택
$ git commit -m "messege" // 파일의 현재상태를 메세지를 남겨 기록
그리고 원격 저장소에 작업한 feature 브랜치명으로 push한다.
$ git push origin feature/search
⚠주의사항
브랜치에서 이동할 때는 반드시 git add, git commit을 하고 이동한다. 그렇지 않으면 현재 변경사항들을 이동한 브랜치에 덮어쓰게 된다.
git add, commit을 하고 이동하지 않는 방법도 있는데 git stash를 사용한다. 마무리하지 않은 작업을 잠시 저장하는 방법이다.
git stash: 하던 작업을 임시로 저장 해두고 싶을 때 사용하는 명령어
다른 브랜치로 이동한 후에 작업하던 브랜치로 돌아왔을 때 git stash pop 명령어를 사용하면 임시 저장한 변경사항들이 다시 적용된다.
브랜치를 이동할 때는 반드시 `git add`, `git commit` or `git stash` 기억하자!!
3. develop 브랜치에 PR 날리기
feature 브랜치를 push 했다면 github 저장소 페이지에서 develop에 merge 해야 한다. PR(Pull Requests)는 원격 저장소에 push한 사항을 다른 사람에게 알린다.
작성한 코드를 반영하기 위해, 그 과정에서 코드 리뷰를 통해 코드 품질을 유지하기 위해 PR을 보낸다.
Reviewers, Assignees 지정하고 현재 작업의 레이블을 달아서 PR을 생성한다. (연습 과정에서는 생략)
연습이니까 Merge pull requests를 눌러서 develop 브랜치에 머지한다. 충돌이 없다면 develop 브랜치에 반영된다.
4. 충돌 해결하기
만약 충돌이 있다면 merge가 되지 않는다. feature/search 브랜치와 feature/review 브랜치가 있다고 하자. feature/search 브랜치가 a.txt 라는 파일의 5번째 줄을 수정했다고 하자. 그리고 add, commit, PR을 날려 merge를 했다.
이후 feature/review 브랜치가 a.txt 파일의 5번째 줄을 수정해 반영한다고 하자. 두 브랜치가 같은 파일의 같은 부분을 수정하고 commit을 하고 PR을 날린다.
develop 브랜치는 동일한 코드를 수정했을 때 어떤 코드를 반영해야할 지 모른다. 수동으로 어떤 코드를 사용할 것인지 결정해줘야 한다.
충돌이 되는 부분을 먼저 해결해야 한다. 작업 브랜치에서 최신 브랜치인 develop을 git pull origin develop. 그리고 충돌을 해결한다.
vscode에서 git이 친절하게 알려준다. 충돌을 해결하고 git add, git commit, git push를 하고 PR을 날린다. merge하면은 develop 브랜치에 반영된다.
충돌을 예방하려면 PR 날리기 전에 현재 브랜치에 develop 브랜치를 pull 해서 충돌이 없는지 확인해본다.
▶ 팀원들과 연습한 흔적
느낀점
오후에 팀원들과 함께 git-flow 전략에 따라 연습을 엄청나게 했다. 그 과정에서 걱정했던 충돌 해결도 해보았고 모두 git 사용법에 익숙해진 계기가 되었다. 심지어 저녁 특강이 git에 관련된 내용이었는데 연습했던 내용과 99% 일치해서 복습하는 효과도 있었다.
github을 적극적으로 사용하고 싶어서 꽤나 많은 요구를 한 게 아닌가 싶었는데 팀원들이 사용해보면서 브랜치 전략을 잘 이해했고 그래프도 잘 그려져서 뿌듯?했다.
사실 아직 개발 단계까지 들어서진 못했지만 초기 설정과 규칙을 잘 정의해두어야 개발 단계에서의 어려움이 줄어들 것이라 생각한다. 이제 github에 따른 버전 관리는 할 수 있고 issue를 발행하고 projects로 작업 관리, 템플릿 사용 등을 공유하면서 github으로 팀 협업을 개발자스럽게 해보고 싶다. wiki로 문서 관리까지 된다면 가장 좋겠다.
그리고.. 터미널에 브랜치와 색상 표시 되는 걸 알아봐야 겠다.
댓글남기기