[인프런] Javascript 입문 내용 중..

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript 입문 내용 중.. - 왕초보 git과 github1 본문

프로그래밍/Git & GIthub 깃과 깃허브

[인프런] Javascript 입문 내용 중.. - 왕초보 git과 github1

비비 bibi 2020. 10. 7. 14:40

오늘은 초간단 git과 github 사용법을 알아볼 것이다!

두 줄 요약

github에 소스 업로드하고 다른 사람과 공유하기

업로드할 파일 선택하고 add -> commit -> push

절차

github 가입
github 저장소(ropository) 생성
-> 깃허브 서버 내에 저장소를 만드는 작업.
github 저장소 클론(clone)
-> 깃허브 저장소를 내 컴퓨터에 복사하는 작업.
내 컴퓨터의 내 문서 아래에 생성된 프로젝트 디렉토리에서 파일 생성 및 작업 완료
커밋할 파일들 선택해서 스테이지에 올리기 (add)
커밋하기 (commit)
푸시하기 (push)
-> 여기까지 하면 내가 작업한 내용이 깃허브에 올라가게 된다.
"github.com/내아이디/내프로젝트" 링크를 통해 정상적으로 업로드 되어 있는지 확인

git 깃 이란?

형상 관리 시스템(Verson Control System 버전 컨트롤 시스템) 의 한 종류입니다.
주로 개발자들이 프로그램과 관련된 파일들을 저장&공유하는 데 사용합니다.
게임의 세이브 포인트와 유사한데, 언제든지 저장 시점으로 되돌아 갈 수 있습니다.
여기서는 세 가지 기본 기념만 배우려 합니다.

커밋 (commit)

게임의 세이브에 해당하는 행동을 git에서는 커밋이라고 합니다.
다시 말해서 여러분은 언제든지 커밋한 시점으로 되돌아 갈 수 있습니다 .
커밋을 하려면 저장을 원하는 파일들을 묶어서 커밋 명령을 수행하면 됩니다.
(->add)

(예를 들어..)
1차 개발안, 2차 개발안, 3차 개발안.. 을 기획하다가 다시 생각해보니 처음 만든 게 제일 낫다. 싶으면
커밋만 했다면 1차 개발안의 상태로 되돌아갈 수 있음!

스테이지에 올린다 (add)

앞에서 커밋하기 전에 저장을 원하는 파일들을 묶는 일을 해야 한다고 했습니다.
이 작업을 스테이지에 파일을 올린다라고 합니다.
혹은 줄여서 간단히 'add'라고도 합니다.

즉 깃에 저장을 원하면..
원하는 파일을 스테이지에 올리기(add) -> 올린 파일 커밋commit하기.
스테이지에 파일을 올려야 그 파일들을 커밋할 수 있다.

github에 업로드 : 푸시(push)

커밋을 하면 이제 현재 작업 내용의 세이브 데이터가 내 컴퓨터에 저장됩니다.
(내 컴퓨터에 저장한 내용이기 때문에, 컴퓨터가 망가지거나 하면 커밋한 내용도 사라짐)

이걸 github에 업로드하면 마치 요즘 유행하는 스팀이나 PS4, 각종 모바일 게임의 원격 저장과 비슷한 일을 합니다.
(usb/외장하드/클라우드에 백업하는 것과 같다)

다른 사람이랑 공유할 수도 있고, 내 컴퓨터의 데이터가 날아가도 안전하게 다시 복구할 수 있습니다.

커밋commit한 내용을 github에 업로드하는 걸 git에서는 "push"라고 합니다.
즉
깃허브github = 원격 저장소,
푸시push = 원격 저장.

직접 해 보기

github.com 가입

https://github.com/join 를 통해 깃헙 가입을 합니다.
주의사항1: 깃헙은 아이디 노출도가 높습니다. 개발자스러운 아이디를 신중하게 고릅시다.
주의사항2: 가입 후 이메일 인증을 해야 가입이 완료됩니다.

참, 깃헙의 캐릭터는 옥토캣입니다. 개발자들 사이에게 인기가 매우 높죠.
옥토캣 이미지는 여기서 구경할 수 있어요. https://octodex.github.com/

저장소 생성

가입 후에는 저장소를 하나 만들어 봅시다.

초록색 new repository 버튼을 눌러서 저장소를 만듭니다. 첫번째 저장소 이름은 'hello-world'가 좋겠네요.

아래 그림을 참고해서 만들어 봅시다.

만들고 나면 여러분의 첫번째 저장소가 생깁니다. 이 저장소의 주소를 메모장 등에 저장해 놓습니다.

참고로 저장소 주소의 규칙은 https://github.com/내아이디/저장소이름 입니다.
방금 만든 제 저장소는 https://github.com/honux77/hello-world 가 되겠죠.

Source Tree 설치

git은 원래 명령어 기반 프로그램임.

우리는 조금 더 편하기 git을 사용하기 위해서 source tree 를 설치하려고 합니다.
터미널 명령은 나중에 배우세요.
https://www.sourcetreeapp.com/ 에서 다운받을 수 있습니다.

주의사항1: 아틀라시안에 가입을 해야 합니다.
주의사항2: bitbucket 등의 설정을 하라고 하는데 skip하는 게 편합니다.

클론 (Clone)

클론Clone
: github에 있는 저장소repository를 내 컴퓨터로 복사해 오는 것. push와 반대 절차임.

클론clone = 깃허브 repository → 내 컴퓨터(로컬)
푸시push = 내 컴퓨터(로컬) → 깃허브 repository

즉 클론을 하면 내 컴퓨터로 github repository와 같은 폴더&파일을 가져오게 된다.

Source Tree를 통해서 저장소 클론 (repository Clone)

이제 소스 트리를 실행해 봅시다.

소스트리의 'Clone' 또는 '복제 / 생성' 메뉴를 통해 github 에서 생성한 저장소를 클론해 올 수 있습니다.
앞 단계에서 메모장에 붙여 넣었던 저장소 주소를 넣어주면 됩니다.
보통 "내문서" 아래에 저장소 이름과 같은 새로운 폴더가 만들어 집니다.

작업 후 스테이지에 파일 추가

만들어진 폴더를 열고 에디터 등을 이용해 hello.html을 만들어 봅시다.
참 저장 위치는 Documents/hello-world/가 되겠죠?
hello.html

<!DOCTYPE html> 
<html> 
<body>
<h1>Hello JS</h1> 
<script>
console.log("Hello world!");
</script> 
</body> 
</html>

에디터로 파일을 만들고 저장합니다.

만들고 나서 소스트리로 돌아가 보면 상태가 변해 있습니다. 우리가 생성한 파일이 보이죠?

이걸 스테이지에 올려야 커밋할 수 있습니다. 모두 스테이지에 올리기 버튼을 클릭합니다.

스테이지에 올라간 파일 = 커밋될 예정인 파일!

커밋하기 commit

원하는 파일이 스테이지에 올라갔다면 커밋을 해야 합니다.
커밋 = 세이브라는 거 꼭 기억하세요.

커밋을 하면 스테이지에 있는 파일들이 커밋으로 저장됩니다.

커밋 주의사항

커밋에는 주의사항이 있습니다.

반드시 한 번에 하나의 논리적 작업만을 커밋합니다.
-> 한 번에 한 문장으로 설명할 수 있는 내용 단위로 커밋하는 게 좋다.
-> 여러 작업을 했다면? 커밋도 여러 번 하는 게 좋다. (따로따로, 커밋메시지 적어서)
커밋 메시지를 잘 적어야 합니다.
-> 미래의 나와 내 동료들을 위해 꼼꼼하게 적으면 좋다.

특히 커밋 메시지는 미래의 여러분과 다른 개발자를 위해서 꼼꼼히 적어야 합니다.

커밋 메시지 작성법

첫 줄에 간단하지만 명확하게 내용을 씁니다. (=제목)
한 줄 비우고
그 아래에 자세한 내용을 적습니다. (=내용)

2와 3은 옵션이지만 가급적이면 해 주는 게 좋습니다.
아래 그림처럼 커밋 메시지를 작성하고 커밋하기를 눌러 커밋합니다.

github에 업로드하기 = push

github의 저장소는 다른 클라우드 저장소와는 달라서 파일을 올리려면 개별적으로 올릴 수 없습니다.

업로드의 단위가 커밋이구요. 커밋을 업로드하는 것을 우리는 'push' 라고 말합니다. 푸쉬는 엄청 쉽습니다.
정상적으로 커밋하면 push 단추에 "1" 이라는 글씨가 써지는데, 이제 푸시 단추를 누르기만 하면 됩니다. 무언가 무서운 내용이 많이 나오는데 일단은 무시하고 푸시 푸시 단추를 두 번 누릅니다. 예전 핸드폰 게임 생각이 나는군요. 구루구루라는 만화도 갑자기 생각이... 처음에는 github 인증창이 나올 겁니다만, 두번째부터는 나오지 않습니다.

마지막으로 확인하기

이제 github.com 의 저장소로 가시면 업로드 내용을 볼 수 있어요. 짜잔! 친구들에게 자랑합시다!

정리

오늘 배운 내용은 깃허브 기능의 1%밖에 안 된다.
더 많은 기능들이 있지만, 우선 오늘 배운 add commit push에 익숙해지고 난 다음에
branch, merge, checkout 같은 기능을 알아보며 활용하면 된다.

저작자표시 비영리 변경금지

'프로그래밍 > Git & GIthub 깃과 깃허브' 카테고리의 다른 글

[지옥에서 온 Git] 3. 브랜치 - 원리, branch, merge, checkout, fast-forward, Auto-merging&CONFLICT, stash, reset (0)	2021.02.09
[지옥에서 온 Git] 2. 깃 버전 관리 - 개념 / status, add, commit, log, diff / 깃 파일 상태 / .gitignore / 되돌리기 checkout, reset, revert (0)	2021.02.09
[지옥에서 온 Git] 1. 깃 시작하기 - 개념, 깃 명령어(기초), 리눅스 명령어(기초), 빔(기초) (0)	2021.02.09
[인프런] Javascript입문 - git과 github3 - git의 브랜치 개념 이해(소스트리) (0)	2020.10.22
[인프런] Javascript입문 - git과 github2 (되돌리기), 추가로 공부할 것들 (0)	2020.10.18

'프로그래밍/Git & GIthub 깃과 깃허브' Related Articles