VSCode에서 Github 업로드하는 방법(짱쉬움ㅋㅋ)

잠깐 🤚 시작하기 전에

• VSCode(Visual Studio Code)를 설치해 주세요.
  (https://code.visualstudio.com/)
• github 회원가입을 해 주세요.
  (https://github.com/)
  
  
  

1. git 설치

https://www.git-scm.com/downloads 에서 운영체제에 맞는 파일을 다운로드 합니다.

window 사용하고 계신 분들은 https://miaow-miaow.tistory.com/17 에서 git 환경설정 방법을 꼭!! 확인하시고 다음 단계로 넘어가주세요.

git과 github... 무슨 차이일까?

• git : local(쉽게 말해서 내 컴퓨터..) 내에서 소스코드를 관리하는 것
• github : local에서 관리한 소스코드를 업로드하고 공유하는 공간

2. github에 새로운 repository 생성하기

본인의 github에서 Repositoreis를 클릭하고, 오른쪽 초록색 버튼 'New'를 눌러주세요.
Repository를 만들어 두신 분들은 넘어가셔도 됩니다!

새로운 repository의 이름을 정합니다. 저는 git-test로 할게요!

git-test라는 새로운 repository가 생성된 것을 확인할 수 있습니다.

3. VSCode 열기

VSCode를 켜고, Open folder 클릭합니다.
github에 올리고자 하는 파일이 속한 폴더를 열어줍니다.
(파일이 아직 없는 경우, 원하는 곳에 폴더 생성하고 열어주시면 됩니다!)

저는 바탕화면에 있는 test라는 폴더를 열어볼게요.

제가 연 test 폴더는 비어 있는 상태입니다.
파일 추가 버튼을 눌러서, hello.py 파일을 만들어 볼게요.
(sql 파일을 만들고 싶으면 파일명.sql 이렇게 만들면 됩니다.)

다음과 같이 적어 주었고, ctrl+s를 눌러 저장했습니다.

4. Initial Repository

좌측에 있는 브랜치 모양의 아이콘을 클릭해 주세요.

Initial Repository를 클릭하면, 로컬 Repository가 초기화됩니다.
로컬 Repository가 초기화된다는 말은 '이제 이 폴더에 있는 파일들을 git 명령어들을 이용해 관리하겠다!' 하고 선언하는 것이랍니다.

5. Repository 주소 복사

아까 만들었던 Repository로 돌아가서 repository의 주소를 복사합니다.

6. Remote setting

remote setting은 지금 이곳에서 작업 중인 파일을 github의 어떤 repository에 업로드할 것인가 설정하는 과정입니다. Terminal의 New Terminal을 클릭해서, 새로운 Terminal 창을 열어줍니다.

command line에 git remote origin add (repository 주소) 를 입력합니다.
git remote add 까지 입력하고 ctrl+v하면 주소 붙여넣기 가능!

enter를 하면 아무일도 일어나지 않아요! remote 상태를 잘 설정했는지 확인할게요.

command line에 git remote -v를 입력합니다.
앞서 생성한 github의 repository 주소를 확인할 수 있습니다.

7. Commit할 대상 선택하기

Changes 아래에는 변동사항이 있는 파일들(관리가 필요한 파일들)의 목록을 보여줍니다. Changes 아래에 앞서 작성한 hello.py 파일이 있는 것을 확인할 수 있어요. git의 입장에서 hello.py 파일은 새로 생성되었고, 새로운 내용이 추가된 파일이니까요!

hello.py 이름 위로 커서를 살짝 올리면 4가지 아이콘이 뜨는 것을 확인할 수 있습니다.
'+' 버튼을 누르는 것은 '이 파일은 github에 올려서 관리하고 싶으니 찜할게~' 하고 의사 표시를 하는 거라고 볼 수 있어요. + 를 클릭해서 의사 표시를 해 볼게요.

+를 클릭하고 나면, hello.py 파일이 Changes가 아닌 Staged Changes 아래로 이동한 것을 확인할 수 있습니다. 반대로 -를 클릭하면 '이 파일은 github에 올리고 싶지 않으니 찜 취소!' 하고 의사 표시를 하는 것이 되겠죠. 저는 올리고 싶으니까 그대로 둘게요!

8. Commit

commit은 로컬에서 발생한 변경 사항을 기록하고, 저장하는 중요한 과정이에요. 체크 버튼을 누르면 commit을 할 수 있는데요, 한 번 클릭해 볼게요.

메시지를 입력하는 창이 뜨는데요, 이 메시지는 파일을 설명하는 tag 역할을 한다고 생각하시면 될 거 같아요! 저는 연습용이니 간단하게 first commit을 적을게요.

commit message를 입력하고 엔터를 누르고 나면, Changes에 아무 항목도 보이지 않는데요. hello.py 파일을 수정하거나, 새로운 파일을 추가하면 다시 나타나게 됩니다.

(이건 참고만! 따라하지 않으셔도 돼요) hello.py 파일의 2번째 줄에 한 줄을 더 추가했더니, Changes의 목록에 나타나는 것을 확인할 수 있네요.

9. Push

이제 commit한 파일을, github에 진짜! 최종! 업로드 해 볼게요.

command line에 git push origin master 을 입력합니다.

10. 확인

hello.py 파일이 git-test Repository에 업로드 된 것을 확인할 수 있습니다.

전체적인 과정은 이런 느낌 아닐까요 🤔 이건 저의 뇌피셜,,,,,,

• Initial Repository한 폴더 : 연습생을 관리하는 회사
• vscode에서 생성, 수정하는 파일들 : 회사의 통제를 받는 연습생들
• commit하는 파일 : 데뷔조로 언급되는 연습생들
• push하는 파일 : 최종 데뷔조로 선발된 연습생들
• github : 데뷔 무대

그럼 다들,, 과제 업로드에 성공하시길 바랍니다,,
github 쓸 줄 몰라서 과제 못했다는 말은 하지 않기로 약속,,,
화이팅 ✨