vscode - github 연결하기

 

먼저 사용자의 PC에 기본 셋팅을 하여야합니다.

 

1.Visual Studio Code 설치

2.git 설치

3.github 계정을 가입

 

 

1.Visual Studio Code 설치는 

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

에서 설치하시고 저는 따로 한글화 패치만 한 상태입니다. 

한글화 패치는 

 

왼편의 사각형을 누른 후 korean 검색 후 install을 누르시면됩니다.  vscode가 재시작후 한글로 바뀝니다. '

 

 

 

 

2.git 설치

 

https://git-scm.com/downloads

Git - Downloads

에접속하여 OS버전에 맞는 git을 다운로드하여 PC에 설치합니다.

설치가 완료되면 시작에서 git bash를 검색하여 확인합니다.

 

 

 

3.github 계정을 가입

 

https://github.com/

Build software better, together

에 접속하시어 가입하시면됩니다.

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

저는 기존에 리액트테스트용 소스를 가지고 git저장소를 생성하여 소스를 업로드 해보겠습니다.

만약 리액트테스트용 소스가 없으신분은 아랫링크를 참고해주세요.

https://lesserpandas.tistory.com/101

[react #1] create-reactp-app 설치

-----------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

자 먼저 소스를 저장하기위해 github에 저장소를 생성해야 합니다. github에 로그인한다음에 아래와 같이 화면이 뜨면 New를 클릭합니다.

 

 

저장소명을 입력하신 다음에  이 저장소에 대해 모든사람과 공유를 하려면 Public / 비밀저장소로 하고싶으면 Private로 작성합니다. 

Create repository를 클릭하여 생성합니다.

 

생성이 완료가 되었다면 위와 같이 화면이 보일것입니다.

저장소에 대한 설정은 끝났습니다.

 

git bash를 실행하여 프로젝트에 git을 연결합니다.

 

cd 프로젝트 위치 로 이동하여 

 

상단 이미지에서 

…or create a new repository on the command line

이라고 되어있는 글을 하나씩 입력합니다..

>echo "# git-link-test" >> README.md

>git init

>git add README.md

>git commit -m "first commit"

>git remote add origin https://github.com/dw-kim/git-link-test.git

>git push -u origin master

 

이렇게 입력을 하게되면 git과의 연결이 되었습니다.

 

github화면을 F5를눌러 refresh를하게 되면 업로드한 소스정보를 확인할수 있습니다.

 

만약에 프로젝트가 이미 git과 연결되어있고 이 링크를 다른데로 연결하고싶다고 하신다면 remote연결을 바꾸는 방법과 파일안에 .git파일을 지우고 실행하는 방법이 있습니다.

후자의 경우에는 위의 명령어를 입력했을 경우 github에  

README.md하나만 생성이 되고 나머지 소스의 경우는 따로 업로드 해주셔야합니다. 

 

 

 

이제 소스를 수정후 github에 적용하는 방법을 알아보겠습니다.

 

소스를 적용하는 단계에는 

 

1. 소스 수정 -> 2.변경 내용 스테이징 -> 3.커밋 -> 4.push

 

총 네단계가 있습니다.

1.의 경우는 말 그대로 소스 수정이고 

2.는 변경 내용에 대해 인지하였고 업로드할 바구니에 담아주세요라고 생각하시면 될겁니다.

3.은 커밋이라는 부분이 헷갈릴수가 있는데 local 저장소에 먼저 저장을 하겠다라는 말입니다.

svn을 사용하신 분들이 제일 많이 헷갈려 하시는부분일겁니다. git은 local저장소(개인 PC의 local 디렉토리)에 먼저 

저장후에 원격 저장소인 github에 업로드를합니다. 

 

이 원격 저장소에 업로드하는 부분이 push입니다.

 

1.소스 수정

주석으로 //업로드 테스트를 입력을 합니다. 소스를 수정을 하면 좌측화면에 수정을 한 소스파일 갯수가 표시가 됩니다.

 

 

좌측에 숫자가 표시된 source contoll이라는 곳을 클릭을 하게 되면 위 화면과 같이 수정된 파일과 수정내용이 나타납니다.

 

2.변경 내용 스테이징

업로드할 소스들을 우클릭하여 변경 내용 스테이징을 클릭합니다. 

 

3.커밋

스테이징을 하면 스테이징된 변경 내용이라는 부분으로 소스파일이 옮겨지며 위 빨간부분의 체크를 클릭하여 커밋합니다. 커밋 메시지는 되도록 잘 알아볼수있게 적어주세요

 

4.push

커밋이 완료가되면 소스는 로컬 저장소에 업로드가 됩니다. 이제 원격 저장소인 github에도 싱크를 맞추기 위해 push를 해보겠습니다.

 

변경된 내용을 확인을위해 

github 화면으로 돌아와 수정한 파일인 App.js를 확인하여 제대로 적용되었는지 확인합니다. 

커밋메시지와 시간이 변경 된걸 볼수 있습니다.

 

다음시간에는 git 소스를 다운받는법과 변경될때마다 변경된 내용을 업데이트하는방법을 알아보겠습니다.