[1주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 3

월요일.. 

깃허브 가입으로 시작하는 본격적인 '깃' 을 활용한 협업을 위해 '깃' 을 배우는 과정

사용할 이메일 주소와 password 입력후 간단한 정보 체크 및 확인 후 쉽게 생성할 수 있었다.

 

내 컴퓨터에서 프로젝트를 통으로 깃허브에 올리고 통으로 내 컴퓨터에 가져와서 작업하기 위한 " 분산식 버전 관리 시스템"

 

Create a new repository 를 통해 이름을 FirstRepo 로  repository 생성

 

public 과 private을 선택할수 있는데 public 은 모두가 내가 작성한 repo를 볼 수 있게 할 것인가? 

private으로 내가 선택한 사람만 볼 수 있게 할 것인가? 이기에 필자는 private을 선택하여 생성

사진1

 

첫쨰주에서 학습한 init , add README.md , commit 이 보인다. (반갑)

git bash를 사용해서 하는 방법과 gui를 활용한 버튼 딸깍 방법 2가지가 생각난다.

 

오늘은 아래쪽 깃 허브에 내 로컬 프로젝트 업로드를 하기 위해 

git remote add 원격저장소(깃 허브 레포지토리) 별칭 원격저장소 URL 을 터미널에 입력

사진 1에서 보이는 파란부분 주소가 내가 방금 생성한 따끈따끈한 레파지토리 주소이다.

 

git add origin https://github.com/leejh2114/FirstRepo

(origin은 별칭입니다.)

참고만 해주세요

$ git push origin main 명령을 입력하면

 

 

따란~  새로고침 해보면 소스코드가 깃허브에 올라가 있는것을 확인할 수 있다. (만세)

 

이제 내 컴퓨터(깃) 에서 소스코드를 깃허브에 올리는 방법을 알 수 있었다면

깃허브에서 소스코드를 가져오는 방법을 알아야 한다.

 

그러기 위해 new 메뉴의 new window >> new forder >> GitTestForder 생성 >> new terminer

 

사진4

git clone https://github.com/leejh2114/FirstRepo.git

 

새로운 폴더 에서 클론으로 가져온 모습

 

이제 수정된 코드를 올리고, 수정된 코드 받아오는 방법을 알아보자.

 

test를 modified 로 변경(수정) 해주고 저장

저장 해보니 수정이 일어남을 감지하고 commit 할건지 물어보는걸 볼수 있음

 

add 누른후 commit  버튼을 눌러주고 Second Commit을 작성한후 커밋! Accept Commit Message 체크버튼 눌러주면~

새로고침에도 안된다. 왜냐하면 push도 해주어야 하기 떄문!

 

push까지 해주면~

수정된 부분이 commit 된 것을 확인 할 수 있다.

 

자! 이제 원래 컴퓨터에서 코드를 수정하고 commit을 성공적으로 한 것을 확인 했으면

다른 컴퓨터에서 수정된 코드를 받아 사용하는것을 확인할 차례다.

 

git pull origin main 코드를 사용!

다짜고짜 코드를 받으려고 한 모습

 

 

체인지 디렉토리 를 사용해서 cd FirstRepo 로 이동!

 

연결 해제!

 

사라져라

pull 하다 안되어서 git remote remove origin 시전

전부 다 지워버림

깃허브로 다시 불러오기 ㅎㅎ

Clone Repository 딸깍

누르면

 

 

딸깍으로 clone을 해보면

 

그냥 포커싱 문제로 명령어가 작동하지 않았던것을 확인할수 있다..

 

 

다음은 깃허브에 올린 프로젝트를 내려받는 실습을 진행한다 test2.txt 파일을 만들어 commit 하고 push 해주면

깃허브에 올라간다.

 

 

왼쪽에서 올려서 오른쪽에 업데이트 하는걸 확인!!

 

자 캡처를 설명하자면

 

컴퓨터1에서 코드를 작성하고 커밋을 하고 push 하면 깃허브에 컴퓨터1에서 작성된 코드가 업데이트 되고

컴퓨터2에서 코드를 받아서 코드를 출력한 내용이다.

 

이정도만 해도 협업가능!

 

그럼 다시 컴퓨터2에서 코드를 수정하고 컴퓨터1에서 코드를 받아보자

컴퓨터2에서 test3을 만들고 add >> commit >> test3.txt  commin modified 내역 작성 >> push

과정 사이마다 log 확인!

 

컴퓨터1에서 git pull origin main 실행

컴퓨터2에서 작성한 test3 파일이 생성된 것을 확인!!

 

 

브랜치란?

 

branch 는 나뭇가지를 뜻한다.

 

프로젝트 하나가 있다면 이걸 복사해서 사용할 일이 많을 것이다.

각종 개발을 한다고 했을떄

 

로그인 기능.

상품 조회 기능.

..

버전 이 1.0, 1.1, 1.21. 1.26, ....

이 있다면 프로젝트를 언젠가 합쳐야 할 떄가 있을것이다 메인 줄기에 갖다 붙여넣기 위하여

 

각 기능을 따로따로 개발을해서 다시 합치기 위해 깃이 도구를 제공한다.

 

git status

 

On branch main
nothing to commit, working tree clean

너는 메인 나뭇가지 위에있고

커밋할것이 없고 나무가 깨끗하다

 

git branch

너가 작업하고 있는 위치!

status에서 main이라고 했으니 main이라고 출력될 가능성 농후

 

git branch checkout dev

dev로 브랜치를 변경할꺼야~ 라고 했는데

error: pathspec 'dev' did not match any file(s) known to git

넌 지금 dev라는 파일 이 없어 친구야 라고 에러 메시지가 나온다

 

이유는 dev라는 branch를 따로 만들지 않았기 때문

 

git branch dev 명령어로 dev 브렌치를 만들어주고

git branch 를 실행해 주면

 

dev

*main

이렇게  출력됨을 확인할수 있다.

 

출력된 화면에서 확인할수 있듯이 아직 브랜치가 변경되지는 않고 추가만 된모습

 

git checkout dev 명령어를 입력 후

다시 한번 git branch 를 입력해주면

 

*dev

main

 

branch 가 dev로 변경된 모습을 확인 할 수 있다.

 

다시 돌아가고 싶을때 하이픈 '-'을 사용할수도 있다.

 

 

오늘은 여기까지~