[MGS 3기 - 3일차] Git과 Github 심화

박철연·2022년 4월 13일
0

MGS STFE 3기

목록 보기
3/35

오늘은 처음으로 실시간 강의를 통해 학습을 진행한 날입니다. disceptio에서 개발자로 몸담고 계시는 최우영 강사님께서 Git과 Github에 대해 강의를 진행해주셨습니다. 개발에 있어서 Github는 가장 핵심이 되는 협업 툴인 만큼, 오늘 내용을 정리해두고 그룹 스터디 간에 실제로 적용해볼 생각입니다.

들어가기 전에

강의 시작하시기 전에 최우영 강사님께서 개발과 관련된 다양한 이야기를 해주셨습니다. 저 같은 비전공 출신이셔서 집중해서 경청했습니다.

그 중 기억에 남는 한마디가 "개발자는 텐션이 떨어지면 안된다" 였던 것 같습니다.

교육 과정 초반에 참 귀중한 조언이었던 것 같아요. 앞으로 텐션 올리면서 쭉쭉 수료해나가고 싶습니다.

Git을 위한 CLI

터미널 명령어 정리

주요 명령어는 다음과 같습니다.

일단 터미널을 열면 현재 컴퓨터의 최상단 경로가 열리게 됩니다.

cd(change directory)로, 원하는 디렉토리명을 뒤에 추가해서 디렉토리 간 이동이 가능합니다.

만약 상위 디렉토리를 갈 때에는, cd ../ 로 이동할 수 있습니다.

또, 어떤 경로에서 있든 cd만 입력하면 최상단 경로로 이동합니다.

touch <파일명>으로 새로운 파일을 만들 수 있습니다.

cp <파일명> <복사본의 파일명>으로 존재하고 있는 파일의 복사본을 만드는 것도 가능해요.

rm <파일명>으로 파일을 삭제할 수 있는데, 디렉토리를 삭제할 때에는 rm -r <디렉토리명>으로 입력합니다. 그냥 rm만으로는 디렉토리라서 삭제가 불가합니다.

만약 rm -r만으로 디렉토리가 삭제가 되지 않는다면, -rf로 시도해봅시다.

sudo 같은 경우에는 관리자 권한으로 실행하는 것으로 유의해서 사용하면 되겠습니다.

Vim 명령어 정리

Vim은 메모장처럼 가볍고 빠른 실행이 특징인 CLI 에디터입니다.

Vim 에디터는 터미널 상에서 vim <파일명>을 입력해서 진입할 수 있습니다. 다음은 주요 명령어 목록입니다.

vim에서는 여러 가지 모드를 바꿔가면서 명령어를 입력할 수 있습니다. 특히 i로 진입하는 Insert mode 같은 경우에는 직접 텍스트를 입력할 수 있는 모드로, 기억해 둘 필요가 있습니다.

저장은 shift+;로 커맨드 모드에 진입한 뒤, w(write)를 쓰면 되겠습니다. 단, 저장 후 바로 종료할 거라면 wq로 하면 됩니다.

Git

Git의 특징

Git은 Linux를 만든 리누스 토발즈가 기존의 버전 관리 시스템이 불편함을 개선하기 위해 만든 버전 관리 도구입니다.

Git은 다음과 같은 특징이 있습니다:

  1. 빠른속도, 단순한 구조
  2. 분산형 저장소 지원
  3. 비선형적 개발(수천개의 브랜치) 가능

Git을 사용하면 소스 코드 주고받기 없이 동시 작업이 가능해져 생산성이 증가할 수 있습니다.

수정 내용은 commit 단위로 관리, 배포되는데, 원하는 시점으로 Checkout이 가능해 버전 관리가 용이하구요.

새로운 기능 추가는 Branch로 개발하여 편안한 실험이 가능하며, 성공적으로 개발이 완료되면 Merge 기능으로 프로젝트에 실제로 반영할 수 있습니다.

또 인터넷이 연결되지 않아도 개발할 수 있어서, 개발자들에게 필수적인 도구로 자리 잡았습니다.

Git과 GUI

Git을 사용하는 데에는 다양한 그래픽 유저 인터페이스(GUI)가 존재합니다. 그래픽의 형태로 Git 관리 서비스를 제공하는 것이죠.

대표적인 것으로는 Github Desktop, GitKraken, SourceTree 등이 있습니다.

다만, 소스 코드를 Cloud Platform에서 사용할 경우, 반드시 CLI 커맨드로 버전관리를 수행해야 합니다.

또, CLI 커맨드로 git을 사용할 줄 알면, GUI 도구가 제공하는 기능에 대한 이해가 빨라지기 때문에, Git을 CLI 기반으로 연습하는 것이 권장된다고 할 수 있습니다.

Git Object와 Flow

Git Object는 세 가지 요소로 이루어져 있습니다.

가장 먼저 Blob은 파일 하나의 내용에 대한 정보를 담고 있습니다.

Tree는 Blob이나 subtree의 메타데이터(디렉토리 위치, 속성, 이름 등)을 정보로 가지고 있구요.

Commit은 형상 관리를 위해 커밋 순간의 스냅샷을 보관합니다.

Git Flow는 위와 같은 형태로 이루어집니다. 어제 정리한 Git 명령어들과 연결해서 학습하는 것이 좋을 것 같습니다.

중간에 스테이지가 존재하는 것을 확인할 수 있는데, 이는 서로 다른 파일에서 변경이 일어날 때 작업 단위를 구분할 수 있도록 마지막 대기 장소를 만들어준 것입니다.

Git 실습해보기

시작하기 전에

어제도 언급했듯이, Git 사용 전에 최초로 설정이 필요합니다.

레포지토리 만들기

깃허브 홈페이지에서 레포지토리를 만든 뒤, git clone의 형식으로 내가 원하는 레포지토리를 내려받는 식으로 만들 수도 있습니다.

하지만 터미널을 사용해서 CLI만으로 디렉토리와 레포지토리를 만들어 보겠습니다.

단, CLI 명령어 입력 전에, 깃허브 홈페이지에서 새 레포지토리를 하나 생성하는 것은 반드시 공통적으로 해야합니다.

깃허브 홈페이지에서 새로운 레포지토리를 만들었다면, 깃허브 페이지에 내가 방금 만든 레포지토리의 주소가 표시될 것입니다. 그 주소를 복사해 다음 명령어를 입력할 수 있습니다.

커밋과 관련된 유의사항

중간에 commit -m에서 m 플래그는 메시지를 담기 위한 플래그입니다.

다만, 이런 식으로 플래그를 추가해서 메시지를 추가하는 것은 권장되지 않습니다. 각각의 커밋에는 해당 커밋의 상세 내역이 동봉되는데, 플래그로 메시지를 직접 입력하면 이러한 내역이 사라집니다.

따라서 협업을 할 때에는 m 플래그를 쓰기 보다는, vim 에디터로 커밋 메시지를 작성하는 것이 좋습니다.

또 실제 커밋 메시지 작성하는 것 역시 수정의 측면에서 vim 에디터로 하는 것이 훨씬 효율적이에요.

vim 에디터로 커밋 메시지를 작성할 때 아무 메시지를 작성하지 않으면 자동으로 커밋이 무효가 됩니다. 따라서 실제로 push를 할 거라면 반드시 메시지를 뭐라도 입력해야 합니다.

또, Angular 팀에서 만든 Conventional Commit을 참고하는 것도 좋습니다.

https://www.conventionalcommits.org/ko/v1.0.0-beta.4/

또 Git은 빈 디렉토리는 추적하지 않습니다. 파일의 라인 단위로 추적하기 때문입니다. 따라서 빈 디렉토리만 만든 것은 커밋이 불가능합니다.

Github 블로그 만들어보기

정적 사이트 생성

블로그는 정적 사이트에 해당합니다. 이러한 정적 사이트를 손쉽게 만들어주는 정적 사이트 생성기가 여러 가지 있습니다.

Jekyll, Hugo, Hexo 등이 존재하는데, 이번 강의에서는 Hexo를 사용해서 블로그를 구성하기로 했습니다.

Hexo가 다른 생성기들과는 달리 node.js를 통해 쉽게 접근이 가능하기 때문에, 이번 블로그 만들기의 생성기로 선택하게 되었다고 하네요.

Hexo 사용법

$ npm install -g hexo-cli

먼저 위 명령어를 통해서 hexo를 설치할 수 있습니다.

$ hexo generate

설치가 정상적으로 되었다면 위 명령어를 통해서 hexo 프로젝트를 시작하면 되겠습니다.

$ hexo new [layout] <title>

위 명령어가 hexo 블로그에 글을 저장하는 방법인데, 가장 보편적인 post를 layout에 넣고 뒤에 부분에는 원하는 제목을 적어주시면 됩니다.

$ hexo server

hexo server를 입력하면 로컬 환경에서 개발 서버를 띄워서 미리 확인이 가능합니다! 아래 사진처럼 떴네요. (참고로 기본 theme에서 next 테마로 바꾼 상태입니다.)

그 다음 vim으로 config 파일을 열어보면 됩니다.

$ vi _config.yml

다음과 같이 뜰텐데, site 부분에서 상세한 제목이나 설명 바꿀 수 있고, URL 부분의 url에서 블로그의 상세한 주소를 설정할 수 있습니다.

그리고 중요한 것이 맨 밑으로 쭉 내려오면 Deployment가 있을텐데, 여기에서 블로그가 저장될 레포지토리의 주소를 넣어주어야 합니다.

그런 다음, 원 클릭으로 배포가 가능하게 하기 위해 패키지 하나를 설치해 줍니다.

$ npm install hexo-deployer-git --save
$ hexo deploy

패키지 설치 이후에 deploy 명령어 입력하면 배포 끝!

개발 서버가 아니라 실제 배포되어 접속된 상태입니다. 굉장히 간편하네요.

마크다운 문법

마크다운은 Git과 직접적으로 관련된 것은 아니지만, 레포지토리의 README 파일을 관리하거나 커밋 메시지를 작성할 때 유용하게 쓸 수 있습니다.

따라서 오늘 강의를 통해 배운 마크다운 문법을 간략하게 정리하였습니다. 제가 깃허브 대문을 꾸미는 포스팅에서 마크다운 문법을 정리한 적이 있어 해당 부분을 가져와 보았습니다.

벨로그는 게시물 작성이 마크다운 방식이기 때문에 대부분 아실거라고 생각하지만, 혹시 마크다운에 익숙하지 않으신 분들을 위해 간단하게 정리해보겠습니다.

제목 작성

HTML과 유사하게 제목 크기에 따라 나뉩니다. 참고로 바로 위에 제가 작성한 '제목 작성'은 ####를 사용한 것입니다.

강조

여러 가지 강조 표시들입니다. 특히 글꼴을 두껍게 만드는 방법은 사용할 일이 꽤 많답니다.

목록

목록도 순서가 있는 목록과 없는 목록을 만들 수 있습니다.

순서가 있는 목록 같은 경우에는 실제 숫자를 늘릴 필요 없이 "1."를 입력하는 것만으로도 숫자를 알아서 매겨줍니다.

또 목록 아래 하위 목록을 만들 때에는 들여쓰기 두 번 한 채로 하시면 됩니다. 이미지를 자세히 보시면 하위 목록들은 들여쓰기 두 번 된 상태라는 것이 보이실 겁니다.

인용문

인용문은 중첩도 가능하니 필요하면 활용해보세요.

표 작성

'|'로 표 항목 사이를 구분합니다. 한 번 따라서 작성해보시면 금방 활용하시게 될 겁니다.

링크

HTML의 a 태그로 작성할 수도 있고, 아래처럼 축약형으로 작성도 가능합니다.

이미지 삽입

아래 이미지는 뒤에 이미지 주소를 소괄호 안에 넣어줘서 링크까지 걸린 상태입니다.

사실 이미지는 직접 작성하지 않고 클립보드에 복사한 뒤 붙여넣기해도 자동으로 들어가니 그냥 이미지 자체를 복붙하셔도 무방합니다.

profile
Frontend Developer

0개의 댓글