현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. Git

Git은 2005년 리누스 토르발스에 의해 개발된 ‘분산 버전관리 시스템(Distributed Version Control Systems - DVCS)’ 이다.

분산 버전관리 시스템은 과거부터 현재까지의 작업과 변경점을 기록하고 확인할 수 있게합니다.
이렇게 기록된 내용은 컴퓨터 파일의 변경사항을 추척하거나 특정 시점의 개발 환경으로 되돌아갈 수 있다.

Git은 작업을 마칠때마다 그 시점에 만들어진 결과물을 저장해 하나의 파일 또는 지점을 만들어놓고 원할때 이동하거나 수정 등 다양한 작업을 진행할 수 있도록 서버와 클라언트 모두에 동일한 내용을 백업해서 관리하게 해주는 분산 버전관리 시스템(DVCS)의 대표 서비스이다.

1) Git 실습을 위한 환경 소개(VScode, SourceTree)

• CLI ⇒ Command Line Interface 글자를 입력해서 컴퓨터에 명령을 내리는 방식
  • 사용 환경 : Visual studio code
• GUI ⇒ Graphical User Interface 아이콘, 메뉴 등 그래픽 요소를 이용해 상호 작용하는 방식
  • 사용 환경 : SourceTree

a. Visual studio code

Microsoft에서 오픈소스로 개발하고 있는 소스 코드 에디터입니다. 여기서 말하는 소스 코드 에디터는 컴퓨터 프로그램의 소스 코드를 편집하기 위해 설계된 프로그램.

python, javascript, c++, c# 등 아주 다양한 프로그램언어를 지원할 뿐 아니라 다양한 확장 프로그램으로 사용자 편의성을 높여주어 StackOverflow 기준으로 점유율 약 71%로 압도적 1위를 차지.

필요 VS Code 확장 프로그램

• Korea Language Pack for Visual Studio Code
  가장 기본으로 설치 되어야할 프로그램으로 VS Code를 한국어 버전으로 보여주는 확장 프로그램이다.
  
  
• Material Icon Theme
  생성한 파일을 시각적으로 쉽게 구분할 수 있도록 바꿔주는 테마. 다양한 언어와 프로그램을 이용할때 꽤나 유용하게 사용되는 프로그램
  

b. Git와 SourceTree 설치하기(window)

Git

Git 공식 홈페이지 : https://git-scm.com/

• Git 공식 사이트에 접속해 Download for Windows를 클릭

• Standalone Installer 64-bit Git for Windows Setup을 다운로드.
  (참고로 Standalone은 실행파일을 다운로드 받아 설치하는 방법이고 Portable은 무설치 버전 파일)
  

• Next를 눌러 설치를 진행.

• Git이 설치되는 경로입니다. Next

• 아래 옵션 설정과 동일하지 않아도 됩니다. Next

• Git이 시작될 시작 메뉴 폴더를 선택하는 화면으로 별도의 설정없이 Next

• Git을 사용할 기본 에디터를 선택하는 화면입니다. Visual Studio Code를 사용할 예정이므로 Visual Studio Code를 선택

• 하단에 Override the default branch name for new repositories를 누른 후 main을 입력

• Next

Soucetree

Sourcetree 공식 홈페이지 : https://www.sourcetreeapp.com/

• Download for Windows 버튼을 눌러 다운로드
  

• 개인정보 제공 동의 후 Download
  

• Bitbucket을 사용하지 않기 때문에 건너뛰기
  

• Mercurial은 사용하지 않기 때문에 체크 해제 후 다음
  

• 이후 Sourcetree가 다운로드
  

• Sourcetree 설치가 완료되면 다음 버튼
  

• Github 아이디가 있다면 Author Email Address에 적어주시고 없다면 다음
  

• Github 아이디를 적었다면 아래와 같은 창이 나올텐데 아니오를 클릭
  

c. Git와 SourceTree 설치하기(Mac)

Git

Git 공식 홈페이지 : https://git-scm.com/

공식 홈페이지 접속하면 아래와 같은 화면을 확인하실 수 있습니다. 오른쪽 중간에 보이는 Download for mac을 눌러주시면 바로 다운로드 되는것이 아니라 다시 한번 새로운 페이지가 열린다.

• 설치할 수 있는 다양한 방법들을 안내해줍니다. 이 중에서 우리가 선택할 방법은 Homebrew를 이용하는 방식
  

• Homebrew 설치 된 상태에서 터미널을 열고 아래 코드 입력

  brew install git

• Git이 잘 설치되었다면 터미널을 재실행 하신 후 아래 명령어로 확인

  git -- version

Soucetree

Sourcetree 공식 홈페이지 : https://www.sourcetreeapp.com/

• Download for Mac OS X버튼을 눌러 나오는 화면에서 개인정보 제공 동의 후 Download 버튼
  

• 다운로드 파일을 실행하면 아래와 같은 화면이 나올 수 있습니다. 당황하지 마시고 확인
  

• 그리고 [ 시스템 환경설정 ] > [ 보안 및 개인 정보 보호 ] > [ 일반 ] 탭 클릭 > 확인 없이 열기 버튼 클릭
  

• 다시 한번 아래와 같은 창이 보이면 열기 클릭
  

• 그러면 아래와 같은 설치 화면이 나온다. Git만 사용할거라 계속을 눌러준다.
  

• 아래 화면이 나오면 별도로 적을 내용이 아직은 없기 때문에 완료
  

2) Git 사용을 위한 기본 설정들

a. Git 설정 범위와 설정 파일

Git은 지역(Local), 전역(Global), 시스템(System) 3가지 범위로 설정이 가능

• 지역(Local) 범위로 설정하면 특정 저장소(Repository)로 한정되고 ⇒ 폴더 하나에만 적용

• 전역(Global) 범위로 설정하면 모든 저장소(Repository)로 한정됩니다. ⇒ 생성하는 모든 폴더에 적용

여기서 말하는 저장소(Repository)는 여러분의 컴퓨터의 폴더라고 생각하시면 된다.

• 지역(Local)으로 설정한 경우 해당 폴더만 설정이 적용.

• 전역(Global)으로 한 경우 기존 폴더 및 앞으로 생성되는 모든 폴더에 설정이 적용.

- 시스템(System) 설정하면 해당 컴퓨터의 모든 저장소와 사용자를 걸쳐서 적용.(잘 사용 안함)

주의사항

• user.name과 user.email은 Github에서 설정한 이름으로 가입시 사용한 이메일 주소로 설정
  
  
• 동일하지 않은 경우 Github에 push(코드를 올리는 과정)를 해도 잔디가 심어지지 않는 경우 발생
  
  
• 잘못 설정한 이름 및 이메일 주소로 commit한 경우 올바르게 이름 및 이메일 주소로 변경해도 이전에 commit된 내용은 잔디에 반영되지 않음, 변경하는 방법은 있으나 다소 복잡하고 번거로움
  
  
• 단, 현재 Github 계정이 없는 경우 원하시는 정보를 입력

b. 전역에 사용될 사용자 정보 입력

#전역에 사용될 이름 설정
git config --global user.name "원하는 이름 또는 Github 닉네임"

#전역에 사용될 이메일 설정
git config --global user.email "사용하는 이메일 주소 또는 Github 가입에 사용한 이메일"

아래 명령어를 입력해 이름과 이메일 주소가 전역으로 잘 적용 되었는지 확인

#전역에 설정된 이름 설정 확인
git config --global user.name

#전역에 설정된 이메일 설정 확인
git config --global user.email

현재 이용중인 저장소의 설정을 출력하는 명령어를 통해서도 입력한 이름과 이메일을 확인

#저장소의 설정 전체 출력
git config --list

만일 위에서 설정한 이름과 이메일을 내역을 지우고 싶다면 아래 명령어로 삭제할 수 있다.

#전역에 설정된 이름 삭제
git config --global --unset user.name

#전역에 설정된 이메일 삭제
git config --global --unset user.email

c. 지역에 사용될 사용자 정보 입력(git init 명령어 사용 후 이용 가능)

#전역에 사용될 이름 설정
git config user.name "원하는 이름 또는 Github 닉네임"

#전역에 사용될 이메일 설정
git config user.email "사용하는 이메일 주소 또는 Github 가입에 사용한 이메일"

아래 명령어를 입력해 이름과 이메일 주소가 지역으로 잘 적용 되었는지 확인

#지역에 설정된 이름 설정 확인
git config user.name

#지역에 설정된 이메일 설정 확인
git config user.email

현재 이용중인 저장소의 설정을 출력하는 명령어를 통해서도 입력한 이름과 이메일을 확인

#저장소의 설정 전체 출력
git config --list

만일 위에서 설정한 이름과 이메일을 내역을 지우고 싶다면 아래 명령어로 삭제할 수 있다.

#전역에 설정된 이름 삭제
git config --unset user.name

#전역에 설정된 이메일 삭제
git config --unset user.email

d. 기본 Branch명 변경하기

로컬 저정소가 master일 경우 강의를 따라하다 문제가 발생할 수 있습니다.

아래 명령어로 로컬 저정소를 만들기 전 Git의 기본 브랜치를 master → main으로 변경해 줍니다.

• main으로 변경해서 사용하는 이유는 master를 노예 역사의 잔재로 생각하고 있기 때문에 기본 Branch를 main으로 변경해서 사용하길 권장

• Window의 경우는 대부분 main으로 설정되어 있음(설치 시 선택할 수 있음)

• Mac의 경우는 master가 기본 설정되어 있는 경우가 많음

  #master에서 main으로 기본 브랜치를 변경
  git config --global init.defaultBranch main

  
  
  

3) Git을 이용한 프로젝트 시작(git init)

a. 작업할 환경을 위해 로컬 저장소(Repository) 생성하기

기본 Branch명을 변경하셨다면 작업할 프로젝트 폴더를 생성 후 VScode로 폴더 열기, 그리고 새 터미널을 열어준다.

b. 로컬 저장소(Repository)를 깃 저장소로 만들기

VScode를 통해 로컬 저장소(Repository)를 폴더 열기한 후 터미널을 통해 아래 명령어를 입력하면 일반 로컬 저정소에서 깃이 관리하는 저장소로 변경할 수 있다.

git init

위 명령어를 터미널에 입력하면 깃이 관리하는 저장소로 변경되는데 이유는 저장소를 생성한 폴더 내 아래와 같이 숨겨진 폴더가 생성되기 때문이다.

Git이 폴더내에 숨겨진 .git폴더를 생성하는 것은, 깃이 내부적으로 코드의 상태 이력을 저장하기 위한 영역이 필요해서 입니다.

Git은 코드의 상태이력을 데이터베이스와 같은 시스템을 이용하지 않고, 자체적인 파일로 저장 합니다.

숨김폴더 확인하는 방법

• window : 윈도우 탐색기 상단에 보기 > 표시 > 숨긴항목 클릭
• Mac(단축키): command + shift + .

.git 폴더는 Git 내부에서 일어나는 모든 이벤트에 정보를 저장하고 있기 때문에 해당 폴더가 삭제되면 이전에 기록의 확인이 및 버전(commit)의 이동이 불가하게 된다.

숨겨진 폴더인 .git 폴더에는 깃 저장소에 필요한 모든 뼈대 파일이 담겨 있습니다. 이는 Git의 데이터를 기록하고 관리하는 뼈대가 되는 중요 파일. 그리고 이러한 중요 파일들을 일일이 수작업을 만들 필요 없이, 깃의 init 명령어로 손쉽게 자동 생성 할 수 있다.

4) status 명령어와 .gitignore 파일 만들어 활용하기

a. 파일의 상태를 확인할 수 있는 git status 명령어

파일명 : front.yaml

파일명 : back.yaml

.yaml 확장자는 뭔가요?
.yaml은 JSON과 같은 데이터 형식 python의 dict자료형 처럼 key, value 형태로 저장됨
아주 편하고… 다양한 곳에서 권장하고 있습니다.(쿠버네티스 등)

터미널에 git status를 입력해 결과를 확인

화면을 보시는 Untracked files 아래에 생성한 2개의 파일을 확인할 수 있다.

git status 명령어를 입력하면 스테이지 상태를 확인할 수 있다. 스테이지는 임시 영역으로 작업한 컨텐츠의 실제 파일 내용은 직접 가지고 있지 않다.

Git은 워킹 디렉터리에서 바로 저장소로 저장하지 않고 중간 단계인 스테이지 영역을 이용한다. 그 이유는 나중에 배우게 될 commit을 빠르게 하기 위해서다.

commit을 빠르게 처리할 수 기술적 원리는 스테이지 영역에는 이전 commit 이력과 비교해 변경된 내용만 저장하고 새로운 commit이 발생하면 스테이지에 있는 변경된 내용들만 찾아서 반영만하면 되기 때문에 빠르게 commit을 진행할 수 있다.

Git의 스테이지 영역은 크게 Untracked, Tracked 두 가지 상태로 나뉩니다.

파일을 새로 만들 경우 Untracked 상태가 된다. 즉, Git이 해당 파일을 추적(관리)하지 않고 있는 상태를 말한다.

git status 명령어를 입력하면 위에서 설명한 내용 처럼 방금 만들어진front.yaml과 back.yaml은 Untracked 상태인 것을 확인할 수 있다.

Untracked 상태인 front.yaml과 back.yaml 파일을 앞서 설명한 임시 저장영역인 Staged로 올리기 위해 git add 명령어를 사용한다.

git add . 을 사용해 그 결과를 확인

back.yaml과 front.yaml 파일이 Staged 올라가 초록색으로 변한것을 확인할 수 있다. 스테이지에 올라가 있기 때문에 이제는 저장소 이 변경된 상황들을 전달할 수 있는 상태가 되었다.

b. .gitignore 파일을 이용해 특정 파일이 스테이지로 이동하지 않게 만들기

.gitignore 파일 : 파일을 생성 후 관리를 원하지 않는 파일을 추가하면 git에서 관리하지 않게 된다.

admin_info.yaml

id: oz
password: 1234

git status 명령어로 git 상태를 확인

.gitignore 파일 생성 후 admin_info.yaml 기재

.gitignore 파일안에 아래 파일명 입력
     
   admin_info.yaml

git status 명령어로 다시 한번 상태 확인

• admin_info가 Untracked files에서 보이지 않는 것을 확인할 수 있음
• 대신 새로만든 .gitignore파일을 확인할 수 있음
  

# 모든 .c 확장자 파일
*.c

# .c 확장자지만 무시하지 않을 파일(! 느낌표)
!not_ignore_this.c

# logs란 이름의 파일 또는 폴더와 그 내용들
logs

# logs란 이름의 폴더와 그 내용들
logs/

❗️개발하는 환경에 맞게 자동으로 .gitignore 파일을 만들어주는 사이트
원하는 프레임 워크나 언어를 적으면 자동으로 .gitignore 파일을 만들어주는 사이트
https://www.toptal.com/developers/gitignore

5) Git을 이용해 첫 commit 남겨 보기

git commit은 Git에서 변경된 파일을 저장소(Repository)에 기록하는 명령어. 단순히 파일을 수정하는 것만으로는 Git이 변경 사항을 추적하지 않으므로, git commit을 실행해야 변경 내용이 저장된다.

a. git commit의 역할

• 변경 사항을 저장소에 기록

• 특정 시점으로 되돌릴 수 있도록 스냅샷(snapshot) 생성

• 팀원들과 변경 사항을 공유 가능

b. 기본 사용법

커밋할 파일을 선택 (스테이징)

git add 파일이름  # 특정 파일만 추가
git add .         # 변경된 모든 파일 추가

커밋 실행

git commit -m "커밋 메시지"

✅ 커밋 메시지는 해당 변경 사항이 무엇인지 간결하고 명확하게 작성하는 것이 중요함.

리모트 확인

git remote -v

기존 리모트 삭제 후 다시 추가 (추천)

git remote remove origin

git remote add origin https://github.com/레포지토리

git remote -v  # 정상적으로 변경됐는지 확인

푸시

git push -u new-origin main

커밋 확인

git log

이 명령어를 실행하면 이전 커밋들의 기록을 확인할 수 있음.

#commit을 만드는 명령어 : -m은 뒤에 commit 메시지를 입력할 수 있도록 해주는 옵션
git commit -m "커밋 메시지"

#변경된 모든사항을 바로 add하고 commit하는 명령어
git commit -am "커밋 메시지"

#commit 메시지 예시
git commit -m "first commit"
git commit -am "first commit"

c. vim 편집기로 commit 메시지 입력해보기

“git commit -m” 명령어에서 “-m” 옵션을 제외하고 “git commit”만 입력할 경우 vim이라는 문서 편집기 화면이 나타난다.

Vim 편집기 화면이 노출되면 아래 순서대로 진행하시면 메시지를 입력할 수 있다.

• i 키를 눌러서 문서 편집 모드로 진입한다.
  
  
• first commit를 최상단에 입력한다.
  
  
• ESC 키를 눌러서 문서 편집 모드에서 빠져나온다.
  
  
• shift + : 을 누른 후 w와 q를 동시에 입력해준다. 여기서 wq는 메시지를 저장(write)하고 편집을 종료(quit)한다는 의미다.

Vim 명령어

작업	Vi 명령어	상세
입력 시작	i	명령어 입력 모드에서 텍스트 입력 모드로 전환
입력 종료	ESC	텍스트 입력 모드에서 명령어 입력 모드로 전환
저장 없이 종료	:q
저장 없이 강제 종료	:q!	입력한 값이 있거나 없어도 바로 종료
저장하고 종료	:wq	입력한 것을 저장 후 종료
위로 스크롤	k
아래로 스크롤	j

6) commit 이력을 확인할 수 있는 git log

git log는 저장소의 커밋 기록을 조회하는 명령어. 누가 언제 어떤 변경을 했는지 확인하는 기능이다.

a. 기본 사용법

git log

b. git log에서 확인할 수 있는 정보

• 커밋 해시(commit hash): 각 커밋의 고유한 식별자

• 작성자(author): 커밋한 사람

• 날짜(date): 커밋한 시간

• 커밋 메시지(commit message): 변경 사항 요약

c. git log 옵션

한 줄로 보기

git log --oneline

✅ 각 커밋을 한 줄로 출력 (해시 + 메시지)

그래프로 보기 (브랜치 흐름 파악) 자주 사용

git log --graph --oneline --all --decorate

✅ 브랜치 관계를 시각적으로 보여줌

특정 파일의 변경 기록 확인

git log -- filename

✅ 해당 파일이 언제, 어떻게 변경되었는지 확인 가능

각 커밋마다의 변경사항 함께 보기

git log -p

최근 n개 커밋만 보기

git log -(갯수)

통계와 함께 보기

git log --stat

변경사항 내 단어 검색

git log -S (검색어)

커밋 메시지로 검색

git log --grep (검색어)

끝맺음.

연습이 필요한 github.......
어우..정신없어..ㅠㅠ