WeniVooks

검색

깃헙 베이스캠프

실습환경 세팅

이번 장부터는 필요한 분들만 들으시면 됩니다. 주요한 내용으로는 개발자가 자주 사용하는 VSCode라는 툴에서 소스코드를 편집하고, 올리고, 합치고, 충돌이 났을 경우 해결하는 방법 등을 배웁니다. 디자이너나 기획자 분들이 배우기에는 다소 과한 챕터들이 있으니 참고해주세요.

1. 필요한 소프트웨어

이번 장에서는 깃헙을 컴퓨터에서 설치하여 사용하는 방법을 알아보도록 하겠습니다. 깃헙을 사용하기 위해서는 다음과 같은 소프트웨어가 필요합니다.

  1. VSCode
  2. Git

Git만 설치하셔도 GitHub을 사용할 수 있지만, VSCode를 설치하면 더욱 편리하게 사용할 수 있습니다. 우리 수업에서는 순수하게 Git만 사용하는 것이 아니라 VSCode에서 편리하게 연동하여 사용할 수 있는 방법으로 가르쳐드립니다. 이렇게 강의를 하는 것은 2가지 이유가 있습니다.

  1. 실제로 실무에서도 Git만 켜고 사용하는 경우는 거의 없습니다. 대부분의 개발자들은 VSCode와 같은 툴을 사용하여 Git을 사용합니다.
  2. VSCode는 GitHub과 연동이 잘 되어 있어서 편리하게 사용할 수 있습니다.

이 두가지 소프트웨어를 설치하고 설정하면 깃헙을 사용할 준비가 끝납니다. 이번 장에서는 VSCode를 설치하고 설정하는 방법을 알아보도록 하겠습니다.

Git과 GitHub의 차이점

Git은 버전 관리 시스템으로, 코드의 변경 이력을 관리하는 도구입니다. GitHub는 Git을 사용하는 프로젝트를 웹에서 관리할 수 있도록 한 웹 서비스입니다. 만든 사람도 다릅니다.

쉽게 비유하자면 깃헙은 시간 여행이 가능한 구글드라이브고, 깃은 시간여행이 가능한 USB입니다. 공유가 되진 않지만 시간여행은 가능하죠. 엄격하게는 구분해야 하지만 보통 이 2개를 같은 의미로 말합니다.

2. VSCode

VSCode는 마이크로소프트에서 만든 무료 소스 코드 편집기입니다. GtiHub도 마이크로소프트에서 인수를 해서 둘 다 마이크로소프트에서 관리되고 있습니다. VSCode는 GitHub에서 .을 눌렀을 때 나오는 코드 편집기와 연동되며 같은 UI를 가지고 있습니다.

VSCode의 장점은 단지 에디터에만 있지 않습니다. 에디터와 연결되는 여러가지 확장 기능들이 매우 큰 장점입니다. 예를 들어 GitHub에 관련된 깃모지나 코파일럿 등은 코드를 더욱 편리하게 짤 수 있도록 도와줍니다. 특히 코파일럿의 경우에는 실시간 LLM(GPT와 Cluade)을 지원합니다.

이렇게 글을 쓰고 있는 중에도 자동완성을 해주며 Tab을 누르면 자동완성이 됩니다. 아래 이미지는 실제 이 글을 작성하며 코파일럿이 자동완성해준 이미지입니다.

2.1 VSCode 설치

VSCode는 무료로 설치할 수 있씁니다.

  1. 구글에 Visual Studio Code을 검색합니다. VSC(https://code.visualstudio.com) 링크로 접속합니다.
  1. 사용하는 OS에 맞춰(Window 또는 Mac) 다운로드 및 설치를 진행하면 됩니다.

VSC에서 폴더 열기

  1. VSC 상단 메뉴에서 '파일(File)' 클릭
  2. '폴더 열기(Open Folder)' 클릭
  3. 작업할 폴더를 선택 후 '폴더 선택' 버튼 클릭
2.2 VSCode 익스텐션

익스텐션(Extension)은 VSC에 새로운 능력을 더해주는 '부가 기능'입니다. VSC는 심지어 인쇄를 할 수 있는 기능도 없습니다. 이러한 기능을 추가하기 위해 '부가 기능(익스텐션)'을 설치해야 합니다. VSC에 익스텐션을 추가하면, 코드 자동 완성, 디버깅 도구 등을 통해 코딩을 더 쉽고 빠르게 할 수 있습니다.

필요한 기능들을 하나씩 추가하여 자신만의 SW 개발 환경을 구축해보세요. 익스텐션 설치는 필수가 아니라 선택사항입니다.

익스텐션 설치 방법

  1. VSC 왼쪽 사이드바에서 확장 아이콘(네모 4개 모양)을 클릭합니다.
  2. 검색창에 원하는 익스텐션 이름을 입력합니다.
  3. 목록에서 원하는 익스텐션을 찾아 클릭하세요
  4. 'Install' 버튼을 클릭합니다.

여기서는 GitHub과 관련된 익스텐션만 소개합니다. 설치를 안하셔도 실습을 하는데 무리가 없습니다.

2.1.1 Git Graph

GitHub에서 내가 작업한 내용을 그래프로 보여주는 도구입니다. 버전을 커밋, 작업한 단위를 브랜치라고 부르는데요. 이 커밋과 브랜치를 시각화해주는 도구입니다.

2.1.2 GitHub Copilot

GitHub기반의 AI 기반 코드 자동 완성 도구입니다. ChatGPT와 Claude 등의 AI를 사용하여 코드를 작성할 때 도움을 줍니다. 실시간으로 추천을 해주기 때문에 코딩하는데 생산성을 극대화 시킬 수 있습니다. 위니브에서는 이 도구를 필수 도구로 지정하여 사용하고 있습니다. 해당 서비스는 유료 서비스이며, 개인/팀/기업용 요금제를 제공합니다.

2.1.3 GitLens

GitHub에 대한 상세 정보를 제공해주는 확장 프로그램입니다. 코드 작성자, 변경 이력 등을 확인할 수 있습니다.

2.1.4 Gitmoji

커밋 메시지에 이모지를 쉽게 추가할 수 있는 도구입니다. 보통 프로젝트를 시작할 때 어떤 이모지를 사용할지 정하고, 그 이모지를 사용하여 커밋 메시지를 작성합니다. 이렇게 하면 이모티콘 만으로도 어떤 작업을 했는지 분별할 수 있습니다.

주요 이모지는 다음과 같습니다. :lipstick:와 같이 텍스트로도 작성할 수 있지만 보통은 익스텐션을 깔아서 손쉽게 추가합니다.

  • ✨ (sparkles): 새로운 기능 추가
  • 🐛 (bug): 버그 수정
  • 📝 (memo): 문서 업데이트
  • 🎨 (art): 코드 구조/포맷 개선
  • ⚡️ (zap): 성능 개선
  • 💄 (lipstick): 화면 UI 개선

3. Git

앞서 깃헙을 시간 여행이 가능한 구글드라이고, 깃은 시간여행이 가능한 USB라고 비유했습니다. 깃은 리누스 토르발즈라는 분이, 깃헙은 톰 프레스턴워너(Tom Preston-Werner), 크리스 완스트래스(Chris Wanstrath), 피제이 하이엣(PJ Hyett)이 공동으로 회사를 설립하여 만든 서비스입니다.

이렇게 시간여행을 가능하게 하여 코드를 관리할 수 있는 툴을 형상 관리(Configuration Management) 툴이라고 부릅니다. Git, SVN, CVS등에 툴이 있고 현재 가장 많이 사용되고 있는 것이 깃입니다.

3.1 Git 설치
Git

위 서비스에 접속하여 알맞은 Download 버튼을 클릭하여 설치합니다. OS에 맞게 다운로드 버튼이 활성화 됩니다.

다만 설치할 때 옵션 중 변경하셔야 하는 옵션이 있습니다. 아래 이미지에서 하단에 Override the default branch name for new repositories를 체크해주세요. 이는 깃헙에서 사용하는 main 브랜치를 기본으로 사용하도록 설정하는 것입니다. 설정하지 않아도 문제가 되진 않지만 가능하면 변경하여 사용하는 것을 추천합니다.

master라는 이름이 노예제를 연상시킨다고 하여 프로그래밍 언어에서도 이러한 언어를 사용하지 않는 추세입니다. 이를 main으로 변경하는 것이 추세이며, 깃헙에서도 main으로 변경되었습니다. 이를 변경하지 않아도 괜찮지만, 변경하는 것을 추천합니다.

맥에는 이미 설치되어 있는 경우가 많으니 터미널에서 아래 명령어를 실행해보고 설치하세요.

$ git --version
$ git --version

4. 버전 확인 및 초기 설정

VSCode를 실행시키고 Terminal > New Terminal을 클릭하여 터미널을 실행시킵니다. 단축키는 Ctrl을 누르고 빽틱(1 옆에 있는 특수문자)을 누르시면 됩니다. 터미널에서 아래 명령어를 입력하여 다운 받은 Git 버전을 확인할 수 있습니다.

$ git --version
git version 2.37.3
$ git --version
git version 2.37.3

Git을 사용하기 위해 사용자 정보를 설정합니다. 여기서 이름은 내가 깃헙에서 사용할 이름을, email은 깃헙 가입한 이메일을 입력합니다.

🧐 해당 절차를 진행하지 않으면 뒤에 챕터에 푸쉬가 되지 않습니다.

$ git config --global user.name "hojun.lee"
$ git config --global user.email email@example.com
$ git config --global user.name "hojun.lee"
$ git config --global user.email email@example.com

제대로 입력이 되었는지 확인하기 위해 아래 명령어를 입력합니다.

$ git config --get user.name
$ git config --get user.email
$ git config --get user.name
$ git config --get user.email
2장 로컬에서 작업하기2.2 기본명령어