키와 속성들을 담고 있는 참조 타입의 객체(object)

• 순서 보장
• 0을 포함한 양의 정수 인덱스로 특정 값에 접근
• 배열의 길이는 array.length로 접근

1. 기본 배열 조작 Method

2. Array Helper Methods

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
  • callback 함수: 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수

• array.forEach(callback(element[, index[, array]]))

  • break, continue 사용 불가능

const students = ['Tim', 'Harry', 'Jackson', 'carol']

students.forEach((name, index) => {
  console.log(name, index)
})

• array.map(callback(element[, index[, array]]))

• array.filter(callback(element[, index[, array]]))

const nums = [1, 2, 3, 4, 5]

const doulbleNums = nums.map((num) => {
  return num * 2
})

const oddNums = nums.filter((num) => {
  return num % 2
})

console.log(doulbleNums) // 👉 [2, 4, 6, 8, 10]
console.log(oddNums) // 👉 [1, 3, 5]

• array.reduce(callback(acc, element, [index[, array]])[, initialValue])

  • acc : 이전 callback 함수의 반환 값이 누적되는 변수
  • initialValue : callback 함수 최초 호출 시, acc에 할당되는 값
    • 설정하지 않으면 배열의 첫 번째 값으로 사용

const nums = [1, 2, 3, 4, 5]

const sumOfNums = nums.reduce((acc, num) => {
  return acc + num
}, 0)

console.log(sumOfNums) // 👉 15

• array.find(callback(element[, index[, array]]))

  • 찾는 값이 배열에 없으면 undefined 반환

const students = [
  { name: 'Tim', score: 87}, 
  { name: 'Harry', score: 92},
  { name: 'Jackson', score: 76},
  { name: 'Carol', score: 100},
]

const result = students.find((student) => {
  return student.score == 100
})

console.log(result) // 👉 { name: 'Carol', score: 100}

• array.some(callback(element[, index[, array]]))

  • 빈 배열은 항상 false

• array.every(callback(element[, index[, array]]))

  • 빈 배열은 항상 true

const nums = [1, 2, 3, 4, 5]

const hasOddNum = nums.some((num) => {
  return num % 2
})

const isEveryNumsOdd = nums.every((num) => {
  return num % 2
})

3. 배열 순회 방식

const animals = ['Cat', 'Dog', 'Lion', 'Tiger', 'Snake', 'Bird']

// 1. for loop
for (let i = 0; i < animals.length; i++) {
    console.log(i, animals[i])
}

// 2. for - of
for (animal of animals) {
    console.log(animal)
}

// 3. forEach
animals.forEach((animal, index) => {
    console.log(index, animal)
})

2. Objects

속성의 집합으로, 중괄호 내부에 key-value 쌍으로 표현

• key는 문자열 타입 (구분자가 있을 경우 따옴표로 묶어서 표현)
• value는 모든 타입

1. 객체 생성 및 조작 문법

1. 속성명 축약

   • 객체 정의 시, key와 할당하는 변수 이름이 같으면 축약 가능

let fruits = ['apple', 'orange', 'banana', 'lemon']
let vagetables = ['mushroom']

const market = {
  fruits,
  vegetables,
}

2. 메서드명 축약

   • 메서드 선언시 function 키워드 생략 가능

const greeting = {
  hello() {
    console.log('Hello!')
  }
}

3. 계산된 속성 사용

   • 객체 정의 시 key 이름을 표현식을 통해 동적으로 생성 가능

const firstCat = 'pepper'
const secondCat = 'kanda'
const myCats = {
  [firstCat]: 5,    
  [secondCat.toUpperCase()]: 3,
}
console.log(myCats) // 👉 {pepper: 5, KANDA: 3}

4. 구조 분해 할당

   • 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

     • key와 변수 명이 같을 경우 사용 가능

const info = {
  name: 'Pepper',
  age: 5,
  color: 'Grey'
}
const { name } = info
const { age, color } = info

3. JSON

• JavaScript Object Notation
• key-value 쌍 형태의 데이터를 표기하는 언어 독립적 표준 포맷
• 자바스크립트 객체(objects)와 유사하게 생겼으나, 실제로는 문자열 타입

  • JSON을 조작하기 위한 두 가지 내장 메서드
    • JSON.parse() 👉 JSON > 자바스크립트 객체
    • JSON.stringify() 👉 자바스크입트 객체 > JSON

• 자바스크립트 함수는 일급 객체(First-class citizens)로,
  • 변수에 할당이 가능하며
  • 함수의 매개변수로 전달할 수 있고
  • 함수의 반환 값으로 사용이 가능합니다.

1. 함수 선언식

• 함수의 이름과 함께 정의하는 방식
  • 익명 함수 불가능, 호이스팅 O

function name (args) {
  // do something 
}

2. 함수 표현식

• 힘수를 표현식 내에서 정의하는 방식
  • 함수 이름을 생략하고 익명 함수로 정의 가능, 호이스팅 X
  • Airbnb Style Guide 권장 방식

const myFunction = function (args) {
  // do something
}

cf. 함수 선언식 vs 함수 표현식

1. 호이스팅

   // 1. 함수 선언식 👉 호이스팅 O
   

plus(2, 5) // → 7

function plus (num1, num2) { return num1 + num2 }

// 2. 함수 표현식 👉 호이스팅 X minus(5, 2) // → Uncaught ReferenceError

const minus = function (num1, num2) { return num1 - num2 }

## 3. 화살표 함수 (Arrow Function)

- 함수를 비교적 간결하게 정의할 수 있는 문법

  1. function 키워드 생략 가능

  2. 함수의 **매개변수가 하나** 뿐이면 `()`도 생략 가능
  3. 함수 바디에 표현식 하나라면 `{}`과 `return` 생략 가능

```javascript
// 0. 함수 표현식
const greeting = function (name) {
  return `hello, ${name}`
}

// 1. function 생략
const greeting = (name) => { return `hello, ${name}` }

// 2. () 생략
const greeting = name => { return `hello, ${name}` }

// 3. {} & return 생략
const greeting = name => `hello, ${name}`

1. if statement

• 조건 표현식의 결과값을 Boolean 타입으로 변환 후 참/거짓 판단

  if (condition) {
      // do something
  } else if (condition) {
      // do something
  } else {
      // do something
  }

2. switch statement

• 조건 표현식의 결과 값이 어느 값(case)에 해당하는지 판별

  • 주로 특정 변수의 값에 따라 조건을 분기할 때 활용
    • 조건이 많아질 경우, if문보다 가독성이 나을 수 있음

  switch(expression) {
      case 'first value': {
        // do something
        break
      }
      case 'second value': {
        // do something
        break
      }
      default : {
        // do something
      }
  }

  • break, default 문은 선택적으로 사용 가능
    • break문이 없는 경우, break문을 만나거나 default문을 실행할 때까지 다음 조건문 실행

cf. if vs switch

const numOne = 100
const numTwo = 7
let operator = '+'

// 1. if statement
if (operator == '+') {
  console.log(numOne + numTwo)
} else if (operator == '-') {
  console.log(numOne - numTwo)
} else if (operator == '*') {
  console.log(numOne * numTwo)
} else if (operator == '/') {
  console.log(numOne / numTwo)
} else {
  console.log('올바른 연산자를 입력해주세요.')
}

// 2. switch statement
switch(operator) {
  case '+': {
    console.log(numOne + numTwo)
    break
  }
  case '-': {
    console.log(numOne - numTwo)
    break
  }
  case '*': {
    console.log(numOne * numTwo)
    break
  }
  case '/': {
    console.log(numOne / numTwo)
    break
  }
  default: {
    console.log('올바른 연산자를 입력해주세요.')
  }
}

2. Loops

1. while

• 조건문이 참인 동안 반복 시행

  let num = 0
  
  while (num < 10) {
    console.log(num)
    num += 1
  }

2. for

• 세미콜론 ; 으로 구분되는 세 부분으로 구성

  • initialization : 최초 반복문 진입 시 1회만 실행

  • condition : 매 반복 시행 전 평가되는 부분

  • expression : 매 반복 시행 이후 평가되는 부분

    for (initialization; condition; expression) {
      // do something
    }

  for (let num = 0; num < 10; num++) {
    console.log(num)
  }

3. for - in

• 객체(object)의 속성들을 순회할 때 사용

  • 배열 순회도 가능하나 권장하지 않음

  const animals = {
      Pepper: 'tiger',
      Kanda: 'cat',
      Tony: 'dog'
  }
  
  for (let animal in animals) {
      console.log(animal)
  }

4. for - of

• 반복 가능한(iterable) 객체를 순회하며 값을 꺼낼 때 사용

  const animals = ['Pepper', 'Kanda', 'Tony']
  
  for (let animal of animals) {
      console.log(animal)
  }

• 자바스크립트의 모든 값은 특정한 데이터 타입을 가지는데, 크게 원시 타입(Primitive type)과 참조 타입(Reference type)으로 분류됩니다.

1. 원시 타입

   • Number, String, Boolean, undefined, null, Symbol
   2. 참조 타입 👉 Objects
      • 객체(Objects) 타입의 자료형
        • 변수에 해당 객체의 참조 값이 담기고, 참조 값을 복사
      • Array, Function, Object, ...

1. Primitive Type

• 객체(Objects)가 아닌 기본 타입
• 변수에 해당 타입의 값이 담기고, 실제 값을 복사

1. Number

• 정수, 실수 구분이 없는 하나의 숫자 타입
  • 부동소수점 형식
  • cf. NaN(Not-A-Number)
    • 계산 불가능한 경우 반환되는 값

2. String

• 텍스트 데이터를 나타내는 타입
  • 16비트 유니코드 문자의 집합
• 템플릿 리터럴 (Template Literal)
  • backtick(`) 으로 표현
  • `${ expression } 형태로 표현식 삽입

const name = 'Pepper'
const age = 5
const introduce = `${name} is ${age} years old.`

3. undefined & null

4. Boolean

• 논리적 참/거짓을 나타내는 타입

  • true/false로 표현

• 조건문 또는 반복문에서 유용하게 사용

  • cf. 자동 형변환 규칙

    Data Type	true	false
    undefined	-	항상 거짓
    null	-	항상 거짓
    Number	나머지 경우	0, -0, NaN
    String	나머지 경우	빈 문자열
    Object	항상 참	-

2. 연산자

1. 할당 연산자

• 다양한 연산에 대한 단축 연산자 지원

  // 1. 기본 할당
  let x = 0
  

// 2. 사칙연산 x += 1 x -= 2 x *= 3 x /= 4

// 3. Increment & Decrement 연산자 x++ // += 1 과 동일 x-- // -= 1 과 동일

```

2. 비교 연산자

• 피연산자(숫자, 문자, Boolean 등)를 비교하고 비교의 결과값을 Boolean으로 반환하는 연산자
• 문자열은 유니코드 값을 사용하며 표준 사전순서를 기반으로 비교
  • 알파벳끼리 비교할 경우
    • 알파벳 오름차순으로 우선순위를 지님
    • 소문자가 대문자보다 우선순위를 지님

3. 동등 비교 연산자 (==)

• 두 피연산자가 같은 값으로 평가되는지 비교 후 Boolean 값 반환
  • 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
    • 예상치 못한 결과가 발생할 수 있으므로 특별한 경우를 제외하고 사용하지 않음
  • 두 피연산자가 모두 객체일 경우, 메모리의 같은 객체를 바라보는지 판별

4. 일치 비교 연산자 (===)

• 두 피연산자가 ① 같은 타입인지 확인하고 ② 같은 값으로 평가되는지 비교 후 Boolean 값 반환
  • 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
  • 두 피연산자가 모두 객체일 경우, 메모리의 같은 객체를 바라보는지 판별

5. 논리 연산자

• 세 가지 논리 연산자로 구성
  • and 연산은 && 연산자
  • or 연산은 || 연산자
  • not 연산은 ! 연산자

6. 삼항 연산자

• 세 개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

  • condition ? optionA : optionB

    • 조건식이 참이면 A 값을, 거짓이면 B 값을 사용

  • 삼항 연산자의 결과는 변수에 할당 가능

  • 한 줄에 표기하는 것을 권장

    console.log(true ? 1 : 2) // → 1
    console.log(false ? 1 : 2) // → 2

• 변수를 구분할 수 있는 변수명
• 반드시 문자, $, _로 시작해야 하며, 클래스명 외에는 모두 소문자로 시작

🚩 식별자 작성 스타일

1. 카멜 케이스(camelCase, lower-camel-case)

   • 변수, 객체, 함수에 사용

     // [example]
     let variableName
     const userInfo = { name: 'pepper', age: 5 }
     function getUserName () {}

2. 파스칼 케이스(PascalCase, upper-camel-case)

   • 클래스, 생성자에 사용

     // [example]
     class User {
       constructor(options) {
         this.name = options.name
       }
     }
     const person = new user({
       name: 'Pepper'
     })

3. 대문자 스네이크 케이스(SNAKE_CASE)

   • 상수(개발자의 의도와 상관없이 변경될 가능성이 없는 값)에 사용

     // [example]
     const API_KEY = 'adslhalf-wrljr21'
     const PI = Math.PI

2. 변수 선언

• JavaScript에서 변수를 선언하는 키워드는 크게 3가지로 볼 수 있습니다. ES6에서는 const와 let 예약어로 변수를 선언합니다.

  키워드	재선언	재할당	스코프	etc.
  let	X	O	블록	ES6 도입
  const	X	X	블록	ES6 도입
  var	O	O	함수	-

1. 기본 개념

1. 선언(Declaration)
   • 변수를 생성하는 행위 또는 시점
2. 할당(Assignment)
   • 선언된 변수에 값을 저장하는 행위 또는 시점
3. 초기화(Intialization)
   • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

2. 변수 선언 키워드

1. let

• let 예약어는 재할당이 가능하지만, 재선언은 불가능합니다.

  // 재할당 가능
  let number = 1
  number = 2
  console.log(number) // → 2
  

// 재선언 불가능 (SyntaxError) let number = 3 // → Uncaught SyntaxError: Identifier 'number' has already been declared

2. `const`
- `let` 예약어는 재할당과 재선언 모두 불가능합니다.
```javascript
const number = 1
number = 2 // → Uncaught TypeError: Assignment to constant variable.

• 단, Object({})나 Array([]) 선언 시, 객체의 속성과 배열의 요소는 변경할 수 있습니다.

  // 1) 객체의 속성 변경
  const user = {
  name: 'Pepper',
  age: 5
  }
  console.log(user.age) // → 5
  

user.age = 6 console.log(user.age) // → 6

// 2) 배열 요소 추가 const animals = ['cat'] animals.push('dog') console.log(animals) // → ['cat', 'dog']

3. `var`
- ES5의 `var` 예약어는 재할당, 재선언 모두 가능합니다.
- `const`, `let`과의 가장 큰 차이점은 유효범위입니다.
  - `var`의 유효 범위는 함수의 블록 단위로 제한되며, `const`와 `let`은 블록(`{}`) 단위로 제한됩니다. 
```javascript
// 블록 스코프: let, const
let name = 'Pepper'
if (name === 'Pepper') {
  let name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Pepper

const name = 'Pepper'
if (name === 'Pepper') {
  const name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Pepper

// 함수 스코프: var
var name = 'Pepper'
if (name === 'Pepper') {
  var name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Kanda

• var의 경우, 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능합니다.
  • 호이스팅은, 변수를 선언 이전에 참조할 수 있는 현상으로 선언 이전의 위치에서 접근 시 undefined 반환합니다.

// let, const의 경우, 변수 선언 이전 접근 시 에러가 발생
console.log(age) // Uncaught ReferenceError: age is not defined
let age = 5

// var의 경우, 호이스팅 현상 발생
console.log(name) // undefined
var name = 'Pepper'

// 선언 이전에 접근하면, 아래와 같은 방식으로 인식
var name // → 선언문이 위로 끌어올려지는 것!
console.log(name) // undefined
name = 'Pepper'

영화 포스터 이미지에 마우스 오버를 했을 때, 영화 정보를 표시할 수 있는 hover 기능을 사용해보겠습니다. Demo

HTML 파일 작성

• img 태그에 포스터 이미지 경로를 입력하고
• 마우스 오버시, 표시할 내용을 inner-content class 안에 작성합니다.

  <div class="card">
  <img
    src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/5AFKp85Bka4mQeaeVNs3evyMYYE.jpg" 
  alt="포스터 이미지"
  >
  <div class="inner-content">
    <span class="title">라이프 오브 파이</span>
    <hr>
    <span class="overview">
      인도에서 동물원을 운영하던 ‘파이’의 가족들은 정부의 지원이 끊기자 캐나다로 이민을 준비한다.
      동물들을 싣고 캐나다로 떠나는 배에 탑승한 가족들.
    </span>
  </div>
  </div>

CSS 효과 넣기

.card {
  position: relative;
  background: linear-gradient(180deg, #441DB2 0%, #0d0425 100%);
  width: 13rem;
  overflow: hidden;
  box-shadow: 15px 15px 25px black;
}
.card img {
  width: 100%;
  height: auto;
  /* 포스터 크기 조정을 위해 scale 조정 */
  transform: scale(1.1);
  transition: all 0.25s linear;
}
.card:hover img {
  opacity: 0.2;
  transform: scale(1.25);
}
.card .inner-content {
  width: 80%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 80%;
  left: 50%;
  transition: all 600ms ease;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card:hover .inner-content {
  opacity: 1;
  top: 50%;
}
.card .inner-content .title {
  font-size: 1.2rem;
  font-weight: 700;
}
.card .inner-content .overview {
  font-size: 0.9rem;
  font-weight: 300;
}
.card .inner-content hr {
  border-top: 1px solid #f1f1f1;
  width: 100%;
}

GitHub Pages를 통한 정적 페이지 호스팅에서, 수동으로 진행하던 빌드와 배포를 자동화할 수 있습니다. 워크플로우를 구성하여 GitHub Actions를 통해 commit & push만으로 배포할 수 있는 환경을 만들어보겠습니다.

1. 기본 세팅

1. GitHub Repository 생성

2. 패키지 매니저 설치

• 대표적으로 npm과 yarn이 있는데, 여기서는 npm을 기준으로 사용법을 정리해보겠습니다. 같은 방식으로 진행하며 npm 대신 yarn을 적용할 수 있습니다.

3. Vue CLI 프로젝트 생성

• 배포할 Vue 프로젝트를 생성합니다.

  • 이번에는 프로젝트 생성 시, Default 설정이 아닌 직접 필요한 항목을 선택하는 방식을 사용해보겠습니다. ① Manually select features를 선택합니다. ② 본인 프로젝트에 필요한 feature를 선택하면 됩니다. 자동 배포 과정에 Test 단계를 추가할 예정이기 때문에, Unit Testing를 추가로 선택해보겠습니다. ③ 나머지 옵션도 아래와 같이 선택하여 프로젝트를 생성합니다.

• 프로젝트 생성이 끝나면, 프로젝트 디렉토리로 이동하여 npm run serve 혹은 yarn serve를 통해 Vue 페이지가 제대로 생성되었는지 확인합니다.

4. 리모트 저장소 연결

• 프로젝트와 생성한 Git Repository를 연결해 기본 Vue 프로젝트를 push합니다.

2. 배포 관련 설정

1. gh-pages 추가

• 자동 배포를 통해 배포된 페이지의 소스 코드를 gh-pages를 통해 관리할 수 있도록 관련 라이브러리를 추가합니다.

  npm install gh-pages --save-dev

2. package.json에 배포 관련 명령어 추가

• npm의 패키지 관리 파일인 package.json에서 scripts라는 속성을 통해 사용자가 임의로 명령어의 이름과 동작을 정의해 사용할 수 있습니다.

  사용해야 하는 명령어가 길거나 반복적으로 사용해야 하는 경우, 아래와 같이 커스텀 명령어를 설정해 원하는 동작을 실행할 수 있습니다.

  // package.json
  {
    ...
    "scripts": {
        // npm run hello를 실행하면, 콘솔에 world가 출력됩니다
        "hello": "echo world"
    }
  }

• 프로젝트 루트 디렉토리에 위치한 package.json을 열어 필요한 정보를 추가합니다.

  {
  "name": "vue-devops",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
    // 아래 부분을 추가합니다.
    "predeploy": "vue-cli-service build",
    "deploy": "gh-pages -d dist",
    "clean": "gh-pages-clean"
  },
  ...
  }

3. vue.config.js 설정

• Vue 프로젝트의 루트 directory에 vue.config.js를 생성해 기본 설정 값을 넣어줍니다.
• publicPath는 배포된 페이지의 URL 설정입니다.
  • GitHub Pages를 통한 기본 배포 URL은 https://<username>.github.io/<repository name>/ 형태입니다.
    • outputDir은 기본 값인 dist를 사용합니다.

      module.exports = {
      publicPath: '/<repository name>/',
      outputDir: 'dist' 
      }

    • [참고자료] Vue CLI Configuration Reference

[중간 점검] 지금까지 작업이 잘 되었는지 확인해보겠습니다.

• 터미널에 npm run deploy 명령을 입력하면 아래의 과정이 실행됩니다.
  • Vue 프로젝트가 빌드되고 결과물에 dist에 저장됩니다.
  • 연결된 리모트 저장소에 gh-pages 브랜치로 빌드된 정적 파일이 push 됩니다.
• Git Repository로 이동해 Vue 프로젝트가 잘 배포되었는지 확인해봅니다.

3. GitHub Actions 활용

GitHub Actions는 GitHub의 SW 개발 workflow에서 작업을 자동화하기 위한 패키지 스크립트입니다.

• 새로운 소스 코드 Push 혹은 PR 이벤트 등에 반응하여 트리거하도록 구성할 수 있으며, 이를 통해 빠르고 안정적인 배포 및 운영이 가능한 DevOps 환경을 구축할 수 있습니다.
• Github Action Core 개념을 살펴보겠습니다.

1. Workflow

   • 여러 Job으로 구성되고 Event에 의해 트리거될 수 있는 자동화된 프로세스입니다.
     • Workflow 파일은 YAML로 작성하며, 해당 Github Repo 내 .github/workflows 폴더에 저장됩니다.

2. Event

   • Workflow를 트리거하는 특정 활동이나 규칙으로,
     • 특정 브랜치로 Push, PR 등의 상황에 사용할 수 있습니다.

       # Workflow가 실행되어야 하는 이벤트를 지정합니다.
       on:
         # 1. master 브랜치로 push될 경우
         push:
           branches: [ master ]
         # 2. master 브랜치로 PR가 발생할 경우
         pull_request:
           branches: [ master ]

3. Job

   • Job은 여러 개의 Step으로 구성되며, 가상 환경의 인스턴스에서 실행됩니다.
     • 다른 Job에 의존 관계를 가지거나 독립적으로 병렬 실행도 가능합니다.

4. Step

   • Task들의 집합으로 action을 실행합니다.

5. Action

   • Workflow의 가장 작은 블럭으로,
     • 개인적으로 만든 Action을 사용하거나 Github Marketplace를 통해 공용 Action을 사용할 수 있습니다.
   • uses는 각 step에 사용할 액션을 지정
   • run은 시스템의 shell에 명령어를 실행

6. workflow 파일 생성 ① GitHub Repository의 Actions 탭에 들어가 workflow 설정을 클릭합니다. ② 기본적으로 제공되는 workflow 파일의 이름을 확인하고 (목적에 맞게 수정한 뒤) commit을 남깁니다.

7. workflow 파일 작성 ① 로컬 Directory에서 workflow 파일을 pull 받습니다. ② main 브랜치에 push/PR 이벤트가 발생했을 때, 수행할 작업을 작성해보겠습니다.

   jobs:
   # job의 이름 설정
   deploy:
      # 해당 job을 실행하는 운영 체제
    runs-on: ubuntu-latest
   
    # 수행할 동작 정의
    steps:
      # 1. 저장소 체크아웃
      - name: Checkout source code
        uses: actions/checkout@main
   
      # 2. node.js 환경설정
      - name: Set up Node.js
        uses: actions/setup-node@main
        with:
          node-version: 14.x
   
      # 3. 패키지 설치
      - name: Install dependencies
        run: npm install
   
      # 4. 테스트
      - name: Test unit
        run: npm run test:unit
   
      # 5. 빌드
      - name: Build Page
        run: npm run build
        env:
          NODE_ENV: production
   
      # 6. gh-pages로 배포
      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

   • [참고] 활용한 공용 Action
     • checkout
     • setup-node
     • actions-gh-pages

[최종 확인] Commit-push 만으로 자동 배포가 잘 동작하는지 확인해봅시다!

1. 간단한 확인을 위해 기본 Vue 프로젝트의 Home.vue 문구를 수정해보겠습니다.
2. 프로젝트를 commit-push하면 Actions를 통해 workflow가 진행됩니다.
3. workflow가 완료되면 GitHub Pages에 배포된 페이지를 확인할 수 있는데, 아래와 같이 수정한 부분이 반영된 모습을 볼 수 있습니다.

이제 Vue 프로젝트를 Git Repository에 commit-push 만으로 배포할 수 있게 되었습니다! 😁

Vue CLI를 통해 생성한 프로젝트를 Github Pages로 배포하는 방법은 여러 가지가 있습니다. 그 중 docs 폴더를 활용한 수동 배포 방법을 정리해봅시다!

1. 기본 세팅

1. GitHub Repository 생성

• GitHub Pages는 정적 페이지를 호스팅합니다. 이때, 정적 파일을 저장할 리모트 저장소가 필요하며, 새 Repository를 생성하고 목적에 맞게 이름을 설정합니다.

2. Vue CLI 프로젝트 생성

• 배포할 Vue 프로젝트를 생성합니다.
• GitHub에 생성한 Repository와 로컬 상의 프로젝트의 연결이 필요합니다.
  • 연결 방법은 ① 로컬에서 프로젝트를 생성해 git remote를 활용하거나 ② 생성된 repository를 git clone한 뒤, 프로젝트를 생성하는 방법이 있습니다. (+ 자세한 내용은 Git 로컬 저장소 활용과 Git 원격 저장소 활용에 있습니다!)

2. 배포 관련 설정

1. Vue 프로젝트 기본 설정

• Vue 프로젝트의 루트 directory에 vue.config.js를 생성해 기본 설정 값을 넣어줍니다.
  • outputDir은 빌드한 파일을 저장하는 경로이며, docs 폴더로 지정합니다.
  • publicPath는 배포된 페이지의 URL 설정입니다.
    • GitHub Pages를 통한 기본 배포 URL은 https://<username>.github.io/<repository name>/ 형태입니다.

      module.exports = {
      outputDir: './docs',
      publicPath: '/<repository name>/'
      }

  • [참고자료] Vue CLI Configuration Reference

2. GitHub Repo 설정

• 해당 Repository의 Settings-Pages로 들어갑니다.
  • 소스를 설정할 수 있는 화면이 나오는데, 아래와 같이 main(혹은 master) 브랜치의 docs 폴더를 선택해줍니다.

3. 실행

1. 프로젝트 내부에 docs 폴더를 생성합니다.

• 기본적으로 Vue 프로젝트를 build하면 /dist에 빌드 파일이 저장되는데, 앞서 vue.config.js 설정을 통해 빌드 결과물이 /docs에 저장됩니다.

2. 터미널에서 npm run build 명령을 통해 프로젝트를 빌드합니다.

3. Vue 프로젝트를 리모트 저장소에 푸시해봅시다!

   git add .
   git commit -m '<commit msg>'
   git push -u origin main

이제, https://<username>.github.io/<repository name>/로 접속해 Vue 프로젝트가 배포된 것을 확인할 수 있습니다.

• Vue.js를 활용해 개발을 진행하고, build-push를 통해 github page를 만들면 됩니다!

• OSI(Open Systems Interconnection Reference Model)는 다양한 통신 시스템이 표준 프로토콜을 사용하여 통신할 수 있도록 국제표준화기구(ISO)에서 만든 개념적 모델입니다.

• 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나눠 설명합니다.

OSI Model: The 7 Layers of Network Architecture – BMC Blogs

1. 물리 계층(Physical layer)

• 물리 계층에서는 주로 전기적·기계적 특성을 이용해 통신 테이블로 데이터를 송·수신합니다.
• 통신 단위는 Bit이며, 데이터를 주고 받기 위해 전기 신호(아날로그 신호)를 사용합니다.
  • 0과 1의 나열을 아날로그 신호로 바꾸어 전선으로 흘려 보내고, (encoding)
  • 아날로그 신호가 들어오면 0과 1의 나열로 해석하여 (decoding)
  • 물리적으로 연결된 두 대의 컴퓨터가 0과 1의 나열을 주고 받을 수 있게 해줍니다.
• 단, 물리계층에서는 데이터를 전달할 뿐 데이터의 내용이나 오류 등에는 관여하지 않습니다.

2. 데이터 링크 계층(Data link layer)

프레임 구성, 물리 주소 지정(MAC 주소), 흐름 제어, 오류 제어

• 데이터 링크 계층은 동일한 네트워크에 있는 기기 간의 전송을 촉진하며, Point to Point 간 신뢰성 있는 전송을 보장하기 위한 계층입니다.

  • 발생 가능한 오류를 찾아내고 수정하는데 필요한 기능적·절차적 수단을 제공하는 오류 제어 기능과
  • 송·수신 측 간의 속도 차이를 해결해 버퍼에 걸리지 않도록 하는 흐름 제어 기능을 수행합니다.

• 데이터 링크 계층에서는 MAC 주소(Media Access Control Address)를 통해 통신하는데,

  • 이는 상호 통신을 위해 네트워크 카드마다 물리적으로 할당받는 주소값입니다.

• 이 계층에서의 데이터 전송 단위는 Frame이며,

  • 여기에 Header와 Trailer를 추가하는데,
    • Header에는 출발지와 목적지의 MAC 주소, 데이터 내용을 정의하며
    • Trailer에서는 비트 에러를 감지합니다.

• cf. 데이터 링크 계층은 두 개의 하위 계층(논리적 링크 제어(LLC) , 매체 접근 제어(MAC))으로 나뉩니다.

3. 네트워크 계층(Network layer)

패킷 전달, 논리 주소 지정(IP), 라우팅

• 네트워크 계층은 서로 다른 네트워크 간의 데이터 전송을 촉진하며, 데이터를 목적지까지 가장 안전하고 빠르게 전달하기 위한 계층입니다.
  • 네트워크 특성, 경로, 서비스 우선 순위 등 다양한 요소를 기반으로 최적의 물리 경로를 찾아 라우팅(routing)하며,
    • 여러 개의 노드를 거칠 때마다 경로를 찾아주는 역할입니다.
  • 추가로 흐름 제어, 세그멘테이션(segmentation/desegmentation), 오류 제어, 인터네트워킹(Internetworking) 등을 수행합니다.
• 이 계층은 논리적 주소를 담당하고 패킷(Packet)의 전달 경로를 결정하는데,
  • 논리적인 주소 구조(IP), 곧 네트워크 관리자가 직접 주소를 할당하는 구조를 가지며,
  • 상위 계층에서 받은 데이터에 목적지 호스트의 논리 주소를 Header에 추가하여 전송합니다.
• 즉, 수많은 네트워크들의 연결로 이루어지는 Internetwork 속에서 목적지 컴퓨터로 데이터를 전송하기 위해 IP 주소를 이용해 라우팅하고, 다음 라우터로 패킷을 전달하는(forwarding) 계층입니다.

4. 전송 계층(Transport layer)

세그먼트 분할·조립, 서비스 지점 주소 지정(Port), 연결 제어, 흐름 제어, 오류 제어

• 전송 계층은 양 끝단(End to end)의 사용자들이 신뢰성있는 데이터를 주고 받을 수 있도록 하는 계층으로, 상위 계층에서 데이터 전달의 유효성이나 효율성을 생각하지 않도록 합니다.

  • 오류 제어, 흐름 제어 및 정체 제어와 같은 메커니즘을 제공하여 데이터 패킷을 추적하고, 오류와 중복을 확인하고, 전송에 실패한 정보를 재전송합니다.
  • 데이터 전송 단위는 Segment이며,
    • 송신 시, 데이터 분할을 통해 각 세그먼트에 시퀀스 넘버를 부여하고
    • 수신 시, 시퀀스 넘버에 따라 재조립하여 데이터의 무결성과 정확성을 검사합니다.

• 이 계층에서는 서비스 지점 주소를 지정하는데,

  • 하나의 컴퓨터에서 동시에 실행되고 있는 프로세스들을 구분할 수 있는 주소값, 포트 번호를 사용하여
  • 도착지 컴퓨터의 특정 프로세스에 응답하여 데이터가 전송되도록 보장합니다.

• 전송 프로토콜의 대표적인 예로는 TCP와 UDP가 있습니다.

  • TCP(Transmission Control Protocol)는 연결형 프로토콜로, 신뢰성이 요구되는 App에서 사용합니다.
    • 송신측과 수신측의 연결을 확인한 후 데이터를 전송하며,
    • 수신자 응답을 받아 필요한 경우, 데이터를 재전송할 수 있습니다.
  • UDP(User Datagram Protocol)는 비연결형 프로토콜로, 간단한 데이터를 빠른 속도로 전송하는 App에서 사용합니다.
    • 송신측과 수신측의 연결을 거치지 않고 일방적으로 데이터를 전송하며,
    • 수신측으로부터 응답을 따로 받지 않습니다.

5. 세션 계층(Session layer)

대화 제어, 체크포인트 동기화

• 세션 계층은 서버 간의 세션을 관리하여 데이터 통신을 조정하는 계층입니다.
  • 세션은 프로세서들이 서로를 인식하고 데이터 송수신을 마칠 때까지의 시간을 의미하며,
    • 이 계층은 모든 데이터를 전송할 수 있도록 세션을 개방한 후 리소스를 낭비하지 않기 위해 세션을 즉시 닫을 수 있도록 합니다.
  • 프로세스 간의 상호 작용이나 대화 관리를 위해 전이중 방식(Full Duplex), 반이중 방식(half-duplex) 등을 사용합니다.
    • 전이중 방식은 하나의 연결을 통해 데이터가 동시에 양방향으로 오고 갈 수 있는 방식이며,
    • 반이중 방식은 데이터 토큰을 사용해 데이터 전달 권한을 확인하며, 전달에 대한 응답이 도착한 후 다른 전달을 수행하는 방식입니다.
  • 데이터 전송을 체크 포인트와 동기화하는데,
    • 데이터 전송 시, 체크 포인트를 설정하여 전송 도중 연결이 끊어지거나 충돌이 발생하면 마지막 체크 포인트에서 세션을 재개합니다.

6. 표현 계층(Presentation layer)

데이터 변환·암호화·압축

• 표현 계층은 서로 다른 데이터 표현 방식을 사용하는 응용 프로세스가 잘 통신할 수 있도록 데이터 형식과 표현을 다루는 계층입니다.

  • 서로 다른 환경의 시스템에서 전송된 데이터를 서로 이해할 수 있도록 돕는데,
    • 송신 측과 수신 측 사이의 서로 다른 부호 체계 간 변환과 표준화된 데이터 형식을 규정을 통해
    • 데이터 구조를 하나의 통일된 형식으로 표현하여 응용계층의 데이터 형식 차이로 인한 부담을 덜어줍니다.
  • 즉, 각 컴퓨터에서 사용하는 데이터 표현 규칙(추상 문법)을 네트워크 전체에서 일관성을 지니는 표현 규칙(전송 문법)으로 변환하여 데이터를 전송함으로써, 양단의 프로세스가 데이터를 이해하고 해석할 수 있도록 하는 것입니다.
  • 데이터 압축을 통해 전송 데이터의 양을 최소화함으로써 통신의 속도와 효율을 높이는 기능과 암호화 등의 동작을 수행합니다.

7. 응용 계층(Application layer)

• 응용 계층은 응용 프로세스와 직접 관계하여 일반적인 응용 서비스를 수행하는 계층입니다.
  • 응용 계층은 소프트웨어가 사용자에게 의미 있는 데이터를 제공하기 위해 의존하는 프로토콜과 데이터를 조작하는 역할을 합니다.
    • 사용자의 데이터와 직접 상호작용하며, 웹 브라우저 및 이메일 클라이언트와 같은 소프트웨어 애플리케이션이 통신을 돕는데,
      • 여기서, 클라이언트 소프트웨어 애플리케이션은 응용 계층의 일부가 아니라는 점을 명확히 해야 합니다.
  • 응용 계층의 프로토콜에는 HTTP, SMTP(이메일 통신을 위한 프로토콜) 등이 있습니다.

💡 About OSI 7 Layers

• OSI 모델은 통신이 일어나는 과정을 단계별로 파악하기 위해 계층을 나눴으며,

  • 특정한 곳에 이상이 생길 경우, 해당 단계의 하드웨어나 소프트웨어를 고쳐 문제를 해결할 수 있습니다.

• 그러나 특유의 구현 복잡성으로 인해 발생하는 비효율적인 네트워크 운영으로

  • 현대 인터넷은 OSI 모델이 아닌 TCP/IP 모델을 따르고 있습니다.

🚩 추가 개념

• Encapsulation & Decapsulation

  Encapsulation (캡슐화)	Decapsulation (디캡슐화)
  상위 계층에서 하위 계층으로 데이터가 이동하며, 헤더에 각 계층의 기능이 합쳐지는 방식	하위 계층에서 상위 계층으로 데이터가 이동하며, 각 계층에서 요구되는 헤더 정보가 제거되는 방식
  데이터 송신	데이터 수신

• Protocol (프로토콜)

  • 컴퓨터 내부 또는 서로 다른 기기들 간의 데이터 교환을 위해 표준화한 통신 규약입니다.
  • 프로토콜의 기능에는 흐름제어, 오류제어, 순서제어 등이 있습니다.
    • 흐름제어는 수신 측에서 송신 측이 송신하는 데이터의 전송량이나 전송 속도를 조절하는 기능입니다.
    • 오류제어는 전송 중에 발생하는 오류를 검출하고 정정하여 정보의 파손에 대비하는 기능입니다.
    • 순서제어는 데이터 블록에 전송 순서를 부여하는 기능입니다. 송신 데이터들이 순서적으로 전송되도록 함으로써 흐름제어와 오류제어를 용이하게 합니다.

브랜치(branch)란, 독립적인 개발을 위한 기능으로 볼 수 있다. 개발 과정에서 여러 사람이 동시에 다양한 작업을 진행하게 되는데, 필요에 따라 브랜치를 생성하여 다른 브랜치의 영향을 받지 않고 각자 개발을 진행할 수 있으며 이후 다른 브랜치에 병합하는 과정을 통해 작업을 합칠 수 있다.

1. git branch

• git branch 명령은 브랜치와 관련한 다양한 기능을 지원한다.
• 새로운 작업을 위해 브랜치를 생성할 경우, 새로 생성된 브랜치는 현재 작업 중인 브랜치로부터 분기되어 해당 브랜치의 마지막 커밋을 가리킨다.

  # 1-1. 브랜치 목록 확인
  $ git branch 
  # 1-2. 브랜치 목록과 각각의 마지막 커밋 확인
  $ git branch -v
  

2. 브랜치 생성

$ git branch

3. 브랜치 삭제

$ git branch -d

#### 2. `git switch`
- `git switch` 명령을 통해 원하는 브랜치로 이동할 수 있다.
> 💡 Git 2.23 버전에서 기존에 사용하던 `checkout`이 `switch`와 `restore`로 분리되었다. `switch`는 브랜치를 변경하는 부분을 담당하며, `restore`는 작업 파일을 복원해주는 역할을 담당한다.
```bash
# 1. 브랜치 이동
$ git switch <branch_name>

# 2. 새로운 브랜치를 생성해 이동
$ git switch -c <branch_name>

Gitflow Workflow는 nvie의 Vincent Driessen에 의해 제안되었으며, 프로젝트 릴리즈를 중심으로 설계된 엄격한 branching model이다. 지속적 SW개발 및 DevOps 구현에 도움이 되어 대규모 프로젝트 관리에도 적용 가능한 workflow이다.

• Gitflow Workflow는 5가지의 git branch를 사용하는데,

  항상 유지되는 메인 브랜치인 main과 develop과 일정 기간 동안만 유지되는 보조 브랜치인 feature, release, hotfix이다.

① main

• 공식 릴리스 기록을 저장하는 최상단 브랜치
• 배포 이력을 관리하기 위해 사용하기 때문에 배포 가능한 상태만을 관리하는 역할

② develop

• 다음 릴리스 버전을 개발하며, 최신 개발 변경 사항을 기록하는 통합 브랜치
• 기능 개발을 위한 브랜치들을 merge하기 위해 사용하며, 모든 기능이 추가되고 버그가 수정되어 배포 가능한 상태일 때 main 브랜치에 merge
• 개발 단계에서는 develop 브랜치를 기준으로 작업 진행

③ feature

• 기능을 개발하는 브랜치 (ex. feature/login)
• 새로운 기능을 개발하거나 버그 수정이 필요할 때, develop 브랜치에서 특정 feature 브랜치를 분기하여 개발을 진행
• 개발이 완료되면 다시 develop 브랜치로 merge되며, 더이상 필요하지 않은 feature 브랜치는 삭제

④ release

• 출시 버전을 준비하는 브랜치 (ex. release-2.1)
• 배포를 위한 전용 브랜치로 릴리스가 준비되면 develop 브랜치로부터 release 브랜치를 분기하여 배포에 필요한 최종 버그 수정 및 문서 작업 등을 수행
• release 브랜치를 통해 배포를 준비하면, 그 기간 동안에도 develop 브랜치에서는 다음 버전을 위한 개발이 진행될 수 있음

⑤ hotfix

• 릴리스 버전에서 발생한 버그를 수정하는 브랜치 (ex. hotfix-2.1.1)
• 배포된 버전에서 급하게 수정이 필요한 경우, master 브랜치에서 hotfix 브랜치를 분기하여 작업을 수행
• master 브랜치로부터 분기되어 다른 개발 단계를 고려하지 않고, 특정 문제를 빠르게 해결할 수 있음

Branch의 전체적인 흐름

원격 저장소(Remote Repository)란, 인터넷이나 네트워크 어딘가에 있는 저장소를 말한다. 흔히 github이나 gitlab에 원격 저장소를 만들어 사용하며, 저장소를 관리하고 데이터를 Push&Pull 하는 작업을 통해 협업이 진행된다. 리모트 저장소를 관리한다는 것은 저장소를 추가, 삭제하는 것뿐만 아니라 브랜치 관리와 데이터 추적 여부 등을 관리하는 것을 말한다.

1. 원격 저장소 연결

• git remote 연결을 통해 현재 프로젝트에 등록된 원격 저장소를 확인하거나 추가할 수 있다.

1. 원격 저장소 가져오기 _ 💡 저장소를 Clone할 경우, 원격 저장소의 단축 이름은 origin으로 표시된다._

   $ git clone <http url>

2. 로컬 저장소를 원격 저장소에 연결하기 _ 💡 원격 저장소를 추가할 때에는 origin 대신 다른 단축 이름을 설정할 수 있다._

   $ git remote add origin <http url>
   $ git remote add <단축 이름> <http url>

3. 연결된 원격 저장소 확인하기

   $ git remote -v

2. pull & push

1. 원격 저장소에서 데이터 가져오기

• 데이터를 가져오는 방식은 pull과 fetch로 볼 수 있다. ‣ pull: 원격 저장소에서 데이터를 가져와 자동으로 Merge ‣ fetch: 원격 저장소에서 데이터를 가져와 수동으로 Merge

2. 원격 저장소에 데이터 추가하기

• 로컬 저장소에 변경 이력을 commit한 뒤, git push 명령을 통해 원격 저장소에 해당 commit을 저장할 수 있다.

$ git pull origin <branch>
$ git push origin <branch>

3. 원격 저장소 관리

1. 원격 저장소 정보 확인하기

• git remote show <저장소 이름> 명령으로 원격 저장소에 구체적인 정보를 확인할 수 있다. ‣ 출력 정보에는 원격 저장소의 URL과 추적하는 브랜치, git pull 명령을 실행할 때 master 브랜치와 Merge 할 브랜치가 무엇인지 등이 포함된다.

2. 저장소 이름 수정/삭제

• git remote rename <old> <new>를 통해 저장소 이름을 변경할 수 있다.
• git remote remove <name>을 통해 해당 저장소 이름을 삭제할 수 있다.

• Git 저장소를 만드는 법은 크게 2가지로 볼 수 있다. ① 아직 버전관리를 하지 않는 로컬 디렉토리 하나를 선택해서 Git 저장소를 적용하는 방법 ② 다른 어딘가에서 Git 저장소를 Clone 하는 방법

1. 기존 디렉토리를 Git 저장소로 만들기

   • Git으로 관리할 프로젝트 디렉토리로 이동
   • 해당 경로에서 git init 명령 실행 👉 Git 저장소가 되면, .git 폴더가 생성되며, 경로 끝에 현재 branch 이름이 표시된다!

2. 기존 저장소를 Clone 하기

   • git clone <url> 명령을 통해 원하는 저장소를 Clone

*2. Git으로 파일 관리 *

• Git이 파일을 관리하게 하려면 저장소에 파일을 추가하고 커밋해야 하는데, git add 명령으로 파일을 추가하고 git commit 명령으로 커밋할 수 있다.

1. git add

   working directory, 즉 작업 공간에서 변경된 사항을 저장하기 위해 해당 파일을 staging area에 추가할 수 있다.

   # 1. 현재 경로의 모든 파일을 add
   $ git add .
   # 2. 특정 파일 or 경로를 지정해서 add
   $ git add <해당 경로>

   cf. git status를 통해 현재 Git 상태 파악 가능

2. git commit

   staged 상태의 파일들에 대한 이력을 커밋하려 해당 시점의 스냅샷을 기록할 수 있다. 👉 커밋 메시지는 변경사항을 명확히 알 수 있도록 작성!

# 1. staged 상태의 파일 커밋
$ git commit -m '<message>'

# 2. 모든 변경 사항 자동 추가 후 커밋
$ git commit -a -m '<message>'

• 저장소 히스토리는 git log를 통해 확인할 수 있다. (log를 그만 보려면 q 입력)

  # 각 라인을 한 줄로 보고 싶을 경우
  $ git log --oneline

*3. 파일 관리 조작 *

1. 특정 파일 무시하기

• .gitignore 파일을 만들어 Git으로 관리할 필요가 없는 파일 패턴을 등록할 수 있다. cf. gitignore.io를 활용해 git으로 관리하지 않을 파일 패턴을 편하게 만들 수 있다!

2. git add 취소하기

• Staging Area에 추가된 특정 파일을 다시 unstaged 상태로 되돌리기 위해 git restore 명령을 사용할 수 있다.

  $ git restore --staged <파일 이름>

3. git commit 수정하기

• --amend 옵션을 통해 커밋 메시지를 수정하거나 최신 커밋에 파일을 추가할 수 있다.

  # 1. 특정 파일을 빠뜨리고 커밋을 남겼을 경우,
  $ git commit -m '<message>'
  $ git add <forgotten file> # 해당 파일을 다시 add 하고
  $ git commit --amend # 최근 커밋에 함께 커밋하기
  

2. 커밋 메시지를 수정해야 하는 경우

$ git commit -m '' $ git commit --amend -m ''

4. `git commit` 취소하기
- `git reset [--option] [commit]` 명령을 통해 해당 commit 시점으로 돌아갈 수 있다.
    - 해당 commit 시점으로 돌아가며, 이후 변경 이력에 대해서는 `option`을 통해 조정할 수 있다.
    1. `hard`: 해당 commit 시점 이후 변경 이력을 Working Directory에서 삭제
    2. `mixed` (default): 해당 commit 시점 이후 변경 이력은 unstaged된 상태로 Working Directory에 보존
    3. `soft`: 해당 commit 시점 이후 변경 이력을 staged 상태로 Working Directory에 보존
```bash
# 1. 최근 커밋 취소
$ git reset HEAD^
# 2. 최근 2개 커밋 취소
$ git reset HEAD~2
# 3. 특정 커밋 시점으로 돌아가기
$ git log # 커밋 기록을 통해 특정 커밋 ID 확인
$ git reset <commit ID>

git은 DVCS(분산 버전 관리 시스템, Distribute Version Control System)으로, 소스 코드의 버전 및 이력을 관리할 수 있다.

1. Basic

1. 기본 단축키

• Ctrl + c : Cancel

• Ctrl + d : Delete

• Ctrl + l : cLear

• Ctrl + a : 라인 맨 앞(A)으로 이동

• Ctrl + e : 라인 맨 뒤(End)로 이동

• Ctrl + b : 앞으로 커서 이동 (←)

• Ctrl + f : 뒤로 커서 이동 (→)

• Ctrl + w : 단어 단위로 삭제

• Ctrl + u : 현재 입력 중인 라인 전체 삭제

  cf. manual 보기 👉 $ man <command>

2. Directory

# 1. Print Working Directory 👉 현재 위치 확인
$ pwd

# 2. Change Directory 👉 이동
$ cd # 홈 dir로 이동
$ cd .. # 상위 dir로 이동
$ cd - # 이전 dir로 이동(뒤로 가기)
$ cd <dir> # 해당 dir로 이동

# 3. MaKe DIRectory 👉 디렉토리 생성
$ mkdir <dir_name>

# 4. 폴더 삭제
$ rm -rf <dir_name>

# 5. 폴더 내 검색
$ find . -name '*.txt'

3. Files

1. 기본

   # 1. touch 👉 파일 생성
   $ touch <file>
   

2. ReMove 👉 파일 삭제

$ rm $ rm -f # 파일 강제 삭제

3. MoVe 👉 파일 이동 (or 이름 변경)

$ mv

2. 파일 조작
```bash
# 1. 입·출력
$ echo 'hello' # print
$ echo 'hello' > <file> # redirect(>) 👉 출력 값을 파일에 덮어쓰기
$ echo 'world' >> <file> # append(>>) 👉 출력 값을 파일에 이어붙이기
$ cat greetings.txt # 파일 내용 출력

# 2. 출력 방식 설정
$ head <file> # 상단 10줄만 출력
$ tail <file> # 하단 10줄만 출력

# 3. Word Count
$ wc <file> # 줄, 단어, 바이트를 세서 출력

# cf. 파이프 활용 가능
$ head <file> | wc # 상단 10줄의 줄/단어/바이트 수 출력

# 4. 파일 탐색
$ less <file>
# 페이지 이동(F, B) / 반 페이지 이동(U, D) / 검색 (/<pattern>)

# 5. 파일 편집
$ vim

2. Process Status
```bash
$ ps # 프로세스 보기
$ ps aux | grep 'runserver'

# 프로세스를 pid로 kill
$ kill -<level> <pid>

# 프로세스를 이름으로 kill
$ kill -<level> -f <name>