[React] React를 git과 연동하여 버전관리 하기

React와 git을 연동하면 어떤 것이 편해질까?

React 프로젝트를 Github에 저장하여 언제 어디서나 이어서 수행할 수 있을 뿐만 아니라, 프로젝트 내에서 수정 사항이 있을 시 변동 정보가 감지되어 수정된 목록을 확인 할 수도 있고, 수정된 파일만 commit 하여 바로바로 Github 저장소에 업데이트 할 수 있다.

 

아래 사진 App.js 19줄에서 Learn React!!!! 에서 ! 하나를 더 붙여 Learn React!!!!! 로 만들고 File을 저장했더니 좌측 3번째 메뉴에서 Changes에 1이 뜬 것을 볼 수 있다. 그 파일은 역시 App.js이고 ! 하나가 더붙었다는 변동 정보를 감지 한 것이다.

 

여러분들이 이 연동 과정을 수행하기 위해 사전에 해놓아야 하는 2가지가 있다.

 

• Visual Studio Code 설치
• Github 회원가입

 

Visual Studio Code 좌측 3번째 메뉴에서 git이 설치되어 있다면 특별한 문구가 뜨지 않을 것이다.

그러나 git이 설치되어 있지 않다면 git을 설치하라는 문구와 함께 다운로드 사이트로 안내해주는 링크가 뜰 것이다.

 

설치에 완료 했으면 문구가 사라지고 이런 식으로 변동 정보만 나온다.

 

그 다음 github에 프로젝트를 저장할 Repository를 새로 만들어야 한다.

Create repository를 누르고 <>Code 메뉴에 들어가면

...or create a new repository on the command line 아래에

5~6줄 정도의 git 문이 나열되어 있을 것이다.

 

이 git문들을 cmd에서 프로젝트 폴더로 들어가서 한줄한줄 입력해주면 된다.

 

이제 기본적인 연동과정은 끝났고 이제 변동 사항을 업데이트 해보자.

처음에는 Github 저장소에 아무 정보도 없기 때문에 업데이트 해줘야 할 정보는 무수히 많을 것이다.

즉 처음에는 Changes 에는 엄청난 숫자가 뜰 것이다.

본인은 이미 이 과정을 완료했으며 소스코드 하나만 바꾼 것이므로 1 만 뜨는 것이다.

 

이렇게 변동 사항이 표시 되었으면 체크 표시를 클릭하여 Commit 해주자.

그 아래에 있는 문구는 아무 문구여도 상관 없다. 

본인은 ! 하나가 바뀌었다는 의미로 change<!> 로 막 쓴것이다.

어떤 정보의 업데이트인지 개발자가 알아볼 수 있게 하는 텍스트이다.

 

 

 

Commit에 성공하면 Changes 에는 아무것도 뜨지 않는다.

 

이제 cmd를 켜고 프로젝트 폴더로 이동하자

여기에

git remote add origin https://github.com/본인계정이름/저장소이름 

git push --set-upstream origin master

 

이 두줄을 입력하면

변동된 정보까지 포함한 모든 프로젝트 파일들이 Github 저장소에 있는 것을 볼 수 있다!

 

단, git remote add origin https://github.com/본인계정이름/저장소이름 은 연동할 때에 최초 1회만 실행하면 된다.

본인은 이미 연동했으므로, 아래 cmd에서 공백 미포함 5번째줄에 fatal: remote origin already exists. 라는 문구가 뜬다.

이미 연동에 성공하여 remote origin이 존재 한다는 의미다.

 

이제 Github 저장소에 가보면

 

Commit 할 때 입력하였던 change<!> 라는 참조 문구와 함께, Learn React!!!! -> Learn React!!!!! 로 느낌표 하나가 추가된 변동 정보까지 성공적으로 업데이트 완료 된 것을 볼 수 있다.