반응형


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




1.  git를 설치합니다. 



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



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


            $ sudo apt-get install git




2. GitHub(https://github.com/)에 새로운 repository를 생성합니다. 





3. 새로 만든  repository 페이지에 방문하여 Clone or download 버튼을 클릭합니다. 

빨간색 사각형 부분을 클릭하여 URL을 복사합니다. 





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

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





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





6. Initialize Repository를 클릭하면 로컬 repository가 초기화됩니다. 





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

 

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

로컬 repository에 반영을 하는 것입니다. 


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

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



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




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




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






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




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

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




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

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

추가후 Commit를 다시 해주면 다시 아래 화면처럼 아무 파일도 보이지 않게 됩니다. 





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

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


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






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

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


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





11. 다음 명령을 실행합니다. 


깃허브에 있는 내용을 로컬 repository에 반영하는 것입니다. 

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


git pull origin master --allow-unrelated-histories





12. 이제 깃허브에 코드를 업로드합니다. 

Commit한 파일만 업로드 됩니다. 


git push -u origin master


깃허브 아이디와 패스워드를 물어봅니다. 우분투에선 콘솔 기반으로 물어봅니다. 




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


 



최초작성 2020. 5. 26



반응형

포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
댓글로 알려주시면 빠른 시일내에 답변을 드리겠습니다.

여러분의 응원으로 좋은 컨텐츠가 만들어집니다.
지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 : )

유튜브 구독하기


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

  1. Favicon of https://charoon.tistory.com BlogIcon charoon 2020.06.01 04:25 신고

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

+ Recent posts