stackblitz로-협업하기

1. 호스트(Host): 협업 세션 시작

프로젝트를 처음으로 StackBlitz에서 여는 사용자(주로 저장소 소유자 또는 리더)의 역할이다.

1. GitHub 저장소 열기: 웹 브라우저 주소창에 아래 형식으로 URL을 입력하여 StackBlitz에서 직접 GitHub 저장소를 연다.

• stackblitz.com/github/\{GitHub 사용자명\}/\{저장소명\}
• 예시: stackblitz.com/github/facebook/react

1. GitHub 인증: StackBlitz가 GitHub 계정 접근 권한을 요청하면 승인한다. 이를 통해 코드를 가져오고 나중에 변경 사항을 푸시(Push)할 수 있다.
2. 공유 링크 생성: 프로젝트가 로드되면, 에디터 우측 상단의 'Share'(공유) 버튼을 클릭한다.
3. 링크 공유: 생성된 협업용 URL 링크를 복사하여 다른 Collaborator에게 전달한다.

---

2. 협업자(Collaborator): 세션 참여

호스트로부터 공유받은 링크를 통해 프로젝트에 참여하는 사용자의 역할이다.

1. 공유 링크 접속: 전달받은 StackBlitz URL을 웹 브라우저에서 연다.
2. 프로젝트 확인: 별도의 설치 과정 없이 호스트가 열어놓은 동일한 프로젝트 환경에 즉시 접속된다.
3. GitHub 로그인 (권장): 본인의 GitHub 계정으로 로그인하면, 누가 어떤 코드를 수정하는지 명확하게 식별할 수 있다.

---

3. 실시간 공동 작업

모든 참여자가 동일한 코드 베이스, 파일, 터미널 및 개발 서버 미리보기를 실시간으로 공유하며 작업한다.

• 동시 편집: 여러 사용자가 같은 파일을 동시에 수정할 수 있으며, 다른 사람의 커서 위치가 실시간으로 표시된다.
• 공유 터미널: 한 명이 터미널에 npm install 같은 명령어를 실행하면 모든 참여자에게 동일하게 적용 및 공유된다.
• 공유 미리보기: 웹 애플리케이션의 실행 결과(미리보기)가 모든 참여자에게 동일하게 보인다.

---

4. 변경 사항 GitHub에 반영 (Commit & Push)

공동으로 작업한 내용을 원본 GitHub 저장소에 저장하는 단계이다. 이 작업은 주로 호스트가 수행한다.

1. 변경 사항 확인: StackBlitz 에디터 좌측의 'Source Control'(소스 제어) 탭을 클릭하여 변경된 파일 목록을 확인한다.
2. 커밋 메시지 작성: 변경 내용에 대한 설명을 커밋 메시지 입력란에 작성한다.
3. 커밋 및 푸시: 'Commit & Push'(커밋 및 푸시) 버튼을 클릭하여 모든 변경 사항을 원래의 GitHub 저장소에 반영한다. 이 작업은 호스트의 GitHub 권한으로 실행된다. 핵심 사항: 협업자의 수정 내용은 실시간으로 세션에 저장되지만, 호스트가 명시적으로 'Commit & Push'를 실행해야만 GitHub 저장소에 최종적으로 반영된다.

---

5. 다른 작업자: 변경 사항 로컬에 반영 (Pull)

StackBlitz에서 공동 작업 후 GitHub 저장소에 반영된 최신 내용을 로컬(개인 PC) 개발 환경으로 가져오는 단계이다.

1. 로컬 저장소로 이동: 개인 PC의 터미널(Git Bash, PowerShell 등)을 열고, 작업하던 프로젝트의 로컬 폴더로 이동한다.Bash

cd /경로/저장소명

1. GitHub 원격 저장소의 변경 사항 가져오기: 아래 명령어를 실행하여 원격 저장소(GitHub)의 최신 내용을 로컬 저장소로 내려받아 동기화한다.Bash

git pull origin main *(참고: **main*은 기본 브랜치 이름이며, master 등 다른 이름을 사용하는 경우 해당 브랜치명을 입력한다.)

1. 최신 상태 확인: git pull이 완료되면, 로컬 프로젝트의 코드가 StackBlitz에서 공동 작업하여 GitHub에 저장된 최신 버전으로 업데이트된다. 이제 로컬에서 추가 작업을 이어갈 수 있다.