멋사 D+2 환경 설정 + Git + CLI

첫 수업이라 환경설정에 시간이 많이 들었다.

단축키 숙지해서 마우스사용 줄이고 키보드사용해서 효율성 높이자!

전에는 뭣도 모르고 썼던 것들을 자세하게 설명해주셔서 이제는 왜 이런 명령어를 사용하는지 이해가 되고 너무 좋다.. CLI어렵다고 생각했는데 생각보다 효율적인 부분이 많아서 익숙해지도록 열심히 연습해야겠다. 수업 열심히 듣자!

 

웹 브라우저 확장 프로그램(Extensions)

• Web Developer
• HeadingsMap

• tota11y for Chrome

• VisBug

• OpenWAX

 

코드 에디터(Code Editor) 

Visual Studio Code

https://code.visualstudio.com/

Visual Studio Code 확장 프로그램

• Korean Language Pack for Visual Studio Code
• Live Server
• Auto Complete Tag
• Auto Rename Tag
• vscode-icons
• Monokai-Contrast Theme
  
  

 

Node.js

https://nodejs.org/en/

 

Node.js 장기 지원 버전(LTS) 설치 방법

Mac OS

Mac용 Node.js 버전 매니저인 nvm을 설치한 후, 장기 지원 버전(LTS)을 로컬 드라이브에 설치합니다.

curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh> | bash

nvm install --lts

Windows

Windows용 패키지 매니저 Chocolatey를 사용해 Node.js 버전 스위처(nvs)를 설치하고 Node.js 장기 지원 버전(LTS)을 로컬 드라이브에 설치합니다. (Chocolatey 설치 → 참고)

choco install nvs

nvs add lts
nvs use lts

https://github.com/coreybutler/nvm-windows

---

Git / Github

Git은 시간에 따른 파일의 변경 사항을 버전 별로 기록 관리하다가 추후 특정 시점의 버전으로 돌아갈 수 있도록 하는 버전 관리 시스템(Version Control System)의 한 종류이다.

버전 관리 시스템은 Git 이외에도 Mercurial, Subversion 등이 있고, Git의 장점으로는 저장소를 로컬 환경에서 관리할 수 있다는 점과 빠른 처리속도를 들 수 있다.

Github은 분산 버전 관리 시스템인 Git 저장소의 호스팅을 지원하는 웹 서비스다. 로컬에서 관리하고 있는 변경 이력을 온라인에서도 관리할 수 있도록 제공한다.

 

Git 최초 설정

# Git 사용자 ID
git config --global user.name "사용자이름"
# Git 사용자 Email
git config --global user.email 사용자메일
# Git Default Editor 설정 (Visual Studio Code)
git config --global core.editor "code --wait"

# windows와 Mac OS의 공백문자(줄바꿈) (Carriage return, Lind Feed)
# Windows 환경
git config --global core.autocrlf true
# Mac OS 환경
git config --global core.autocrlf input

 

또한 언제든지 설정 값을 'git config’라는 도구로 확인하고 변경할 수 있다.

# Git Confing 설정 확인하기
# 터미널에서 확인
git config --list
# 기본 에디터에서 확인
git config --global -e

 

Git이 관리하는 저장소의 기본 브랜치가 master일 경우 main으로 변경할 수 있다.

# git init 명령으로 생성된 저장소의 기본 브랜치가 master일 때 main으로 브랜치명을 변경
git branch -m main

# git init 명령으로 Git 저장소를 초기화 시킬 때 브랜치가 main이 되도록 설정
git init -b main

# 로컬 환경에서 git init 명령을 통해 Git 저장소를 초기화하면 기본 브랜치가 main이 되도록 설정 
git config --global init.defaultBranch main

 

Git 참고서

Git 간편안내서

https://rogerdudler.github.io/git-guide/index.ko.html

Git 입문

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

Pro Git

Book

 

Git Command

오늘 배운 git command

git init : 저장소 생성

# 현재 디렉토리를 Git 저장소로 생성
# .git 폴더(숨김 폴더)가 생성됨
git init

git status : 현재 상태 확인

git status

# 변경된 파일명이 빨간색으로 보일 경우 Working Directory 상태
# 변경된 파일명이 초록색으로 보일 경우 Staging Area 상태
# nothing to commit, working tree clean의 경우 변경 내용이 없음을 나타냄

git add : 파일의 변경 사항을 index(Staging Area)에 추가

# 특정 파일을 Staging Area에 추가하기
git add <file>
# 변경 내용이 있는 모든 파일을 Staging Area에 추가하기
git add *
git add .

git restore <file> : 작업 내용 취소

# Working Directory에 변경 내용을 취소할 경우(Tracked File) 
git restore <file>
# Staging Area에 변경 내용을 Working Directory로 되돌릴 경우
git restore --staged <file>

git commit -m  : 파일의 변경 사항에 대한 이력 생성

# 마지막 커밋 메시지 수정
git commit --amend "수정할 커밋 메시지"
또는
git commit --amend
# VS Code에 COMMIT_EDITMSG 창에 수정할 커밋 메시지 입력 후 창 닫기

git log : 커밋 이력 확인

# Log를 한줄, 그래프 형태로 보기
git log --oneline
git log --oneline --graph

git checkout HEAD~ : 과거 커밋 이력 확인

# 이전 2개의 커밋으로 이동
git checkout HEAD~2
# 특정 커밋으로 이동
git checkout <hash>
# 마지막 커밋으로 복귀
git checkout main

git remote : 리모트(Remote) 브랜치

# 리모트 브랜치 조회
git remote -v
# 리모트 브랜치 추가
git remote add origin <https://github.com/ID/REPOSITORY>
# 리모트 브랜치 삭제
git remote remove origin
git remote rm origin

git push : 로컬의 변경 이력을 리모트로 전송

# 로컬의 main 브랜치의 변경 이력을 리모트 main 브랜치로 보내기
git push origin main

---

CLI(Command Line Interface)

CLI(명령줄 인터페이스)는 디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경이다. 운영체제는 기본적으로 CLI를 제공하고 있으며 Windows의 경우 CMD(Command Prompt)를 Mac OS나 Ubuntu의 경우 Terminal을 사용하여 명령어를 통해 일련의 작업을 진행할 수 있다. 그러나 Windows의 CMD와 Mac OS의 Terminal에서 지원하는 CLI 명령어가 다르기 때문에 각 운영체제 환경에 맞는 명령어를 학습하는 것이 필요하다.

예를 들어 파일을 삭제할 때 Windows의 CMD에서는 del 명령을 Mac Os의 Terminal에서는 rm 명령을 사용해야한다. 만약 Windows와 Mac OS, Ubuntu에서 동일한 CLI 명령(Unix/Linux 명령어)을 사용하고자 한다면 Windows는 Git bash나 WSL(Windows Subsystem for Linux)을 사용할 수 있다.

 

CLI 주요 명령어

 

1. 현재 작업중인 폴더 확인

pwd : print working directory

현재 작업중인 폴더의 절대경로가 출력

2. 폴더 생성

mkdir : Make Directory

mkdir {디렉토리 이름}

• mkdir Frontend: 현재 폴더에 Frontend폴더를 생성

3. 디렉토리 이동

cd : change Directory

cd {디렉토리 경로}

• cd . - 현재 디렉토리 (생략 가능)
• cd .. - 상위 경로로 한 단계 이동
• cd ../.. - 상위 경로로 두 단계 이동
• cd ~/Desktop - 데스크탑 디렉토리로 바로 이동

4. 디렉토리 및 파일 목록 출력

ls : List Segments

ls {디렉토리 경로}{옵션}

• ls ~/Frontend/assets : Frontend/assets 폴더의 하위 폴더 목록을 출력
• ls -l ~/Frontend/assets : 폴더 목록을 출력할 때 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시
• ls -a ~/Frontend/assets : 폴더 목록을 출력할 때 숨겨진 항목을 포함하여 모든 내용을 출력
• ls -al ~/Frontend/assets : 폴더 목록을 출력할 때 숨겨진 항목을 포함하여 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시

5. 파일 생성

touch : 빈 파일을 생성할 경우

echo : 간단한 내용이 들어있는 파일을 생성할 경우

• $ touch index.html: 내용이 없는 빈 index.html파일 생성
• $ echo 'let me = "Frontend Developer"' > js/index.js
• js 폴더안에  `let me = "Frontend Developer"` 라는 코드가 삽입된 `index.js`파일 생성

6. 파일 내용 확인하기

cat : Concatenate

• cat js/index.js : index.js파일의 내용을 화면에 출력
• cat index.js app.js : index.js파일의 내용으로 app.js파일 내용 덮어쓰기

7. 파일/(비어있지 않은)디렉토리 삭제

rm : Remove

rm {제거할 파일/디렉토리 이름}

• rm index.html : index.html파일 삭제
• rm -r js : js폴더 내부 하위 디렉토리까지 모두 삭제
• $ rm -rf assets : assets폴더 안의 하위 디렉토리까지 모두 삭제하되, 경고를 나타내지 않음

8. 디렉토리 제거

rmdir : Remove Directory

rmdir {제거할 디렉토리 이름}

• $rmdir js: js 폴더 삭제

9. 파일/디렉토리 이동 및 이름 변경

mv : Move(이미 존재하는 파일/디렉토리의 경우 이름 변경이 가능)

• mv index.html views/index.html: index.html 파일을 views폴더로 이동
• mv js/index.js js/app.js :js 폴더에 있는 index.js 파일명을 app.js로 변경

10. 파일/디렉토리 복사

cp : Copy

• cp index.html main.html:index.html파일을 동일한 폴더에 복사한 후 파일명을 main.html 로 변경
• cp index.html views/main.html :index.html파일을 views 폴더에 복사한 후 파일명을  main.html 로 변경

---

CLI 연습

 

~ (master)
$ cd

~ (master)
$ pwd
/c/Users/사용자

 ~ (master)
$ mkdir likeLion

4 ~ (master)
$ ls
 likeLion/
'시작 메뉴'@

 ~ (master)
$ cd likeLion

 ~/likeLion (master)
$ mkdir src src/assets src/css src/js

 ~/likeLion (master)
$ cd src

 ~/likeLion/src (master)
$ ls
assets/  css/  js/

 ~/likeLion/src (master)
$ cd ..

 ~/likeLion (master)
$ cd src/css

 ~/likeLion/src/css (master)
$ ls

 

Git CLI 연습

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ git config --global -e

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ mkdir test

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ rm test
rm: cannot remove 'test': Is a directory

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ rmdir test

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ cd likeLion
bash: cd: likeLion: No such file or directory

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ ls
src/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ mkdir git-study

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ cd git-study/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (master)
$ git init
Initialized empty Git repository in C:/Users//likeLion/git-study/.git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (master)
$ ls

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (master)
$ ls -a
./  ../  .git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (master)
$ git branch -m main

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ cd

@LAPTOP-KJ2JKB05 MINGW64 ~ (master)
$ cd likeLion

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ mkdir git-practices && cd $_

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
Initialized empty Git repository in C:/Users//likeLion/git-practices/.git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init -b main
warning: re-init: ignored --initial-branch=main
Reinitialized existing Git repository in C:/Users//likeLion/git-practices/.git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ ls -a
./  ../  .git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ rm -r .git

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init -b main
Initialized empty Git repository in C:/Users//likeLion/git-practices/.git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (main)
$ rm -r .git

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git config --global init.defaultBranch main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
fatal: invalid branch name: init.defaultBranch = main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
fatal: invalid branch name: init.defaultBranch = main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ rm -r .git

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
fatal: invalid branch name: init.defaultBranch = main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ rm -r .git

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git config --global init.defaultBranch main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ rm -r .git
rm: cannot remove '.git': No such file or directory

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
fatal: invalid branch name: init.defaultBranch = main~

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ rm -r .git

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (master)
$ git init
Initialized empty Git repository in C:/Users//likeLion/git-practices/.git/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (main)
$ cd likeLion
bash: cd: likeLion: No such file or directory

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-practices (main)
$ cd

@LAPTOP-KJ2JKB05 MINGW64 ~ (master)
$ cd likeLion

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ cd git-
git-practices/ git-study/     

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion (master)
$ cd git-study/

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ echo 'hello world' > hello.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)    

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ echo 'frontend' > web.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)    
@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)        
$ git status
On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" " to track)                                                        to track)    

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)        
$ git add hello.txt
warning: in the working copy of 'hello.txt', LF will be replaced by CRLF the next time Git touches it  

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git init
Reinitialized existing Git repository in C:/Users//likeLion/git-study/.git/
@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git add hello.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main

No commits yet

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

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


@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git commit -m "hello world라는 텍스트 입력"
[main (root-commit) 2982c1d] hello world라는 텍스트 입력
 1 file changed, 1 insertion(+)
 create mode 100644 hello.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git add web.txt
warning: in the working copy of 'web.txt', LF will be replaced by CRLF the next time Git touches it

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   web.txt


@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git commit -m "frontend 텍스트 입력"
[main 61f9072] frontend 텍스트 입력
 1 file changed, 1 insertion(+)
 create mode 100644 web.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main
nothing to commit, working tree clean

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git log
commit 61f907230482a96a3683a00d1e1ee58f2e2e6ef3 (HEAD -> main)
Author: 
Date:   Tue Nov 29 14:09:27 2022 +0900

    frontend 텍스트 입력

commit 2982c1db98c3e4a7e3ae21fe644c7caceb289a31
Author: 
Date:   Tue Nov 29 14:07:07 2022 +0900

    hello world라는 텍스트 입력
    
@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git log --oneline
61f9072 (HEAD -> main) frontend 텍스트 입력
2982c1d hello world라는 텍스트 입력

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ echo 'hi lion' >> hello.txt

@LAPTOP-KJ2JKB05 MINGW64 ~/likeLion/git-study (main)
$ git status
On branch main
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:   hello.txt

no changes added to commit (use "git add" and/or "git commit -a")