반응형
VSCode · GitHub · Claude Code
처음부터 끝까지 따라하기
SVN만 써본 분도 OK — 설치부터 Claude Code 실행까지,
실제 겪은 오류 화면 포함 완전 정리
📋 목차
- VSCode 설치
- GitHub — 기본 개념과 무료 기능
- Git 설치 & VSCode 연동
- GitHub 저장소 생성 & 프로젝트 연결
- Node.js & npm 설치
- Claude Code 설치 & 실행
- Claude Code 요금 확인
1. VSCode 설치
VSCode(Visual Studio Code)는 Microsoft가 만든 무료 코드 편집기입니다. Git, 터미널, 확장 기능이 모두 내장되어 있어 이 가이드의 모든 작업을 VSCode 하나로 진행할 수 있습니다.
- code.visualstudio.com 접속
- 파란색 "Download for Windows" 버튼 클릭
- 설치 옵션은 기본값 그대로 진행
※ "PATH에 추가" 옵션은 반드시 체크된 상태로 설치 - 설치 완료 후 VSCode 실행
💡 VSCode는 완전 무료입니다. Microsoft 계정 없이도 바로 사용할 수 있습니다.
2. GitHub — 기본 개념과 무료 기능
GitHub를 "SVN 같은 것" 정도로만 알고 계셨다면, 정확히 절반만 알고 계신 겁니다. SVN은 버전 관리만 하지만, GitHub는 거기에 클라우드 저장소 + 협업 플랫폼이 더해진 것입니다.
📌 한 줄 요약: SVN 서버를 GitHub가 대신 무료로 운영해주는 것 + 협업·이슈 트래커·웹 UI가 붙은 것
SVN vs GitHub 비교
| 기능 | SVN | GitHub |
|---|---|---|
| 버전 관리 / 이력 추적 | ✅ | ✅ |
| 인터넷 업로드/다운로드 | ❌ 서버 직접 구축 필요 | ✅ 기본 제공 |
| 클라우드 저장 | ❌ | ✅ |
| 무료 Public/Private 저장소 | ❌ | ✅ 무제한 |
| 협업자 초대 (Private) | ❌ | ✅ 무료 |
| GitHub Pages 호스팅 | ❌ | ✅ 무료 |
GitHub Pages — 호스팅도 되나요?
HTML/CSS/JS 정적 사이트라면 GitHub Pages로 무료 호스팅이 가능합니다. 주소도 자동 생성됩니다.
https://아이디.github.io/저장소명
⚠️ 한계: C#, Java, PHP 같은 서버 사이드 코드는 실행 불가입니다. 순수 프론트엔드(HTML/CSS/JS)만 가능하며, 백엔드가 필요하면 Vercel / Render / Supabase 같은 무료 서비스와 조합해서 사용합니다.
3. Git 설치 & VSCode 연동
⚠️ GitHub ≠ Git — "GitHub"를 가입했어도 Git 자체는 별도 설치가 필요합니다. GitHub는 웹 플랫폼이고, Git은 로컬에서 버전 관리를 담당하는 프로그램입니다.
Git 설치 여부 확인
VSCode 상단 메뉴 터미널 → 새 터미널을 열고 아래를 입력합니다.
PS D:\study\recipe_app> git --version
git version 2.49.0.windows.1
git version 2.49.0.windows.1
버전 숫자가 나오면 설치되어 있는 것입니다. 오류가 나면 Git을 설치해야 합니다.
Git 설치
- git-scm.com/download/win 접속 후 다운로드
- 설치 옵션은 기본값 그대로 계속 Next 클릭
- 설치 완료 후 VSCode를 완전히 닫았다가 다시 열기
VSCode에서 GitHub 로그인
- VSCode 왼쪽 사이드바 맨 아래 사람 아이콘(Accounts) 클릭
- "Sign in with GitHub" 선택
- 브라우저가 자동으로 열리면 GitHub 계정으로 승인
※ Google 계정으로 가입했다면 브라우저에서 Google 로그인 선택 - 브라우저에서 "Open Visual Studio Code" 허용 → VSCode로 돌아오면 완료
4. GitHub 저장소 생성 & 프로젝트 연결
로컬에 이미 프로젝트 폴더가 있을 때 GitHub 저장소를 새로 만들고 연결하는 방법입니다.
① GitHub에서 새 저장소 만들기
- github.com 접속 → 우상단 "+" → New repository
- 저장소 이름 입력 (예:
recipe_app) - 중요: "Initialize this repository with a README" 체크 해제
※ 로컬에 이미 소스가 있으므로 빈 저장소로 만들어야 충돌이 없습니다 - Create repository 클릭
② 로컬 프로젝트를 GitHub에 연결
VSCode 터미널에서 순서대로 실행합니다.
# 1. Git 초기화
PS D:\study\recipe_app> git init
Initialized empty Git repository in D:/study/recipe_app/.git/
# 2. 파일 전체 스테이징
PS D:\study\recipe_app> git add .
# 3. 첫 번째 커밋
PS D:\study\recipe_app> git commit -m "첫 번째 커밋"
[main (root-commit) a1b2c3d] 첫 번째 커밋
# 4. GitHub 저장소 연결 (자신의 URL로 변경)
PS D:\study\recipe_app> git remote add origin https://github.com/아이디/저장소명.git
# 5. GitHub에 업로드
PS D:\study\recipe_app> git push -u origin main
Branch 'main' set up to track remote branch 'main' from 'origin'.
PS D:\study\recipe_app> git init
Initialized empty Git repository in D:/study/recipe_app/.git/
# 2. 파일 전체 스테이징
PS D:\study\recipe_app> git add .
# 3. 첫 번째 커밋
PS D:\study\recipe_app> git commit -m "첫 번째 커밋"
[main (root-commit) a1b2c3d] 첫 번째 커밋
# 4. GitHub 저장소 연결 (자신의 URL로 변경)
PS D:\study\recipe_app> git remote add origin https://github.com/아이디/저장소명.git
# 5. GitHub에 업로드
PS D:\study\recipe_app> git push -u origin main
Branch 'main' set up to track remote branch 'main' from 'origin'.
✅ push가 완료되면 github.com에서 파일이 올라간 것을 확인할 수 있습니다. 이후로는 수정 후
git add . → git commit -m "내용" → git push 세 줄이면 됩니다.5. Node.js & npm 설치
📌 Node.js란? 원래 JavaScript는 브라우저 안에서만 실행됩니다. Node.js를 설치하면 터미널에서도 JS를 실행할 수 있게 됩니다. Claude Code를 비롯한 대부분의 개발 도구가 Node.js 위에서 동작합니다.
npm이란? Node Package Manager. 개발 도구를 설치하는 앱스토어 같은 개념입니다. Node.js를 설치하면 npm은 자동으로 함께 설치됩니다.
npm이란? Node Package Manager. 개발 도구를 설치하는 앱스토어 같은 개념입니다. Node.js를 설치하면 npm은 자동으로 함께 설치됩니다.
Node.js 설치
- nodejs.org 접속
- 왼쪽 LTS 버전 다운로드 (Long Term Support — 안정적인 버전)
- 설치 후 VSCode 터미널을 완전히 닫았다가 다시 열기
설치 확인
PS D:\study\recipe_app> node -v
v24.18.0
PS D:\study\recipe_app> npm -v
10.8.1
v24.18.0
PS D:\study\recipe_app> npm -v
10.8.1
버전 숫자가 둘 다 뜨면 성공입니다.
⚠️ npm 실행 오류 — 실제 발생한 에러
node -v는 되는데 npm -v에서 아래처럼 막히는 경우가 있습니다. Windows 보안 정책이 스크립트 실행을 차단한 것입니다.
PS D:\study\recipe_app> node -v
v24.18.0
PS D:\study\recipe_app> npm -v
npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1
파일을 로드할 수 없습니다.
위치 줄:1 문자:1
+ npm -v
+ ~~~
+ CategoryInfo : 보안 오류: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
v24.18.0
PS D:\study\recipe_app> npm -v
npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1
파일을 로드할 수 없습니다.
위치 줄:1 문자:1
+ npm -v
+ ~~~
+ CategoryInfo : 보안 오류: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
해결 방법은 아래 명령어 한 줄입니다.
PS D:\study\recipe_app> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
실행 정책을 변경하시겠습니까?
[Y] 예 [A] 모두 예 [N] 아니요 ...
> Y ← 입력 후 엔터
PS D:\study\recipe_app> npm -v
10.8.1
실행 정책을 변경하시겠습니까?
[Y] 예 [A] 모두 예 [N] 아니요 ...
> Y ← 입력 후 엔터
PS D:\study\recipe_app> npm -v
10.8.1
6. Claude Code 설치 & 실행
🤖 Claude Code란? claude.ai 채팅창처럼 대화하는 것이 아니라, VSCode 터미널에서 직접 Claude에게 명령하는 AI 코딩 도구입니다. 명령을 내리면 Claude가 직접 파일을 열고, 코드를 수정하고, 저장까지 해줍니다.
설치
PS D:\study\recipe_app> npm install -g @anthropic-ai/claude-code
added 1 package in 3s
added 1 package in 3s
설치 확인
PS D:\study\recipe_app> claude -v
2.1.195 (Claude Code)
2.1.195 (Claude Code)
⚠️ node_modules 폴더가 프로젝트 안에 생겼다면?
-g(global) 없이 설치된 것입니다. 아래 명령으로 삭제 후 다시 전역 설치하세요.
⚠️ PowerShell에서는 Linux/Mac의
rm -rf가 작동하지 않습니다. 아래처럼 실제 오류가 발생합니다.PS D:\study\recipe_app> rm -rf node_modules
Remove-Item : 매개 변수 이름 'rf'과(와) 일치하는 매개 변수를 찾을 수 없습니다.
위치 줄:1 문자:4
+ rm -rf node_modules
+ ~~~
+ FullyQualifiedErrorId : NamedParameterNotFound
Remove-Item : 매개 변수 이름 'rf'과(와) 일치하는 매개 변수를 찾을 수 없습니다.
위치 줄:1 문자:4
+ rm -rf node_modules
+ ~~~
+ FullyQualifiedErrorId : NamedParameterNotFound
PowerShell에서 올바른 삭제 명령어:
PS D:\study\recipe_app> Remove-Item -Recurse -Force node_modules
Claude Code 실행
- 작업할 프로젝트 폴더에서
claude입력 후 엔터 - 테마 선택 화면 → Dark mode 선택 후 엔터
- 로그인 URL 표시 → c 키로 URL 복사 → 브라우저에 붙여넣어 Claude 계정으로 로그인
- 보안 안내 화면 → 엔터
- 폴더 신뢰 여부 → "1. Yes, I trust this folder" 선택 후 엔터
╭─────────────────────────────────────────╮
│ ✓ Claude Code │
│ │
│ Welcome back 테스트유저! │
│ │
│ cwd: D:\study\recipe_app │
╰─────────────────────────────────────────╯
> 원하는 작업을 입력하세요...
│ ✓ Claude Code │
│ │
│ Welcome back 테스트유저! │
│ │
│ cwd: D:\study\recipe_app │
╰─────────────────────────────────────────╯
> 원하는 작업을 입력하세요...
🎉 Welcome back! 메시지가 뜨면 Claude Code 환경설정이 완료된 것입니다. 이제 터미널에 한국어로 원하는 작업을 입력하면 Claude가 직접 파일을 수정해줍니다.
사용 팁
⌨️ 자동 승인 모드 — 작업마다
🗂️ 터미널 탭 분리 — VSCode 터미널 우상단 + 버튼으로 새 탭을 추가하면 Claude Code 탭과 PowerShell 탭을 동시에 사용할 수 있습니다. git 명령어는 사용량 절약을 위해 PowerShell 탭에서 직접 실행하는 것이 좋습니다.
y를 입력하기 번거로우면 Shift + Tab을 누르면 자동 승인 모드로 전환됩니다.🗂️ 터미널 탭 분리 — VSCode 터미널 우상단 + 버튼으로 새 탭을 추가하면 Claude Code 탭과 PowerShell 탭을 동시에 사용할 수 있습니다. git 명령어는 사용량 절약을 위해 PowerShell 탭에서 직접 실행하는 것이 좋습니다.
7. Claude Code 요금 확인 (중요!)
🔴 Claude Code는 claude.ai 일반 구독과 별개로 요금이 청구될 수 있습니다. 처음 설치 전 반드시 본인 플랜을 확인하세요.
| 플랜 | Claude Code | 비고 |
|---|---|---|
| claude.ai Pro (개인) | 별도 API 요금 발생 | 토큰 사용량만큼 과금 |
| claude.ai Team | ✅ 포함 | 추가 요금 없음 |
| Anthropic API 직접 | 사용량 과금 | 토큰 단위 청구 |
내 플랜 확인: claude.ai → 우상단 계정 클릭 → Settings → Billing
Team 플랜이라면 화면에 ✓ Claude Code 체크가 표시되며, 추가 요금 없이 사용 가능합니다.
사용량이 꽉 차면?
돈이 추가로 나가는 것이 아니라 일시적으로 사용이 제한됩니다. 재설정 시간까지 기다리면 다시 사용할 수 있습니다.
| 구분 | 재설정 주기 |
|---|---|
| 현재 세션 한도 | 3시간 후 재설정 |
| 주간 전체 사용량 | 매주 수요일 오전 2시 재설정 |
✅ 전체 설정 요약
STEP 1VSCode 설치 — code.visualstudio.com
STEP 2GitHub 계정 생성 — 무료, Google 계정 연동 가능
STEP 3Git 설치 — git-scm.com/download/win (기본값으로 설치)
STEP 4VSCode에서 GitHub 로그인 — 좌하단 사람 아이콘 → Sign in with GitHub
STEP 5저장소 생성 & 연결 — git init → git add → git commit → git remote add → git push
STEP 6Node.js 설치 — nodejs.org (LTS 버전)
STEP 7
npm install -g @anthropic-ai/claude-codeSTEP 8프로젝트 폴더에서
claude 실행 → 로그인 → Welcome back! 확인
반응형
'I.T' 카테고리의 다른 글
| Win10 긴 파일명 삭제하는 법, 파일 지우면 반응 없음, 지정된 파일을 찾을 수 없습니다.. 깁니다, 삭제 실패 (0) | 2025.02.24 |
|---|---|
| ERR_CERT_DATE_INVALID 에러 발생 시 조치 (0) | 2024.10.11 |
| [cmd] Wifi 연결된 PC 에서 패스워드 찾기 명령어 (0) | 2024.06.29 |
| 티스토리 - 구글 애널리틱스 태그 스크립트 설정 (29) | 2024.02.18 |
| 게이밍 모니터, 울트라기어32GP750 후기 (0) | 2022.11.06 |
