VS code 이용하여 Git-hub 에 전송

 

Github 는 간단히 말하면 저장소이다.

이곳에 저장을 해두면 집, 회사 등등 어디서든 자유롭게 이용할 수 있어 편리하다.

그 중 가장 좋은 점은 이력관리가 가능하다는 것이다.

작업하다가 한달 전 작업물로 되돌리고 싶다면 되돌릴 수 있다. 예전 시간대로 이동하거나 다른 버전으로 개발이 가능하다.

 

과거에는 유료였으나 현재는 무료로 배포 중이며 github에 가입을 하고 vs code(Visual Studio Code)를 설치했다면

github와 vs code를 연결해 줄 또 하나의 프로그램을 설치해야한다.

이건 git-scm.com에서 다운받을 수 있다.

 

 

>참고사항 : vs code 설치할 때 아래를 다 체크해주면 사용하기가 더 편해진다.

반면에, git-scm에서 설치할 때는 다른 건 건드리지 않고 next만 눌러서 설치한다.

 

 

 

 

 

 

Vs code에서 작성한 코드를 github로 전송하려면 아래와 같은 구조를 알고 있어야 한다. 

 

여기서 Remote repository가 github이다. Vs code의 기능 중 터미널에서 아래 명령문들을 입력하여 github에 전송하는 구조이다.

 

 

 

Vs code를 처음 사용할 때 Extensions(왼쪽 끝 블록모양 아이콘)에서

*****Mithril Emmet

*****Live Server

Material Icon Theme

Color Picker

을 검색하여 install해준다.

Emmet과 Live server는 필수이다. Emmet은 vs code에서 자체적으로 깔려있다는데 일단 또 깔아본다. Emmet은 단축키와 같은 기능을 해주는데 !만 입력하고 tab을 누르면 기본 코드가 자동으로 작성된다.

Live server는 책에서도 깔라고 시키는 기능이다. 저장을 하고 오른쪽 버튼으로 Open with Live server 를 누르면 저장할 때마다 변경된 화면을 바로바로 보여줘서 편하다.

 

 

 

Vs code에서 폴더를 하나 만들고 html 파일을 만들어 전송할 코드 먼저 작성한다.

확장자는 꼭 .html 이어야 하고 

lang="En" 영어에서 Ko로 바꿔줘야 한다.

 

만든 파일을 Ctrl+S 로 저장하였다면

메뉴 중 Terminal > New terminal을 선택한다.

 

이제 위에서 잠깐 보았던 명령어들을 입력해야 한다.

기본적으로 가장 중요한 건 오타가 나서는 절대 안된다는 것이다. 또는 띄어쓰기가 잘못되어도 프로그램은 제대로 작동하지 않는다.

 

 

 

아래에 창이 뜨면서 어쩌구 저쩌구 써있는데

마우스 커서 위치 그대로 두고 git version을 입력한다.

 

그러면 git version 2.32.0 어쩌구가 뜬다. 대강 git 버전이 이걸로 설치되었구나 한다.

 

git version : git가 설치되었는지 안 설치되었는지 확인할 때

 

 

다음으론 git init을 입력한다.

중요한 명령어로 작업공간을 형성한다. 까먹지말고 꼭 입력해주어야 한다.

 

 

★ git init : 작업공간(work directory)형성

git init을 치면 숨김파일로 위의 파일이 생성된다.

 

작업공간에서 stage로 올리기 전에

github에 가입한 내 계정을 등록하자. 띄어쓰기 하나라도 잘못되면 연결이 안되니 주의하자

 

git config --global user.email "github에 가입했던 내 이메일주소"

git config --global user.name "github에 가입했던 내 이름"

 

 

제대로 입력되었는지 확인하려면 

git config --global user.email

git config --global user.name

을 입력해보면 내 이메일 주소와 이름이 뜬다.

 

git config --global user.email "github에 가입했던 내 이메일주소" 
    : 내 개인저장소에 github 이메일주소 등록(연결)
git config --global user.name "github에 가입했던 내 이름"     
    : 내 개인저장소에 github 이름 등록(연결)
git config --global user.email     : 이메일 제대로 등록되었는지 확인
git config --global user.name     : 이름 제대로 등록되었는지 확인

 

 

 

그럼 다시 작업공간에 둔 걸 stage에 올리자.

git add *를 입력한다. *는 전체 파일을 의미한다.

 

그 다음 git commit -m "파일이름 작명" 을 입력한다. 여기서 m은 message(메시지)의 약자이다. 이때 m 뒤의 작명한 파일명은 github에서 올라갈 파일명이기도 하다. 편하게 first, second 이런식으로 작명해서 올린다. (연습용이니깐)

 

중간중간 확인할 때마다 git status 명령문을 넣으면 상태가 나온다. (초기에는 이것저것 안되어있는게 많아서 괜히 입력하다가 더 헷갈리는 것 같다.)

 

 

git add * : 전체를 staging area에 올린다.
git commit -m "작명한 파일이름"  : local repository에 올린다. 
git status : 현재 상태 확인할 때

 

 

 

이제 github에 들어가서 내 저장소랑 연결해주자

들어가자마자 왼쪽에 보이는 New를 눌러도 되고

오른쪽 끝의 동그란 프로필 사진을 눌러 Your repositories를 클릭하면 아래와 같은 화면이 나온다.

 

 

여기서 New를 누르면

Create a new repository 라고 뜨면서 

Repository name 을 입력하는 칸이 뜬다.

 

여기에 이름을 지어서 넣어주고 아래 create repository를 누르면 여러 code가 뜬다. 

우리는 만들었으니깐 두번째 코드 

…or push an existing repository from the command line

아래에 있는 세 줄 코드를 복사해 vs code 터미널에서 커서가 있는 곳에 ctrl+v 복사 붙여넣기로 넣어준다. 

 

 

 

 

그러면 아무 변화가 없는데 아무 변화가 없는게 아니라 아래 조그만 창이 하나 있다. 

 

당황하지 말고 비번(token)을 입력하거나 sign in with your browser를 눌러준다.

sign in with your browser를 눌러주는 것이 훨씬 간편하다. 그러면 성공했다는 창이 뜬다. 다시 새로고침해서 들어가면 내가 만들었던 파일이 보인다. 

 

github와 연결은 이렇게 끝!

 

 

 

 

---

<파일을 수정했을 때 쉬운 전송방법>

 

 

 

이제 등록을 했으니 내용 수정시 좀 더 편하게 전송하는 방법을 이용한다.

아래 동그라미 세 개의 네트워크 같은 모양이 터미널 역할을 해준다.

 

 

 

 

github에 올린 html을 수정했으면 위 이미지처럼 1, 2 이런식으로 뜬다.

들어가서 변경한 파일을 클릭하면 + (=stage changes)를 눌러준다.

+가 add 역할을 해준다. add 안 쳐도 누르면 stage로 전송된다.

 

 

그 다음 위에 message (Ctrl + Enter to ~~)라고 써져있는 칸이 있는데 commit 역할을 한다고 보면 된다.

쓰여진 내용 그대로 파일명 그대로 치고 ctrl+Enter를 누른다.  그 다음 위에 있는 ... 점 세 개를 누르면 Push가 있다.

이걸로 최종 github에 전송한다.

 

 

github를 새로고침하고 내 저장소로 들어가 변경된 파일 내용을 확인하면 변경되었음을 확인할 수 있다. 

이런 식으로 하면 하나하나 명령어를 누르지 않아도 간편하게 수정된 내용을 전송할 수 있는 것이다.

 

 

 

 

210726 학원 복습 끝