GitHub & VSCode 연동

---

1. GitHub 소개

• GitHub: 분산 버전 관리(VCS) 툴을 제공하는 웹 서비스
  1. 웹 서비스에서 코드들을 저장하는 코드 저장소(Repository)
  2. 다양한 기업에서 사용하는 협업 플랫폼

---

2. 회원가입

1. GitHub 홈페이지 접속
2. [Sign up] 버튼 클릭 → 이메일 입력 후 회원가입 진행

---

3. 로그인

1. [Sign in] 버튼 클릭 → 로그인
2. Dashboard 페이지 확인

---

4. VSCode와 GitHub 최초 연동

(PC마다 1회)

1. VSCode 왼쪽 메뉴 [소스제어] 클릭 → Git 다운로드
   • Git for Windows 다운로드
2. Git 설치
   • 다운로드 후 Git-2.49.0-64-bit.exe 실행
   • 기본 설정으로 [Next] 클릭 → 설치 완료
3. VSCode 재실행
4. VSCode 소스제어 → [GitHub] → 로그인 허용 → 웹페이지 인증 → [Continue]
5. Publish to GitHub (Public Repository 선택) → 확인

(자리 변경 시, PC마다 1회)

1. VSCode 메뉴 [터미널] → [새 터미널]
2. 터미널 상단 [v] → Git Bash 선택
3. Git 계정 설정

   git config --global user.name "Git닉네임"
   git config --global user.email "git아이디@이메일포함"
   소스제어 → 커밋 메시지 작성 → [커밋 및 푸시]

[원격 추가] 버튼 클릭 → 폴더 선택 → main(원격) 추가

5. Git 기본 용어

1. repository 코드 저장소, 프로젝트 단위
2. commit(커밋) 로컬 PC에서 코드 수정 완료 (웹에는 반영되지 않음)
3. push(푸시) 로컬 코드를 GitHub에 반영
4. pull(풀) 웹 서비스 버전으로 로컬 상태 갱신

6. GitHub 사용 예시

학원 PC 18:20 commit/push → 웹 v1.1
집 PC 20:00 pull → 집PC v1.1
집 PC 22:00 commit/push → 웹 v1.2
학원 PC 다음날 9:30 pull → 학원PC v1.2
Tip: 코드 작업 전 반드시 pull → 최신화

7. 자리 변경 시 절차

1) 로그아웃
VSCode 깃 로그아웃: 좌측 하단 [계정] → [로그아웃]

현재 PC 로그아웃: 제어판 → 자격증명관리자 → git 관련 항목 제거

브라우저 로그아웃: GitHub, 이메일, 카카오톡 등

개인 파일/폴더 삭제

2) 자리 변경 후
리포지토리 복제

소스제어 → [리포지토리 복제] → GitHub → 로그인 → 리포지토리 선택

커밋 계정 정보 확인 및 설정 (Git Bash 사용)

최초 커밋/푸시 진행

8. 팀 Git 저장소 운영

초대하는 사람
새 폴더 생성 + 임의 파일 생성

해당 폴더 → GitHub 게시 (Public 권장)

팀원 초대: Settings → Collaborators → Add people → 계정 검색 → 초대

초대받는 사람
초대 승인

VSCode → 소스제어 → 리포지토리 복제 → 초대받은 저장소 선택

브랜치 관리
각 팀원별 독립 브랜치 생성 (작업 충돌 방지)

브랜치 생성: 소스제어 → 기타작업 → 분기 → 브랜치명 작성

최초 commit/push 진행

다른 브랜치 코드 가져오기
소스제어 → 기타작업 → 풀/푸시 → 가져올 브랜치 선택

9. 팀 작업 예시

본인 브랜치 확인 후 작업 → commit/push

취합 담당자는 main 브랜치로 체크아웃

기타작업 → 풀 → 각 팀원 브랜치 선택 → 병합 편집 후 commit/push

모든 팀원 브랜치 취합 완료 후 main 브랜치 → commit/push

팀원들은 main 브랜치 pull

10. 브랜치 실습

취합 담당자: main 브랜치에서 브랜치실습.html 생성 → commit/push

팀원: 각자 브랜치에서 main 브랜치 pull

각자 담당 구간 작성 (주석 포함) → commit/push

취합 담당자: main 브랜치에서 모든 브랜치 취합 → commit/push

팀원: main 브랜치 pull → 최종 확인

11. GitHub Pages

목적: GitHub 저장소 코드를 웹에서 호스팅 (HTML/CSS/JS)

활용: 프론트엔드 포트폴리오, 간단한 회사 소개 페이지

활성화 방법
저장소 웹 페이지 접속 → Settings → Pages

Branch 선택 후 저장 → 1~3분 후 F5 새로고침

주소 예시:

루트에 index.html 있을 경우: https://계정명.github.io/저장소명/

특정 폴더/파일: https://계정명.github.io/저장소명/폴더명/파일명.html

main 브랜치 변경 후 push → 2~3분 후 GitHub Pages 반영