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

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

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

 

다음과 같이 2가지 방법으로 구분하여 정리하므로 가능한 모두 학습해 보시고 실제 사용할 때 선택해서 사용할 수 있습니다. 먼저 본 글에서 첫 번째 방법인 Git Bash Shell에서 모두 명령어로 진행하는 방법을 정리해 보겠습니다. 

 

두 번째 방법은 다음 글에서 정리합니다. 

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

 

로컬 React 프로젝트 이름과 원결 Github Repository 이름을 임으로 다음과 같이 사용하겠습니다.

  - GitHub Repository 이름 : MyReactApp

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

 

 

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

 

[Github생성]Git과Github 뭐가 다를까? Git과 GitHub연동하기

 

• 등록된 사용자 정보 확인

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 생성할 때 등록한 이메일

 

---

1️⃣ Git Bash Shell에서 GitHub 연결하는 방법

Git 명령어를 사용할 수 있는 여러가지 도구 중 Git 설치할 때 함께 추가 되었던 Git Bash Shell를 이용해 보겠습니다. 물론 PowerShell, 명령 프롬프트 등을 이용할 수 있습니다. 

(1) Git 초기화

먼저, Git을 사용할 수 있도록 프로젝트 폴더에서 Git 저장소를 생성합니다. 
터미널을 열고 My-App 프로젝트 폴더로 이동한 뒤, 아래 명령어를 실행합니다. 

cd My-App
git init

 

프로젝트 git 초기화

 

이제 .git 폴더가 생성되면서 Git이 활성화된 상태입니다. 

---

 

(2) .gitignore 파일 설정

React 프로젝트에서는 설치한 패키지를 보관하는 node_modules/ 폴더가 생겼죠! Git 정보에 이와 같은 불필요한 정보는 저장하지 않아도 됩니다. 따라서 불필요한 파일이 Git에 추가되지 않도록 .gitignore 파일을 만들어서 현재 폴더 중 node_modules 폴더를 제외하도록 하겠습니다. 

echo "node_modules/" >> .gitignore

 

명령어를 실행하고 나면 폴더에 .gitignore 파일이 다음과 같은 생성된 것을 확인할 수 있습니다.

 

---

(3) 첫 번째 커밋

이제 현재 폴더를 git에 추가하고 첫 번째 commit을 작성하면서 "Init Project"로 commit 명령어를 남겨 놓겠습니다.

git add .
git commit -m "Init Project"

 

Windows와 Linux의 라인 변경의 방식 차이로 인해 warning이 보일 수 있습니다. 이 부분은 무시하고 다음 절차를 진행해도됩니다. 

 

이제 프로젝트 파일이 Git에 저장되었습니다. Git에는 변경하는 내용과 어떤 내용을 변경했지는에 대한 메시지를 작성하고 commit 하면서 변경 history를 만들 수 있습니다.  추가 또는 변경은 원격 Github

---

(4) GitHub 원격 저장소 생성

이제 GitHub에 접속해서 새로운 저장소를 생성해보자.

1. GitHub 로그인 후 New Repository 버튼 클릭
2. Repository name: MyReactApp 입력
3. Initialize this repository with a README는 체크하지 않음
4. Create repository 클릭

 

이제 원격 저장소가 생성되었으며 다음과 같은 페이지로 넘어 갈 것입니다. 

 

이미 로컬 Git에 초기화 한 상태이므로 방금 생성한 Github Repository를 추가하면 되므로 아래 부분의 명령어를 복사하여 로컬 git bash에서 붙여 넣기 하겠습니다.

자 이제 로컬 Git과 원격 Github가 연동 되었습니다.

 

명령어의 역할을 살펴 보겠습니다. 

 

• 다음 명령어는 로컬 git에 원격(remote) Respository를 등록하는 절차입니다.  

git remote add origin git@github.com:Github_user.name/MyReactApp.git

 

• 다음 명령어로 인해 연동 전에 로컬에 (master) 로 표시되었던 기본 branch 이름이 (main)으로 변경되었습니다. 

git branch -M main

 

이 사항은 선택이지만 처음 로컬 git이 초기화 될 대 자동으로 생성되었던 branch 명이 master였고 원격 저장소가 생성될 때는 기본 branch 이름이 main이 되었으므로 같은 이름으로 될 수 있도록 실행합니다.  만약 양쪽의 branch 이름이 같다면 진행할 필요가 없는 명령어입니다.

• 다음 push 명령어는 로컬 Git의 현재 정보를 원격 Repository로 복사하는 절차입니다. 

git push -u origin main

 

push까지 진행되었다면 원격 Github 화면에 로컬 정보가 저장된 것을 볼 수 있습니다. Github 웹 화면을 새로고침하세요. 다음과 같이 파일 upload 된 것을 확인할 수 있습니다. 

---

(4) 로컬 코드 수정 후 GitHub에 적용

처음 생성된 프로젝트 정보는 GitHub에 업로드 되었으므로 이제 로컬 환경에서 코드 수정을 하며 프로젝트를 진행하는 상황을 간략히 진행해 보겠습니다. 필요한 절차는 다음과 같으며 반복된 작업을 하며 프로젝트를 완성해 갑니다. 

• 로컬에서 코드 수정 및 추가
• commit
• github에 push

 

(a) 로컬에서 코드 수정하기

 

프로젝트 폴더를 VS Code로 열고 기존 src/App.js 파일에 딱 한 줄을 추가해 보겠습니다. 그리고 "Add message"라는 메시지로 commit하고 다시 push 해 보겠습니다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to React!</h1>
      <h6>Github Test!</h6>
    </div>
  );
}

export default App;

<h6>Github Test!</h6> 코드 한 줄이 추가되었습니다. 

 

먼저 추가된 내용을 보고 싶다면 다음 명령어로 확인할 수 있습니다.

 

git status

변경 내용이 있으며 변경 내용을 사용하는 방법이 소개 됩니다.

 

자 이제 변경된 파일을 다시 git에 적용해 보겠습니다.

git add src/App.js

 

 

(b) commit 진행: 변경 내용에 대한 설명으로 "Add message"라고 설정하겠습니다. 명령어 실행 결과는 몇 개의 파일이 변경되고 추가되었는지에 대한 정보가 보여집니다.

git commit -m "Add message"

 

(c) 로컬의 변경 사항을 원격 Github에 Push : 명령어 실행 절차가 진행되며 100% 메시지와 함께 원격 저장소에 update가 되었다는 것을 알 수 있습니다.

git push origin main

 

(d) 원격 Github에서 변경된 내용 확인: Github 웹을 새로 고침한 후 변경한 파일 위치 src/폴더까지 이동한 후 App.js 파일이 변경되었는지 확인합니다.

 

update 완료 확인

---

(5) 마무리

• git bash shell을 통해서 git 초기화부터 github 연동까지 진행 가능
• git init → git add . → git commit -m → git remote add origin → git push origin main
• 언제든 연동된 상태에서 로컬에서 개발되는 내용을 git에 commit하고 그 변경된 내용을 원결 github에 update 가능하므로 협업도 가능하면 한 장소에서만 개발해야한다는 제한에서 벗어날 수 있습니다. 

 

git과 github을 사용하는 다양한 방법들을 앞으로도 꾸준하게 정리해 보겠습니다.