Git과 Github

01. Git 과 Github를 쓰는 이유

• 언제 어떤 코드가 수정됐는지 알고싶을 땐?
• 버전을 관리하고 싶을 땐?
• 실수로 파일을 삭제했을 땐?
• 다른 사람과 쉽게 공유하고 싶을 땐?

이 모든 문제를 해결해줄 뿐만 아니라
1. 용량 2. 협업 3. 관리
까지 모두 가능한 분산버전관리 툴이기 때문이다.

01-1. 기본 개념

Git : 분산 버전 관리 툴
GitHub : Git을 관리해주는 웹 호스팅 서비스
(즉, Git을 클라우드 환경에서 사용할 수 있게 제공하는 공간이 GitHub)

원격 저장소에 저장해두고, 코드를 가져오고 싶을 때는 원격 저장소에서 바로 가져올 수 있다. 이때, 코드 뿐만 아니라 코드의 변경 내역까지 모두 가져올 수 있는 버전 관리 도구이다.

02. Github

GUI (Graphic User Interface)
프로젝트에 데시보드 만들어서 사용도 가능! (노션의 보드 기능)

02-1. Repository 생성하기

1. Repository name 설정
2. Public or Private 선택

02-2. GUI를 이용해 Github에 파일 올리기

• history** -> push 내역 전부 볼 수 있음

github.com 을 github.dev로 바꿔서 들어가보면
(or 수정하려는 레포지토리 화면 보이게 하고 . 누르면 자동으로 dev주소로 바뀜!)
웹페이지에서 vscode 가 뜬다

• Read Me 는 마크다운 문법으로 작성함!

• 이 페이지는 ctrl + s 로 저장이 안됨!
• 작성 후에는 세번째 아이콘 누르고
  커밋 메세지를 작성 후,
  위 체크 아이콘(push&commit) 클릭!
  

02-3. 페이지 만들기

<index.html>

• 대문 페이지
• 다른 사용자들이 웹 사이트 방문하듯이 방문하도록 하는 페이지

Setting -> Pages -> main-> save -> 나의 페이지 생성 완!
(private인 레포지토리는 페이지 생성이 되지 않는다!)

• 주소보면 내 레포지토리로 페이지가 생긴게 보임
  (waterbinnn.github.io/testrepo/)

🤚 여기서 잠깐!

[Main branch]
git 의 메인 브런치 = master
github 의 메인 브런치 = main

[페이지 생성없이 페이지 볼 수 있는 방법]
아이디.github.io/레포명/보여주고픈 html 문서가 있는곳 위치/보여줄문서.html

- Repository 내 하위폴더 생성하기

사이트 이동이 가능하게 수정을 해보자

• Code -> Add File -> Create new file
• about/index.html 이런식으로 폴더과 파일 여럿 생성
  (내용 작성도 해줌)
  • 
  • 
• 페이지에서 링크 클릭했을 때 페이지 이동위해
  dev로(vscode) 다시 들어와서
  대표 index.html href에 파일 링크 넣어줌
  (그리고 세번째 아이콘 눌러서 메세지 작성 후 체크눌러 저장)
  
• 여기에서 About 링크 누르면
• 주소가 잘 연결됨을 볼 수 있다!
  

03. Git

깃이 다 설치되었다면
일단 저장소(git-test)를 만들어 보자

$ mkdir git-test
//git-test 를 생성
$ cd git-test
//git-test 안으로 들어가겠다
$ git init

리눅스 명령어로 git을 사용할 준비 완료!

🤚 여기서 잠깐

• 레포지토리 만들때 Readme 자동으로 만들게끔 설정하면 init 이런 과정 안해도 됨 !

03-1. Add & Commit

• 아래 그림을 보면 git pull -> git add . -> git commit ->git push 의 과정을 이해하기 쉽게 비행기에 빗대어 그림으로 나타냈다.
  • git pull : 깃으로 날릴 비행기가 준비됨
  • git add . : 날아갈 요소들의 대기상태
  • git commit : 내용을 싣은 비행기가 날 준비
  • git push : 날려보냄

(출처_제주코딩베이스캠프)

- 터미널 작성법

📌 README 를 자동생성 안했을 경우

$ touch README.md
$ git add README.md
$ git commit -m "first commit"

<리드미 파일을 생성(touch), 추가(add)하고 커밋(commit)하기>

• touch : 파일에 README.MD 생성

touch README.MD

• add : 커밋을 위해 대기 상태로 만들어줌

//add . : 전체 파일 커밋
$ git add .
//add 파일명 : 해당 파일만 커밋
$ git add README.md

• commit : 커밋메세지를 적으며 버전을 만든다

$ git commit -m "1 - 리드미파일추가"

03-2. Git ignore

git ignore 자동생성기
https://www.toptal.com/developers/gitignore
민감한 파일, 안올려도 되는 파일들 자동으로 생성해주는 사이트
생성하고 복사해서 .gitignore 파일에 추가하면 된다

03-3. 협업시 깃헙 주소 가져올 때

🤚 TIP
주소 가져올때 copy하고 shift ins 누르면 주소 붙여넣기됨(ctrl v가 안됨)

• 주소를 이렇게 그대로 가져오면 새로운 파일이 생성되고

git clone https://github.com/waterbinnn/testrepo.git

• 주소 뒤에 띄어쓰기.
  하면 새로운 폴더 생성 안하고 그 자리에서 파일 불러오기가 된다 (이렇게 하는게 좋음)

git clone https://github.com/waterbinnn/testrepo.git . 

• git pull
  : 처음 가져올때는 clone을 copy해줬지만
  다음부터는 pull만 해주어도 가장 최신의 레포지토리를 가져와준다.

git pull 
git add .
git commit -m ""
git push 

---

04. README없이 레포지토리 생성했을때 커밋

위에선 repository 를 Readme 자동생성해서 만들어줬지만,
이번에는 Readme 자동생성 없이
새로운 githubprac 이라는 레포지토리를 만들어 보았다.
이 하나의 차이가 엄청난 노가다를 가져옴 ,,

• branch는 기능 하나당 쪼개지는거라고 생각
  (협업할때 자주 사용하지 혼자 작업할때는 main 으로 하면 된다)

데스크탑에 빈폴더 네임을 만들어주고
터미널을 열어서 깃헙에 적혀있는대로 해주면 된다!

• (아래 이미지는 그렇게 했을때의 터미널)
  

그대로 따라서 작성했다면 커밋 완료!

• README.md 가 잘 커밋됨을 볼 수 있다
  

정리해 본 코드

시작하기: git init
유저 이름 설정: git config --global user.name ""
이메일 등록: git config --global user.email #####@gmail.com
파일 추가: git add .
메세지 입력: git commit -m "first commit"
보낼 곳 등록: git remote add origin https://github.com/위치/위치.git
보낼 곳으로 코드 전송: git push origin master

---

🦁 Tips

1. Visual Studio Code 랑 Git 연동하면 편함
https://www.youtube.com/watch?v=hKhX87L2ydQ
연동하면 git add 이런 과정 안해주고 dev에서 해주던 것처럼 아이콘 눌러서 할 수 있음!

2. 오류나면 git 강제로 push 해주기
git push origin +main

3. 자바스크립트로 동영상 배속 설정하기

document.getElementsByTagName("video")[0].playbackRate = 3;

대부분 2배속까지만 가능한데
콘솔창에 이 코드 입력하면 더 높은 배속으로 변경해줄 수 있다!