🐷전동준(Jeon DongJun)

Go with the flow

[Git]git특강 1일차 정리

Today I Learned(TIL)📌 (2021.12.30)

CLI 기초

[1] Git 설치

(1) Windows (윈도우)

  • Git 설치 후 윈도우 탐색기를 엽니다.(윈도우키 + e)
  • C:/사용자(Users)/현재 사용자 계정로 이동합니다.
  • 폴더 내 빈 공간에서 마우스 우클릭 후 Git Bash Here를 클릭합니다.
  • Git Bash 창에 아래 화면처럼 HOME 폴더를 의미하는 ~ 표시만 있다면 정상입니다. (~표시가 없거나, 뒤에 글자가 추가적으로 나타난다면 잘못된 경로일 수 있습니다.)image-20211230161332340

(2) Mac (맥)

  • Git이 기본적으로 내장 되어 있기 때문에, 별도의 설치가 필요 없습니다.
  • Spotlight (검색)를 엽니다. (화면 우측 상단의 돋보기 혹은 command + spacebar)
  • terminal을 검색하여 터미널을 엽니다.
  • 터미널을 열면 기본적으로 HOME 폴더로 경로가 설정 되어 있습니다.(/Users/현재 사용자 계정)

[2] GUI vs CLI

(1) GUI와 CLI의 정의

image-20211230161624418

왼쪽이 GUI, 오른쪽이 CLI 입니다. 화면에 나타나는 모습만 다를 뿐, 결국 같은 일을 합니다.

  1. GUI (Graphic User Interface) :

    그래픽을 통해 사용자와 컴퓨터가 상호 작용하는 방식

  2. CLI (Command Line Interface) :

    터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식

Interface(인터페이스)

인터페이스란 원래 서로 다른 개체끼리 맞닿아 있는 면을 뜻합니다.

여기에서는 사용자와 컴퓨터가 서로 소통하는 접점이라고 이해하도록 합시다.

(2) CLI를 사용하는 이유

new라는 이름으로 새 폴더를 생성해봅시다.

  1. GUI를 사용하는 경우 (4단계) : 마우스 우클릭 → 새로 만들기 → 폴더 → new 작성

  2. CLI를 사용하는 경우 (1단계) : mkdir new

GUI는 CLI에 비해 사용하기 쉽지만 단계가 많고 컴퓨터의 성능을 더 많이 소모합니다.

그리고 CLI는 GUI로는 불가능한, 많은 세부적인 기능을 사용할 수 있습니다.

따라서, 이후 수업 진행은 CLI를 기반으로 진행하며, CLI에 익숙해지는 시간을 가집니다.

그렇다면 GUI는 왜 존재하나요?

옛날에는 컴퓨터를 사용하기 위해서는 CLI 환경에서만 가능했습니다.

그렇기 때문에 컴퓨터를 잘 아는 소수의 사람들만 사용할 수 있었는데요.

GUI가 등장하면서 많은 사람들이 더 쉽게 컴퓨터를 사용할 수 있게 되었고

오늘 날 PC라는 개념으로 컴퓨터가 대중화 될 수 있었던 주요 요인 중 하나입니다.

(3) Git Bash를 사용하는 이유

image-20211230224227932

Windows에는 CLI 환경인 Powershell과 명령 프롬프트가 이미 존재합니다.

하지만 왜 Git Bash라는 것을 사용할까요?

  1. 명령어의 통일을 위해서 입니다.
    • UNIX 계열 운영체제의 명령어와 Windows의 명령어의 차이가 존재합니다.
    • 따라서 Git Bash라고 하는 일종의 번역기를 통해 Windows에서도 UNIX 계열 운영체제의 터미널 명령어를 사용하기 위함입니다.
  2. UNIX 계열 운영체제의 명령어를 더 많이 쓰기 때문입니다.
    • 개발자 입장에서는 Windows보다는 UNIX 계열 운영체제 기반의 프로그램이 훨씬 많습니다.
    • 그만큼 개발 시장에서는 UNIX 계열 운영체제가 더 많이 사용되기 때문에, Git Bash를 통해서 UNIX 계열 운영체제의 터미널 명령어를 연습합니다.

[3] 경로

(1) 루트, 홈 디렉토리

  1. 루트 디렉토리 (Root Driectory, /)
    • 모든 파일과 폴더를 담고 있는 최상위 폴더입니다.
    • Windows의 경우 보통은 C 드라이브를 의미합니다.
2. 홈 디렉토리 (Home Directory, ~) 
 * `Tilde(틸드)`라고도 부르며, 현재 로그인 된 사용자의 홈 폴더를 의미합니다.
 * Windows의 경우 `C:/사용자(Users)/현재 사용자 계정`을 의미합니다.
 * Mac의 경우 `/Users/현재 사용자 계정`을 의미합니다.

폴더 vs 디렉토리

폴더와 디렉토리는 거의 같은 의미로 사용됩니다. 따라서 의미의 구분이 무의미합니다.

세부적으로 따져보자면, 윈도우 탐색기에서의 특수 폴더 들(ex. 네트워크 환경, 내컴퓨터 등)은 폴더이지만 디렉토리는 아닙니다. 따라서 폴더가 디렉토리보다 넓은 개념이라고 할 수는 있겠습니다.

(2) 절대 경로와 상대 경로

  1. 절대 경로 : 루트 디렉토리부터 목적 지점까지 거치는 모든 경로를 전부 작성한 것
    • 윈도우 바탕 화면의 절대 경로 C:/Users/kyle/Desktop
  2. 상대 경로 : 현재 작업하고 있는 디렉토리를 기준으로 계산된 상대적 위치를 작성한 것
    • 현재 작업하고 있는 디렉토리가 C:/Users라고 한다면
    • 윈도우 바탕 화면으로의 상대 경로는 kyle/Desktop이 됩니다.
    • 간결해서 좋지만, 현재 작업하고 있는 디렉토리가 변경 되면 상대 경로도 변경됩니다.
    • ./ : 현재 작업하고 있는 폴더를 의미합니다.
    • ../ : 현재 작업하고 있는 폴더의 부모 폴더를 의미합니다.

[4] 터미널 명령어

  1. touch

    • 파일을 생성하는 명령어
    • 띄어쓰기로 구분하여 여러 파일을 한꺼번에 생성 가능합니다.
    • 숨김 파일을 만들기 위해서는 .을 파일 명 앞에 붙입니다.
    $ touch text.txt

  2. mkdir

    • make directory
    • 새 폴더를 생성하는 명령어
    • 띄어쓰기로 구분하여 여러 폴더를 한꺼번에 생성 가능합니다.
    • 폴더 이름 사이에 공백을 넣고 싶다면 따옴표로 묶어서 입력합니다.
    $ mkdir folder
$ mkdir 'happy hacking'

  3. ls

    • list segments
    • 현재 작업 중인 디렉토리의 폴더/파일 목록을 보여주는 명령어
    • -a : all 옵션. 숨김 파일까지 모두 보여줍니다.
    • -l : long 옵션. 용량, 수정 날짜 등 파일 정보를 자세히 보여줍니다.
    # 기본 사용
$ ls
   
# all 옵션
$ ls -a
   
# all, long 옵션 함께 적용
$ ls -a -l
   
# 여러 옵션 축약 가능
$ ls -al

  4. mv

    • move
    • 폴더/파일을 다른 폴더 내로 이동하거나 이름을 변경하는 명령어
    • 단, 다른 폴더로 이동할 때는 작성한 폴더가 반드시 있어야 합니다. 없으면 이름이 바뀝니다.
    # text.txt를 folder 폴더 안에 넣을 때
$ mv text.txt folder
   
# text1.txt의 이름을 text2.txt로 바꿀 때
$ mv text1.txt text2.txt

  5. cd

    • change directory
    • 현재 작업 중인 디렉토리를 변경하는 명령어
    • cd ~를 입력하면 홈 디렉토리로 이동합니다. (단순히 cd라고만 입력해도 동일합니다.)
    • cd ..를 입력하면 부모 디렉토리로 이동합니다. (위로 가기)
    • cd -를 입력하면 바로 전 디렉토리로 이동합니다. (뒤로 가기)
    # 현재 작업 중인 디렉토리에 있는 folder 폴더로 이동
$ cd folder
   
# 절대 경로를 통한 디렉토리 변경
$ cd C:/Users/kyle/Desktop
   
# 상대 경로를 통한 디렉토리 변경
$ cd ../parent/child

  6. rm

  • remove
  • 폴더/파일 지우는 명령어
  • GUI와 달리 휴지통으로 이동하지 않고, 바로 완전 삭제합니다.
  • *(asterisk, wildcard)를 사용해서 rm *.txt라고 입력하면 txt 파일 전체를 다 지웁니다.
  • -r : recursive 옵션. 폴더를 지울 때 사용합니다.
   $ rm text.txt
   $ rm -r floder

  1. start, open

    • 폴더/파일을 여는 명령어
    • Windows에서는 start를, Mac에서는 open을 사용할 수 있습니다.
    # Windows
$ start test.txt
   
# Mac
$ open test.txt

  2. 유용한 단축키

    • 위, 아래 방향키 : 과거에 작성했던 명령어 조회
    • tab : 폴더/파일 이름 자동 완성
    • ctrl + a : 커서가 맨 앞으로 이동
    • ctrl + e : 커서가 맨 뒤로 이동
    • ctrl + w : 커서가 앞 단어를 삭제
    • ctrl + l : 터미널 화면을 깨끗하게 청소 (스크롤 올리면 과거 내역 조회 가능)
    • ctrl + insert : 복사
    • shift + inser : 붙여넣기


Visual Studio code

[1]Visual Studio Code 시작하기

(1) 설치 하기

  • vscode 설치 페이지를 참고하여 설치를 진행합니다.

Visual Studio Code 왜 쓰나요?

- Vscode는 마이크로소프트에서 개발한 코드 에디터의 한 종류입니다.

- Windows, Mac, Linux를 모두 지원합니다.

- 기존 개발 도구들 보다 가볍고 빠르다는 장점이 있습니다.

- 전 세계에서 사랑 받는 굉장한 점유율의 에디터입니다.

- Extension을 통해 다양한 기능을 설치할 수 있어서, 무한한 확장성을 가집니다.

- 게다가 무료로 사용 가능합니다.

(2) vscode 열기

  1. 홈 디렉토리(~)에서 Git Bash 혹은 Terminal을 엽니다.
  2. 실습을 진행 할 폴더를 생성합니다.
$ mkdir git-pracitce
  1. 방금 생성한 폴더로 터미널 작업 위치를 변경합니다.
$ cd git-practice
  1. 현재 작업 폴더(실습 폴더)에서 vscode를 엽니다.
$ code .
  1. vscode를 열었을 때 다음과 같이 나오는 경우 Yes, I trust the authors를 클릭

image-20211231004143134

  1. vscode 왼쪽 메뉴바에서 A4 용지 두장이 겹쳐져 있는 아이콘을 클릭합니다. 현재 작업중인 폴더의 파일/폴더의 목록이 출력됩니다.image-6

현재 git-pracitce 폴더는 빈 폴더라서 아무 것도 나오지 않습니다.

[2]Vscode extensions

(1) Extensions란?

  • 익스텐션이란 기본 기능에서 확장하여 추가적인 기능을 가능하게 하는 일종의 플러그인입니다.

  • vscode를 열고 왼쪽 메뉴바에서 블럭 모양의 아이콘을 통해 익스텐션 창을 열 수 있습니다.

    image-20211231004405831

처음부터 모든 기능을 갖추면 되지, 왜 익스텐션을 쓰나요?

물론, 처음부터 모든 기능을 갖춘다면 일일히 익스텐션을 설치 하지 않아도 될 것입니다.

하지만 그만큼 불필요한 기능도 많아서 필요 이상으로 에디터가 무거워집니다.

vscode는 사용자가 필요한 기능을 익스텐션을 통해 추가 설치 할 수 있도록 지원하여

가벼우면서도 다양한 작업을 할 수 있는 환경을 제공하고 있습니다.

(2) Extensions 설치

  1. 한국어 팩 : vscode 기본 언어를 한국어로 변경할 수 있습니다.

    설치 이후, vscode를 껐다 켜야 적용됩니다.

    image-20211231004621371

    익스텐션 검색창에 korean을 검색한 후, 가장 위에 있는 익스텐션을 install 합니다.

  2. Markdown all in one : 마크다운 문법을 실시간으로 변환해서 보여줍니다.

    이후 마크다운 문법 수업 과정에서 사용할 수 있습니다.

    image-20211231004733035

    익스텐션 검색창에 markdown all in one을 검색한 후, 가장 위에 있는 익스텐션을 install 합니다.

[3] Vscode 터미널 사용

지금가지는 Git Bash 혹은 Terminal과 작업 폴더를 직접 옆에 띄워 놓고 수업을 진행했습니다.

이제부터는 vscode에서 모든 수업과 실습을 진행합니다.

(1) 기본 터미널 지정

  1. vscode 화면에서 터미널을 엽니다.

    • vscode 화면 상단 → Terminal → New Terminal

    • 혹은 단축키 ctrl + ``(backtick, 백틱)`를 통해 터미널을 열고 닫을 수 있습니다.

      image-20211231005020806

      백틱은 숫자 1의 왼쪽에 있습니다. 물결 표시와 함께!

  2. 기본 터미널을 powershell → Git Bash로 바꾸기 (Windows)

    • 현재 Windows는 vscode에서 터미널을 열 때, 기본적으로 Powershell이 설정 되어 있습니다.

    • 아래 사진에 쓰인 숫자 순서대로 클릭합니다. (아래 화살표 → 기본 프로필 선택)

      image-20211231005227102

    • 상단에 나타난 여러 터미널 목록 중 Git Bash를 클릭합니다.

      image-20211231005256412

    • 이후 기존에 떠있는 Powershell을 휴지통 버튼을 눌러서 삭제합니다. (X가 아니라 휴지통)

      image-20211231005337382

    • 그리고 다시 터미널 열면! Git Bash로 기본 터미널이 설정된 것을 확인할 수 있습니다.

      image-20211231005424255

터미널을 닫을 때 X(닫기)와 휴지통의 차이

X(닫기) 버튼은 터미널의 내용은 유지하고 잠시 숨겨두는 것입니다. (Close panel)

휴지통 버튼은 터미널을 아예 삭제하는 것입니다. (Kill terminal)

따라서 가독성을 위해 잠시 닫아 놓을 때는 X(닫기) 버튼을,

터미널을 삭제하고 싶을 때는 휴지통 버튼을 사용해야 하는 점 잊지 마세요!

(2) vscode에서 터미널 명령어 사용해보기

  • CLI 수업에서 학습했던 터미널 명령어를 vscode에서 실습해 봅니다.

  • 터미널에서 명령어를 입력했을 때, 왼쪽 파일 트리의 변화를 잘 관찰해 봅니다.

  • 예시

    image-20211231005735812

    vscode 터미널에서 작성한 명령어가 파일 트리에 어떤 영향을 끼치는지 살펴봅니다.


Markdown

[1] Typora 시작하기

  • Typora 설치 페이지를 참고하여 설치를 진행합니다.

Typora 왜 쓰나요?

- Typora는 마크다운 문법을 읽고 쓰기 위한 일종의 메모장입니다.

- 마크다운 형태로 즉시 변환이 되기 때문에 직관적으로 글 작성이 가능합니다.

- 목차, 표와 같은 복잡한 기능을 손쉽게 만들 수 있도록 도와줍니다.

- 특히 이미지 삽입과 관련해서 상당히 편리합니다.

[2] Markdown

(1) 마크다운이란?

  • 일반 텍스트 기반의 경량 마크업(Markup) 언어
  • 마크업과 반대 개념이 아니라, 마크업을 더 쉽고 간단하게 사용하고자 만들어졌습니다.
  • .md 확장자를 가지며, 개발과 관련된 많은 문서는 마크다운 형식으로 작성되어 있습니다.
  • 개발 분야에 있어서 문서화는 굉장히 중요한 능력입니다. 마크다운은 그 토대가 될 것입니다.

**마크업(Markup)이란 무엇인가요?

마크업 언어는 말 그대로 마크(Mark)로 둘러싸인 언어입니다.

여기서 마크(Mark)란 글의 역할을 지정하는 일종의 표시와 같습니다.

예를 들면 HTML에서 M이 의미하는 것은 Markup 입니다. 즉 HTML도 마크업 언어입니다.

HTML에서 제목을 표시할 때는 <h1>제목1</h1>과 같이 작성합니다.

제목1을 둘러싸고 있는 <h1>을 태그(tag)라고 말하며, 마크 역할을 합니다.

각각의 글이 제목, 내용, 목록, 인용 등등 어떤 역할을 가지고 있는지 표시하는 것입니다.

(2) 마크다운의 장점,단점,주의사항

  1. 장점
    • 문법이 직관적이고 쉽습니다.
    • 관리가 쉽습니다.
    • 지원 가능한 플랫폼과 프로그램이 다양합니다.
  2. 단점
    • 표준이 없어 사용자마다 문법이 상이할 수 있습니다.
    • 모든 HTML 마크업 기능을 대신하지는 못합니다.
  3. 주의사항
    • 마크다운의 본질은 글에게 역할을 부여하는 것입니다.
    • 따라서 반드시 역할에 맞는 마크다운 문법으로만 작성해야 합니다.
    • 예를 들면 글씨의 크기를 키우고 싶다는 이유로 내용에게 제목의 역할을 부여하면 안됩니다. (이 부분은 마크다운 문법을 학습하면서 자연스럽게 이해할 수 있습니다.)

(3) 마크다운 문법

  1. 제목 (Headings)

    • h1 ~ h6에 해당하는 제목을 표현합니다.

    • #을 사용합니다.

    • 작성

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

    • 결과

      image-20211231013025875

  2. 목록 (List)

    • 순서가 없는 목록과 순서가 있는 목록을 표현합니다.

    • 순서가 없는 목록은 _*+를 사용합니다.

    • 순서가 있는 목록은 1.2.3.과 같은 숫자를 사용합니다.

    • tab 키를 이용해서 들여쓰기를 할 수 있습니다.

    • 작성

      - 순서가 없는 목록
  - 서브 목록
  - 서브 목록
       
+ 순서가 없는 목록
  + 서브 목록
  + 서브 목록
       
* 순서가 없는 목록
  * 서브 목록
  * 서브 목록
       
1. 순서가 있는 목록
  1. 서브목록
  2. 서브목록
       
2. 혼합 해보기 1
  - 순서 없음
  + 순서 없음
  * 순서 없음
3. 혼합 해보기 2
  1. 순서 있음
  - 순서 없음
  1. 순서 있음

    • 결과

      image-20211231013240731

  3. 강조 (Emphasis)

    • 글자의 스타일링을 표현합니다.

    1. 기울임 : *글자* 혹은 _글자_

    2. 굵게 : **글자** 혹은 __글자__

    3. 취소 : ~~글자~~

      • 작성

        *이탤릭체1*
_이탤릭체2_

**볼드체1**
__볼드체2__

~~취소선~~

      • 결과

        image-20211231013325932

  4. 코드 (Code)

    • 한 줄 코드인 인라인 코드와 여러 줄 코드인 블록 코드로 나눌 수 있습니다
    1. 인라인(Inline)코드 : ``inline code` 처럼 백틱을 통해 코드를 감싸줍니다.
    2. 블록(Block) 코드 : ``````python```처럼 백틱을 3번 입력하고 코드의 종류를 작성합니다.

    • 작성

           파이썬의 print는 `print("Hello World!")` 과 같이 사용합니다.
          
     ```python
     for i in range(10):
     	print(i)
     ```
          
     ```bash
     $ touch test.txt
     ```
          
     ```
     Just plain text
     ```

    • 결과

      image-20211231013434828

  5. 링크 (Links)

    • 클릭하면 해당 주소로 이동할 수 있는 링크를 표현합니다.

    • [표시할 글자](이동할 주소) 형태로 작성합니다.

    • 작성

      [GOOGLE](https://google.com)을 눌러서 구글로 이동하세요.

    • 결과

      image-20211231013622565

  6. 이미지 (Images)

    • 마크다운 문서에 이미지를 삽입할 수 있습니다.

    • ![대체 텍스트](이미지 주소) 형태로 작성합니다.

    • 대체 텍스트란 이미지를 정상적으로 불러오지 못했을 때 표시되는 문구입니다.

    • Typora에서는 이미지 파일을 끌어와서 놓아도 자동 업로드됩니다.

    • 작성

      Git 로고입니다.
     
![Git로고](<https://git-scm.com/images/logo@2x.png>)

    • 결과

      img

  7. 인용 (Blockquote)

    • 주석이나 인용 문구를 표현합니다.

    • >를 사용합니다. 갯수에 따라 중첩이 가능합니다.

    • 작성

      > 인용문을 작성합니다.
>> 중첩된 인용문 1
>>> 중첩된 인용문 2
>>>> 중첩된 인용문 3
>>>>> 중첩된 인용문 4

    • 결과

      img

  8. 표 (Table)

    • 테이블(표)를 생성합니다.

    • 파이프( | )와 하이픈( - )을 이용해서 행과 열을 구분합니다.

    • 테이블 양쪽 끝의 파이프( | )는 생략 가능합니다.

    • 헤더 셀을 구분할 때는 3개 이상의 하이픈( - )이 필요합니다.

    • Typora에서는 ctrl + T를 통해서 쉽게 표 생성이 가능합니다.

    • 행을 늘릴 때는 ctrl + enter를 누릅니다.

    • 작성

      | 동물   | 종류   | 다리 개수 |
| ------ | ------ | --------- |
| 사자   | 포유류 | 4개       |
| 닭     | 조류   | 2개       |
| 도마뱀 | 파충류 | 4개       |

    • 결과

      img

  9. 수평선 (Horizontal Rule)

    • 구분 선을 생성합니다.

    • -*_을 3번 연속으로 작성합니다.

    • 작성

      ---
***
___

    • 결과

      img

[3] 실습

(1) TIL (Today I Learned)

  • TIL은 오늘 내가 배운 것을 기록하는 것입니다.

  • 현재까지 배운 것을 마크다운 문법을 활용하여 정리해 봅니다.

    (Git과 Github, 터미널 명령어, 마크다운 문법 등)

  • 홈 디렉토리에 TIL이라는 폴더를 만들고 그 안에 파일을 생성합니다.

  • TIL 모범 예시

    img

    출처

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

9 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑