VS Code에서 React 프로젝트를 GitHub에 올리는 방법

How to Upload a React Project to GitHub with VS Code

---

리액트 프로젝트 진행하다가 형상 관리 하는 걸 깜박하고 있어서 글을 작성하게 됐어요. 진행할게요!!

 

1. Git 설치 및 로그인

깃 다운로드 링크

https://git-scm.com/downloads/win

Git - Downloading Package

깃 설치하셨다면 Git Bash 열어서 아래 명령어를 작성해주세요. 작성하시면 Git 사용자 정보를 설정하는 명령어에요. 즉, Git은 커밋 할 때마다 누가 이 커밋을 만들었는지 기록을 하는거에요.

git config --global user.email "이메일"
git config --global user.name "이름"

--global: 전역 설정이에요. 내 컴퓨터 전체의 Git 설정에 적용돼요.
(즉, 앞으로 만드는 모든 Git 프로젝트에서 이 설정이 기본으로 사용됨)
user.name: 커밋할 때 남길 이름
user.email: 커밋할 때 남길 이메일 주소

2. GitHub에서 저장소 만들기

GitHub에 로그인한 후, 오른쪽 상단의 + 버튼을 클릭하고 New repository를 선택합니다.

1. Repository name을 입력합니다.
2. Visibility를 설정합니다
   • Private: 코드가 다른 사람에게 보이지 않도록 하려면 Private을 선택합니다.
   • Public: 모든 사람이 볼 수 있도록 하려면 Public을 선택합니다.
3. Create repository 버튼을 클릭하여 저장소를 생성합니다.
4. 생성 후 URL이 보이는데 저장소의 URL을 복사합니다. URL을 통해 나중에 프로젝트와 연결할 수 있습니다.

3. VS Code에서 Git 초기화

 

• VS Code에서 React 프로젝트를 엽니다.
• 터미널을 열고 아래 명령어를 입력하여 Git을 초기화합니다.

git init

 

이 명령어는 .git 폴더를 생성하고 Git 버전 관리 시스템을 시작합니다.

4. GitHub 저장소 연결하기

GitHub에서 생성한 저장소의 URL을 이용해 원격 저장소를 연결합니다. 터미널에 아래 명령어를 입력합니다.

git remote add origin https://github.com/yourusername/your-repository-name.git

5. 변경 사항 커밋하기

1. 변경 사항 추가: 프로젝트 파일을 Git에 추가합니다
2. 커밋: 변경 사항을 커밋합니다.

git add .
git commit -m "Initial commit"

6. GitHub에 푸시하기

GitHub에 코드를 푸시하여 업로드합니다. 아래 명령어를 입력하세요.

 

• git push -u origin main 을 실행하면 Git이 GitHub에 인증된 사용자임을 확인하려고 해요.
• GitHub에서 브라우저 인증을 요구하면 자동으로 웹 브라우저가 열리고 그 때 브라우저 주소창에 127.0.0.1:9777/?code=...&state=... 같은 주소가 나타나요. 이게 바로 Git Credential Manager (GCM) 또는 VS Code Git 연동에서 사용하는 OAuth 인증이에요.
• 인증이 완료되면 터미널에서는 Enumerating objects..., Compressing objects..., Writing objects... 같은 메시지와 함께 푸시가 성공적으로 완료됩니다.

 

git push -u origin main

끝