19. GitHub를 이용한 버전 관리
1. Git이란?
Git은 프로젝트의 변경 내용을 기록하고 관리하는 버전 관리 시스템(Version Control System) 입니다.
예를 들어 오늘 동부산CC 프로젝트를 수정했다면,
어떤 파일이 변경되었는지
언제 변경했는지
이전 버전으로 되돌릴 수 있는지
를 모두 관리할 수 있습니다.
2. GitHub란?
GitHub는 Git으로 관리하는 프로젝트를 인터넷에 저장하는 서비스입니다.
Git은 내 컴퓨터에서 버전 관리를 하고,
GitHub는 원격 저장소(Remote Repository) 역할을 합니다.
내 PC
↓
Git
↓
GitHub
↓
백업
↓
협업
↓
배포
3. Git 설치
Git을 설치한 후 확인합니다.
git --version
버전이 출력되면 정상적으로 설치된 것입니다.
4. 프로젝트 시작
React 프로젝트 폴더에서 실행합니다.
git init
그러면
.git
폴더가 생성됩니다.
Git 관리가 시작됩니다.
5. 상태 확인
git status
현재 변경된 파일을 확인할 수 있습니다.
예)
modified
App.jsx
Header.jsx
6. 파일 추가(add)
git add .
모든 변경 파일을 저장 준비 상태(Staging Area)로 올립니다.
특정 파일만 추가하려면
git add App.jsx
처럼 작성합니다.
7. Commit
git commit -m "동부산CC 메인 화면 완성"
Commit은 현재 프로젝트 상태를 하나의 버전으로 저장하는 것입니다.
예시
v1
메인 화면
↓
v2
예약 기능
↓
v3
좋아요 기능
8. GitHub 저장소 만들기
GitHub에서
새 Repository를 생성합니다.
예)
dongbusan-react
9. 원격 저장소 연결
git remote add origin
저장소주소
예)
git remote add origin
https://github.com/
아이디/
dongbusan-react.git
10. GitHub 업로드
git push
-u
origin
main
프로젝트가 GitHub에 업로드됩니다.
11. 변경 후 다시 업로드
파일 수정
↓
git add .
↓
git commit -m "예약 기능 추가"
↓
git push
이 과정을 반복합니다.
12. GitHub 활용
React 프로젝트
↓
GitHub 저장
↓
백업
↓
포트폴리오
↓
협업
↓
배포
GitHub는 단순 저장소가 아니라 개발 이력을 관리하는 공간입니다.
13. .gitignore
React에서는
업로드하지 않는 파일이 있습니다.
예)
node_modules
dist
.env
.gitignore 파일에 작성합니다.
14. 동부산CC 버전 관리 예시
v1
프로젝트 생성
↓
v2
Header
↓
v3
Hero
↓
v4
CourseSection
↓
v5
Reservation
↓
v6
Gallery
↓
v7
배포
Commit을 자주 하면 언제든 원하는 시점으로 돌아갈 수 있습니다.
15. 브랜치(Branch)
브랜치는 새로운 기능을 안전하게 개발하기 위한 공간입니다.
main
↓
feature-reservation
↓
feature-gallery
기능 개발이 끝나면 main 브랜치에 합칩니다.
16. Git 기본 명령어
프로젝트 시작
git init
상태 확인
git status
파일 추가
git add .
저장
git commit -m "메시지"
업로드
git push
다운로드
git pull
17. React 개발 흐름
React 개발
↓
git add
↓
git commit
↓
git push
↓
GitHub 저장
18. GitHub의 장점
프로젝트 백업
변경 이력 관리
이전 버전 복원
협업 지원
포트폴리오 공개
배포 연동
19. 동부산CC 프로젝트 관리 예시
동부산CC
↓
Git
↓
GitHub
↓
Vercel
↓
실제 서비스
이 구조는 많은 React 프로젝트에서 사용하는 일반적인 개발 흐름입니다.
정리
Git은 프로젝트의 변경 이력을 관리하는 버전 관리 시스템이며, GitHub는 Git 프로젝트를 저장하고 공유하는 원격 저장소입니다.
React 프로젝트에서는 기능을 개발할 때마다 git add, git commit, git push를 통해 변경 사항을 기록하고 GitHub에 업로드합니다.
동부산CC 프로젝트도 GitHub를 이용해 버전별로 관리하면 기능을 안전하게 추가하고 이전 상태로 복원할 수 있으며, 포트폴리오와 협업에도 활용할 수 있습니다.
1. Git이란?
Git은 프로젝트의 변경 내용을 기록하고 관리하는 버전 관리 시스템(Version Control System) 입니다.
예를 들어 오늘 동부산CC 프로젝트를 수정했다면,
어떤 파일이 변경되었는지
언제 변경했는지
이전 버전으로 되돌릴 수 있는지
를 모두 관리할 수 있습니다.
2. GitHub란?
GitHub는 Git으로 관리하는 프로젝트를 인터넷에 저장하는 서비스입니다.
Git은 내 컴퓨터에서 버전 관리를 하고,
GitHub는 원격 저장소(Remote Repository) 역할을 합니다.
내 PC
↓
Git
↓
GitHub
↓
백업
↓
협업
↓
배포
3. Git 설치
Git을 설치한 후 확인합니다.
git --version
버전이 출력되면 정상적으로 설치된 것입니다.
4. 프로젝트 시작
React 프로젝트 폴더에서 실행합니다.
git init
그러면
.git
폴더가 생성됩니다.
Git 관리가 시작됩니다.
5. 상태 확인
git status
현재 변경된 파일을 확인할 수 있습니다.
예)
modified
App.jsx
Header.jsx
6. 파일 추가(add)
git add .
모든 변경 파일을 저장 준비 상태(Staging Area)로 올립니다.
특정 파일만 추가하려면
git add App.jsx
처럼 작성합니다.
7. Commit
git commit -m "동부산CC 메인 화면 완성"
Commit은 현재 프로젝트 상태를 하나의 버전으로 저장하는 것입니다.
예시
v1
메인 화면
↓
v2
예약 기능
↓
v3
좋아요 기능
8. GitHub 저장소 만들기
GitHub에서
새 Repository를 생성합니다.
예)
dongbusan-react
9. 원격 저장소 연결
git remote add origin
저장소주소
예)
git remote add origin
https://github.com/
아이디/
dongbusan-react.git
10. GitHub 업로드
git push
-u
origin
main
프로젝트가 GitHub에 업로드됩니다.
11. 변경 후 다시 업로드
파일 수정
↓
git add .
↓
git commit -m "예약 기능 추가"
↓
git push
이 과정을 반복합니다.
12. GitHub 활용
React 프로젝트
↓
GitHub 저장
↓
백업
↓
포트폴리오
↓
협업
↓
배포
GitHub는 단순 저장소가 아니라 개발 이력을 관리하는 공간입니다.
13. .gitignore
React에서는
업로드하지 않는 파일이 있습니다.
예)
node_modules
dist
.env
.gitignore 파일에 작성합니다.
14. 동부산CC 버전 관리 예시
v1
프로젝트 생성
↓
v2
Header
↓
v3
Hero
↓
v4
CourseSection
↓
v5
Reservation
↓
v6
Gallery
↓
v7
배포
Commit을 자주 하면 언제든 원하는 시점으로 돌아갈 수 있습니다.
15. 브랜치(Branch)
브랜치는 새로운 기능을 안전하게 개발하기 위한 공간입니다.
main
↓
feature-reservation
↓
feature-gallery
기능 개발이 끝나면 main 브랜치에 합칩니다.
16. Git 기본 명령어
프로젝트 시작
git init
상태 확인
git status
파일 추가
git add .
저장
git commit -m "메시지"
업로드
git push
다운로드
git pull
17. React 개발 흐름
React 개발
↓
git add
↓
git commit
↓
git push
↓
GitHub 저장
18. GitHub의 장점
프로젝트 백업
변경 이력 관리
이전 버전 복원
협업 지원
포트폴리오 공개
배포 연동
19. 동부산CC 프로젝트 관리 예시
동부산CC
↓
Git
↓
GitHub
↓
Vercel
↓
실제 서비스
이 구조는 많은 React 프로젝트에서 사용하는 일반적인 개발 흐름입니다.
정리
Git은 프로젝트의 변경 이력을 관리하는 버전 관리 시스템이며, GitHub는 Git 프로젝트를 저장하고 공유하는 원격 저장소입니다.
React 프로젝트에서는 기능을 개발할 때마다 git add, git commit, git push를 통해 변경 사항을 기록하고 GitHub에 업로드합니다.
동부산CC 프로젝트도 GitHub를 이용해 버전별로 관리하면 기능을 안전하게 추가하고 이전 상태로 복원할 수 있으며, 포트폴리오와 협업에도 활용할 수 있습니다.
#19. GitHub를 이용한 버전 관리