VS Code + GitHub 환경 구축: 설치부터 원격 저장소 연결까지

반응형

 

VS Code + GitHub 환경 구축: 설치부터 원격 저장소 연결까지

 

📚 목차
1. Git 설치 및 기본 환경 설정
2. VS Code에서 Git 연동 준비하기
3. GitHub 계정 연결 및 인증 방식 설정(OAuth, PAT, SSH)
4. 프로젝트 업로드: 로컬 -> GitHub 원격 저장소 연결
✔ 마무리

VS Code + GitHub 환경 구축

1. Git 설치 및 기본 환경 설정

🔷 Git 다운로드 및 설치

Git은 오픈소스 버전 관리 도구로, 공식 사이트에서 운영체제에 맞는 최신 버전을 자동 제공해 줍니다.

1. 공식 사이트: https://git-scm.com

Git 다운로드 및 설치

2. 설치 과정에서 특별히 건드려야 할 옵션은 거의 없습니다. 대부분 기본값 그대로 두는 것이 가장 안정적입니다.

Git 설치 화면

항목	설명
Git Bash 포함 설치	Windows에서 Git 명령을 사용할 때 필수로 사용되는 터미널입니다.
PATH 자동 설정	Git 명령을 어떤 디렉터리에서든 실행할 수 있게 해줍니다.
HTTPS backend: OpenSSL	GitHub 등 HTTPS 기반 서비스와 가장 안정적으로 호환됩니다.
CRLF 설정: Checkout Windows-style, Commit Unix-style	협업 시 줄바꿈 문제를 최소화하는 가장 보편적 설정입니다.
Git Credential Manager 설치	2025 기준 GitHub 인증(PAT, OAuth)과의 연계에 필수

이 옵션들은 Git 공식 문서에서 제안하는 기본 흐름이며, 특별한 커스텀 환경이 아니라면 그대로 진행하는 것이 가장 편안합니다.

 

🔷 설치 확인

설치가 완료되면 터미널(Git Bash 또는 PowerShell)을 열고 다음 명령어를 입력합니다.

> git --version
git version 2.52.0.windows.1

 

🔷 사용자 정보 등록

Git은 커밋 기록을 관리하기 위해 사용자 이름과 이메일 정보를 필요로 합니다.

이 정보는 GitHub와도 연동되므로 정확한 이메일을 설정하는 것이 좋습니다.

아래 두 명령어를 실행해 사용자 정보를 등록합니다:

git config --global user.name "cericube"
git config --global user.email "cericube@naver.com"

여기서 --global 옵션은 현재 컴퓨터 전체에 동일한 설정을 적용한다는 의미입니다.
여러 프로젝트를 사용할 때 매번 설정할 필요가 없도록 하는 것이죠.

 

✔️ 설정 확인

git config --list

git 설정 조회 예시 화면

이 목록에서 user.name, user.email이 잘 설정되어 있는지 확인하시고, 실수했다면 아래처럼 다시 덮어쓰면 됩니다:

 

🔷 HTTPS vs SSH

GitHub와 연결할 때 크게 두 가지 인증 방식을 사용할 수 있습니다:

▸ HTTPS + Personal Access Token(PAT)
▸ SSH Key 기반 인증

 

GitHub 공식 문서는 HTTPS + PAT 방식을 기본 권장합니다.

특히 Windows, macOS 사용자에게 가장 오류가 적고, 설정도 단순합니다.

다만, SSH는 초기 설정 후 비밀번호 입력이 필요 없고, 보안적으로도 매우 안전하기 때문에 많은 개발자들이 여전히 선호합니다.

 

2. VS Code에서 Git 연동 준비하기

VS Code는 Git을 위한 기능이 매우 잘 갖춰져 있어, 초기 설정만 해두면 커밋, 브랜치 관리, GitHub 연동까지 거의 모든 작업을 IDE 안에서 처리할 수 있습니다.

Visual Studio Code 설치 방법 (Installer / Zip 포터블 모드)

Visual Studio Code 설치 방법 (Installer / Zip 포터블 모드)

 

🔷 VS Code의 Git 자동 감지

VS Code는 Git이 설치된 환경을 자동으로 인식합니다.
정상적으로 감지되었다면, 화면 왼쪽 Activity Bar에 Source Control(소스 제어) 아이콘(분기된 선 모양)이 표시됩니다.

 

✔️ 자동 감지가 되지 않을 때 해결 방법

1. VS Code 재시작

가장 간단하지만 가장 효과적인 해결책입니다.
Git 설치 직후에는 VS Code가 새 PATH를 인식하지 못한 경우가 있습니다.

2. PATH 연결 확인
터미널에서 아래 명령이 동작하는지 확인합니다:

git --version

만약 “git을 찾을 수 없습니다”라는 메시지가 나온다면 OS 환경변수(PATH)에 Git이 등록되지 않은 것입니다.

 

🔷 프로젝트에 Git 초기화

이제 실제로 프로젝트를 Git 저장소로 만들어볼 차례입니다.

 

✔️ 방법 1: 터미널에서 초기화

프로젝트 폴더를 VS Code로 연 뒤

> git init
Initialized empty Git repository in D:/NodejsDevelope/workspace/nodejs-tutorials/.git/

이 명령을 실행하면 해당 폴더에 .git 디렉토리가 생성되고, 이제부터 모든 변경사항이 Git으로 관리됩니다.

 

✔️ 방법 2: VS Code UI에서 초기화

VS Code에서 Source Control 패널을 열면 Initialize Repository 버튼이 나타납니다.
클릭 한 번으로 같은 작업을 수행할 수 있습니다.
버전 관리에 익숙하지 않은 초보자라도 직관적으로 이해하기 쉬운 방식입니다.

VS Code UI에서 git 초기화

 

🔷.gitignore 설정

Git으로 관리하고 싶지 않은 파일이나 폴더는 .gitignore 파일에 명시해야 합니다.
예를 들어 빌드 결과물이나 환경 변수 파일, IDE 설정 파일 등이 해당합니다.

GitHub는 언어별로 정리된 공식 템플릿을 제공합니다:

https://github.com/github/gitignore

이 저장소에서 원하는 언어 또는 프레임워크에 맞는 .gitignore를 참고해 만들면 됩니다.

 

✔️ 예: Node.js 프로젝트의 기본 .gitignore

아래는 Node.js 공식 템플릿의 핵심 항목입니다

node_modules/
dist/
.env

▸ node_modules/ : 패키지 수천 개가 다운로드되기 때문에 Git에 포함하면 안 됩니다
▸ dist/ : 빌드 결과물은 환경마다 달라지므로 제외

▸ .env : API 키, 데이터베이스 비밀번호 등 민감한 정보 포함

 

🔷 추천 확장 설치

VS Code는 기본 Git 기능만으로도 충분하지만, 확장을 설치하면 협업/리뷰/히스토리 관리가 훨씬 수월해집니다.

 

1) GitLens - Git supercharged

아래와 같은 기능들을 시각적으로 제공하여 Git 사용 경험을 대폭 향상시킵니다:
▸ 각 줄마다 “누가 언제 변경했는지” 알려주는 blame annotation
▸ 브랜치 비교, 커밋 히스토리 타임라인
▸ 파일별 히스토리 분석
▸ GitHub 링크 자동 연결
개발 작업 중 히스토리를 자주 확인하는 경우 필수에 가깝습니다.

GitLens - Git supercharged 확장 설치

 

2) GitHub Pull Requests

GitHub 공식 팀이 직접 제공하는 확장으로, VS Code 안에서 아래 작업을 바로 할 수 있습니다:
▸ Pull Request 생성 / 코드 리뷰
▸ Issue 조회, 생성, 관리
▸ GitHub 계정 로그인 및 인증
즉, GitHub 페이지를 오가지 않아도 VS Code 내부에서 협업 흐름을 완결할 수 있게 됩니다

GitHub Pull Requests 확장 설치

반응형

 

3. GitHub 계정 연결 및 인증 방식 설정(OAuth, PAT, SSH)

Git을 설치하고 VS Code에서 프로젝트를 초기화했다면, 이제 GitHub와 연결하여 코드를 안전하게 백업하고 원격 저장소(origin)로 관리할 단계입니다.

 

GitHub 공식 문서에서는 OAuth(내장 로그인)와 Personal Access Token(PAT), 그리고 SSH Key 인증 방식을 가장 안정적인 방법으로 소개하고 있습니다.

이 세 가지를 모두 정리하되, 실제 개발 흐름에서 가장 많이 사용하는 방식 위주로 안내합니다.

 

🔷 GitHub 계정 생성 또는 로그인

먼저 GitHub 계정이 없다면 아래 페이지에서 무료로 만들 수 있습니다:

https://github.com/

계정을 만들고 로그인한 뒤, 나중에 VS Code에서 GitHub 인증을 연동하면 Push, Pull, PR 리뷰 등이 훨씬 자연스러워집니다.

GitHub 계정 생성 화면

 

🔷 VS Code에서 GitHub 로그인 : OAuth

VS Code는 GitHub와의 연동을 위해 내장 OAuth 인증을 제공합니다.
가장 간편하고 안정적이며, 별도의 토큰을 관리할 필요가 없다는 장점이 있습니다.

 

✔️ 로그인 방법

1. VS Code 좌측 하단 계정(Account) 아이콘 클릭
2. 메뉴에서 👉 "Sign in to GitHub" 선택

VS Code 에서 GitHub 로그인 화면

3. 브라우저가 자동으로 열리며 GitHub 로그인 창이 등장

4. 로그인 후 “Open Visual Studio Code”를 허용

5. VS Code로 돌아오면 인증이 자동 완료

이 과정을 마치면, VS Code 내부에서 GitHub 리포지토리를 읽고 쓰는 것이 모두 가능해집니다.

 

🔷 GitHub Personal Access Token(PAT) 생성 (HTTPS 방식 사용 시)

HTTPS 방식으로 Push 할 때는 반드시 PAT(Fine-grained Token)을 사용해야 합니다.

VS Code OAuth 인증을 사용하면 PAT가 필요 없지만, 터미널에서 직접 Git을 사용하는 분들, CI/CD 설정하는 분들은 PAT 발급이 필요합니다.

 

터미널에서 아래처럼 직접 명령어로 Push하면

git push -u origin main

Git은 GitHub 서버와 HTTPS로 통신합니다.
이때 GitHub는 비밀번호 인증을 지원하지 않기 때문에 → 반드시 PAT(토큰)을 입력해야 합니다.

 

✔️ PAT 발급 위치

GitHub → 우측 프로필 → Settings → Developer settings → Personal access tokens → Fine-grained tokens

GitHub PAT 발급 화면

✔️ 권한 설정 가이드

GitHub에서 Fine-grained Personal Access Token(PAT)을 생성할 때는 어떤 저장소에 어떤 권한을 부여할지 직접 설정해야 합니다.

 

1. Repository access → 특정 리포지토리 선택

 

2. Permissions → 권한 설정 (read and write)

발급된 토큰은 반드시 복사하여 저장해야 합니다. 그렇지 않으면 다시 생성해야 합니다.

 

 

🔷 GitHub SSH 방식 인증 (많은 개발자가 선호하는 방식)

SSH 인증은 한 번 설정해 두면 Push, Pull 때마다 비밀번호를 입력할 필요가 없어 매우 편리합니다.

 

✔️ 1) SSH 키 생성

터미널(Git Bash, PowerShell 등)에서 아래 명령을 실행합니다

ssh-keygen -t ed25519 -C "your_email@example.com"

▸ -t ed25519 → 최신 권장 알고리즘
▸ -C → 단순 주석(Comment), 이메일 대신 PC 이름이나 GitHub ID를 넣어도 됨 (인증과 직접적인 관계는 없음)

▸ 파일 저장 경로는 기본값(~/.ssh/id_ed25519)으로 Enter
▸ 키에 비밀번호 설정 여부는 선택 사항

 

✔️ 2) 생성된 공개키 확인

> cat ~/.ssh/id_ed25519.pub

ssh-ed25519 AAAAC3Nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxhpd63oCbMCMvgLd cericube@naver.com

▸ 출력되는 한 줄 전체가 공개키이며, 이를 그대로 복사해 GitHub에 붙여 넣을 준비를 합니다.

 

 

✔️ 3) GitHub에 SSH 키 등록

GitHub → Settings → SSH and GPG keys → New SSH key

▸ Title: “home-pc”, “laptop-cericube” 같은 구분용 이름
▸ Key: 2단계에서 복사한 공개키를 그대로 붙여 넣기
▸ 모두 입력했다면 Add SSH key 또는 Save 버튼을 눌러 등록을 완료합니다.

 

✔️ 4) 연결 테스트

SSH 키가 정상적으로 등록되었는지 확인하기 위해 아래 명령을 실행합니다:

ssh -T git@github.com

여기서 git@github.com 은 GitHub의 SSH 접속용 “공식 계정”이며, 이 자리에 내 아이디나 이메일을 넣지 않습니다.

정상적으로 인증이 완료되었다면 다음 메시지가 표시됩니다:

Hi cericube! You've successfully authenticated, but GitHub does not provide shell access

 

 

🔷 어떤 인증 방식을 선택해야 할까?

📌 VS Code 내부에서는 GitHub OAuth 로그인(가장 편함)

Push, Pull, PR 관리까지 모두 자동 인증됩니다.

 

📌 터미널에서도 작업할 때는

▸ HTTPS + PAT 또는
▸ SSH Key
둘 다 보안적으로 안전하며, 어떤 방식을 선택해도 VS Code와 GitHub 연동에는 문제가 없습니다.

 

4. 프로젝트 업로드: 로컬 → GitHub 원격 저장소 연결

이제 Git도 설치했고, VS Code와도 정상적으로 연동이 된 상태입니다.
이제 남은 과정은 내 컴퓨터(로컬)의 프로젝트를 GitHub 원격 저장소에 올리는 것입니다.

 

🔷 GitHub에서 새 저장소 생성

먼저 GitHub에 저장소(Repository)를 하나 만들어야 합니다.
이 저장소가 로컬 프로젝트가 올라갈 원격(remote) 저장소가 됩니다.

 

1. GitHub 로그인 후 우측 상단 New repository 클릭
2. 저장소 이름(Repo name) 입력
3. 공개 여부 선택
▸ Public: 누구나 볼 수 있는 공개 저장소
▸ Private: 본인 또는 허용한 사용자만 접근
4. README 자동 생성 여부
▸ 로컬 프로젝트를 push할 예정이라면 README 생성은 옵션 (없어도 문제없음)
5. Create repository 버튼 클릭

이제 GitHub에서 새 저장소가 생성되었고, 다음과 같은 형태의 원격 저장소 주소(URL)가 표시됩니다.

 

✔️ 원격 저장소 URL 형식

>> HTTPS방식(PAT 사용)
https://github.com/username/repo.git

>> SSH방식
git@github.com:username/repo.git

이 URL이 로컬 프로젝트와 GitHub를 연결하는 핵심 값입니다.

원격 저장소 URL 형식 화면

 

🔷 로컬 프로젝트에 원격 저장소 연결

이제 로컬 프로젝트 폴더에서 GitHub 원격 저장소를 등록해 줍니다.

>> HTTPS 방식
git remote add origin https://github.com/username/repo.git

>> SSH 방식
git remote add origin git@github.com:username/repo.git

 

✔️ 원격 저장소가 잘 연결되었는지 확인하려면

> git remote -v
origin  https://github.com/cericube/nodejs-tutorials.git (fetch)
origin  https://github.com/cericube/nodejs-tutorials.git (push)

 

🔷 첫 커밋 만들기

원격 저장소를 연결했으니, 이제 프로젝트의 초기 상태를 커밋합니다.

> git add .
> git commit -m "Initial commit"

[master 188140b] Initial commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 README.md

▸ git add . → 현재 폴더의 모든 파일을 스테이징
▸ git commit -m “메시지” → 파일 변경 내역을 하나의 커밋으로 묶어서 저장
이 과정은 GitHub와 통신하지 않으며, 오직 로컬에서만 이루어지는 단계입니다.
커밋을 잘 쌓아두는 것이 나중에 버전 관리에서 큰 힘이 됩니다.

 

🔷 첫 Push (초기 업로드)

이제 로컬 커밋을 GitHub로 업로드합니다.

> git push -u origin master

Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 263 bytes | 263.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/cericube/nodejs-tutorials.git
   eb0764f..188140b  master -> master
branch 'master' set up to track 'origin/master'.

-u 옵션은 현재 로컬 브랜치(master)를 origin/master과 연결하여, 이후부터는 단순히 git push만 입력해도 자동으로 push 되도록 설정해 줍니다.

 

🔷 VS Code GUI에서도 가능

VS Code의 Source Control(소스 제어) 패널에 있는 Publish Branch 버튼을 눌러도 같은 작업이 수행됩니다.

초보자에게는 이 방식도 매우 직관적입니다.

VS Code commit 화면

 

 

🔷 이후 작업 흐름 (권장 방식)

첫 업로드 이후에는 다음과 같은 기본 개발 사이클을 반복하게 됩니다.

1) 파일 수정

코드를 변경하거나 새 파일을 추가합니다.

2) 변경사항 확인

VS Code 좌측 Source Control 패널에서 수정된 파일 목록과 변경 diff를 바로 볼 수 있습니다.
3) 커밋 메시지 작성
변경 내용을 하나의 의미 있는 단위로 만들고 커밋합니다.
좋은 커밋 메시지는 나중에 문제를 추적할 때 큰 도움이 됩니다.

4) Push
로컬에서 만든 커밋을 GitHub로 업로드합니다.

5) Pull
협업 환경에서는 다른 사람의 커밋도 자주 들어오므로 정기적으로 pull 하여 충돌을 예방합니다.

git pull

협업 환경에서는 일반적으로 Pull → 작업 → Commit → Push 순서가 가장 안전합니다.

 

---

※ 게시된 글 및 이미지 중 일부는 AI 도구의 도움을 받아 생성되거나 다듬어졌습니다.

반응형