[React 개발환경4]VSCode에서 직접 Git+Github연동!

React개발 환경인 VSCode + Git + Github 방법(2)

VS Code에서 React 개발 하면서 버전관리로 Git를 사용하고 원격 저장소로 Github를 사용하는 경우 서로 연동하는 방법 정리을 정리 중이며 본 글에서는 다음의 2번째 방법을 정리해 보겠습니다.

 

1️⃣ Git Bash Shell(PowerShell, 명령 프롬프트)에서 명령어로 연결하는 방법
2️⃣ Visual Studio Code에서 GUI로 연결하는 방법

 

만약 이 문서를 먼저 보는 경우라면 VS Code 준비와 Git 사용할 준비가 되어 있어야 하며 Github에 회원 등록된 이후에 사용 가능 합니다. 각각의 방법은 해당 글을 통해 준비하고 오세요. 

또는

첫 번째 방법인 Git Bash Shell에서 모두 명령어로 진행하는 방법을 정리된 이전 문서를 참고하세요.  

 

[React 개발환경3]GitBash 이용! VSCode+Git+Github연동

 

 

---

 

기존에 Git 설치와 Repository 생성할 수 있는 절차는 이미 되어 있다고 생각하고 그 이후부터 작성하겠습니다. 만약 설치 전이라면  다음 링크로 이동하여 먼저 설치하고 진행 해야합니다. 

• 등록된 사용자 정보 확인

git config --global --list

 

이전에 등록한 user.name과 user.email 정보가 없다면, 다음 명령어로 설정해 줍니다. 

git config --global user.name "Your Name"                             
git config --global user.email "your.email@example.com"     

user.name     ---> Github 생성할 때 등록한 이름

user.email     ---> Github 생성할 때 등록한 이메일

 

로컬 React 프로젝트 이름과 원결 Github Repository 이름을 임으로 다음과 같이 사용하겠습니다. 설명을 위해 React 프로젝트 이름과 Github Repository 이름을 다음과 같이 임의로 작성하겠습니다.

  - GitHub Repository 이름 : My-App2

  - React 프로젝트 이름 : My-App2

---

2️⃣ Visual Studio Code에서 GitHub 연결하는 방법

VSCode에서는 GUI를 활용해서 더 간편하게 GitHub과 연결할 수도 있습니다. 실습을 위해 미리 React 프로젝트를 생성하고 폴더 이동을 합니다. 

 

C:\.....작업폴더\>npx create-react-app my-app2
Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) y
...

C:\.....작업폴더\>cd my-app2

---

VS Code 주요 아이콘의 용도 요약

---

1. VSCode에서 Git 활성화

• VSCode에서 My-App2 프로젝트 열기

C:\.....작업폴더\my-app2>code .

 

• 왼쪽 사이드바 → Source Control (소스 제어) 아이콘 클릭하여 git init을 실행합니다. 

 

• 소스 제어을 클릭 한 후 다음과 같은 화면을 본다면 정상적으로 로컬 git이 현재 프로젝트에서 초기화 되었다는 것으로 이해할 수 있습니다.  git bash shell 명령어의 git init와 같은 역할입니다.

 

git init 상태가 아니라면 다음 더보기를 참고하세요.

<참고>

git init 된 상태라면 본 참고 사항은 지나가도 됩니다. 

• 만약 git init을 되지 않는 상태라면 "소스 제어"를 클릭했을 때 화면에서는 "리포지토리 초기화"와 "Github에 게시" 버튼이 보이게 됩니다. 해당 버튼을 순서대로 클릭하여 현재 폴더에 Git Repository를 초기화 할 수 있습니다.  

• 메시지 입력, commit 진행하여 로컬 Git 초기화 합니다.(git init)

• 게시 Branch 선택하여 원격 Repository 생성하고 동기화 합니다. 

• 원격 Repository 이름은 반드시 로컬 프로젝트 이름과 같지 않아도 되므로 원하는 이름 입력 가능합니다. 본 절차까지 진행한 후 Github에서 생성을 확인할 수 있습니다. 

• 로컬 Git에 첫 번째 commit을 진행합니다. 메시지 창에 "React Project Init"이라고 작성하고 게시 Branch를 클릭하면 commit과 동시에 원격 Github에 my-app2 Repository가 생성됩니다. 

Github에 my-app2가 성공적으로 생성되어 로컬 Git과 연동됨

 

• Github에서 열기: my-app2 Repository가 성공적으로 생성되고 로컬 프로젝트 내용이 push가 되었는지 확인합니다.

 

---

 2. 로컬 코드 수정 후 GitHub에 코드 업로드

• VS Code에서 수정이 필요한 파일을 먼저 변경합니다. 또는 새로운 파일을 생성도 가능합니다.  

App.js 내용 수정함

• 내용을 수정하면 왼쪽 "소스 제어" 아이콘에 변화한 파일의 개수가 표시되는 것을 볼 수 있습니다. 해당 버튼을 클릭하면 다음 화면과 같이 "변경 내용 스테이징"이 보이게 되며 +버튼을 클릭합니다. 만약 변경 사항이 여러개 이며 그 중 일부 파일만 commit하고 싶다면 해당 파일만 +버튼을 클릭할 수 있습니다. 

로컬에서 변경 사항된 목록을 볼 수 있음

• 변경 내용 스테이징(+)를 클릭하면 다음 그림처럼 "스테이징된 변경 사항" 부분에 등록되며 "변경 사항"에는 개수가 줄어 든 것을 볼 수 있습니다.
• ✔ commit(커밋) 버튼을 클릭합니다. 

메시지를 입력하고 commit 선택

• 이후 나타나는 "변경 내용 동기화" 버튼을 클리하면 commit/push 확인 메시지가 나타납니다.  "확인" 버튼을 클릭하면 로컬의 변경 내용이 원격 Github에 적용됩니다. 

Git과 Github가 동기화 되는 과정

• 모든 과정이 끝나면 동시에 등록했던 commit 메시지가  등록되며, 더 이상 commit(커밋)할 내용이 없는 화면으로 변합니다. 

 

• Github에서 기존 내용이 Update 되었는지 확인합니다. 

원격 Github에 Update 완료됨