집과 학원에서 이어서 하는 개인 GitHub

먼저 이해하기

세 장소를 연결하는 규칙부터 기억하세요

집 컴퓨터, 학원 컴퓨터, GitHub 저장소는 서로 다른 장소입니다. 한 컴퓨터에서 파일만 저장하면 다른 컴퓨터에는 전달되지 않습니다. 현재 컴퓨터의 기록을 GitHub에 올리고, 다음 컴퓨터에서 그 기록을 가져와야 합니다.

Git과 GitHub는 역할이 다릅니다

먼저 Git으로 작업을 기록하고, 그 기록을 GitHub에 push합니다. 다른 컴퓨터에서는 GitHub의 기록을 pull하거나 clone합니다.

1단계

컴퓨터에서 처음 한 번 Git을 준비합니다

Git 공식 웹사이트에서 운영체제에 맞는 설치 파일을 받은 뒤 터미널에서 버전을 확인합니다. 버전 번호가 나오면 설치가 끝난 상태입니다.

git --version

집 개인 PC의 작성자 정보 설정

내가 계속 사용하는 컴퓨터라면 전역 설정인 --global을 사용합니다.

git config --global user.name "이름"
git config --global user.email "GitHub 이메일"
git config --global --list

VS Code 터미널만으로 모든 실습을 할 수 있습니다. Git Graph 같은 확장은 기록을 눈으로 확인할 때만 선택해서 설치합니다.

2단계

작성자 정보와 로그인 계정은 다릅니다

학원 공용 PC에는 이전 사용자의 정보가 남아 있을 수 있습니다. 커밋에 적히는 작성자와 GitHub에 접속하는 계정을 따로 확인해야 다른 사람 이름으로 커밋하거나 다른 계정으로 push하는 실수를 줄일 수 있습니다.

학원 공용 PC에서는 현재 프로젝트에만 작성자 설정

git config user.name "이름"
git config user.email "GitHub 이메일"
git config --list

1. Windows 자격 증명 관리자를 엽니다.
2. git:https://github.com처럼 GitHub와 관련된 항목만 확인합니다.
3. 이전 학생의 계정이면 해당 GitHub 항목만 제거합니다.
4. 브라우저의 GitHub 로그인 계정도 내 계정인지 확인합니다.
5. 수업 종료 후 학원 정책에 따라 GitHub 자격 증명과 브라우저 로그인을 정리합니다.

3단계

GitHub에 빈 개인 저장소를 만듭니다

1. Repository name에 영문 소문자 중심의 프로젝트 이름을 입력합니다.
2. 공개해도 되는 학습 프로젝트는 Public, 공개하면 안 되는 프로젝트는 Private을 선택합니다.
3. 이미 내 컴퓨터에 프로젝트가 있다면 README, .gitignore, License는 체크하지 않습니다.
4. Create repository를 누르고 표시된 HTTPS 저장소 주소를 확인합니다.

4단계

기존 프로젝트를 GitHub에 처음 올립니다

VS Code에서 올릴 프로젝트 폴더를 연 뒤 아래 명령어를 한 줄씩 실행합니다. 전체를 한꺼번에 붙여넣지 않습니다.

git init
git status
git add .
git commit -m "first commit"
git branch -M main
git remote add origin 저장소주소
git push -u origin main

첫 push에서 GitHub 로그인

브라우저 로그인 화면에서 내 계정을 확인하고 Git Credential Manager의 저장소 접근을 승인합니다.

5단계

올리지 않을 파일을 .gitignore로 제외합니다

비밀번호나 설치하면 다시 만들어지는 파일은 저장소에 올리지 않습니다. 프로젝트 루트에 .gitignore 파일을 만들고 제외할 대상을 적으면, Git이 그 파일들을 올리지 않습니다.

# 시스템 파일
.DS_Store
Thumbs.db

# 편집기 설정
.vscode/
.idea/

# 의존성과 빌드 산출물
node_modules/
dist/
build/

# 환경 변수와 비밀 값
.env
.env.*

# 로그
*.log

6단계

집과 학원에서 매번 같은 순서로 작업합니다

작업 장소가 바뀌어도 시작과 종료 순서는 같습니다. 이 순서를 지키면 main 하나로 작업해도 충돌 가능성을 크게 줄일 수 있습니다.

git status
git remote -v
git pull origin main

git status
git add .
git commit -m "작업 내용"
git push origin main

7단계

학원에서 자리가 바뀌었다면

새 자리의 컴퓨터에 내 프로젝트 폴더가 있는지부터 확인합니다. 폴더가 없는 첫 작업과 이미 복제된 프로젝트의 최신화는 명령어가 다릅니다.

git clone 저장소주소
cd 저장소이름
code .

git status
git remote -v
git pull origin main

8단계

오류 문구를 지우기 전에 원인을 확인합니다

오류가 나면 강제 push하거나 프로젝트를 다시 만들지 말고, 터미널의 첫 오류 문구와 git status부터 확인합니다.

9단계

GitHub Pages로 사이트를 공개합니다

정적 웹사이트(HTML·CSS·JavaScript)는 GitHub에 올린 뒤 저장소 설정에서 Pages를 켜면 누구나 볼 수 있는 주소가 생깁니다. 별도 서버 없이 무료로 공개할 수 있습니다.

1. 1
   GitHub에 올리기

   위 과정대로 저장소를 만들고 프로젝트를 push합니다.

2. 2
   Pages 설정 열기

   저장소 페이지에서 Settings를 누르고 왼쪽 메뉴의 Pages로 이동합니다.

3. 3
   브랜치 선택

   Source를 Deploy from a branch로 두고 main 브랜치와 /(root) 폴더를 선택한 뒤 Save를 누릅니다.

4. 4
   주소 확인

   잠시 뒤 https://사용자이름.github.io/저장소이름/ 주소에서 사이트가 열립니다.

배포에서 자주 막히는 부분

_로 시작하는 폴더가 있다면

프로젝트 루트에 빈 .nojekyll 파일을 추가하고 다시 push합니다.

# 프로젝트 루트에서 빈 .nojekyll 파일 만들기
# macOS / Linux / Git Bash
touch .nojekyll

# Windows PowerShell
New-Item .nojekyll

10단계

집과 학원 상황을 폴더 두 개로 연습합니다

1. 1
   집 역할 폴더

   개인 저장소를 연결하고 첫 commit과 push를 완료합니다.

2. 2
   학원 역할 폴더

   다른 빈 폴더에서 같은 저장소를 clone합니다.

3. 3
   학원에서 수정

   파일을 수정하고 commit한 뒤 GitHub로 push합니다.

4. 4
   집에서 이어서 작업

   집 역할 폴더에서 pull해 학원 변경 내용이 들어오는지 확인합니다.