Vue 프로젝트 git 연동하기

이제환·2022년 6월 12일
0

> 1. Git Repository 생성

github에 로그인한 후, 오른쪽 상단에있는 +버튼을 눌러서 New repository를 눌러줍시다

  1. Repository name 설정
  2. Add a README file 체크
  3. Create repository

> 2. VS code - Git 연동

방금 만든 repository로 들어가 URL을 복사해줍시다.

VS code 들어가서 왼쪽 바에 있는 Source Control 아이콘을 클릭한후
Initialize Repository를 클릭 합니다.

처음 저장소를 생성했기 때문에 현재 폴더에 있는 모든 파일과 폴더가 CHANGES 항목에 추가됩니다.
(저는 이미 진행한 상태이기 때문에 Changes에있는 파일이 저와 다릅니다.)
빨간색으로 표시한 +버튼을 눌러줍시다

추가한 파일들은 STAGED CHANGES 항목에 추가됩니다.

빨간색으로 표시한 Commit 아이콘을 클릭합니다.

Commit시 남길 메모를 입력하고 엔터를 누릅니다.

현재 변경된 것들이 모두 로컬 저장소에 반영되었기 때문에 아래 사진과 같이 아무 파일도 보이지 않습니다.


터미널창을 켜고 아까 깃허브에서 복사해두었던 주소를
git remote add origin 뒤에 붙혀서 실행시켜줍니다

깃허브의 메인 브랜치 이름이 master에서 main으로 변경되었지만 git에서는 master가 메인 브랜치 이기 때문에 이름을 변경해주어야 합니다.

  • 터미널창에 git branch -m master main 입력후 엔터
  • main으로 바뀌었는지 git branch 명령어를 통해 확인

깃허브 저장소에 있는 내용을 로컬 저장소에 반영해주어야 합니다.

  • 터미널창에 git pull origin main --allow-unrelated-histories 입력후 엔터

이제 깃허브에 업로드 하기위해 터미널창에 다음명령을 실행 해줍니다.

  • git push -u origin main

버전차이로 다음 두가지 중 하나가 보일 가능성이 있습니다.

  • 첫번째
  1. 이런 화면이 나타난다면 github 접속후 오른쪽 상단에 프로필 클릭후 Settings 클릭
  1. 왼쪽 메뉴바에서 Developer settings 클릭
  1. 왼쪽에 보이는 메뉴에서 Personal access tokens 클릭후
    오른쪽에 보이는 Generate new token을 클릭합니다.
  1. Note(사용용도), Expiration(토큰 만료일), Select Scopes 설정
  • 토큰 만료일은 만료일 없음(No expiration)은 권장하지 않고 있지만
    그냥 설정해 주었습니다.
  • 저장소만 사용할거라 Repo만 체크했습니다.
  1. Generate token을 클릭합니다.
  1. 생성된 토큰을 복사해서 따로 저장해줍시다.
  • 복사못하면 다시 확인이 불가능하기 때문에 재생성해야됩니다.
  1. 복사한 토큰값을 아래 칸에 붙혀넣기하고 Sign in 해줍니다.

    터미널을 확인해보면 다음 사진처럼 업로드 완료

0개의 댓글