Visual Studio Code에서 Github에 업로드하는 방법( 연동하는 방법 )

Visual Studio Code에서 Github에 코드를 업로드하는 방법을 다룹니다.

2020. 5. 26 최초작성

2021. 8. 23 마지막 업데이트 - GitHub의 메인 브랜치 이름이 master에서 main으로 변경됨.

2021. 9. 17 GitHub에서 인증시 토큰을 사용하도록 바뀐점 반영

 

다음과 같은 에러가 발생합니다.

 

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.

remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.

fatal: Authentication failed for 'https://github.com/webnautes/example.git/'

2022. 3. 17  동작확인

2022. 12. 21

2024. 1. 12 검토

1. Git과 GitHub가 처음이라면 다음 포스트를 먼저 진행하세요.  

 

Git, GitHub 간단한 사용방법

https://webnautes.tistory.com/2181 

2. Visual Studio Code에서 폴더를 새로 열어서 파이썬 코드  파일을 하나를 추가했습니다.

다른 언어를 사용하더라도 이후 단계를 따라 진행하면 됩니다. 

 

2. 왼쪽 바에서 Source Control 아이콘을 클릭합니다. 

 

3. Publish to GitHub라는 버튼이 추가되었지만 GitHub가 아닌 다른 원격 저장소에 올린 경우를 생각해서 Initialize Repository를 클릭하여 진행해봅니다.  이제 로컬 저장소가 초기화됩니다. 

 

4.  처음 저장소를 생성했기 때문에 현재 폴더에 있는 모든 파일과 폴더가 Changes 항목에 추가됩니다. 

 

Github에 올리기전에 커밋(Commit)를 먼저 해야합니다. 

로컬 저장소에 반영을 하는 것입니다. 

 

그러기 위해서 커밋할 대상을 선택해야 합니다. 

다음 2가지 방법으로 커밋할 대상을 선택할 수 있습니다. 

소스파일 중 커밋을 원하는 파일 옆에 보이는 Stage Changes 아이콘을 클릭하여 파일 하나씩 추가할 수 있습니다. 

 

 

또는 CHANGES 항목 옆에 있는 Stage All Changes 아이콘을 클릭하여 Changes에 있는  모든 파일을 추가할 수 있습니다. 

 

추가한 파일들은 Staged Changes 항목에 추가됩니다. 

 

5. Commit 버튼위에 있는 입력란에 Commit시 남길 메모를 입력하고 ( 현재 로컬 repository에 반영한 것이 어떤 작업인지 적어주면 됩니다. 여기에선 test라고 입력했습니다.)  바로 아래에 있는 Commit 버튼을 클릭합니다.

 

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

 

여기서 파일을 수정후 저장하면 Changes 항목에 파일이 추가되는 것을 볼 수 있습니다. 

 

Changes에 있는 파일을 클릭하면  다음처럼 수정전은 빨간색으로 수정후는 노란색으로 2줄이 연달아 보입니다. 이 경우는 창이 작을 경우입니다.

 

창이 넓다면 다음처럼 왼쪽에 수정전, 오른쪽에 수정후가 보입니다.

 

앞에서 했던 방법으로 다시 커밋을 다시 해주면 다시 아래 화면처럼 아무 파일도 보이지 않게 됩니다.

 

 

6. 이제 깃허브에 업로드 해보겠습니다. 

Visual Studio Code 아래쪽에 보이는 TERMINAL 창을 선택합니다.

 

보이지 않는 경우 메뉴에서 View > Terminal을 선택합니다.

 

7.   다음 포스트의 6번을 참고하여 Personal access tokens을 생성하여 복사해두고 깃허브에 새로운 저장소를 생성하고 Code 버튼 눌러 저장소 주소를 복사해두어야 합니다. 

 

Git, GitHub 간단한 사용방법

https://webnautes.tistory.com/2181 

복사한 주소를 사용하여 다음 명령을 실행합니다.  원격 저장소 주소를 지정해주는 것입니다. 

 

git remote add origin https://github.com/webnautes/python_example.git

 

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

글작성 시점(2024. 1. 12) 브랜치 이름이 main으로 바뀌었네요.

 

C:\Users\webnautes\python_example>git status

On branch main

nothing to commit, working tree clean

 

만약 브랜치 이름이 master라면 바꾸는 방법은 다음과 같습니다.

 

git branch -m master main

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

이렇게 첨에 한번 해주어야 이후 정상적으로 로컬 repository의 파일을 깃허브 저장소에 업로드할 수 있습니다. 

 

git pull origin main --allow-unrelated-histories

 

깃허브 저장소에 있던 README.md 파일이 다운로드 된 것을 볼 수 있습니다.

 

10. 이제 깃허브에 코드를 업로드하기 위해 터미널에서 다음 명령을 실행합니다.

 

C:\Users\webnautes\python_example>git push -u origin main

다음과 같은 창이 보입니다. 처음에만 한번 보입니다. Token을 클릭하고 앞에서 복사해두었던 Personal access tokens를 붙여넣기하고  Sign in 버튼을 클릭합니다.

 

파일이 업로드됩니다. 

 

이후 토큰을 바꾸었다면 다음과 같은 에러가 발생할 수 있습니다. 

 

remote: Invalid username or password.

fatal: Authentication failed for 'https://github.com/webnautes/example.git/'

다음 링크에 나온대로 다음 두 명령을 실행합니다. https://jinseongsoft.tistory.com/251 

빨간색으로 표시한 username과 password에는 각각 git에 등록한 username과 깃허브에서 발급받은  Personal access tokens를 입력합니다. 

파란색 부분은 깃허브 저장소 주소로 변경하세요

 

git remote remove origin 

git remote add origin https://username:password@github.com/webnautes/python_example.git

 

다시 깃허브에 코드를 업로드하기 위해 터미널에서 다음 명령을 실행합니다.

 

C:\Users\webnautes\python_example>git push -u origin main

 

깃허브 저장소에 hello.py 파일이 업로드된 것을 볼 수 있습니다.

 

11. 파일을 수정해보면 Changes에 hello.py 파일이 추가됩니다. 

 

다음처럼 변경된 파일에 보이는 +를 눌러줍니다.

 

 

 

변경 사항을 입력해주고(여기에선 수정이라고 입력) Commit 버튼을 클릭합니다.

 

커밋을 하면 버튼이 다음처럼 바뀝니다. Sync Changes 1을 클릭합니다.  

 

OK를 클릭합니다. 이제 깃허브에 코드가 업로드됩니다.

 

12. 깃허브 저장소에서 해당 파일을 보면 변경된 것을 볼 수 있습니다.  다른 사람이 수정하여 깃허브 저장소에 업로드한 경우를 가정하기위해 파일을 수정해보겠습니다. 다음 스크린샷에 보이는 연필 모양 아이콘을 클릭합니다.

 

파일을 수정후 Commit chanes 버튼을 클릭합니다. 

 

Commit changes를 클릭하면 수정된 파일이 깃허브 저장소에 반영됩니다.

 

13. 깃허브에서 변경된 코드를 가져오려면 다음 스크린샷처럼 Pull을 클릭하면 됩니다. 

 

잠시후 다음처럼 수정사항이 반영됩니다.