학습 준비

Git, GitHub을 사용해 학습 준비를 합니다. (Git, Node.js, NPM 설치 | GitHub 계정 필요)

[CLI] / [GitHub] / [INSTALL] / [VSCode] 각 플래그(flags)에 맞춰 실습을 진행합니다.

• [CLI] 로컬 저장소 생성

• [CLI] 생성된 로컬 저장소로 이동

• [CLI] 버전 관리 시스템 초기화 (❖ Git 사용이 처음 경우, 최초 설정 필요)

• [CLI] README.md 문서 작성

• [CLI] 변경 사항 추가(add) & 커밋(commit)

Branch 이름이 master 인 경우, main 으로 변경합니다.

git branch -M main

Git 브랜치 main 수동 변경 방법

기존의 원격 저장소 master 브랜치 대신, main으로 이름을 변경할 경우, 다음과 같이 수행합니다.

# master 브랜치로 체크아웃 (현재 브랜치가 master인 경우 생략 )
$ git checkout master 
# 브랜치 이름 master → main 변경
$ git branch -M main 
# 원격 저장소 최신 커밋(변경 이력) 가져오기
$ git fetch
# origin/master 연결 해제
$ git branch --unset-upstream 
# origin/main 여결
$ git branch -u origin/main 
# 기본 브랜치를 origin/main으로 업데이트
$ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main

• [GitHub] 온라인 저장소 생성

• [CLI] 로컬 저장소 → 온라인 저장소 연결

git-open 패키지를 글로벌 설치하면 CLI 환경에서 바로 GitHub 저장소를 열 수 있습니다.

git open

Git LFS를 설치하면 대용량 파일(약 2GB) 또한 제한 없이 버전 관리할 수 있습니다. (참고)

git lfs install
git lfs track "*.psd"

• [CLI] code 커맨드 → VS Code 저장소 열기

구성 파일 추가

프로젝트를 Visual Studio Code 에디터에서 연 다음 이어서 진행합니다.

• [VSCode] 프로젝트 구성 파일 작성

프로젝트 루트 위치에 구성해야 할 파일 목록은 다음과 같습니다.

• .gitignore

• .gitattributes

• .editorconfig

• .htmlhintrc

• .prettierrc

• .prettierignore

• .vscode/settings.json

Git 에디터 등록

Git 기본 에디터를 Visual Studio Code로 설정합니다.

• [VSCode] Git 클라이언트 설정 기본 에디터 → "code --wait"

Git 기본 에디터로 VS Code가 설정되지 않을 경우, bin 위치를 직접 찾아 설정해줘야 합니다.

"/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code --wait"

Commit 규칙

Commit 작성 규칙 50/72에 맞춰 Visual Studio Code를 설정합니다. (참고)

• [VSCode] 커밋 메시지 에디터 규칙 50/72 설정

• 제목은 50자 내외 ( 마침표(.) 사용 ✘ )

• 제목과 본문은 빈 줄로 구분

• 본문은 한 줄에 72자 안으로 작성

• 본문은 "무엇"을, "왜", "어떻게" 작성했는 지 기술

settings.json

"[git-commit]": {
  "editor.fontFamily": "D2Coding",
  "editor.rulers": [50, 72]
}

• [VSCode] 변경 사항 추가 & 커밋

커밋 플래그	내용
추가 (Added)	새로운 내용이 추가된 경우
변경 (Changed)	기존 기능이 변경된 경우
중단 예정 (Deprecated)	더 이상 지원 예정이 없어 제거될 경우
수정 (Fixed)	버그가 발견되어 수정된 경우
취약점 (Security)	취약점이 발견된 경우

GitHub 푸시

GitHub 온라인 저장소에 프로젝트를 푸시합니다. (최초 푸시일 경우, -u 옵션 플래그 사용 필요)

• [VSCode] GitHub 원격 저장소에 푸시(push)

# Git pull/status에 대한 업스트림 설정
# -u, --set-upstream
git push -u origin main

Git 별칭 등록

손쉬운 Git 명령어 실행을 위해 원하는 별칭을 등록합니다.

• [VSCode] Git 별칭(alias) 등록

Git 글로벌 구성

Git 글로벌 설정 파일을 열어 보다 편하게 설정할 수 있습니다.

• [VSCode] Git 글로벌 설정 작성

code ~/.gitconfig

~/.gitconfig

[user]
  name  = 사용자 이름
  email = 사용자 이메일

[core]
  precomposeunicode = true
  quotepath         = false
  editor            = code --wait

[filter "lfs"]
  clean    = git-lfs clean -- %f
  smudge   = git-lfs smudge -- %f
  process  = git-lfs filter-process
  required = true

[init]
	defaultBranch = main
  
[alias]
  l = log --all --graph --oneline --decorate
	unstage = reset HEAD --
  last = log -1 HEAD