Github-vscode 연동하기

2023. 2. 15. 11:33· 기초 셋팅

코딩에 접하신 분들이라면 다들 Github , vscode 를 한번쯤은 들어보셨을텐데요.

하루하루 편하게 잔디를 심고 싶은데 어떻게 해야할까요 ?  

그럼 지금부터 vscode에 Github를 간편하게 연동하는 방법을 알려드리겠습니다! 

 

필요한 기본 준비는 github 계정 생성 , 코드에디터로는 vscode를 준비해줍니다! 

 

1. 먼저 깃허브 레포지토리를 생성해줍니다.

new 버튼을 눌러주세요 !
레포지토리 이름, 공개유무 , README file 추가 여부를 선택해줍니다. 이렇게 하면 레포지토리 생성은 완료됩니다!

 

2. 생성된 레포지토리 URL을 복사해줍니다.

복사한 주소는 vscode에서 사용됩니다!

 

3. vscode에 들어간 후 fn+F1버튼(윈도우는 F1)을 클릭해 나오는 창에 ' git clone' 을 입력해줍니다.

git clone 을 클릭해주세요 ! 만약 뜨지 않는다면 https://git-scm.com/에서 깃허브를 설치해주셔야 합니다!

 

4. 아까 복사한 레포지토리 주소를 복사해서 넣습니다. 

주소를 입력한 후 선택해주세요 !
연동하고 싶은 로컬 폴더를 선택해줍니다 !

 

5. 로컬 폴더를 확인해보면 아까 만든 레포지토리의 이름으로 된 폴더가 생성됩니다.

레포지토리가 로컬에 복제되었습니다!

 

6. 새로 만들어진 폴더에 기존 파일들을 넣어줍니다. 

.git 폴더가 존재하는 곳에 파일들을 옮겨주세요!

 

7. vscode에서 소스제어 아이콘 (ctrl+shiht+g)을 클릭해줍니다 .

변경사항이 나와있습니다.

깃허브에 새로 만든 레포지토리를 내 컴퓨터에 있는 로컬 폴더로 복제를 했습니다 !

그 후 레포지토리 이름으로 된 폴더에 올리고 싶은 파일들을 옮겨주었습니다. vscode에서는 이를 변경 사항으로 인지했습니다. 

8. + 버튼을 클릭하여 모든 변경 내용을 스테이징해준 후 커밋메세지를 작성하고 커밋해줍니다. 

 

9. 푸시 버튼을 클릭해줍니다. 

둘 중 아무거나 클릭합니다.

10. 깃허브 레포지토리를 확인해보면 파일이 추가된 것을 확인 할 수 있습니다. 

 

 

오늘은 github와 vscode 연동 방법을 알아보았습니다. 

새로운 파일을 추가하거나 변경하면 vscode 3번째 아이콘에 변경된 파일 수만큼 숫자가 표시됩니다. 

버튼을 클릭하고 위의 방법과 동일하게 + -> 메세지작성 -> 커밋 -> 푸쉬   이 과정을 반복하면 간편하게 깃허브에 파일을 올릴 수 있습니다. 

모두 파릇파릇한 잔디 심으러 가봅시다 ! 

'기초 셋팅' 카테고리의 다른 글

CRA 대신 Vite로 React 환경 구성하기  (1) 2024.02.10
타입스크립트로 프로젝트 환경을 구성해보자 !  (0) 2023.06.11
VsCode에서 TS 디버깅 환경 구성하기  (0) 2023.05.30
'기초 셋팅' 카테고리의 다른 글
  • CRA 대신 Vite로 React 환경 구성하기
  • 타입스크립트로 프로젝트 환경을 구성해보자 !
  • VsCode에서 TS 디버깅 환경 구성하기
배트리버
배트리버
🐾 사람 좋아, 개발 좋아 🐾 궁금한 건 끝까지 파고들고, 배운 건 즐겁게 나누는 개발자의 놀이터
배트리버
리트리버의 개발 놀이터
배트리버
전체
오늘
어제
  • 분류 전체보기
    • 네트워크
    • 기초 셋팅
    • 오늘의 일기
    • 리액트
    • 코테 준비
      • 프로그래머스
      • 백준
    • 코드스테이츠44기 프론트엔드
    • HTML-CSS-JavaScript
      • HTML
      • CSS
      • JavaScript
    • 자료구조&알고리즘
    • TypeScript
    • Git
    • Tip
    • 프로젝트
    • Next.js
    • 트러블슈팅

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 타입스크립트문법
  • 티스토리챌린지
  • 코드스테이츠 프론트엔드
  • 코드스테이츠 회고록
  • BFS
  • 코드스테이츠 블로깅
  • 리액트쿼리
  • 리액트 상태관리
  • 네트워크
  • 코드스테이츠
  • KPT 회고
  • 리액트
  • 자바스크립트 비동기
  • 코드스테이츠 44기
  • 오블완
  • 프로그래머스
  • 코드스테이츠 44기 프론트엔드
  • 자바스크립트
  • 프로젝트 회고
  • 탄스택쿼리

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
배트리버
Github-vscode 연동하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.