깃허브 github와 vscode 연동하기

아예 처음부터 연동해서 작업하고 싶거나, 작업하다가 중간에 깃허브랑 연동하고 싶은데

방법을 찾을 때마다 잘 안되고 너무 헷갈렸다.

그래서 내가 알고 있는 방법을 정리하고자 한다..

 

 

1. 작업한 프로젝트를 '처음으로' 깃허브에 통째로 올리기

투두 리스트를 만들다가 처음으로 깃허브에 연동하고자 한다. 현재 깃허브와 연결되어 있지 않은 상태.

연결된 깃허브 레파지토리 없음

 

 

0. 이미 깃허브 계정이 등록되어 있어서 그런지 source control(16이라고 떠있는 곳)에 Initialize Repository 는 없다. 

git config user.name / git config user.email  명령어로 아이디와 이메일이 깃에 등록되어 있는지 확인하였다.

 

1. 깃허브에서 레파지토리를 생성한다. (생성하고 작업하던가 맘대로)

create-react-app 으로 새 프로젝트를 만들어서 이미 readme 파일은 있었지만,  레파지토리를 생성할 때 readme 파일 여부에 체크를 하지 않고 만들었음. 

 

 

 

2. 레파지토리 생성하면 위와 같이 무슨무슨 명령어를 입력하라는 화면이 나온다.

저기 create a new 어쩌구 부분에서 git init 라인 부터 순서대로 쭉 실행한다.

단! readme 파일은 이미 존재하므로 'git add README.md' 가 아닌 'git add .' 로 입력할 것!

 

3. 정상적으로 되는지 확인하기

 

 

 

2. 깃허브와 연동부터 시킨 후 작업을 시작하고 싶을 때

 

1. 깃허브에서 레파지토리를 생성한다.

2. vscode 오픈

3. vscode 에서 F1 키 누름 → Git: clone  → clone from Github → 생성한 레파지토리 선택 → 파일 탐색기 창이 뜸. 여기서 복제하고 싶은 '폴더' 선택하고 (선택한 폴더 안으로 레파지토리의 이름으로 복제되므로 경로 잘 생각하기)

select as repository destination 클릭 -> 복제한 레파지토리를 열까요 라는 메시지가 뜨면 원하는 대답 클릭하면 됨.

4. 터미널 열어서 경로 확인하기. 

5. 열심히 작업하기

6. 터미널에서 git init 부터 명령어 입력하면 됨. 

 

 

 

3. 깃허브에서 README 파일 생성 여부에 따른 vscode 와의 연동

잘 정리된 블로그가 있어서 링크만 첨부함..

 

readme 파일 체크 O

깃허브에서 레파지토리 생성할 때 README 체크하고 생성한 후, vscode 에서 작업하고 push 하고자 할 때

 

https://nakja.tistory.com/100

VScode 에서 github 사용하기3 - git 명령어 사용(readme추가O)

 

 

readme 파일 체크 X

https://nakja.tistory.com/85

VScode 에서 github 사용하기2 - git 명령어 사용(readme추가X)

 

 

 

결론은 git clone 명령어를 사용하는 건데 그걸 어떻게! 사용하는 건지 잘 몰랐다.

나처럼 방법이 헷갈렸던 사람들에게 도움이 되었으면 좋겠다..!