Visual Studio Code를 통해 협업하는 방법(github 사용, 링크 포함)

Visual Studio Code를 통해 협업하는 방법(github 사용, 링크 포함)

오늘은 저번 시간 예고했던 대로 협업하는 방법에 대해 알아보겠습니다.

Visual Studio Code를 사용해서 협업하는 방식에 대해 알아보려 하는데

저장소는 github를 이용해서 진행하겠습니다.

(Visual Studio Code는 편하게 vscode라고 부르겠습니다.)

Github 저장소 사용하는법(사이트 링크 포함)

 

저번 시간에 github에서 저장소를 생성해달라고 말씀드렸는데

오늘은 그 저장소를 통해 설명드리겠습니다.

 

참고로 저는 윈도우에서 vscode 한글 버전을 사용해서 진행했습니다.

 

협업을 진행하기 전에 가장 초기에 해야 하는 것은

폴더 생성이겠죠!

 

프로젝트를 진행할 폴더를 생성하려 하는데

이미 연습하거나 진행하고 있는 프로젝트가 있다면

해당 폴더를 사용하셔도 됩니다.

 

폴더를 생성하거나 기존에 폴더가 있다면

vscode에서 해당 폴더를 열어줍니다.

 

그다음에 github에 와서 만들었던 저장소를 열어줍니다.

저장소 페이지

위에 사진과 같은 페이지가 나올 텐데

그때 사진에서 빨간색 부분을 눌러줍니다.

해당 버튼은 저장소의 링크를 복사하는 버튼입니다.

(아래에 있는 것들도 중요한 부분이지만

현재는 vscode를 통해 연결하는 방법만 알려드리겠습니다.)

 

버튼을 눌러 저장소의 링크를 복사했다면

다시 vscode로 돌아와 줍니다.

 

vscode

vscode로 오셨다면 사진에서 처럼 빨간색 부분(소스 제어)을 눌러줍니다.

 

사진에서 처럼 두 개의 버튼이 나오는데 위에 리포지토리 초기화를 눌러줍니다.

 

소스 제어

그러면 '게시 Branch' 버튼이 보이면 된 겁니다.

마저 진행해보겠습니다.

 

해당 페이지에서 점점점으로 된 아이콘을

눌러서 원격 부분에서 '원격 추가'를 눌러줍니다.

 

그럼 위에 검색창이 등장하는데 거기에

github에서 저장했던 링크를 복사 붙어 넣기 해줍니다.

(ctrl + v - 복사 붙어 넣기)

 

그럼 다음 검색창이 등장하는데 그 부분에는

이름을 만드는 부분으로

프로젝트에 어울리는 이름을 영어로 작성해 줍니다.

 

이렇게 하면 연결할 준비가 다 되었고

이제 vscode에서 새로운 파일 만들어 보겠습니다.

간단하게 index.html을 생성하고

원하는 것을 작성해보겠습니다.

 

html을 만들고 저장하셨다면 방금 '소스 제어' 부분으로 다시 오시면

방금 만든 html 파일이 보일 겁니다.

 

그러면 +버튼을 눌러 주시면 '변경 사항'에서 '스테이징된 변경 사항'으로

이동이 되면 상단에 검색창처럼 보이는 곳에 이름을 지어줄 겁니다.

(연습할 때는 아무 이름이나 상관없습니다.)

 

저는 ex1으로 하겠습니다.

ex1을 작성하고 커밋을 눌러주시고

아까처럼 점점점 아이콘을 눌러서 푸시를 눌러주시면

완성입니다.

 

이제 아까 만들어 놨던 github 저장소에 가시고

F5를 눌러 새로고침 하시면

vscode에서 만든 html 파일이 올라가 있는 것을 확인할 수 있을 겁니다. 

 

이렇게 github 저장소에 보이게 된다면

완성입니다!

 

정말 고생하셨습니다.

 

이제 프로젝트를 공유할 수 있게 되었습니다.

아직 공부를 하시고 있다면 github에 공부하고 있는 내용을

저장하면서 공부하셔도 좋고

프로젝트를 진행하는 상황이라면

github에 저장해서 공유할 수도 있습니다.

 

오늘은 내용이 길었는데

개발을 하기 위해서 git을 사용하는 것은

정말 중요하기 때문에 알아두시면

정말 유용하게 사용하실 수 있을 겁니다.

 

감사합니다!!

 

GitHub: Where the world builds software