생성한 각 브랜치에서 작업을 하다가 마무리하고 기존 브랜치와 합치는 것을 병합(Merge)라고 한다.

1.4.1 서로 다른 파일 병합하기

$ git merge <생성한 브랜치명> #master브랜치와 겹치지 않는 부분을 수정하고 병합하면 커밋 메세지 입력 후 자동으로 병합(automatic merge)이 되나 서로 같은 부분을 수정할 경우 충돌(Conflict)이 일어난다. 이럴 경우 수정 후 커밋해야 함.#

• 병합 시 충돌 예시 master 브랜치에서 수정한 부분과 같은 부분을 o2 브랜치에서 수정 후 병합한 경우이다. 자동 병합이 실패하였으니 수정하고 커밋해야 한다고 메세지가 나온다.

충돌 상황에서 vim으로 해당 파일을 열면 위와 같이 나온다. 하단 설명 참조

<<<<<<< HEAD
#이 부분은 master 브랜치에서 수정한 부분#
=======
#이 부분은 o2 브랜치에서 수정한 부분#
>>>>>>> o2

이 경우 서로 겹치는 부분을 하나의 수정사항으로 만들고 <<<<<<>>>>>>o2, =======은 삭제하고 저장 후 커밋하면 정상적으로 커밋된다.

1.1 브랜치란?

• 버젼 관리 시스템에서 브랜치란 나무가 가지에서 새 줄기를 뻗듯이 여러 갈래로 퍼지는 데이터 흐름을 가리키는 말이다.
• 브랜치가 필요한 이유: 원래 버젼을 보존한 상태에서 새로운 버젼을 추가해야 할 경우에 원래 버젼에 영향 없이 새로운 버젼을 만들고(분기) 새로운 버젼을 따로 버젼관리 및 추후 원본에 병합(Merge) 하기 위해 새로운 브랜치를 만든다.

1.2 브랜치 만들기- git branch

$ git branch <브랜치명> #새로운 브랜치 생성#

1.3 브랜치 정보 확인하기

$ git checkout <브랜치명> #해당 브랜치로 이동#

1.3.1 git log 옵션들

$ git log --oneline #한줄에 한 커밋만 보기#
$ git log --branches #각 브랜치의 커밋을 로그와 함께 보기#
$ git log --graph #브랜치와 커밋의 관계를 더 알아보기 쉽게 그래프 형태로 보기#
#셋이 붙여서 써도 됨.#

1.3.2 브랜치 사이의 차이점 알아보기

$ git log <기준 브랜치명>..<비교할 브랜치명>
#아래 예시#
$ git log master..apple #master 브랜치에는 없고 apple 브랜치에만 있는 커밋을 보여준다.#

• git log 뒤에 --stat을 붙이면 log화면에서 각각의 해당 커밋에 관련된 파일들까지 볼 수 있다.
• git checkout은 git switch와 git restore로 새버젼에서 대체되었다. 참조

  $ git switch <브랜치명> #해당 브랜치로 변경#
  $ git restore <파일명> #워킹 트리의 해당 파일을 복원(수정하기 전으로)#
  $ git restore --staged <파일명> #이미 스테이징한 변경사항을 되돌리기#

• 최신 커밋을 되돌리려면 git reset 명령 다음에 HEAD^(현재 HEAD가 가리키는 브랜치의 최신 커밋)를 붙인다. 이렇게 되면 커밋도 취소되고 스테이지에서도 내려져, 취소한 파일이 작업 트리에만 남는다.

  $ git reset HEAD^ #가장 최근에 커밋한 내용 다시 되돌리기#

• git reset 명령의 옵션 살펴보기 ~bash
• -soft HEAD^ #최근 커밋을 하기 전 상태로 작업 트리를 되돌리기#
• -mixed HEAD^ #최근 커밋과 스테이징을 하기 전 상태로 작업 트리를 되돌리기/ 옵션 없이 git reset 명령을 사용할 경우 이 옵션이 기본값#
• -hard HEAD^ #최근 커밋과 스테이징, 파일 수정을 하기 전 상태로 작업 트리를 되돌리기/ 되돌린 내용 복구불가# ~
• git reset은 선택한 커밋 해시 이후의 커밋들이 전부 삭제되므로, 커밋을 삭제하지 않고 변경사항을 되돌릴 경우 git revert를 사용한다.

  git revert <커밋 해시> #되돌릴 커밋 해시값을 붙여넣기 한다.#

• 스테이징한 내용을 취소하고 싶은 경우에는 (구버젼)git reset HEAD <파일명> 또는 (최신)git restore --staged <파일명> 입력./ git reset HEAD 뒤에 파일명 미입력시 스테이징한 모든 파일을 되돌린다.

  #둘 다 같은 기능: 해당 파일 스테이징 취소#
  #git reset HEAD <파일명>은 스테이징 되돌리기/ git reset HEAD^는 커밋 되돌리기 이므로 헷갈리지 말기!#
  $ git reset HEAD <파일명>
  $ git restore --staged <파일명>

• 깃이 다른 저장소들과 차별화되는 점은 파일을 수정할 때마다 다른 이름으로 일일히 새로 저장하는 대신, 동일한 파일명으로 모든 수정사항 및 만든 시간을 기록하고 과거 어떤 시점이든 다시 되돌아갈수 있고 새로운 브랜치로 원본에 영향이 가지 않는 다른 버젼을 만들수 있다는 점이다. (깃에서 버젼이란 문서를 수정하고 저장할 때마다 생기는 것)

• .git은 숨겨진 디렉터리이며, 스테이지와 저장소 등 버젼 관리 정보가 담겨있다. 따라서 지울 경우 마지막 저장된 소스코드를 제외한 과거의 버젼 이력들이 날아간다.

• untracked files: 아직 한번도 버젼관리를 하지 않은 파일

• 작업 트리(working tree, working directory): 파일 수정, 저장 등의 작업을 하는 디렉터리

• 스테이지(stage, staging): 버젼으로 만들 파일이 대기하는 곳.

• 저장소: 스테이지에서 대기하고 있던 파일들을 버젼으로 만들어 저장하는 곳

• 원격 저장소와 연결하지 않고 파일을 만들고 git add로 스테이징 후 git commit으로 커밋 할 경우 로컬 저장소(내 컴퓨터)에만 저장됨. 원격 저장소에 올리고 싶은 경우

  $git remote add <name> <url>
  $git push <name>

  해주어야 원격 저장소와 연동됨. 다음 글들에서 다시 설명 예정!

• .gitignore 파일을 생성하여 버젼관리에서 제외할 파일, 디렉터리, 확장자를 지정할수 있다.

$ git init #깃 초기화 : 깃을 사용할 수 있도록 디렉터리를 초기화(initialize)/ 뒤에 디렉터리명을 붙여 입력할 경우 해당 디렉터리를 생성함과 동시에 깃을 사용가능한 상태로 만듬#
$ git add #새로 만들거나 수정한 파일을 스테이징하기#
$ git commit -am #한번이라도 커밋한 적이 있는 파일에 대해서 스테이징과 커밋 메세지(1줄짜리)를 한번에 처리.#
$ git commit --amend #방금 커밋 위에 덮어쓰기(커밋 메세지 수정 용도로 사용시 옵션없이 사용한다.)#

• git diff 는 저장소에 있는 최신 버젼의 파일과 작업 트리 안에서 수정하고 아직 스테이징 하지 않은 파일의 차이점을 보고자 할 때 사용한다.

$ git config --global user.name "깃허브 닉네임"
$ git config --global user.email "메일주소"

깃 설치 후 내 깃허브 계정을 연동시키기 위해 이름과 메일주소를 입력한다.

$ cd~

홈 디렉터리로 이동

$ cd ..

부모 디렉터리로 이동

$ cd kim

kim 디렉터리로 이동(해당 디렉터리의 부모 디렉터리에 있을 때에만 가능)

$ pwd

현재 경로 나타내기

$ mkdir

디렉터리 생성

$ ls

디렉터리 내용 보기

$ ls -l

옵션을 사용해 디렉터리의 폴더 상세정보까지 보기

$ ls -a

옵션을 사용해 디렉터리의 숨김 파일과 디렉터리까지 보기

vim test.txt

vim에디터를 사용해 test.txt 파일을 작성

rm -r kim

kim 디렉터리와 kim 디렉터리 안의 하위 디렉터리, 파일까지 전부 삭제(-r 옵션사용)

exit

터미널 창 종료

cat kims.txt

kims.txt 파일의 내용을 터미널창에 보이기

<!--vim에디터 명령어-->
:e 파일명.txt <!-- 불러오기-->
:w <!--저장-->
:q <!--종료-->
:wq <!--저장하고 종료/ 파일명 입력시 해당 이름으로 저장-->
:q! <!--저장하지 않고 종료하기/ .swp 확장자의 임시파일이 생성됨.-->

vim 에디터는 ex 모드와 입력 모드 두가지의 모드가 있다. 최초 vim 실행시 에디터는 ex모드로 실행되어 텍스트 입력이 되지 않으므로 i(insert) 또는 a(add) 버튼을 눌러 입력 모드로 들어가 입력을 한 후, esc를 눌러 다시 ex모드로 나와서 저장 또는 종료를 한다.

• dash-case(kebab-case)
• snake_case
• camelCase
• ParcelCase

1.1 dash-case(kebab-case)

띄어쓰기를 -로 나타냄.

컴퓨터는 form부터 function까지 하나의 단어로 인식하지만 우리는 각각 단어별로 띄어서 인식. html과 css에서 주로 단어를 표기하는 방법으로 사용된다.

1.2 snake_case

띄어쓰기를_언더바로_나타냄. html과 css에서 주로 사용.

1.3 camelCase

theQuickBrownFoxJumpsOverTheLazyDog 첫 글자는 소문자로, 나머지 단어는 대문자로 시작하며 이 모양새가 낙타의 혹처럼 보인다고 하여 카멜 케이스라 불림. 우리가 알고있는 단어들을 조합해서 하나로 컴퓨터에게 인식시키고자 할 때 사용한다. dash-case, snake_case, camelCase, PascalCase 모두 자바스크립트에서 사용 가능 하지만 거의 대부분 camelCase를 주로 사용한다.

1.4 PascalCase

TheQuickBrownFoxJumpsOverTheLazyDog 첫 글자부터 단어를 대문자로 시작한다. 생성자 함수 사용시 PascalCase를 통해 함수의 이름을 명시한다.

1.5 Zero-based Numbering

다른 개발 언어들처럼 자바스크립트도 특수한 몇가지 경우를 제외하면 0부터 숫자를 시작한다.

let fruits = ['Orange', 'Strawberry', 'Apple']
console.log(fruits[0]); // 'Orange'
console.log(fruits[1]); // 'Strawberry'
console.log(fruits[2]); // 'Apple'

Orange는 첫번째가 아니라 0번째 이다.

1.6 주석(Comments)

html, css와 다르게 주석처리의 종류가 여러가지이다.

//한줄짜리 주석 처리 첫번째 방법
/*한줄짜리 주석 처리 두번째 방법*/

/**
여러 줄의 주석
처리 방법은
이렇게.
*/

2. 자료형(Data Type)

• String
• Number
• Boolean
• Undefined
• Null
• Object
• Array

2.1 String(문자열)

// String(문자열)
// 큰따옴표나 작은따옴표 사용.
// let 변수명 = '문자열'; 형식으로 변수를 선언한다.
let myName = "RYANKIM";
let email = 'blabla@gmail.com';
let hello = `Hello ${myName}?!`
//`(백틱) 기호를 사용하여 보간법으로 ${myName} 즉 myname 변수의 값인 RYANKIM 도 끼워넣음.

console.log(myName); // RYANKIM
console.log(email); // blabla@gmail.com
console.log(hello); // Hello RYANKIM?!

2.2 Number(숫자 데이터)

//Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타낸다.
// 변수에 할당한 값이 숫자이더라도 따옴표로 감싸게 되면 넘버 타입이 아닌 스트링 타입으로 문자로 인식됨!
let number = 365;
let opacity = 3.54;

console.log(number); // 365
console.log(opacity); // 3.54

2.3 Boolean(불린 데이터)

// Boolean(불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터이다.
let checked = true;
let isShow = false;

console.log(checked); // true
console.log(isShow); // false

2.4 Undefined

// Undefined
// 값이 할당되지 않은 상태를 나타낸다.

let undef; // 변수에 값을 할당하지 않은 상태를 자바스크립트에서는 undefined라는 하나의 데이터 타입으로 인식한다.
let obj = { abc: 123 }; // 변수 obj에 객체 데이터(object)를 할당함.

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

2.5 Null

// Null
/** 어떤 값이 '의도적으로' 비어있음을 의미한다. Undefined랑 헷갈리지 말기!
undefined와 null 둘다 비어있음은 동일하나 undefined는 의도적으로 비운게 아님.
let empty = null; // let 변수명 = null; 으로 명시적으로 값이 비어있는 상태(null)임을 선언함.

console.log(empty); // null

2.6 Object(객체 데이터)

// Object(객체 데이터)
// 여러 데이터를 Key: Value 형태로 저장한다. {}
let user = {
  // Key: Value
  name: "KIM",
  age: 88,
  isValid: true
};

console.log(user.name); // KIM
console.log(user.age); // 85
console.log(user.isValid); // true

2.7 Array(배열 데이터)

// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장한다.

let fruits = ['apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

3. 변수

데이터를 저장하고 참조(사용)하는 데이터의 이름이며 var, let, const 를 사용하여 변수를 선언하는데 최근에는 var를 가급적 사용하지 않는것을 권장. let으로 선언시 재사용 가능 let 사용시 재할당 가능, const(상수: 변하지 않는 값) 사용시 재할당 불가능 변수를 만들때 값이 계속 바뀔 수 있는 상태로 두기 보다는 재할당이 불가능한 const 키워드로 사용하고 재할당이 필요한 경우에만 let 키워드를 사용하는게 좋다.

3.1 예약어

특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 단어를 말한다. (ex: this, if, break 등등..)

1. 한줄을 무조건 차지하는 길막하는 성질
2. width, height, padding, border, margin 다 적용 가능
3. 따로 width를 선언하지 않은 경우 width = 부모의 content - box의 100% / 따로 width를 선언한 경우 남은 공간은 margin으로 채움.
4. 따로 부모의 height를 선언하지 않을 경우 자식 요소의 height의 합 = 부모의 height

inline (흐름)

1. block(면 - 영역) vs inline(선 - 흐름)
2. 텍스트처럼 영역이 모자라면 자동으로 줄바꿈
3. width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용불가 = padding, border, margin 좌,우는 적용가능

inline-block

1. block처럼 영역을 잡을수 있으면서도 inline처럼 흐름 안에 있다.
2. width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용가능

1. 이곳에서 하단 코드를 프로젝트의 태그 내에 삽입한다.

   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. 구글 폰트에서 원하는 아이콘을 선택하면 나오는 메뉴에서 class명이 "material-icons" 인 span 태그를 내 프로젝트에 삽입한다.

3. 해당 아이콘 크기를 키우려면 css에서 width나 height 가 아니라 font-size를 조정한다.