VS Code(Visual Studio Code)에서 깃허브(GitHub) 업로드 방법

vscode,visualstudiocode,비주얼스튜디오코드,깃허브,github,업로드,소스,프로그래밍,merge,머지,마이크로소프트,윈도우,Microsoft

에디터를 활요한 편한 깃허브 사용방법

비주얼 스튜디오 코드를 평소 많이 사용하게 되는데 해당 프로그램을 이용하여 깃허브에 바로 업로드하여 관리할 수 있는 방법에 대해서 알아보도록 하겠습니다. 일부 다를 수 있으나 거의 비슷하여 해당 방법과 비슷하게 따라 하시면 어려움이 없이 사용할 수 있습니다.

목차

준비물

GitHub [#]

VisualStuido Code [#]

GitHub 설치방법

- 버전에 따라 일부 차이가 있을 수 있으며, 사용자 환경에 따라 약간 달라질 수 있습니다.

위 주소로 들어가 사용하고 있는 운영체제를 선택하여 설치를 진행합니다. 사진 순서대로 Next를 누른 후 설치를 할 경로를 설정합니다. 저의 경우 기본 경로 그대로 사용하도록 하겠습니다.

필요한 구성요소를 선택할 수 있습니다. 원하는 구성요소를 선택을 한 후 Next를 누르고 git의 기본 에디터(Editor)를 선택 할 수 있습니다. VScode를 이용하려고 저의 경우 use Visual Studio Code as Git's default ediotr를 선택하였습니다. 그 후 시작 메뉴 설정에서 기본으로 사용을 하여 바로 Next를 누릅니다.

이후 설치방법은 순서대로 정리했으니 위 사진을 참고하시면서 진행을 하시면 됩니다. 일부 옵션의 경우 사용자의 필요에 따라 선택하셔도 전혀 문제 될 것이 없으니 확인 후 진행하면 됩니다.

사용방법

Github 홈페이지[#]를 통해 Personal Access Tokens 생성

깃허브 로그인을 한 후  상단 오른쪽 부분 프로필을 누른 후 나오는 메뉴 중 Settings를 누릅니다. 그 이후 Settings 화면에서 왼쪽 메뉴 중 Developer settings를 누른 후 Personal access tokens를 누릅니다.

Personal access tokens에서 토큰을 생성해야 합니다. 오른쪽 Generate new token을 누른 후 note에 간단하게 이름을 적은 후 Expiration 기간을 선택할 수 있습니다. 테스트를 위해 설정을 하는 것이기 때문에 저의 경우 7일을 선택을 했습니다. No expiration의 경우 추천을 하진 않습니다. 그리고 밑에 있는 것은 토큰의 권한을 따로 설정을 할 수 있는 부분입니다. 이번엔 저장소와 관련한 권한만 있으면 되기 때문에 repo 부분을 선택을 하고 Generate token을 누릅니다.

토큰 값이 생성이 된 후 해당 화면에 생성된 토큰들의 목록도 확인을 할 수 있습니다.

저장소[repository] 생성

상단 오른쪽 부분 +버튼을 누른 후 New repository를 누릅니다. 그러면 저장소를 만들 수 있는 화면으로 이동이 됩니다. 그 후 저장소 이름과 설명[선택사항]을 작성한 후 Public[공개], Private[비밀]을 선택한 후 생성을 하면 됩니다. 그러면 해당 저장소 주소가 나오는 것을 알 수 있습니다. 해당 부분의 경우 따로 메모장에 잠시 적어두시면 편합니다.

Visual Studio Code를 이용하여 github 업로드

파일을 업로드하는 것을 테스트하기 위해 HTML 파일을 하나 임의로 생성을 했습니다. 왼쪽 부분 Source Control 아이콘을 누릅니다. 그리고 Initalize Repository를 누르고 로컬 저장소 초기화를 진행한 후  Changes 항목에 추가가 되는데 해당 파일들을 올리기 전 커밋(Commit)을 하기 위해 해당 파일의 +버튼을 누르면 파일을 설정을 할 수 있고 Changes 메뉴 옆 +를 누르면 한 번에 모든 파일을 추가할 수 있습니다. 그 이후  STAGED CHANGES 항목에 정상적으로 추가가 되었으면 SOURCE CONTROL 옆 부분에 체크 표시를 누른 후 커밋(Commit)에 남길 메세지[작업내역 등]를 간단하게 입력하면 됩니다. 이제 마지막으로 터미널[Terminal]을 이용하여 업로드를 하면 됩니다. 하단 부분에 터미널이 보이지 않는다면 메뉴 부분에 View → Terminal을 누르면 터미널을 볼 수 있습니다.

git remote add origin [주소]

- Branch를 확인합시다. github에서 보면 branch의 이름이 main으로 되어있다. 예전 사용할 때는 master라고 되어져 있었는데 변경이 된 것 같습니다.

[git pull origin main --allow-unrelated-histories]

그 이후 최종적으로 마지막 업로드를 진행을 합니다. 해당 명령어를 터미널에 입력을 하면 처음 사용할 시 깃허브 아이디와 비밀번호 입력을 해야 하는데 똑같이 로그인한다고 생각하시고 입력 후 진행을 하시면 됩니다.

git push -u origin [Branch Name]

이후 잠시 기다리면 정상적으로 업로드된 것을 깃허브 저장소에 들어가 확인을 하시면 됩니다. 저의 경우 정상적으로 업로드 된 것을 확인할 수 있었습니다.

마무리

에디터를 이용하여 쉽고 빠르고 간편하게 자신이 작업하고 있던 부분들을 바로 깃허브로 올릴 수 있는 방법에 대해서 알아보았습니다. 혹시나 궁금하신 사항이나 모르는 내용이 있다면 댓글을 남겨주시면 답변을 드리도록 하겠습니다.