처음 VS Code에서 GitHub로 올릴 때, 모두가 한 번쯤 하는 실수와 복구 방법 완전정리

첫 Git 연동이 막힐 때, 어디서부터 꼬였는지 한 번에 해결하는 실전 가이드

처음 VS Code에서 GitHub로 프로젝트를 올리기 시작하면 문제가 생기는 지점은 대부분 비슷합니다.

• “커밋 및 푸시” 버튼이 돌아가기만 하고 업로드는 안 되고…
• GitHub에는 새 레포가 보이지 않고…
• node_modules가 같이 올라가면서 Push가 끝없이 길어지고…
• 원격(remote) 설정이 안 잡혀 있는데도 VS Code는 계속 푸시하려고 하고…

이 글은 그런 상황을 한 번에 복구할 수 있는 실전 지침입니다. 누구나 VS Code → GitHub 첫 연결에서 실수할 수 있어요. 하지만 원리는 단순합니다.

“원격(remote)만 정확히 잡히면 대부분의 문제가 해결된다.”

아래는 실제 사례(가명: PROJECT_A_2025) 기준으로 정리한 절차입니다.

---

1. VS Code에서 “커밋 및 푸시”만 계속 돌아간다면

VS Code는 실제로 push를 실행하지 못하는데도 UI에서 스피너(로딩 표시)만 돌아가는 경우가 있습니다.

이럴 때 가장 먼저 볼 것은 터미널에서:

git remote -v

• 아무것도 안 보인다면 → 아직 GitHub 레포와 연결되지 않은 상태
• 엉뚱한 주소가 보인다면 → 잘못된 원격과 연결된 상태

어느 쪽이든, remote를 제대로 잡아주는 것이 첫 단계입니다.

UI 표시가 계속 돌아가서 신경 쓰인다면:

• VS Code 메뉴 보기 → 명령 팔레트 → “Developer: Reload Window” 를 실행하면 스피너는 깔끔하게 사라집니다. (하지만 진짜 해결은 아래 단계에서 합니다.)

---

2. GitHub에 새 레포를 ‘빈 상태’로 만드는 방법

먼저 GitHub 웹에서 비어 있는 레포지토리 하나를 준비해야 합니다.

1. GitHub에 로그인
2. 상단 오른쪽에 있는 초록색 New 버튼 클릭

• 또는 왼쪽 사이드바의 Repositories → 우측 New 버튼

3. Repository name에 원하는 이름 입력

• 예: PROJECT_A_2025

4. Owner는 기본 계정 그대로 두고
5. Public / Private 중 원하는 공개 범위 선택

• 개인 연습 프로젝트라면 Private 추천

6. 아래 옵션들은 체크하지 않고 비워둡니다.

• Add a README file
• .gitignore
• Choose a license

7. 맨 아래 Create repository 버튼 클릭

여기까지 하면, 주소가 하나 생깁니다. 예를 들어:

https://github.com/dev-user/PROJECT_A_2025.git

이 주소를 잠시 후 VS Code에서 remote로 연결하게 됩니다.

핵심 포인트 → 처음 VS Code에서 올릴 때는, GitHub에서 “내용이 비어있는 레포”를 미리 만들어둔다. → README나 .gitignore를 GitHub에서 먼저 생성하지 않는 게 편합니다.

---

3. VS Code에서 원격(remote) 다시 등록하기

이제 VS Code로 돌아와서, 프로젝트 루트(예: PROJECT_A_2025 폴더)에서 터미널을 열고 아래를 실행합니다.

git remote remove origin   # 기존 origin 있으면 삭제 (없으면 에러 떠도 무시)
git remote add origin https://github.com/dev-user/PROJECT_A_2025.git
git branch -M main
git push -u origin main

• 첫 줄은 “혹시 잘못 연결된 origin이 있다면 제거”하는 명령입니다.
• 두 번째 줄부터가 방금 만든 GitHub 레포와 다시 연결하는 과정입니다.
• push -u origin main 은 “앞으로 main 브랜치는 기본적으로 origin/main과 연결해” 라는 의미입니다.

여기까지 되면:

• VS Code의 “커밋 및 푸시” 버튼이 정상적으로 동작하고
• GitHub 레포 페이지에서도 코드가 보이기 시작합니다.

---

4. node_modules가 올라갔다면? (푸시가 끝없이 느려질 때의 복구 방법)

.gitignore 설정 없이 처음 push하면 node_modules/ 전체가 GitHub로 올라가면서:

• 푸시 시간이 비정상적으로 길어지고
• 중간에 에러가 나면서 반쯤 꼬이기도 합니다.

이럴 때는 로컬 파일은 그대로 두고, Git 기록에서만 제거하면 됩니다.

git rm -r --cached node_modules build
git commit -m "Clean repository (remove node_modules & build)"
git push

• --cached 옵션 덕분에, 내 컴퓨터의 node_modules 폴더는 삭제되지 않습니다.
• GitHub와 Git 기록에서만 관리 대상에서 제거됩니다.

---

5. .gitignore 파일은 이렇게 만들어두면 안전하다

프로젝트 루트 폴더에 .gitignore 파일을 하나 만들고, 아래 내용을 넣어두면 웬만한 문제는 예방할 수 있습니다.

# Node / JS
node_modules/
dist/
build/
.cache/
.temp/
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*
package-lock.json

# Vite / React
.vite/
*.local

# Env & secrets
.env
.env.*
!.env.example

# OS / IDE
.DS_Store
Thumbs.db
.vscode/

# Logs
*.log
logs/

이렇게 해두면:

• node_modules, build 같은 무거운 폴더는 GitHub로 올라가지 않고
• .env 같은 민감한 설정 파일도 자동으로 제외됩니다.

---

6. 최종 요약 — 처음 GitHub 올릴 때 꼭 확인할 4가지

체크 항목	설명
1. GitHub 레포 생성 위치	웹에서 우측 초록색 New 버튼 → 빈 레포 생성
2. remote 연결 여부	git remote -v 로 origin이 제대로 연결되어 있는지 확인
3. .gitignore 설정	node_modules, build, .env 등이 무시되도록 설정
4. 첫 푸시는 터미널에서	git push -u origin main 으로 한 번은 직접 밀어주기

이 네 가지만 지키면, VS Code → GitHub 첫 연동에서 발생하는 대부분의 문제는 자연스럽게 사라집니다.

---

처음 Git과 GitHub를 다룰 때는,

“내가 뭘 잘못 눌렀는지조차 모르겠다”는 느낌이 들기 쉽습니다.

하지만 한 번만 구조를 이해하고

• 원격(remote) 을 올바르게 연결하고
• .gitignore 를 제대로 만들고
• node_modules는 절대 올리지 않는 습관을 들이면

이후에는 새로운 프로젝트를 시작할 때마다 1~2분 안에 GitHub와 연동을 끝낼 수 있게 됩니다.