ZENO — 웹 개발, 디자인, 자격증 정리

📌 Git과 GitHub가 뭔가요?

Git은 내 컴퓨터에서 코드의 변경 이력을 관리하는 버전 관리 도구입니다. 파일을 수정할 때마다 "저장 시점"을 만들어서, 나중에 과거 버전으로 되돌리거나 변경 내역을 추적할 수 있습니다.

GitHub는 Git으로 관리하는 코드를 인터넷 서버에 백업하고, 다른 사람들과 공유하거나 협업할 수 있게 해주는 플랫폼입니다.

쉽게 비유하자면, Git은 "내 컴퓨터의 타임머신", GitHub는 "클라우드 저장소"입니다.

---

🚀 첫 프로젝트 시작하기 - 기본 명령어

1. 프로젝트를 Git 저장소로 만들기

 

 

bash

git init

의미: 현재 폴더를 Git 저장소로 초기화합니다. 이제 이 폴더 안의 파일 변경사항을 Git으로 추적할 수 있습니다.

실행 후: .git 폴더가 생성됩니다 (숨김 폴더). 이 폴더에 모든 버전 정보가 저장됩니다.

---

2. GitHub 저장소와 연결하기

 

 

bash

git remote add origin https://github.com/계정명/저장소명.git

의미: 내 컴퓨터 프로젝트와 GitHub 저장소를 연결합니다.

• origin: 원격 저장소의 별명 (관례상 주로 origin 사용)
• 뒤의 URL: GitHub에서 만든 저장소 주소

연결 확인하기:

 

 

bash

git remote -v
```

출력 예시:
```
origin  https://github.com/계정명/저장소명.git (fetch)
origin  https://github.com/계정명/저장소명.git (push)

• fetch: 원격 저장소에서 코드를 받아올 때 사용하는 주소
• push: 원격 저장소로 코드를 올릴 때 사용하는 주소

---

3. 변경사항 스테이징하기

 

 

bash

git add .

의미: 현재 수정된 모든 파일을 커밋 대기 상태로 등록합니다.

• .은 "현재 폴더와 하위 폴더의 모든 파일"을 의미합니다
• 특정 파일만 추가하려면: git add 파일명.js

상태 확인하기:

 

 

bash

git status

---

4. 커밋 생성하기

 

 

bash

git commit -m "init"

의미: 현재 상태를 하나의 버전(스냅샷)으로 저장합니다.

• -m: 메시지 옵션
• "init": 이 버전에 대한 설명 (첫 커밋은 보통 "init" 또는 "first commit")

좋은 커밋 메시지 예시:

 

 

bash

git commit -m "로그인 기능 추가"
git commit -m "버그 수정: 회원가입 오류"
git commit -m "UI 개선: 메인 페이지 레이아웃 변경"

---

5. GitHub에 업로드하기

 

 

bash

git push -u origin main

의미: 내 컴퓨터의 커밋을 GitHub 원격 저장소로 업로드합니다.

• origin: 연결된 원격 저장소 별명
• main: 메인 브랜치 이름 (과거에는 master를 많이 사용)
• -u: 앞으로는 git push만 입력해도 자동으로 이 브랜치로 보내라는 설정

이후 푸시할 때는:

 

 

bash

git push

---

🔄 일상적인 작업 흐름 (매일 사용하는 명령어)

기본 작업 사이클

 

 

bash

# 1. 코드 수정
# 2. 변경사항 확인
git status

# 3. 변경된 파일 스테이징
git add .

# 4. 커밋 생성
git commit -m "설명 메시지"

# 5. GitHub에 업로드
git push

원격 저장소에서 최신 코드 받아오기

 

 

bash

git pull
```

**의미**: GitHub에 있는 최신 코드를 내 컴퓨터로 다운로드하고 병합합니다.

**사용 시점**:
- 다른 컴퓨터에서 작업한 코드를 받아올 때
- 팀원이 올린 코드를 받아올 때
- 작업 시작 전에 항상 실행하는 것이 좋습니다

---

## 🛡️ .gitignore - 절대 업로드하면 안 되는 파일 차단하기

### .gitignore 파일 생성

프로젝트 루트 폴더에 `.gitignore` 파일을 생성하고 다음 내용을 추가하세요:
```
# 환경 변수 (API 키, 비밀번호 등)
.env
.env.local
.env.*.local

# 의존성 폴더
node_modules/
vendor/

# 빌드 결과물
dist/
build/
*.log

# 운영체제 파일
.DS_Store
Thumbs.db

# IDE 설정 파일
.vscode/
.idea/
*.swp
*.swo

왜 중요한가요?

❌ 올리면 안 되는 것들:

• .env 파일: API 키, 데이터베이스 비밀번호 등 민감한 정보
• node_modules/: npm으로 설치한 라이브러리들 (용량이 크고 불필요)
• 개인 설정 파일: IDE 설정, OS 임시 파일 등

✅ 올려야 하는 것들:

• 실제 작성한 코드 (.js, .html, .css 등)
• package.json: 프로젝트 설정 및 의존성 목록
• README.md: 프로젝트 설명 문서

---

📦 브랜치 - 안전한 실험 공간

브랜치란?

브랜치는 메인 코드를 건드리지 않고 새로운 기능을 개발할 수 있는 독립된 작업 공간입니다.

기본 브랜치 명령어

 

 

bash

# 새 브랜치 생성
git branch 브랜치명

# 브랜치로 이동
git checkout 브랜치명

# 브랜치 생성 + 이동 (한 번에)
git checkout -b 브랜치명

# 현재 브랜치 확인
git branch

# 브랜치 목록 보기 (원격 포함)
git branch -a

실전 예시

 

 

bash

# 새 기능 개발 시작
git checkout -b feature/login

# 코드 작업 후 커밋
git add .
git commit -m "로그인 기능 구현"

# 메인 브랜치로 돌아가기
git checkout main

# 개발한 브랜치 병합하기
git merge feature/login

# 브랜치 삭제
git branch -d feature/login

---

🔍 유용한 Git 명령어 모음

커밋 이력 확인

 

 

bash

# 커밋 로그 보기
git log

# 간단하게 보기
git log --oneline

# 그래프로 보기
git log --graph --oneline --all

변경사항 확인

 

 

bash

# 아직 스테이징하지 않은 변경사항 보기
git diff

# 스테이징된 변경사항 보기
git diff --staged

실수 되돌리기

 

 

bash

# 마지막 커밋 취소 (변경사항은 유지)
git reset --soft HEAD~1

# 특정 파일의 변경사항 취소
git checkout -- 파일명

# 스테이징 취소
git reset HEAD 파일명

---

🤝 협업 워크플로우

일반적인 협업 흐름

 

 

bash

# 1. 시작 전에 최신 코드 받기
git pull

# 2. 새 브랜치 생성
git checkout -b feature/새기능

# 3. 작업 후 커밋
git add .
git commit -m "새 기능 추가"

# 4. 내 브랜치를 GitHub에 올리기
git push origin feature/새기능

# 5. GitHub에서 Pull Request 생성
# (웹 인터페이스에서 진행)

# 6. 리뷰 후 승인되면 main 브랜치에 병합
# (GitHub에서 Merge 버튼 클릭)

---

⚠️ 자주 하는 실수와 해결법

1. 커밋 메시지를 잘못 작성했을 때

 

 

bash

git commit --amend -m "올바른 메시지"

2. 잘못된 파일을 커밋했을 때

 

 

bash

# 파일을 스테이징에서 제거
git reset HEAD 파일명

# 또는 마지막 커밋 취소
git reset --soft HEAD~1

3. .env 파일을 실수로 올렸을 때

 

 

bash

# Git 추적에서 제거 (파일은 유지)
git rm --cached .env

# .gitignore에 추가
echo ".env" >> .gitignore

# 변경사항 커밋
git add .gitignore
git commit -m ".env 파일 추적 제거"
git push

⚠️ 주의: 이미 GitHub에 올라간 비밀 정보는 이력에 남으므로, API 키를 즉시 재발급해야 합니다.

---

📚 추가 학습 자료

• Git 공식 문서
• GitHub 가이드
• Git 시각화 도구: Visualizing Git

---

✅ 체크리스트: 프로젝트 초기 설정

새 프로젝트를 시작할 때 확인하세요:

• git init - Git 저장소 초기화
• .gitignore 파일 생성 및 설정
• GitHub에서 저장소 생성
• git remote add origin - 원격 저장소 연결
• git add . - 파일 스테이징
• git commit -m "init" - 첫 커밋
• git push -u origin main - GitHub에 업로드
• README.md 작성