[Github] VScode (비주얼스튜디오코드)로 작업한 프로젝트 Github에 올리기

Visual Studio Code로 프로젝트를 하고 있으며, 여러명의 팀원들과 작업을 하는 것이라면 github 가 필수이지요.

 

우선 저장소는 두가지로 나뉩니다.

내pc에 있는 프로젝트 주소를 '로컬저장소'라고 부릅니다.

github에서 로그인하고 주소 생성해서 만든 페이지를 '원격저장소'라고 부릅니다.

 

이번에는 내 pc에서 작업한 프로젝트를 git에 최초 올리는 방법을 설명드려볼까합니다.

 

내pc의 '로컬저장소' 로 만든 폴더를

'원격저장소'에 저장하는

최초 동작들을 따라하기 방식으로 정리한 내용입니다.

 

 

내pc의 '로컬저장소' 로 만든 폴더를

'원격저장소'에 저장하는

최초 동작들을 따라하기 방식으로 정리한 내용입니다.

 

 

이런 분들이 해보세요

 

1. 나는 visual studio code가 설치되어있다.

2. vscode안에 git셋팅이 되어있다.

3. github 홈페이지에 아이디비번이 있다.

 

 

 

이런분들만 우선 이 강좌를 진행해보시길 추천드립니다.

 

---

내 PC에 프로젝트 만들고 VS CODE로 폴더열기

 

 

 

로컬저장소를 만들어 보겠습니다.

 

내 PC에 프로젝트를 git과 연결한 폴더를 만들고 화살표 끝지점에 있는 프로젝트명을 클릭합니다.

 

 

그러면 상세 경로가 나옵니다. 

 

 

Ctrl + C 를 눌러 이를 복사해둡니다.

 

 

 

 

VS code를 켭니다.

 

 

 

 

 

[파일] > [폴더 열기] 를 누릅니다.

 

 

 

 

 

그러면 [폴더열기] 대화상자가 나옵니다.

 

 

마찬가지로 맨 상단에 폴더이름을 클릭하고

 

 

 

 

여기에 아까 만든 폴더경로를 붙여넣기(Ctrl+V)를 합니다.

 

 

키보드 [enter] 키를 누르면 그 안에 폴더로 들어가게됩니다.

 

 

 

 

내pc에 만든 폴더 안에 들어왔다면, 하단에 [폴더선택]을 누르세요.

 

 

 

 

 

 

폴더가 VS code에서 열리고 가운데 이 창이 뜨면 '예'를 눌러주세요.

 

 

 

 

VS Code의 터미널 켜기

 

 

상단에 [터미널] > [새 터미널] 을 누릅니다.

 

 

 

여기가 터미널입니다.

깜박이는 커서부분에 이제 명령어를 입력해줄것입니다.

 

 

 

 

 

 

여기서 잠깐! 선택1,2 중 상황에 맞는 강좌로 진행하세요. 

 

선택1)  기존 GIT프로젝트를 불러와서 내 작업을 이어 하고싶다.

 

만약에 위와같은 동작을 하고싶은 분들이라면 아래 포스팅을 참고해서 따라하셔서 Clone해오시고.

 

[git] mac환경 visual studio code에서 git프로젝트 가져오기(clone) :: leehyen (tistory.com)

[git] mac환경 visual studio code에서 git프로젝트 가져오기(clone)

 

 

 

 

 

선택2) 내 작업을 새로운 GIT repository(저장소)에 최초 올리고싶다.

 

만약에 위와같은 동작을 하고싶은 분들이라면 여기부터 따라오세요!

 

 

 

 

 

원격저장소 (GIT Repository:깃 저장소) 주소 만들기

자, 여기에 로그인을 하시고,

 

www.github.com  

GitHub: Where the world builds software

 

 

 

 

왼쪽 상단에 New를 누릅니다.

 

 

 

 

 

만약에 위 버튼이 안보이는 페이지라면

오른쪽 상단의  + 버튼을 눌러 New repository를 누릅니다.

 

 

 

 

 

 

 

알맞은 프로젝트 명을 정하여 빨간사각형 안에 입력하고 초록색 체크버튼이 뜨면 

 

 

맨 아래 Create repository 버튼을 누릅니다.

 

 

 

 

 

 

 

 

https://github.com/자신의github아이디/repository이름.git

 

이렇게 git 주소가 생성됩니다.

 

 

 

git 주소 오른쪽에 복사버튼을 누르세요.

 

그럼 ctrl+V 키보드를 누른것과 같은 기능으로 자동으로 git주소가 복사된겁니다.

 

 

 

 

원격저장소 만들기 (내 PC에 저장한 폴더를 GIT폴더로 만들어주기)

 

 

자, 그럼 아까 vs code 터미널 꺼낸 곳으로 가서 간단한 확인을 해봅시다.

 

 

 

git --version

git이 제대로 설치되어있는지 버전을 확인합니다.

 

 

 

git config --global user.name "github아이디"

git config --global user.email "github이메일"

로그인을 하시고,

 

 

git init

git 로그인을 하고, 폴더안에 git폴더임을 알게해줍니다. 어떻게 아냐면,

 

 

 

이렇게 표시가 됩니다. 

이 폴더 안에는 git폴더가 생기고 그 셋팅값들이 들어있습니다.

보이지 않는다면, 숨김표시로 적용되어있는것이기 때문일겁니다.

 

 

 

 

 

진짜 git폴더가 있나 확인해보겠습니다.

상단의 [보기] 탭에 [숨긴항목]에 체크해보면,

 

 

 

 

이렇게 보입니다. ㅎㅎ

이 폴더가 있어서 초록색 체크표시로 폴더 아이콘이 바뀌었군요!

 

 

 

 

자 여기에 제가 작업하던 웹디자인 관련 파일을 복사해서 놓았습니다.

 

물음표가 뜨네요. 아직 git에 등록되지 않아서입니다.

 

 

 

 

왼쪽 상단의 첫번째 문서버튼처럼 생긴것을 눌러보면

제가 만든 폴더에 복사해둔 파일 목록들이 아래 뜨는 것을 보실 수 있습니다.

 

 

 

 

 

 

원격저장소 (GIT Repositort:깃저장소)에 프로젝트 올리기

 

 

이것을 git에 올려보겠습니다.

 

 

 

왼쪽 상단에 위에서 세번째 버튼 11이라고 작은 동그라미로 되어있는것은 변경사항이 존재하는 파일갯수입니다.

 

 

 

 

 

'메시지' 부분에 간단한 메시지를 입력하고  11개의 파일들을 스테이징을 하여 메시지를 저장합니다.

 

 

 

 

 

변경사항에 있던 11개가

스테이징 된 변경사항에 들어갔다는 것을 알수있습니다.

 

 

 

 

상단의 노란색으로 표시해둔 체크박스를 클릭합니다.

여기서 체크버튼은 'commit' 커밋버튼입니다.

 

 

 

'분기게시' 버튼이 보입니다. 여기서 잠깐 누르고 싶어도 누르지 마세요!

 

 

 

 

 

 

 

 

원격저장소 (GIT Repository:깃저장소) 주소와 프로젝트 연결하기

 

 

아 우리가 깃허브 사이트에 프로젝트를 연결하지 않았군요!

 

터미널에다가 입력할 준비를 합니다.

 

 

 

깃허브사이트에 주소 맨 오른쪽에 복사버튼을 다시누르구요.

 

 

 

 

git remote add origin 이라고 명령어를 입력한 후, 한번 띄어쓰기 하고 오른쪽 마우스를 클릭하면,

 

 

이렇게 복사된 주소가 명령어 뒤에 붙여넣어집니다.

 

 

 

 

 

그리고 git remote -v  명령어를 입력하여,  로컬저장소(만든폴더)를 원격저장소로 보내는 작업을 합니다.

 

 

 

위 명령어까지 입력하였다면, 이제 분기게시 파란버튼을 누릅니다.

 

 

 

 

github 사이트에 이렇게 되어있던 페이지가

 

새로 고침을 하면

 

 

 

이렇게 변경되었음을 알 수 있습니다!

 

 

 

 

 

 

 

저의 개인적인 이해를 바탕으로 이루어진 강좌이기 때문에 혹시나 의견이 다르신 분들은 편하게 댓글주세요~