VS Code와 GitHub 리포지토리 연결하기

문제 상황

React 프로젝트를 시작하면서 GitHub 리포지토리와 연결해야 하는 작업이 있었습니다.

이 글에서는 프로젝트를 로컬에서 생성한 후 GitHub에 리포지토리를 생성하고 연결하는 과정을 정리했습니다.

---

GitHub 리포지토리 연결 과정

1. React 프로젝트 생성

VS Code 터미널에서 React 프로젝트를 생성하는 과정은 다음과 같습니다:

터미널에서 원하는 디렉토리로 이동:

cd ~/projects

 

React 프로젝트 생성:

npx create-react-app my-react-project

 

프로젝트 디렉토리로 이동:

cd my-react-project

 

이 과정을 통해 로컬에서 React 프로젝트가 준비됩니다.

---

2. Git 초기화 및 파일 커밋

프로젝트 디렉토리에서 Git 초기화:

git init

 

모든 파일 스테이징:

git add .

 

커밋 메시지 작성:

git commit -m "Initial commit"

---

3. GitHub 리포지토리 생성 및 연결

GitHub 웹사이트에서 새로운 리포지토리를 생성합니다:

• 리포지토리 이름 입력 (예: my-react-project).
• README 파일 초기화를 선택하지 않습니다.
• 리포지토리 생성 버튼 클릭.

생성한 리포지토리와 로컬 프로젝트를 연결:

git remote add origin https://github.com/<사용자이름>/my-react-project.git

 

브랜치를 main으로 설정하고 첫 푸시:

git branch -M main

git push -u origin main

---

4. VS Code에서 Git 연동 확인

1. VS Code 왼쪽 사이드바에서 Source Control 아이콘 클릭.
2. 변경 사항이 추적되고, GitHub 리포지토리와 연결되었는지 확인.
3. 이후 파일을 수정하고 아래 명령어로 변경 사항을 업데이트할 수 있습니다:

git add .

git commit -m "Update project"

git push

---

관련 명령어 정리

• Git 초기화:
• git init
• 파일 스테이징 및 커밋:
• git add .
• git commit -m "Commit message"
• 원격 리포지토리 연결:
• git remote add origin <repository-url>
• 브랜치 설정 및 푸시:
• git branch -M main
• git push -u origin main

이 과정을 따라하면 React 프로젝트와 GitHub 리포지토리를 쉽게 연동할 수 있습니다.