Git 더하기 GitHub(Git클라이언트 활용) / Getting started with git+github

GIT 더하기 GITHUB
이준영 junyoung.plum@gmail.com

GIT과 GITHUB
Original Octocat - https://octodex.github.com/original

01 소스 코드를 어떻게 관리하고 계신가요?
프로젝트_최종.zip
ZIP
프로젝트_최종_최종2.zip
ZIP
프로젝트_최종_최종2_마지막.zip
ZIP
프로젝트_최종_최종2_마지막_진짜제출용.zip
ZIP

02 조금 더 나은 버전?
프로젝트_20160401.zip
ZIP
ZIP
ZIP
ZIP
프로젝트_20160401_이준영.zip
ZIP
하지만 혼자가 아니라면 어떻게 될까?
프로젝트_20160401_송태웅.zip
ZIP
프로젝트_20160401_이준영+송태웅_통합.zip
ZIP

03 버전 관리(Version Control)
소스코드에서 무엇이 변경되었는지?
누가 소스코드를 변경했는지?
언제 소스코드가 변경되었는지?
왜 그렇게 바뀐건지?
이전 버전으로의 복구는 어떻게?
…
그래서 씁니다. 버전 관리 시스템

04 Git?
분산 버전 관리 시스템
리누스 토발즈가 개발
빠름!
완전한 분산 환경 지원
대규모 프로젝트에도 사용 가능

05 GitHub?
GitHub :
Git 저장소 호스팅 서비스
-  공개 저장소는 무료
-  강력한 협업 기능 제공
-  오픈 소스 소프트웨어의 허브
-  확장이 용이
-  다양한 서비스와의 연동
-  기업을 위한 엔터프라이즈 버전 제공

06 Octocat https://octodex.github.com

Git 시작하기
Octobiwan - https://octodex.github.com/octobiwan
전에…

01 시작하기 전에 먼저 GitHub 가입하고, Git 클라이언트를 설치합시다.
http://www.slideshare.net/ssusercef361/github-git
위의 URL에서 참고해 주세요.

09 CLI와 친해지기 터미널, 쉘
텍스트 입력 및 표시를 위한 인터페이스(텍스트 터미널)
입력된 명령을 해석하여 운영체제로 전달
사용자가 로그인 시 자동으로 쉘이 실행
터미널(Terminal)
쉘(Shell)
현재 경로
사용자@호스트
터미널과 쉘의 모습
프롬프트

10 CLI와 친해지기 pwd, ls, mkdir
pwd 현재 경로 확인
ls 파일 목록 보기
mkdir 디렉토리(폴더) 만들기
$ mkdir my-folder

11 CLI와 친해지기 절대 경로, 상대 경로
최상위 디렉토리(루트, /)를 기준으로 한 경로
현재 위치를 기준으로 한 경로
절대 경로
상대 경로
마침표 하나 (.)
마침표 둘 (..)
../..
../../..
현재 디렉토리
상위 디렉토리
상위의 상위?
위의 위의 위?
workspace
/
lotto-gen
css
js
app.js
현재 위치
절대 경로
/workspace/lotto-gen/js/app.js
상대 경로
js/app.js

12 CLI와 친해지기 cd
cd 디렉토리 이동
$ cd my-folder
상위 디렉토리로 이동
$ cd ..
상대 경로로 이동
$ cd workspace/my-folder
절대 경로로 이동(Windows 기준)
$ cd /c/Users/nnoco/workspace

13 CLI와 친해지기 cat, cp
cat 파일 내용 보기
$ cat <파일명>
cp 파일 복사(mv는 이동)
$ cp <파일명> <복사할위치 또는 파일명>

14 CLI와 친해지기 rm
rm 파일 삭제
$ rm <삭제할 파일명>
비어있는 디렉토리 삭제
$ rm –r <디렉토리명>
파일이 있는 디렉토리 삭제 (절대 주의!!!)
$ rm –rf <삭제할 디렉토리>

15 CLI와 친해지기 vim 에디터
vi vim 에디터 실행
$ vim README.md
ESC 명령 모드로 전환
i 편집(삽입) 모드로 전환
dd 줄 삭제
:wq 저장 후 종료
:q! 저장하지 않고 종료

16 (제가) 쉬어가는 코너
<복습하고 넘어가기>
1.  ~/workspace 디렉토리 생성,
그 안에 자기 <GitHub_ID-lotto-gen> 디렉토리 생성하고
2.  해당 디렉토리로 들어가기(그럼 현재위치는 ~/workspace/<ID-lotto-gen>)
3.  디렉토리 안에 vim 에디터로 hello.txt 파일 만들고,
4.  간단한 인사말을 쓴 후 저장하고 종료
5.  금방 만든 파일의 내용을 출력해보기
6.  현재 위치 출력(출력 결과는 ~/workspace/<ID-lotto-gen>)
예) nnoco-lotto-gen

Git 시작하기
Labtocat - https://octodex.github.com/labtocat

01 Git 필수 개념 집어보기 Git의 세 가지 상태
Working Directory
현재 작업 디렉토리,
프로젝트의 특정 버전을 체크아웃한 것
Staging Area
커밋 시 반영되는 파일이 보관되어 있는 곳
인덱스 영역이라고도 하며, 커밋하면
Git Directory(로컬 저장소)로 이동된다.
Git Directory
Git으로 관리되는 프로젝트의 정보와
객체 데이터베이스가 저장되는 곳
Git 명령어를 통해 최초에 초기화 하거나
다른 저장소를 Clone하면 생성된다.
Git을 통한 작업 순서
-  워킹 디렉토리에서 파일을 수정
-  워킹 디렉토리에서 변경된 파일을 스테이징 영역에 추가(커밋할 스냅샷 생성)
-  스테이징 영역의 파일을 커밋하여 Git 디렉토리에 영구적으로 저장
h"ps://git-scm.com/book/ko/v2/시작하기-Git-기초

02 Git 필수 개념 집어보기 파일의 라이프 사이클
•  Untracked : Git이 파일의 변경을 추적하지 않는 상태
•  Tracked : Git이 파일의 변경을 추적하고 있는 상태
•  Unmodified : 수정되지 않은 상태
•  Modified : 추적 중인 파일이 수정된 상태
•  Staged : 스테이징 영역에 추가된 상태
h"ps://git-scm.com/book/ko/v2/Git의-기초-수정하고-저장소에-저장하기

03 이렇게 실습해볼 예정입니다
간단한 로또 번호 생성 프로그램을 만들어 보면서 Git 실습
1. HTML로 간단한 UI 구성
2. 0~44의 범위에서 6개의 번호 랜덤 생성 메서드 작성
3. 버튼에 이벤트 연결
4. 버그 발견! 생성되는 숫자 범위 조정(1~45)
5. 버그 발견! 중복 생성된 번호 확인 로직 추가
6. 주석 추가
로또는 1~45의 범위지만 일부러 틀린겁니다.

* 화면 구성에 대한 설명
Local Git Repository Branch Commit Logs
Working Directory
Staging Area
nnoco-lotto-gen
js
hello.txt

04 사용자 정보 설정 git config
$ git config --global user.name “Junyoung Lee”
$ git config --global user.email “junyoung.plum@gmail.com”
git config 명령으로 사용자 이름과 이메일 설정
Git이 커밋할 때마다 설정된 사용자 이름과 이메일 정보를 사용
--global 옵션은 해당 시스템 전체 설정으로 적용됨
--global 옵션을 빼면 해당 프로젝트에만 설정
Working Directory
Staging Area
nnoco-lotto-gen
js
hello.txt

05 Git 저장소 만들기(초기화) git init
Working Directory
Staging Area
nnoco-lotto-gen
js
hello.txt $ git init
Initialized empty git repository in /workspace/lotto-gen/.git
git init 명령으로 저장소 생성
git init 명령을 실행하면 .git 디렉토리가 생성됨
$ ls –la
total 8
drwxr-xr-x 6 root root 9 5월 13 21:16 .
drwxr-xr-x 3 root root 3 5월 13 16:52 ..
drwxr-xr-x 7 root root 10 5월 13 21:18 .git
-rw-r--r-- 1 root root 56 5월 13 21:08 README.md
drwxr-xr-x 3 root root 3 5월 13 17:02 js
...

06 추적하지 않을 파일 설정 - .gitignore 파일
Working Directory
Staging Area
# Git ignore
hello.txt # hello.txt 파일 무시
.gitignore 파일 추가
lo'o-gen/.gi/gnore
.gitignore에 적용된 패턴에 해당되는 파일은
Git을 통해 추적하지 않습니다.
자세한 패턴은 https://git-scm.com/book/ko/v2/Git의-
기초-수정하고- 저장소에-저장하기#파일-무시하기 참고
nnoco-lotto-gen
js
hello.txt

07 스테이징 영역에 .gitignore 파일 추가 git add
Working Directory
.gitignore
Staging Area
git add [파일명|패턴] 으로 스테이징 영역에 추가
$ git add .gitignore
git add –A 옵션을 주면 모든 변경된 파일 추가
nnoco-lotto-gen
js
hello.txt

08 대망의 첫 커밋! git commit
Working Directory
Staging Area
.gitignore
Local Git Repository Branch
1. .gitignore 파일 추가

Commit Logs
git commit –m “커밋 메시지”로 메시지와 함께 커밋
$ git commit –m “.gitignore 파일 추가”
[master (root-commit) 8fe2b9e] add .gitignore
1 file changed, 2 insertions(+)
create mode 100644 .gitignore
Git은 커밋 시 메시지가 꼭 포함되어야 하며,
-m “메시지” 옵션이 생략되면 기본으로 설정된
vim 에디터로 커밋 메시지를 입력할 수 있습니다.
1
master
nnoco-lotto-gen
js
.gitignore
hello.txt

09 프로젝트 소개 - README.md 파일 만들기
Working Directory
Staging Area
.gitignore

Commit Logs
vi README.md 명령으로 파일을 생성하고 편집
README.md 파일은 마크다운(Markdown) 형식의 파일로써
GitHub에서 디렉토리에 README.md 파일이 있으면,
이를 먼저 페이지에 표시합니다.
GitHub에서 사용하는 마크다운에 대한 자세한 내용은
https://guides.github.com/features/
mastering-markdown/ 페이지를 참고하세요.
1
master
nnoco-lotto-gen
js
.gitignore
README.md
# 6/45 로또 번호 생성기
로또 번호 생성기를 만들며 Git과 GitHub을 배울겁니다.

10 파일 상태 확인 git status
Working Directory
Staging Area
.gitignore
1. add .gitignore

Commit Logs
git status 명령으로 파일의 상태 확인
$ git status
On branch master
Untracked files:
(use "git add <file>..." to include in what will be
committed)
README.md
nothing added to commit but untracked files present (use "git
add" to track)
빨간색은 untracked 상태
녹색은 unstaged 상태
변경된(파일이 추가/삭제되거나, 수정되었을 때) 파일만 표시됩니다.
1
master
nnoco-lotto-gen
js
.gitignore
README.md

11 커밋 로그 확인 git log
Working Directory
Staging Area
.gitignore
1. add .gitignore

Commit Logs
lotto-gen
bin
src
project
LottoGenerator.java
README.md
make
git log 명령으로 커밋 로그 확인
.gitignore
$ git log
commit 8fe2b9ed4f00e242f86fb32734bd7c9a0a861b3e
Author: Junyoung Lee <junyoung.plum@gmail.com>
Date: Fri May 13 21:35:03 2016 +0000
.gitignore 추가
1
master
순서대로
커밋 ID, 커밋 작성자, 날짜, 커밋 메시지 출력

12 스테이징 영역에 README.md 파일 추가하고 확인
Working Directory
README.md
Staging Area
.gitignore

Commit Logs
1
master
nnoco-lotto-gen
js
.gitignore
README.md
git add로 추가하고 git status로 확인
$ git add .
$ git status
On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
new file: README.md
-  git add 명령 시 파일 이름 대신 . 을 입력하면
현재 디렉토리 하위의 모든 파일을 추가합니다.
-  git은 빈 디렉토리는 추적하지 않습니다.

13 두 번째 커밋!
Working Directory
Staging Area
.gitignore
README.md
1.  .gitignore 파일 추가
2.  프로젝트 소개 추가
Commit Logs
이번에는 –m 옵션을 생략해 봅시다.
프로젝트 소개 추가
# Please enter the commit message for your changes. Lines
starting
# with '#' will be ignored, and an empty message aborts the
commit.
# On branch master
# Changes to be committed:
# new file: README.md
$ git commit
<vim 에디터>
:wq로 저장하고 나오면 vim에서 작성한 메시지로 커밋됩니다
1 2
master
nnoco-lotto-gen
js
.gitignore
README.md

14 HTML로 간단한 UI 구성 복붙하세요!
Working Directory
Staging Area
.gitignore
README.md
Commit Logs
1 2
master
nnoco-lotto-gen
js
.gitignore
README.md
index.html 파일을 만들고 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>로또 번호 생성기</title>
</head>
<body>
<input id="inputGenerated">
<button id="btnGenerate">번호 생성</button>
</body>
</html>
nnoco-lo'o-gen/index.html
index.html

15 만든 index.html 파일을 열어 봅시다.

16 index.html 파일을 커밋해 봅시다.
Working Directory
Staging Area
.gitignore
index.html
README.md
3.  HTML 파일 작성
Commit Logs
lotto-gen
bin
src
project
LottoGenerator.java
README.md
make
먼저 git add 하고,
.gitignore
1
master
2
$ git add index.html
$ git commit –m “HTML 파일 작성“
[master bd02f4e] HTML 파일 작성
1 file changed, 11 insertions(+)
create mode 100644 index.htm
git commit!
3

17 자바스크립트로 번호 생성 함수 작성!
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
4.  로또 번호 생성 함수 작성
Commit Logs
1 2
master
nnoco-lotto-gen
js
.gitignore
README.md
js/app.js 파일을 만들고 아래와 같이 작성합니다.
function generate() {
var numbers = [];
for(var i=0; i<6; i++) {
numbers.push(Math.floor(Math.random() * 45));
}
return numbers;
}
nnoco-lo'o-gen/js/app.js
index.html
app.js
$ git add js/app.js
$ git commit –m “로또 번호 생성 함수 작성”
그리고 add하고, commit해 줍니다.

18 jQuery를 추가하고, 이벤트 연결하기
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
5.  jQuery 적용 및 버튼에 이벤트 추가
Commit Logs
1 2
master
nnoco-lotto-gen
js
.gitignore
README.md
index.html 파일을 아래와 같이 수정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로또 번호 생성기</title>
<script src="./js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<input id="inputGenerated">
<button id="btnGenerate">번호 생성</button>
<script>
$(function() {
$('#btnGenerate').click(function() {
$('#inputGenerated').val(generate().join(', '));
})
});
</script>
</body>
</html>
nnoco-lo'o-gen/index.html
index.html
app.js
$ git add index.html
$ git commit –m “jQuery 적용 및 버튼에 이벤트 추가”
그리고 index.html 파일도 add하고, commit해 줍니다.

19 버그 발견! 생성되는 번호의 범위 수정
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
generate() 함수에 심각한 결함이 있습니다.
이를 수정하기 위해 branch를 활용해 보겠습니다.
$ git checkout –b hotfix1
Switched to a new branch ‘hotfix1’
파일을 수정하기 전에 git checkout 명령에 –b 옵션을
더해 ‘hotfix1’ 브랜치를 생성하면서 체크아웃 합니다.
checkout은 브랜치나 특정 버전을 선택하여
워킹 디렉토리로 가져옵니다.
이제 hotfix1 브랜치는 master와 같은 곳을 가리킵니다.
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1

20 브랜치 확인 git branch
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
git branch 명령을 이용해 브랜치 목록과
현재 브랜치를 확인할 수 있습니다.
$ git branch
* hotfix1
master
브랜치 목록이 출력되며, hotfix1을 생성하면서
체크아웃 했으므로 hotfix1 앞에 *가 있는 것을
확인할 수 있습니다.

21 이제 버그를 잡아 봅시다.
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
app.js 파일에서 잘못된 부분을 수정합니다.
var numbers = [];
for(var i=0; i<6; i++) {
numbers.push(Math.floor(Math.random() * 45) + 1);
}
return numbers;
}
nnoco-lo'o-gen/js/app.js

22 변경된 내용 비교하기 git diff
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
git diff 명령을 이용해 변경된 내용을 확인할 수 있습니다.
$ git diff
diff --git a/js/app.js b/js/app.js
index 8b3d196..05ef149 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2,7 +2,7 @@ function generate() {
var numbers = [];
for(var i=0; i<6; i++) {
- numbers.push(Math.floor(Math.random() * 45));
+ numbers.push(Math.floor(Math.random() * 45) + 1);
}
return numbers;
삭제된 라인은 빨간색, 추가된 라인은 녹색으로 표시됩니다.
또한 설정을 통해 diff 툴을 변경할 수 있습니다.

23 변경된 파일을 스테이징 영역에 추가하고 상태 확인
Working Directory
js/app.js
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
git add로 추가하고, git status로 상태 확인
$ git add –A
$ git status
On branch hotfix1
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: js/app.js

24 커밋~!
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
6.  버그 수정 – 숫자 생성 범위 조정
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
git commit으로 커밋!
$ git commit -m "버그 수정 - 숫자 생성 범위 조정"
[hotfix1 c810813] 버그 수정 - 숫자 생성 범위 조정
1 file changed, 1 insertion(+), 1 deletion(-)
git log로 커밋 로그 확인!
$ git log --pretty=oneline
c810813f1f29305c1b63a6898bea617ff9822968 버그 수정 - 숫자 생성 범위 조정
dc799cc69536671d383ca6bd58ab49301f5bb2dc jQuery 적용 및 버튼에 이벤트 추가
2b7391aa9530d36c03a67ff8895621ee7df9ade3 로또 번호 생성 함수 작성
bd02f4e37f9b4590553092f1c2312ebd28d4279c HTML 파일 작성
9dc5de5b61ed5ac4ae0300fbb06a8a7b0d4bfbcb 프로젝트 소개 추가
a6beb3d05f1f37ba16ea108b23562387fb72e48b .gitignore 파일 추가
git log에 다양한 옵션을 적용하여 출력할 수 있습니다.
6
hotfix1

25 각 브랜치의 워킹 디렉토리 비교
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
6
hotfix1
현재 hotfix1의 app.js 파일은 수정된 상태입니다.
master 브랜치로 체크아웃하여 app.js 파일을
비교해 보겠습니다.
$ git checkout master
Switched to branch ‘master’
$ cat js/app.js
...
numbers.push(Math.floor(Math.random() * 45));
...
hotfix1 브랜치에서 변경했던 부분이 변경 하기 전의 코드임을
브랜치가 변경되면 워킹 디렉토리의 파일도 통째로 변경됩니다

26 브랜치 합치기 – git merge
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
git merge 명령어로 브랜치를 합칠 수 있습니다.
현재 브랜치가 master인지 확인합니다.
$ git branch
hotfix1
* master
git merge 실행
$ git merge hotfix1
Updating dc799cc..c810813
Fast-forward
js/app.js | 2 +-
git merge [브랜치] 명령을 실행하면
현재 브랜치에 [브랜치]를 가져와 합치게 됩니다.
6

27 브랜치 삭제 – git branch –d [브랜치명]
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5
hotfix1
hotfix1 브랜치가 삭제됩니다.. 안녕ㅠ
6
hotfix1 브랜치는 더이상 사용하지 않으므로
git branch –d [브랜치] 명령으로 브랜치를 삭제합니다.
$ git branch –d hotfix1
Deleted branch hotfix1 (was c810813).
git branch 명령으로 브랜치 확인
$ git branch
* master

28 원격 저장소(Repository) 생성 (1)

29 원격 저장소(Repository) 생성 (2]

30 원격 저장소(Repository) 생성 (3)

31 원격 저장소 설정 – git remote add
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5 6
git remote add 명령어로 원격 저장소를 설정합니다.
$ git remote add origin [GitHub 저장소 주소]
$ git remote -v
origin https://github.com/nnoco/nnoco-lotto-gen (fetch)
origin https://github.com/nnoco/nnoco-lotto-gen (push)
git remote -v 명령으로 원격 저장소가 등록된 것을

32 원격 저장소에 푸시(Push) git push
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5 6
git push [Remote] [Branch] 명령으로
원격 저장소에 로컬 저장소의 파일을 업로드 합니다.
$ git push origin master
Username for 'https://github.com': nnoco
Password for 'https://nnoco@github.com':
Counting objects: 20, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (16/16), done.
Writing objects: 100% (20/20), 2.13 KiB | 0 bytes/s, done.
Total 20 (delta 6), reused 0 (delta 0)
To https://github.com/nnoco/nnoco-lotto-gen
* [new branch] master -> master
인증을 위해 아이디와 비밀번호를 입력하면 푸시 과정이
진행되는 것을 확인할 수 있습니다.

33 GitHub에서 푸시 결과 확인

34 GitHub에서 커밋 로그 확인

35 버그 발견! 중복 생성된 번호 확인하기
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
1 2
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5 6
아까랑 똑같죠?
git checkout –b [브랜치]로 브랜치 생성&체크아웃
그리고 generate 함수의 버그 수정
$ git checkout -b hotfix2
Switched to a new branch 'hotfix2’
var numbers = [];
for(var i=0; i<6; i++) {
var number = Math.floor(Math.random() * 45) + 1;
if(contains(numbers, number)) {
i--;
} else {
numbers.push(number);
}
}
return numbers;
}
// 배열 안에 number가 포함되어 있는지 확인
function contains(numbers, number) {
for(var i=0; i<numbers.length; i++) {
if(numbers[i] == number) return true;
}
return false;
}
js/app.js
이 코드도 복붙하세요~

36 add와 commit을 한 번에
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
7.  버그 수정 – 중복된 번호 문제
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3
master
4 5 6
사실 git add는 조금 무의미하게 반복될 때가 있어서
add와 commit을 한번에 할 수 있는 방법이 있습니다.
git commit 명령 실행 시 –a 옵션을 더해줍니다.
$ git commit -am "버그 수정 - 중복된 번호 문제"
[hotfix2 a968f0d] 버그 수정 - 중복된 번호 문제
1 file changed, 14 insertions(+), 1 deletion(-)
-a 옵션은 파일의 상태가 tracked인 경우에 한해서 적용되며
스테이징 영역에 파일을 추가하는 작업을 건너뛸 수 있습니다.
7
hotfix2

37 충돌 만들기(1)
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
8.  주석 수정(hotfix2)
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3 4 5 6
7
hotfix2
Git은 문제가 없는 경우 자동으로 병합이 되지만,
서로 다른 브랜치에서 같은 부분이 수정된 경우에는
충돌(Conflict)이 발생할 수 있습니다.
임의로 충돌이 나는 상황을 만들고, 이를 수정해보겠습니다.
app.js 파일의 contains 함수 위에 있는 주석을
아래와 같이 수정해 봅시다.
-> //== 배열 안에 number가 포함되어 있는지 확인 ==//
$ git commit –am “주석 수정(master)”
그리고 –am 옵션을 주어 커밋합니다.
master
8

Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
7.  주석 수정(master)
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3 4 5 6
7
master
7
8
hotfix2
다음으로 master 브랜치로 체크아웃 한 후
-> /* 배열 안에 number가 포함되어 있는지 확인 */
$ git commit -am "주석 수정(master)"
[master d0e91a7] 주석 수정(master)
1 file changed, 15 insertions(+), 1 deletion(-)
Switched to branch ‘master’
금방 복사한 소스코드를 그대로 붙여넣고,
역시 주석 부분을 아래와 같이 수정합니다.
그리고 역시 master에서도 –am 옵션을 주어 커밋합니다.

Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3 4 5 6
7
master
7
8
hotfix2
이제 git merge 명령으로 브랜치를 병합합니다.
$ git merge hotfix2
Auto-merging js/app.js
CONFLICT (content): Merge conflict in js/app.js
Automatic merge failed; fix conflicts and then commit the
result.
js/app.js 파일에 충돌이 있어서
Git이 자동으로 브랜치를 병합하는데 실패했다는
메시지가 표시됩니다.
자동으로 못했다면..? 수동으로 문제를 해결해야겠죠?

40 충돌 해결하기
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
10.  머지 충돌 문제 해결
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3 4 5 6
7
master
7
8
hotfix2
편집기에서 app.js 파일을 엽니다.
<<<<<<< HEAD
/* 배열 안에 number가 포함되어 있는지 확인 */
=======
//== 배열 안에 number가 포함되어 있는지 확인 ==//
>>>>>>> hoEix2
주석을 수정한 부분에 기호와 함께 브랜치 이름이 있습니다.
HEAD 부분이 master 브랜치에서 수정한 내용입니다.
둘 중 보존할 코드를 두고 나머지 라인을 지우고 저장합니다.
/* 배열 안에 number가 포함되어 있는지 확인 */
$ git commit –am “머지 충돌 문제 해결”
[master b15e17e] 머지 충돌 문제 해결
10+

41 커밋 로그 확인 & 원격 저장소에 Push
Working Directory
Staging Area
.gitignore
index.html
README.md
js/app.js
10.  머지 충돌 문제 해결
Commit Logs
nnoco-lotto-gen
js
.gitignore
README.md
index.html
app.js
3 4 5 6
7
master
7
8
hotfix2
10+
병합이 어떤 모습으로 되었는지 git log로 볼 수 있습니다.
$ git log --pretty=oneline --graph
* b15e17e5e9f09acce9404c3f9027d77eb7b5826a 머지 충돌 문제 해결
|
| * 7627edbcbabc2506adda7ccc70c0f9f4bf5bc5ae 주석 수정(hotfix2)
| * ba38b44ae9c14e27745d858736ce58de3c0d00c4 버그 수정 - 중복된 번호 문제
* | d0e91a7cd346e5ab54a0b23a4a4d8e946d67d787 주석 수정(master)
|/
* c810813f1f29305c1b63a6898bea617ff9822968 버그 수정 - 숫자 생성 범위 조정
* dc799cc69536671d383ca6bd58ab49301f5bb2dc jQuery 적용 및 버튼에 이벤트 추가
* 2b7391aa9530d36c03a67ff8895621ee7df9ade3 로또 번호 생성 함수 작성
* bd02f4e37f9b4590553092f1c2312ebd28d4279c HTML 파일 작성
* 9dc5de5b61ed5ac4ae0300fbb06a8a7b0d4bfbcb 프로젝트 소개 추가
* a6beb3d05f1f37ba16ea108b23562387fb72e48b .gitignore 파일 추가
지금까지의 커밋을 원격 저장소로 푸시합니다.
$ git push origin master
Username for 'https://github.com': nnoco
Password for 'https://nnoco@github.com':
...

GitHub 살펴보기
Filmtocat - https://octodex.github.com/filmtocat

06 작성된 이슈 확인과 댓글

14 Organization 생성하기 (1)

19 Pull Request 보내기 (1)
GitHub
원본 원격 저장소
nnoco/git-github-nnoco
Fork 원격 저장소
devignner/git-github-nnoco
Fork
Pull Request
로컬 저장소
Push
Clone/Pull
1
2
3
4
Pull Request 보내기 과정

$ git clone https://github.com/ma-non-troppo/nnoco-lotto-gen mnt-lotto-gen
Cloning into 'nnoco-lotto-gen'...
remote: Counting objects: 36, done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 36 (delta 15), reused 36 (delta 15), pack-reused 0
Unpacking objects: 100% (36/36), done.
Checking connectivity... done.
원격 저장소의 주소를 복사하여 git clone <URL> <본인아이디>-lotto-gen
명령을 실행합니다
$ ls
nnoco-lotto-gen mnt-lotto-gen
$ cd mnt-lotto-gen
$ pwd
~/workspace/nnoco/mnt-lotto-gen
ls 명령어를 실행하면 git-github-[아이디] 디렉토리가
생성된 것을 확인하실 수 있습니다. cd 명령어로 해당 디렉토리로 들어갑니다.
$ cd ~/workspace/nnoco
쉘에서 ~/workspace/<아이디> 디렉토리로 이동합니다.

vim 에디터로 결과 값을 정렬하도록 수정합니다.
// ... 기존 코드
return numbers.sort((a, b) => { return a-b });
}
$ git checkout –b topic
Switched to a new branch ‘topic’
코드 수정을 위해 topic 브랜치를 만들고 체크아웃 합니다.
$ vi js/app.js
수정 사항을 커밋합니다. 그리고 원격 저장소로 Push!
$ git commit –am “정렬 기능 추가”
...
$ git push origin topic
…

28 Pull Request 받기 (1)
GitHub
원본 원격 저장소
nnoco/git-github-nnoco
Fork 원격 저장소
devignner/git-github-nnoco
Merge
Pull Request
Pull Request
로컬 저장소
Push
(직접 merge한 경우)
Fetch
4
2
4`
1
Pull Request 받기 과정
merge
3

$ git pull origin master
From https://github.com/nnoco/nnoco-lotto-gen
* branch master -> FETCH_HEAD
Already up-to-date.
git pull 명령어로 원격 저장소의 변경 사항을 가져옵니다.
$ git checkout -b pr
Switched to a new branch 'pr'
Pull Request의 확인을 위한 브랜치 pr을 생성하고 체크아웃합니다.
$ cd ~/workspace/nnoco/nnoco-lotto-gen
처음 실습했던 <아이디>-lotto-gen 디렉토리로 이동합니다.
$ git remote add [보낸사람_사용자명] [보낸 사람의 Git_URL]
Switched to a new branch 'pr'
Pull Request를 보낸 사용자의 원격 저장소를 추가합니다.
$ git fetch [보낸사람_사용자명]
...
From https://github.com/ma-non-troppo/nnoco-lotto-gen
* [new branch] master -> mnt/master
* [new branch] topic -> mnt/topic
추가한 원격 저장소의 변경사항을 fetch 합니다.

$ git merge [보낸사람_사용자명]/topic
Updating f5da55c..509bcf9
Fast-forward
js/app.js | 2 +-
Pull Request를 확인하기 위해 pr 브랜치로 병합합니다.
이상없이 병합이 되고, 기능상의 문제가 없음이 확인되면 pr 브랜치를 제거하기 위해
master 브랜치로 체크아웃합니다.
Switched to branch 'master'
pr 브랜치를 제거합니다.
$ git branch –d pr
Deleted branch pr (was 509bcf9).

맛깔나게 활용하는
GIT과 GITHUB
Adventure Cat - https://octodex.github.com/adventure-cat

01 GitHub 페이지 활용하기 (1)

GIT, 좀 더 깊게 보기
20% Cooler Octocat - https://octodex.github.com/twenty-percent-cooler-octocat

01 .git 디렉토리 살펴보기
COMMIT_EDITMSG
HEAD
ORIG_HEAD
branches
config
description
hooks
index
info
logs
objects
refs
마지막 커밋 메시지
현재 체크아웃한 브랜치를 가리키는 포인터
origin의 헤드를 가리키는 포인터
예전 버전에 사용한 브랜치 정보
해당 프로젝트에만 해당되는 설정
GitWeb 등에서 사용하는 프로젝트 정보
클라이언트 훅(Hook)이나 서버 훅 스크립트 위치
스테이징 영역의 정보를 저장
.gitignore와 같은 역할을 하며 버전관리는 되지 않음
커밋 로그 정보
모든 정보를 저장하는 데이터베이스
커밋 객체의 참조 정보(포인터) 저장

02 Git Branch 전략
h'p://nvie.com/posts/a-successful-git-branching-model/
1.  개발 브랜치(Develop)에서 작업 브랜치(feature)를
생성해서 기능을 구현하거나 수정
2.  작업 브랜치(feature)에서 코드를 모두 작성하면, 개발
브랜치(develop)에 merge
3.  1번과 2번을 반복하면서 배포할 수 있는 수준까지 개
발
4.  배포를 위한 릴리즈 브랜치(release)를 생성
5.  배포 작업이 끝나면 master 브랜치에 merge하고, 버
전 태그를 붙여서 배포
6.  배포하고 있는 소프트웨어에 버그가 있는 경우에는 해
당 버전을 기반으로 수정(hotfixes 브랜치)
-  master 브랜치는 항상 안정된 버전(배포 가능한 버전)
-  브랜치가 많아서 복잡할 수 있음
-  git-flow 툴을 설치하여 효율적으로 관리 가능
-  어떤 브랜치가 서로 상호작용 하는지 이해하고 있어야
함

03 Commit Message의 활용 (1)
커밋 메시지는 ‘잘’ 작성해야 합니다.
커밋 가이드라인
•  공백 문자를 깨끗이 제거한다.
•  최대한 수정 사항을 하나의 주제로 요약한다.
•  여러 가지 이슈에 대한 수정사항을 하나의 커밋에 담지 않는다.
•  적절한 메시지를 작성한다 : 반드시 좋은 커밋 메시지를 담는다.
•  같은 파일의 다른 부분을 수정하는 경우에는 git add -patch 명령을 이용한
다.
•  한 부분씩 나누어 Stage 영역에 저장한다.

커밋 메시지 양식
•  첫 줄에는 50자(영문, 한글 25자) 로 간략히 요약해서 작성한다.
•  두 번째 줄을 비우고 세 번째 줄에 자세하게 설명글을 작성한다.
(개발동기, 구현 상황, 제약조건/상황 등)
•  글은 현재형을 사용한다.
•  추가 내용은 한 줄 띄우고 시작한다.
•  커밋 메시지가 잘 쓰여진 프로젝트를 받아서 git log --no-merges 명령으로 살펴
본다.
Redirect user to the requested page aPer login

h'ps://trello.com/path/to/relevant/card

Users were being redirected to the home page aPer login, which is less
useful than redirec/ng to the page they had originally requested before
being redirected to the login form.

* Store requested path in a session variable
* Redirect to the stored loca/on aPer successfully logging in the user
커밋 메시지 영문 예시

GitHub의 커밋 메시지 활용
•  관련 이슈 링크
커밋 메시지에 #이슈번호 를 쓰면 해당 이슈 링크가 자동으로 생성
•  이슈 닫기(Close)
fix #이슈번호, fixes #이슈번호, fixed #이슈번호, close #이슈번호, resolve #이슈번호 등
Open 상태인 이슈는 커밋 메시지로 인해 자동으로 Close 됨
•  알림(Notification) 보내기
@사용자이름 또는 @조직이름을 쓰면 해당 사용자나 조직 멤버에게 알림 전송
@조직이름 팀이름을 쓰면 해당 팀에게 알림 전송

GitHub Integration
Where’s Waldocat - https://octodex.github.com/wheres-waldocat

01 TravisCI 지속적 통합(CI, Continuous Integration) 서비스

02 Coverall 테스트의 커버리지 측정 및 통계

03 Codeclimate 소스코드 정적 분석 서비스

더 볼 수 있는 곳들
Professortocat_v2 - https://octodex.github.com/Professortocat_v2

01 http://learngitbranching.js.org

03 https://www.codecademy.com/learn/learn-git

04 책과 사이트
•  생활코딩 Git 코스 - https://opentutorials.org/course/1492
•  Pro git(Web) - https://git-scm.com/book/ko/v2
•  Git 간편 안내서 - http://rogerdudler.github.io/git-guide/index.ko.html
•  A Visual Git Reference - http://marklodato.github.io/visual-git-guide/index-ko
Pro Git(종이책)
스캇 샤콘 저,
박창우,
이성환,
최용재 옮김
소셜 코딩으로 이끄는
GitHub 실천 기술
오오츠카 히로키 저,
윤인성 옮김

감사합니다!
Mountietocat - https://octodex.github.com/mountietocat
이준영 Junyoung Lee
http://nnoco.tistory.com
junyoung.plum@gmail.com
https://www.facebook.com/nnoco

폰트 정보
Courier
a옛날사진관1
a옛날사진관2
a옛날사진관3
a옛날사진관4
a옛날사진관5
Sandoll 격동굴림

HG꼬딕씨_Pro 00g
HG꼬딕씨_Pro 20g
HG꼬딕씨_Pro 40g
HG꼬딕씨_Pro 60g
HG꼬딕씨_Pro 80g
HG꼬딕씨_Pro 99g

Git 더하기 GitHub(Git클라이언트 활용) / Getting started with git+github

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Git 더하기 GitHub(Git클라이언트 활용) / Getting started with git+github

Ähnlich wie Git 더하기 GitHub(Git클라이언트 활용) / Getting started with git+github (20)

Git 더하기 GitHub(Git클라이언트 활용) / Getting started with git+github