반응형

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/'




1.  git를 설치합니다. 



윈도우라면 https://www.git-scm.com/downloads 에서 윈도우용을 다운로드 받아 설치합니다. 

옵션 변경없이 디폴트로 설치하면 됩니다.



우분투라면 다음 명령을 사용하여 설치합니다. 

$ sudo apt-get install git



다음처럼 깃허브 로그인시 사용하는 이메일 주소를 설정해줘야 합니다.

 

git config --global user.email "webnautes@⬛⬛⬛⬛⬛⬛"

 

git config --global user.name "webnautes"





2. GitHub(https://github.com/)에 접속합니다.



GitHub에서 인증시 토큰을 사용하도록 변경되어 추가 작업이 필요합니다.

오른쪽 위에 있는 프로필을 클릭하여 메뉴에서 Settings를 클릭합니다. 

 





왼쪽에 보이는 메뉴에서 Developer settings를 클릭합니다. 

 




왼쪽에 보이는 메뉴에서 Personal access tokens를 클릭합니다. 






Generate new token을 클릭합니다. 

 




사용 용도를 적습니다.

 



토근 만료일을 지정할 수 있습니다. 만료일 없음(No expiration)은 권장하지 않고 있습니다.

 




저장소만 사용할거라 Repo만 체크했습니다. 다른 권한 항목들이 많습니다.

 



Generate token을 클릭합니다.

 



생성된 토큰을 복사해둡니다. 

 




생성된 토큰은 Personal access tokens을 클릭하면 볼 수 있습니다. 

 




이제 새로운 저장소를 생성합니다.




오른쪽 위에 보이는 프로필 옆에 있는 + 기호를 클릭하여 보이는 메뉴에서 New repository를 선택합니다. 

 

Repository name에 저장소 이름을 적어주고 저장소 공개여부를 지정하기 위해 Public 또는 Private를 선택합니다. 

Add a README file을 체크하고(이 파일에 저장소에 대한 설명을 추가할 수 있습니다.) Create repository 버튼을 클릭합니다. 

 




3.  다음과 같은 페이지가 보이게 됩니다. 

 

 

초록색 Code 버튼을 클릭 후, 빨간색 사각형 부분을 클릭하여 저장소 주소를 복사하여 메모장 등에 붙여놓기 해둡니다. 




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

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

 




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

 




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

 




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

 

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

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

 

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

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



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

 

 


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

 



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

 





8. Commit 아이콘을 클릭합니다.

 



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

현재 로컬 repository에 반영한 것이 어떤 작업인지 적어주면 됩니다. 

 



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

여기서 파일을 수정해보면 수정한 파일이 추가되는 것을 볼 수 있습니다. 

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

 




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

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

 

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

 




10. 3번에서  깃허브에서 복사해두었던 주소를 사용하여  다음 명령을 실행합니다. 

원격 저장소 주소를 지정해주는 것입니다. 

 

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

 




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

 

현재 브랜치 이름은 master 입니다.

PS D:\code\python_example> git branch

* master



브랜치의 이름을 master에서 main으로 변경합니다.

PS D:\code\python_example> git branch -m master main

 

이제 브랜치 이름이 main 입니다. 

PS D:\code\python_example> git branch

* main



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

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

 

git pull origin main --allow-unrelated-histories

 




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

 

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




처음 깃허브에 업로드시에는 Username과 Password를 요구합니다.

GitHub 확장을 사용할지 물어보는데 여기에선 사용안하고 진행해봅니다. Cancel을 클릭합니다. 

 




깃허브 사용자 이름을 입력하고 엔터를 누릅니다.

 



앞에서 복사해둔 토큰을 붙여넣기하고 엔터를 누릅니다. 

 




토큰 생성시  만료일 없음(No expiration)을 선택안했다면 정기적으로 이 작업이 필요해보입니다.




문제 없다면 다음처럼 GitHub에 있는 원격 저장소에 업로드가 잘된 것을 볼 수 있습니다. 

 

D:\code\temp>git push -u origin main

Enumerating objects: 6, done.

Counting objects: 100% (6/6), done.

Delta compression using up to 8 threads

Compressing objects: 100% (3/3), done.

Writing objects: 100% (5/5), 517 bytes | 517.00 KiB/s, done.

Total 5 (delta 0), reused 0 (delta 0), pack-reused 0        

To https://github.com/webnautes/example.git

   88da063..809bbe9  main -> main

Branch 'main' set up to track remote branch 'main' from 'origin'.




13. 깃허브 웹페이지에서 업로드된 파일을 확인할 수 있습니다. 

 

 

 





반응형

해본 것을 문서화하여 기록합니다.


포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    Favicon of https://charoon.tistory.com BlogIcon charoon

    혹시 깃 관련 유용한 익스텐션 있으시면 알려주실수 있으신가요?