• Virtual DOM
• state
• props

Virtual DOM

Virtual DOM은 React에서 사용되는 개념으로, 실제 브라우저에 그려지는 DOM과는 별개로 메모리 상에 존재하는 가상의 DOM입니다.

DOM은 Document Object Model의 약어로, 웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다.

DOM은 트리형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능합니다. 하지만 동적 UI에 최적화되어 있지 않아서, 복잡한 UI 상태 변화에 따른 DOM 처리는 성능 저하를 초래합니다. 이러한 문제를 해결하기 위해 React에서는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화하고, DOM 처리 횟수를 최소화하여 효율적으로 처리합니다.

즉, Virtual DOM은 상태가 업데이트될 때마다 새로운 가상 DOM을 생성하고 변경된 부분만 감지하여 실제 DOM을 업데이트하므로, 전체 페이지를 다시 렌더링하지 않고도 업데이트가 가능합니다. 이러한 Virtual DOM의 장점은 React의 성능 향상 뿐 아니라, 코드의 유지 보수성도 높여줍니다.

State

리액트에서 변수를 저장하고자 할 때, useState 훅을 사용하여 상태(state)를 관리합니다. 이 훅은 첫 번째 원소로 상태 값(state value)을, 두 번째 원소로 상태 값을 변경하는 함수(setState function)를 반환합니다. 상태값이 갱신될 때마다 리렌더링되어 화면이 갱신됩니다.

state는 리액트에서 변수와 같은 존재로, const [age, setAge]와 같은 방식으로 변수를 정의하고 값을 초기화할 수 있습니다. 이 때 setAge는 age의 값을 변경할 때 사용하는 함수로, 내부적으로 필요한 프로세스를 실행하며 age의 값을 갱신합니다.

예를 들어, setAge(30)과 같은 방법으로 age의 값을 변경할 수 있습니다. 이러한 상태 관리를 통해, 컴포넌트 내에서 변화하는 값을 저장하고 사용할 수 있게 됩니다.

아래는 예시 코드입니다.

import React, { useState } from "react";

function Example() {
  // age 변수의 초기값을 0으로 설정하고, setAge 함수를 사용하여 age 값을 변경할 수 있도록 함
  const [age, setAge] = useState(0);

  const handleAgeChange = () => {
    setAge(age + 1); // 버튼 클릭 시 age의 값을 1 증가시키도록 함
  };

  return (
    <div>
      <p>저의 나이는 {age}살 입니다.</p>
      <button onClick={handleAgeChange}>나이 추가</button>
    </div>
  );
}

위 코드에서 useState를 사용하여 age 변수와 setAge 함수를 생성했습니다. age 변수는 현재 0으로 초기화되어 있으며, setAge함수를 사용하여 값을 변경할 수 있습니다. 이 함수를 호출하면 인자로 전달된 값이 age 변수에 할당되어 값을 갱신하고, 해당 컴포넌트를 리렌더링합니다.

handleAgeChange 함수에서는 setAge 함수를 호출하여 age 값을 1 증가시키도록 했습니다. 이 함수는 버튼 클릭 시 호출되며, 해당 컴포넌트를 리렌더링합니다.

위 코드를 실행하면 화면에 "저의 나이는 0살 입니다."와 "나이 추가" 버튼이 보입니다. 버튼을 클릭할 때마다 나이가 1씩 증가하며, 화면에 표시됩니다. 이처럼, useState를 사용하여 상태(state)를 관리하면 컴포넌트의 상태를 관리하고, 화면에 동적인 변화를 표시할 수 있습니다.

Props

• props는 React에서 컴포넌트 간 데이터를 전달하는데 사용되는 속성입니다.
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면, 부모 컴포넌트에서 자식 컴포넌트를 사용할 때, 속성으로 전달합니다. 이때, 전달하는 데이터는 객체 형태이며, 자식 컴포넌트 내부에서는 해당 데이터를 props라는 이름으로 사용합니다.

import React from 'react';

function Hello(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
      <p>{props.message}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Hello name="React" message="Welcome to React World!" />
    </div>
  );
}

export default App;

위 코드에서 Hello컴포넌트에서 props를 사용하여 전달받은 데이터를 출력하고 있습니다. name과 message는 부모 컴포넌트인 App 컴포넌트에서 자식 컴포넌트인 Hello 컴포넌트로 전달한 데이터입니다. 이렇게 전달받은 데이터를 props를 통해 사용할 수 있습니다.)

• ES6란?
• ES5/ES6 문법 차이

ES6란?

ECMAScript 6(ES6)은 JavaScript 버전 중 하나입니다. 2015년에 도입되었으며 언어에 많은 새로운 기능을 도입하여 개발자가 코드를 더 쉽고 효율적으로 작성할 수 있도록 했습니다.

대표적으로 추가된 새로운 기능으로는 let, const, 화살표함수, 템플릿 리터럴, 클래스, rest 및 spread연산자가 있습니다.

let 및 const

이전 ES5문법에서는 var의 키워드를 이용했습니다. var에는 문제점이 많았는데 let, const 키워드가 새로이 나와 var를 대체하였습니다.

var ?

var키워드는 변수를 선언하는 데 사용됩니다. 변수에 값을 할당하거나 값을 할당하지 않고 변수를 선언하는 데 사용됩니다. 하지만 단점이 많습니다. 크게 두가지 단점으로는 함수 범위 액세스, 호이스팅 입니다.

• 블록 범위가 아니라 함수 범위에 있다는 것

  함수 내의 for문이나 if문 내에 생성 된 변수가 함수 내에만 있으면 사용가능하다는 점입니다.

• 호이스팅을 허용한다는 점

  var로 선언된 위치에 관계없이 해당 범위의 맨 위로 이동 됩니다.

화살표 함수

Arrow function 은 함수 표현식을 작성하기 이후 보다 간결한 구문을 제공하는 기능입니다. 기본 형식은 let function = (매개변수) ⇒ 결과값 입니다. 기존 함수 표현식에 비해 몇가지 장점이 있습니다.

let add = (x, y) => {
    return x+y;
}

🔥 고유한 this 컨텍스트가 없습니다. 대신 주변 코드에서 this 컨텍스트를 상속합니다. 또한 new 키워드와 함께 생성자로 사용할 수 없습니다.

템플릿 리터럴

템플릿 리터럴은 JavaScript에서 변수나 표현식을 포함할 수 있는 문자열을 만드는 방법입니다.

const name = 'tube';
const message = `Hello ${name}`;

템플릿 리터럴은 변수나 표현식을 포함할 수 있는 동적 문자열을 쉽게 만들 수 있기 때문에 JavaScript의 유용한 기능입니다. 또한 +연산자로 문자열을 연결하는 것보다 더 읽기 쉽습니다.

클래스

es6에는 클래스가 추가 되었습니다. 클래스는 객체 생성을 위한 틀입니다. 생성된 모든 개체가 갖게 될 속성과 동작을 정의합니다.

// 클래스 생성
class Person {
  constructor(name, species) {
    this.name = name;
    this.gender = gender;
  }

  speak() {
    console.log(`안녕 내이름은 ${this.name}이야! 내 성별은 ${this.gender}야`);
  }
}

// 클래스를 사용하여 개체 생성
const tube = new Person("tube", "남자");
tube.speak(); // 안녕 내 이름은 tube이야! 내 성별은 남자야

spread 연산자

배열이나 객체를 다른 배열이나 객체로 확장하거나 병합할 때 유용하게 사용할 수 있는 문법입니다. 전개 구문은 ... 연산자를 사용하여 표현하며, 배열 또는 객체의 요소나 속성을 개별적으로 추출하여 다른 배열이나 객체에 포함시킬 수 있습니다.

// 배열에 값 추가하기
let arr = [1, 2, 3]
let newArr = [...arr, 4]
console.log(newArr) // [1,2,3,4]

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 배열 복사하기
const arr4 = [1, 2, 3];
const arr5 = [...arr1]; // [1, 2, 3]

// 다른객체에 추가하기
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

나머지 매개변수 (rest parameter)

함수 정의에서 사용되는 선언으로서, 함수 호출 시 전달된 인수를 배열로 나타낼 수 있게 합니다. 나머지 매개변수는 함수의 마지막 매개변수로 선언되어야 하며, 선언 시 매개변수 이름 앞에 ...를 붙입니다.

// 나머지 매개변수
function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1, 2, 3
  console.log(...args); // 4, 5
  console.log(args); // [4, 5]
}

exampleFunc(1, 2, 3, 4, 5);

k9s

K9s는 Kubernetes 클러스터와 상호 작용하는 터미널 기반 UI입니다. k9s 는 배포 된 어플리케이션을 탐색, 관찰 및 관리 합니다.

설치

macos

# via Homebrew
brew install derailed/k9s/k9s

linux

brew install derailed/k9s/k9s

windows

# Via scoop
scoop install k9s

# Via chocolatey
choco install k9s

명령어

CLI

# 사용 가능한 모든 CLI 옵션 나열
k9s help

# k9s 런타임(로그, 구성 등)에 대한 정보
k9s info

# 주어진 네임스페이스에서 k9을 실행합니다.
k9s -n mynamespace

# pod명령을 통해 k9s를 실행하고 pod보기에서 실행합니다.
k9s -c pod

Keybinding

• ?: 도움말 나열
• ctrl + a: 클러스터에서 사용가능한 리소스 나열
• :q, ctrl + c: k9s 종료
• :po: 짧은 명령어(별칭)으로 리소스 보기 (:po pod보기, :svc 서비스 보기, :ns 네임스페이스보기)
• :po <namespace>: 해당 네임스페이스에서 리소스보기
• l: 로그 확인하기 (logs)
• d: 상세설명 보기 (describe)
• e: 편집하기 (edit)
• ctrl + d: 리소스 삭제 (실제 리소스 지워집니다.)
• ctrl + k: 리소스 삭제 (force)
• ctrl-w: 넓은열 (kubectl ... -o wide)
• ctrl-z: 오류 상태인 리소스 보기

맨날 Terminal 안의 문서 수정 용도로만 사용하던 vim 이것을 이용하면 생산성이 좋아진다고 한다. 한번 배워서 써볼까 한다.

저장소 https://github.com/vim/vim

Vim

Vim은 "Vi Improved" 의 약자로 vi 호환 텍스트 편집기이다. CUI용 Vim과 GUI용 gVim이 있다. Vim은 Vi와 호환되면서도 독자적으로 다양한 기능을 추가하여 편의를 돕고 있다.

번외 Neovim

Neovim은 Vim의 확대집합이 되는 Vim의 리팩터 판이라고 한다. 동일한 구성을 공유 한다고 하니 한번 써봐야겠다.

• 백준 온라인 저지 (https://www.acmicpc.net/)
• 알고스팟 (https://algospot.com/)
• 프로그래머스(https://programmers.co.kr/) 등이 있다.

모든 버전 관리 시스템은 브랜치를 지원한다. 원래 코드와 상관없이 독립적으로 개발을 진행할 수 있어야 되는데, 이렇게 사용하는 것이 브랜치이다. 다른 브랜치를 만들어 작업한 다음 나중에 병합(merge) 하는 식으로 작업을 권장한다.

브랜치 생성하기 ( git branch )

git의 새 브런치는 git branch명령어로 만들 수 있다.

$ git branch tube

git은 HEAD라는 특수한 포인터가 지금 작업 중인 브랜치를 파악한다.

브랜치를 생성하면서 바로 해당 브랜치로 이동할 수 있다.

$ git switch -c tube

브랜치 이동하기 ( git switch )

git switch명령어로 HEAD가 가리키는 브랜치를 변경할 수 있다.

$ git switch tube
Switched to branch 'tube'

git 2.3 이후 버전에서는 checkout 기능 중에 switch, restore 기능은 분리되었다. checkout 명령어가 안되는 건 아니지만 checkout의 기능이 많아 분리 시킨 듯싶다.

tube 브랜치로 파일을 하나 만들고 커밋 해 보자. ( 현재 tube의 브랜치이다. )

$ echo "tube branch" > REAMDME_TUBE.md 
$ git add .
$ git commit -m "tube branch commit"
$ ll
total 16
drwxr-xr-x   5 jeonjeonghoon  staff   160B  4 29 03:36 .
drwxr-xr-x   8 jeonjeonghoon  staff   256B  4 29 03:25 ..
drwxr-xr-x  12 jeonjeonghoon  staff   384B  4 29 03:36 .git
-rw-r--r--   1 jeonjeonghoon  staff    12B  4 29 03:27 README.md
-rw-r--r--   1 jeonjeonghoon  staff    12B  4 29 03:36 REAMDME_TUBE.md

잘 생성 되었다. 그럼 이제 다시 master의 브랜치로 가보자.

$ get switch master
$ ll
total 8
drwxr-xr-x   4 jeonjeonghoon  staff   128B  4 29 03:36 .
drwxr-xr-x   8 jeonjeonghoon  staff   256B  4 29 03:25 ..
drwxr-xr-x  12 jeonjeonghoon  staff   384B  4 29 03:36 .git
-rw-r--r--   1 jeonjeonghoon  staff    12B  4 29 03:27 README.md

tube 브랜치에서 커밋 했던 파일이 없다. 두 브랜치의 작업은 독립적으로 각 브랜치에 존재한다. 때가 되면 각자 작업 후 병합(merge) 해줘야 된다.

현재 포인터(HEAD) 가르키고 있는 브랜치 확인하기

현재 어떤 브랜치에서 작업 중인지 확인해야 될 때가 있다. git log명령어로 확인하도록 하자.

$ git log --oneline --decorate --graph --all
* 7ec78d8 (HEAD -> tube) tube branch commit
* 373147d (master) first commit
(END)

브랜치 merge 하기

새로운 브랜치를 만들어 작업이 끝났거나 이슈를 해결했으면 git merge명령어로 다시 브랜치를 합쳐야 한다. 밑은 12번 issue가 생겨 브랜치를 만들어 해결하는 과정이다.

$ git switch -c iss12
$ echo "fixed me" > fixedfile.md
$ git add fixedfile.md
$ git commit -m "fixed the issue 12"
$ git switch master
$ git merge iss12

브랜치 삭제하기

더 이상 필요 없는 브랜치는 git branch -d명령어로 삭제해 준다.

$ git branch -d iss12

브랜치 관리하기

git branch명령어로 branch들을 관리할 수 있다. git branch -v명령어를 이용하면 각 브랜치마다 마지막 커밋 메시지를 볼 수 있다.

$ git branch -v

--merged --no-merged옵션을 이용하면 merge된 브랜치와 merge 되지 않은 브랜치를 볼 수 있다.

$ git branch --merged
$ git branch --no-merged

merge 되지 않는 커밋을 담고 있는 브랜치는 기본적으로 삭제되지 않지만 git branch -D 명령어로 강제로 삭제할 수 있다.

리모트 브랜치

리모트 Refs는 리모트 저장소에 있는 포인터인 레퍼런스이다. 리모트 저장소에 있는 브랜치, 태그 등등을 의미한다. git ls-remote로 모든 리모트 Refs를 조회할 수 있다. git remote show명령은 모든 리모트 브랜치와 그 정보를 보여준다.

$ git remote show
origin

$ git remote show origin
* remote origin
  Fetch URL: https://github.com/tube-jeonghoon/git-test.git
  Push  URL: https://github.com/tube-jeonghoon/git-test.git
  HEAD branch: master
  Remote branches:
    master                        tracked
    refs/remotes/origin/serverfix stale (use 'git remote prune' to remove)
  Local ref configured for 'git push':
    master pushes to master (fast-forwardable)

리모트 트래킹 브랜치

리모트 브랜치를 추적하는 브랜치이다. 이 브랜치는 로컬에 있지만 움직일 수는 없다. 리모트 서버에 연결할 때마다 리모트 브랜치에 따라서 자동으로 움직일 뿐이다. 리모트 트래킹 브랜치는 북마크라고 할 수 있다.

리모트 브랜치의 이름은 (remote)/(branch) 형식으로 되어 있다. 예를 들어 저장소 origin의 master의 브랜치를 보고 싶다면 origin/master라는 이름으로 브랜치를 확인하면 된다.

브랜치 원격저장소로 푸시하기 ( git push )

로컬 브랜치를 서버로 전송하려면 쓰기 권한이 있는 리모트 저장소에 Push 해야 한다. git push (remote) (branch)명령어로 원격 저장소에 Push 할 수 있다.

$ git push origin hotfix

git push origin hotfix명령어는 자동적으로 원격 저장소에 hotfix 브랜치에 저장된다. [로컬 저장소]:[원격 저장소] 형으로 자동으로 변형된다. 만약 원격 저장소에 다른 이름의 브랜치로 저장하고 싶으면 [원격 저장소]의 이름을 바꿔주면 된다. git push origin hotfix:newhotfix 이런 형태로 말이다.

브랜치 원격저장소에서 패치하기 ( git fetch )

업데이트된 원격 저장소에서 데이터를 받을 때는 git fetch 명령어를 쓰면 된다. 주의할 점은 여기서 Fetch 명령으로 리모트 트래킹 브랜치를 내려받는다고 해서 로컬 저장소에 수정할 수 있는 새로운 브랜치가 생기는 것이 아니다. 그냥 origin에 해당 브랜치의 리모트 브랜치 포인터가 생기는 것이다. 내려받은 Fetch에는 두 가지 선택지가 있다.

1. git merge [remote]/[branch]로 받은 내용하고 병합(merge) 하는 것

   $ git merge origin/hotfix

2.git switch -c [new_branch] [remote]/[branch]로 병합(merge) 하지 않고 트래킹 브랜치에서 새 브랜치를 만들어서 작업하는 것

$ git switch -c hotfix origin/hotfix

리모트 브랜치 추적하기

트래킹 브랜치 만들기 ( git switch -c [net_branch] [remotename]/[branch] )

리모트 트래킹 브랜치를 로컬 브랜치로 받아오면 자동으로 "tracking 브랜치"가 만들어진다. 트래킹 브랜치는 리모트 브랜치와 직접적인 연결고리가 있는 로컬 브랜치이다. 저장소를 clone 하면 자동적으로 로컬 master 브랜치를 리모트 origin/master 브랜치의 트래킹 브랜치로 만든다.

새로운 브랜치를 생성하면서 origin 저장소의 hotfix 브랜치를 트래킹 한다.

$ git switch -c hf origin/hotfix

기존 브랜치에 origin 저장소의 hotfix 브랜치를 트래킹한다.

$ git switch hotfix
$ git brach -u origin/hotfix

트래킹 브랜치 업데이트 ( git pull )

해당 리모트 브랜치가 업데이트되면 git pull 명령어로 업데이트하면 된다.

$ git pull

리모트 브랜치 삭제 ( git push [remote] --delete [remotebranch]

해당 리모트 브랜치가 필요 없어지면 git push --delete명령어로 삭제해 준다.

$ git push origin --delete hotfix
To https://github.com/tube-jeonghoon/git-test.git
 - [deleted]         hotfix

git은 소스 코드 관리를 위한 분산 버전 관리 시스템이다.

설치

windows

windows_git 해당 사이트 접속 시 자동으로 다운 받아지며 안 받아지면 수동으로 32bit(x86) 64bit(x64)에 맞춰서 다운로드해 주자

Debian or Fedora

패키지 관리 도구를 이용하여 설치한다. Fedora

$ sudo yum install git

Debian

$ sudo apt-get install git

Mac

Mac은 Mac 패키지 관리자인 homebrew로 설치하는 게 업데이트나 관리 면에서 유용하다.

$ brew install git

버전 업데이트

현재 글을 쓰고 있는 버전은 2.31.1이다. Ubuntu나 Windows10에는 기본적으로 git이 깔리지만 낮은 버전으로 깔린다. 2.3 버전 이후로 명령어의 변화가 있으니 업데이트해주도록 하자.

$ sudo add-apt-repository ppa:git-core/ppa -y
$ sudo apt-get update
$ sudo apt-get install git -y
$ git --version
2.31.1

최초 설정

git config

git config라는 도구로 설정 내용을 확인하고 변경할 수 있다. Git은 이 설정에 따라 동작한다.

1. /etc/gitconfig: 시스템의 모든 사용자와 모든 저장소에 적용되는 설정이다.
2. ~/.gitconfig, ~/.config/git/config: 해당 사용자에게만 적용되는 설정이다.
3. .git/config: 특정 저장소 내에서만 적용된다. 해당 적용순서는 3 -> 2 -> 1 순서로 우선 적용된다.

사용자 정보 업데이트

사용자 이름과 이메일 주소를 불러와서 적용한다. git은 commit을 할 때마다 이 정보를 사용한다. 한번 commit후에는 변경 불가능하다.

$ git config --global user.name "tube-jeonghoon"
$ git config --global user.email "tube@abc.com"

프로젝트마다 다른 이름과 이메일 주소를 사용하고 싶으면 --global 옵션을 빼준다.

Git 저장소 만들기

새로운 git 저장소 만들기 ( git init )

해당 명령어로 git 저장소를 만들어준다.

$ git init

이 명령은 .git에 대한 하위 디렉터리가 있는 디렉터리인 Git저장소를 만든다. .git디렉터리에는 저장소에 필요한 파일이 들어있다.

기존 git 저장소를 clone 하기 ( git clone )

다른 프로젝트에 참여하거나 이미 만들어진 git 저장소를 복사하고 싶을 때 git clone이라는 명령어를 사용한다 git clone을 사용하면 git history까지 모두 복사해서 온다.

$ git clone https://github.com/tube-jeonghoon/tube-jeonghoon.git

로컬 저장소에 저장하기

워킹 디렉터리의 모든 파일은 크게 Tracked와 Untracked로 나뉘어진다. Tracked파일은 또 Unmodified와 Modified및 Staged로 나뉘어진다.

파일 상태 확인하기 ( git status )

git status명령어를 사용한다.

$ git status
$ git status -s

git status -s 의 -s 옵션은 현재 파일 상태의 간략하게 보여준다.

파일을 추적하기 ( git add )

git add명령어로 git이 파일을 새로 추적할 수 있다.

$ git add README.md

git add (file) 명령어를 통해 디렉터리에 있는 파일을 추적하고 관리하도록한다. git add 명령은 파일 또는 디렉터리의 경로를 argument로 받는다. 디렉터리면 아래에 있는 모든 파일을 추적한다.

Modified 상태의 파일을 Stage 하기 ( git add )

파일 수정 후 git에 추가해보자 첫 번째 유형은

$ git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)
    new file:   README.md

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
    modified:   TEST.md

$ git add TEST.md
$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    new file:   README.md
    modified:   TEST.md

보통 Tracked의 파일을 수정하게 되면 "Changes not staged for commit" 상태가 된다. 수정 한 파일이 Tracked상태이지만 아직 Staged상태는 아니라는 것이다. git add명령어로 파일을 다시 추적할 수 있다.

git add는 세 가지 상황에서 쓸 수 있다.

1. 파일을 새로 추적할 때
2. 수정한 파일을 Staged상태로 만들 때
3. Merge할 때 충돌 난 상태의 파일을 Resolve 상태로 만들 때

Staged와 Unstaged 상태의 변경 내용 보기 ( git diff )

어떤 내용이 변경되었는지 확인하려면 git diff명령어를 사용해야 한다. 다음은 Tracked된 파일을 수정해서 Staged와 Unstaged 상태 모두 가진 상태이다.

$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
    new file:   README.md

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
    modified:   README.md

이 상태에서 git commit을 하게 되면 수정되지 않은 README.md가 commit 될 것이다. 무엇이 달라졌는지 확인하자.

$ git diff
diff --git a/README.md b/README.md
index 264dee5..d214cf8 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,2 @@
 wow!
+wow2
(END)

wow2 라는 구문이 추가된 걸 볼 수 있다. 하지만 git add 다시 staged 상태로 만들지 않으면 wow2라는 구문은 commit 되지 않는다. 수정 한 파일을 모두 git add로 모두 staged 상태로 만들었다면 git diff명령은 아무것도 출력하지 않는다.

Staged 상태 생략하기 ( git commit -a )

git commit에 -a 옵션을 주면 staged 상태가 아니더라도 Tracked 상태면 무조건 commit 한다.

git commit -a -m "force commit"

파일 삭제하기 ( git rm )

git에서 파일을 삭제하려면 git rm명령어로 해당 파일을 삭제한 후 commit 해야 한다. 주의사항은 git rm으로 파일을 삭제하게 되면 실제 데이터도 삭제 되기 때문에 주의해야 한다.

$ git rm untracked.md
rm 'untracked.md'

$ git commit -m "delete untracked.md"
[master 6480c9d] delete untracked.md
 1 file changed, 1 deletion(-)
 delete mode 100644 untracked.md

하지만 데이터를 남기고 git에서만 지울 수도 있다. git rm --cached 명령어를 쓰면 된다.

$ git rm --cached README.md
rm 'README.md'

$ git status
Untracked files:
  (use "git add <file>..." to include in what will be committed)
    README.md

실제 파일은 삭제되어 지질 않았고 Untracked 상태로 바뀌었다.

파일 이름 변경하기 ( git mv )

git에 추가 되어져 있는 파일의 이름을 바꾸고 싶을때는 git mv명령어를 쓰면 된다.

$ git mv README.md README2.md

$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    renamed:    README.md -> README2.md

commit history 조회 하기 ( git log )

git log를 쓰면 commit history를 조회할 수 있다.

$ git log
commit 4fd6359d1c372c969d7f528a421e94a9367e2f65
Author: jeonghoon-tube <shu7081@gmail.com>
Date:   Tue Apr 27 22:12:48 2021 +0900

    v2

commit 761994540c0fd3c831765863c2a77e2b8f57810b
Author: jeonghoon-tube <shu7081@gmail.com>
Date:   Tue Apr 27 22:11:12 2021 +0900

    first commit
(END)

git log 의 대표적인 옵션으로는 -p 옵션과 --stat 옵션이 있다. -p는 각 커밋의 diff 결과를 보여준다.

$ git log -p -1
commit 9fdea4651f2f7e315ba06fd728bc00222fc61fd3 (HEAD -> master)
Author: jeonghoon-tube <shu7081@gmail.com>
Date:   Tue Apr 27 22:37:35 2021 +0900

    v3

diff --git a/README.md b/README2.md
similarity index 100%
rename from README.md
rename to README2.md
(END)

-1 옵션은 최근 한개의 결과만 보여준다.

--pretty 옵션도 있다.

$ git log --pretty=oneline
9fdea4651f2f7e315ba06fd728bc00222fc61fd3 (HEAD -> master) v3
6480c9dacd0b78704e82366818d33dea8a508af5 delete untracked.md
4fd6359d1c372c969d7f528a421e94a9367e2f65 v2
761994540c0fd3c831765863c2a77e2b8f57810b first commit
(END)

--pretty옵션과 자주 쓰는 format 형식의 옵션도 있다.

$ git log --pretty=format:"%h - %an, %ar : %s"
9fdea46 - jeonghoon-tube, 9 minutes ago : v3
6480c9d - jeonghoon-tube, 32 minutes ago : delete untracked.md
4fd6359 - jeonghoon-tube, 34 minutes ago : v2
7619945 - jeonghoon-tube, 36 minutes ago : first commit
(END)

옵션은 밑에 서술하겠다.

로컬 저장소 되돌리기

git을 되돌릴 때는 크게 두 가지 방법이 있다. reset 명령어와 revert 명령어이다. 큰 차이점은 현재 버전을 커밋으로 남기는지 안 남기는지의 차이가 있다.

현재 커밋을 지운 후 돌아가기 ( git reset )

reset명령어는 현재의 커밋을 남기지 않으면서 이전으로 돌아간다. 예를 들어 로컬저장소에 v1 -> v2 -> v3 이 커밋되어있다. git reset명령어를 쓰면 v1 -> v2 가 된다.

이전 내용으로 강제로 되돌리기 ( git reset --hard )

현재 커밋과 상관없이 강제로 이전 커밋으로 전체를 덮어 써버린다.

$ cat README.md
Hi, my name is version 3

$ git log --oneline
5ee40c3 (HEAD -> master) v3.0
d822cc7 v2.0
68c508b v1.0

$ git reset --hard d822cc7

$ git log --oneline
d822cc7 (HEAD -> master) v2.0
68c508b v1.0

$ cat README.md
Hi, my name is version 2

현재의 작성중인 내용은 살리면서 이전 커밋으로 돌아가기 ( git reset --soft )

현재 커밋된 버전의 내용을 둔 채 커밋만 돌아간다.

$ cat README.md
Hi, my name is version 3

$ git log --oneline
5ee40c3 (HEAD -> master) v3.0
d822cc7 v2.0
68c508b v1.0

$ git reset --soft d822cc7

$ git log --oneline
d822cc7 (HEAD -> master) v2.0
68c508b v1.0

$ cat README.md
Hi, my name is version 3 // 커밋은 돌아갔지만 v3의 내용은 남아있다.

현재 커밋을 버전으로 남긴 후 돌아가기 ( git revert )

revert명령어는 현재의 커밋을 버전으로 남긴 후 새로운 커밋을 만들면서 돌아간다. 예를 들어 로컬저장소에 v1 -> v2 -> v3 이 커밋되어있다. git revert명령어를 쓰면 v1 -> v2 -> v3 -> v2 가 된다. 주의 해야 될 사항은 git reset 과는 다르게 돌아 가고싶은 커밋 번호를 적는게 아니라 취소하고 싶은 커밋을 적어줘야 한다.

$ git log
5ee40c3 (HEAD -> master) v3.0
d822cc7 v2.0
68c508b v1.0

$ git revert 5ee40c3

$ git log --oneline
5c6a014 (HEAD -> master) Revert "v3.0"
449c948 v3.0
b34e0c0 v2.0
7c4556d v1.0

파일 상태를 Untracked로 변경하기 ( git restore --staged )

2개의 파일이 있는데 모르고 git add .명령어로 모두 staged 영역에 넣어버렸다. 둘 중에 하나를 빼야 할 때 어떻게 해야 하는가?

$ git add .
$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    new file:   text1.md
    new file:   text2.md

"(use "git restore --staged ..." to unstage)" 해당 메시지가 확인된다. unstaged 영역으로 보내려면 해당 명령어를 입력하라는 뜻이다.

$ git restore --staged text2.md
$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    new file:   text1.md

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    text2.md

git 2.23 이전 버전에서는 `git reset HEAD <파일 이름>으로 뺏어야 됐다. 하지만 2.23 이후 버전에서 restore --staged <파일 이름>으로 바뀌였다.

원격 저장소 사용하기

다른 사람들과 함께 일을 하면서 데이터를 원격저장소에 push하고 pull할수 있다.

리모트 저장소 확인하기

git remote명령어로 현재 프로젝트에 등록된 리모트 저장소를 확인할 수 있다. 저장소를 clone 하면 origin이라는 리모트 저장소가 자동으로 등록되기 때문에 origin이라는 이름을 볼 수 있다.

$ git clone https://github.com/tube-jeonghoon/tube-jeonghoon.git
$ cd tube-jeonghoon
$ git remote
origin

리모트 저장소 추가하기 ( git remote add )

새 리모트 저장소는 쉽게 추가할 수 있다. git remote add [단축 이름] [URL]명령어를 쓰면 된다.

$ git remote add tube https://github.com/tube-jeonghoon/git-test.git
$ git remote -v
tube    https://github.com/tube-jeonghoon/git-test.git (fetch)
tube    https://github.com/tube-jeonghoon/git-test.git (push)

이제 원격 저장소에서 로컬 저장소로 데이터를 가져올 때 URL 대신에 단축 이름을 사용할 수 있다.

$ git pull tube
Updating bd1e8dd..347ec38
Fast-forward
 README.md | 1 +
 1 file changed, 1 insertion(+)

원격 저장소에 있는 데이터 가져오기 ( git pull, git fetch )

git pull과 git fetch에는 차이점이 있다. git fetch는 원격 저장소에 있는 모든 데이터를 로컬로 가져오지만 자동으로 병합(merge) 하지는 않는다. 로컬에서 하는 작업을 모두 마무리하고 수동으로 병합(merge) 해 줘야 한다. 하지만 git pull은 로컬로 데이터를 가져오면서 자동으로 병합(merge) 한다.

$ git pull tube
Updating bd1e8dd..347ec38
Fast-forward
 README.md | 1 +
 1 file changed, 1 insertion(+)

원격 저장소에 push하기 ( git push )

프로젝트를 원격 저장소에 올리고 싶을 때 git push 명령어를 사용할 수 있다. 사용 방법은 git push [원격 저장소 이름] [브랜치 이름]으로 사용하면 된다.

$ git push tube master
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 16 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 288 bytes | 288.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/tube-jeonghoon/git-test.git
   347ec38..74ddcfe  master -> master

주의 사항으로는 이 방법은 다른 사람이 push 한 뒤에는 push 할 수 없고 원격 저장소에 있는 내용을 가져와(pull) 병합(merge) 한 다음 push 할 수 있다. 자세한 방법은 후술하도록 하겠다.

원격 저장소 살펴보기 ( git remote show )

git remote show [저장소 이름]으로 해당 저장소의 구체적인 정보를 확인할 수 있다.

$ git remote show tube
* remote tube
  Fetch URL: https://github.com/tube-jeonghoon/git-test.git
  Push  URL: https://github.com/tube-jeonghoon/git-test.git
  HEAD branch: master
  Remote branch:
    master tracked
  Local branch configured for 'git pull':
    master merges with remote master
  Local ref configured for 'git push':
    master pushes to master (up to date)

원격 저장소 수정 및 삭제 ( git remote rename )

git remote rename명령어를 사용하면 저장소의 이름을 변경할 수 있다.

$ git remote rename tube wow-tube
$ git remote
origin
wow-tube

git remote rm 명령어로 저장소를 삭제할 수도 있다.

$ git remote rm origin
$ git remote
wow-tube

태그 사용하기 ( git tag )

Git에는 tag를 지원한다. 보통 릴리스할 때 사용한다.

태그 조회하기 ( git tag )

git tag명령어로 현재 있는 태그를 확인 할 수 있다

$ git tag

태그 붙이기

Git 태그에는 Annotated 태그와 Lightweight 태그 두 가지 종류가 있다.

Lightweight 태그

브랜치처럼 가리키는 지점을 최신커밋으로 이동시키지 않는다. 단순히 특정 커밋에 대한 포인터 역활만 한다.

$ git tag v1.4-tube
$ git show v1.4-tube

Annotated 태그

Git 데이터베이스에 태그를 만든 사람의 이름, 이메일과 태그를 만든 날짜, 태그 메시지도 저장하며 -a 옵션과 -m 옵션이 있다. Annotated 태그를 추가할 때 -a를 붙이고 -m으로 태그 메시지도 함께 저장할 수 있다.

$ git tag -a v1.4-tube -m "my version 1.4"
$ git show v1.4

나중에 태그 하기

이전 커밋에 태그를 붙일 때가 발생할 수도 있다. git tag -a [태그 이름] [커밋 체크 섬]으로 추가할 수 있다. 커밋 체크 섬 값은 길어서 전부 쓸 수 없다면 일부만 적어줘도 된다.

$ git log --pretty=oneline
74ddcfee4306cdfe416764814597a8a0161f1eab (HEAD -> master, tag: v1.4-tube, tag: v1.4, wow-tube/master) add testfile.md
347ec386a0deb178c8f4af00def1ec7c3a93f30c Update README.md
bd1e8dd285d7f1f0ba3d7948888b8dcf8a682c16 first commit

$ git tag -a v1.3 -m "my version 1.3" 347e
$ git log --pretty=oneline
74ddcfee4306cdfe416764814597a8a0161f1eab (HEAD -> master, tag: v1.4-tube, tag: v1.4, wow-tube/master) add testfile.md
347ec386a0deb178c8f4af00def1ec7c3a93f30c (tag: v1.3) Update README.md
bd1e8dd285d7f1f0ba3d7948888b8dcf8a682c16 first commit

Update README.md 커밋에 tag가 성공적으로 붙었다.

git 단축어 설정 ( git alias )

명령어를 alias에 등록해 간단하게 쓸 수 있다. git config --global명령어를 쓰면 된다. 해당 프로젝트에서만 쓰고 싶음면 --global 옵션은 빼도 무방하다.

$ git config alias.st status
$ git st
On branch master
Your branch is up to date with 'wow-tube/master'.

nothing to commit, working tree clean

몇 가지 자주 등록해 두면 편한 단축키이다.

$ git config alias.last 'log -1 HEAD' // 마지막 커밋 출력
$ git config alias.untracked 'restore --staged'
$ git config --global alias.logl 'log --oneline --decorate --graph --all'

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install libgl1-mesa-glx libegl1-mesa libxrandr2 libxrandr2 libxss1 libxcursor1 libxcomposite1 libasound2 libxi6 libxtst6

anaconda 다운로드

https://www.anaconda.com/products/individual#download-section 해당 사이트에서 아나콘다 버전 확인 후 다운로드

$ wget https://repo.anaconda.com/archive/Anaconda3-2020.11-Linux-x86_64.sh

anaconda 설치

$ zsh Anaconda3-2020.11-Linux-x86_64.sh

환경변수 설정

쉘 확인

$ echo $SHELL
/usr/bin/zsh

환경변수 추가

~/.zshrc 및 ~/.bashrc파일에 해당 내용추가

export PATH=$HOME/anaconda3/bin:$PATH

환경변수 적용

$ source ~/.zshrc
$ source ~/.bashrc

conda init

$ conda init zsh

현재 실행 중인 터미널을 재실행 시켜야 한다.

설치 완료 확인

$ conda --version
conda 4.9.2

앞으로 velog에 기술문서를 작성할 예정이다. 일단 마크다운 문법부터 익혀야 되는데 일단은 문서로 작성해 두고 써야겟다.

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 마크다운 문법은 읽기도 쉽지만 쓰기도 쉽다는 장점이 있다. 확장자는 .md를 쓴다.

제목

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목의 수준과 서식을 결정한다.

강조

__내용__
_내용_
~~내용~~

내용

내용

내용

목록

1. 순서가
- 순서가
2. 필요한
* 필요하지
3. 목록
+ 않은 목록

1. 순서가

• 순서가

2. 필요한

• 필요하지

3. 목록

• 않은 목록

링크

[google](https://google.com)
[python](https://www.python.org "파이썬 홈페이지 입니다.")
[facebook][facebook link]
[youtube][1]

내용 

[facebook link]: https://www.facebook.com
[1]: https://youtube.com

google

python

facebook

youtube

내용

이미지

![대체텍스트](https://media.routard.com/image/67/1/fb-canada-parcs.1473671.jpg)

코드

`markdown`은 정말 쉽습니다.

markdown은 정말 쉽습니다.

코드블럭

var userId = 1
var userName = 'Tube'

var user = { id:1, name:'Tube' }
var users = [
    { id:1, name:'Tube' },
    { id:2, name:'jeonghoon' }
]

$ cat /etc/passwd

표

| value | name | color |
|---|:---:|---:|
| 1 | TUBE | `Brown` |
| 2 | MUZI | White |
| 3 | APEACH | Pink |
| 4 | FRODO | Brown |

인용

> 이것은 인용문 입니다.
>> 이렇게 중첩해서 사용할수도 있어요.

이것은 인용문 입니다.

이렇게 중첩해서 사용할수도 있어요.

수평선

---
***
___