이 장에서는 앞서 잠시 실습해본 GitHub의 역할, 활용을 상세히 다룹니다. 저장소 생성부터 배포 확인까지 전 과정을 따라해 볼 수 있습니다. 뒤에 다룰 백엔드 개발에서도 GitHub은 필수로 사용되기 때문에, 꼼꼼하게 챕터를 읽어보시고 실습하시는 것을 권합니다.

1. GitHub 이해하기

1.1 GitHub이란?

GitHub은 전 세계 개발자들이 코드를 저장하고 공유하는 가장 큰 플랫폼입니다. 2018년 마이크로소프트가 인수했으며, 현재 1억 명 이상의 개발자가 사용하고 있습니다. 거의 모든 개발자가 사용하는 서비스이기 때문에, 생태계도 활발하며 다양한 도구들이 GitHub과 연동됩니다. 따라서 현대 소프트웨어 개발을 위해 GitHub 사용법을 익히는 것은 매우 중요합니다.

GitHub을 이해하기 위해 간단한 비유를 들어보겠습니다. 쉽게 표현하자면 GitHub은 '시간여행이 가능한 구글 드라이브'라고 할 수 있습니다.

구글 드라이브에 파일을 올리듯이, GitHub에는 코드를 올립니다. 다만 GitHub은 단순 저장을 넘어서 누가, 언제, 무엇을 수정했는지 모든 기록이 남습니다. 이것이 바로 '버전 관리'입니다.

1.2 왜 GitHub에 코드를 올릴까?

개발자들이 GitHub을 사용하는 이유는 크게 네 가지입니다.

1. 백업과 복구

컴퓨터가 고장 나도 GitHub에 올려둔 코드는 안전합니다. 언제든 다시 다운로드받을 수 있습니다.

2. 버전 관리

코드에서 중대한 에러가 발생이 되거나, 단순 변심으로 되돌리고 싶을 때에도 GitHub의 버전을 사용할 수 있습니다. GitHub은 모든 수정 기록을 저장하기 때문에 언제든 과거 버전으로 돌아갈 수 있습니다.

3. 협업

여러 사람이 동시에 같은 프로젝트를 작업할 수 있습니다. 누가 어떤 부분을 수정했는지 충돌 없이 관리됩니다. 따라서 아래처럼 결과보고서를 여러 개로 작업할 필요가 없습니다.

좀 더 고급 기능으로 아래와 같은 Project 보드 등도 제공하여 협업을 도와줍니다.

4. 포트폴리오

GitHub 프로필은 개발자의 이력서와 같습니다. 어떤 프로젝트를 했는지, 얼마나 꾸준히 코딩했는지 한눈에 볼 수 있어서 취업이나 이직 시 중요한 자료가 됩니다. 이러한 포트폴리오를 GitHub Pinned로 고정시켜 보여줄 수도 있습니다. 특히 Pinned 저장소 아래 있는 초록색으로 표시된 부분을 'GitHub 잔디'라고 부르며, 얼마나 꾸준히 활동했는지를 나타내는 지표로 활용됩니다.

5. 배포

배포를 할 때에도 GitHub을 사용합니다. 앞서 해본 GitHub Pages도 있지만, GitHub에 코드를 올리면 자동으로 감지하여 원하는 서버에 배포하는 다양한 서비스와 연동할 수 있습니다. 머메이드로 그리자면 다음과 같습니다. 추후에는 GitHub Pages 말고도 아래 그림처럼 우리도 별도 서버에 배포할 것이기 때문에 GitHub 사용법을 익혀두는 것이 좋습니다.

1.3 GitHub Pages란?

GitHub Pages는 GitHub 저장소에 올린 웹페이지 파일을 URL을 부여하여 인터넷에 공개해주는 무료 서비스입니다. 일반적으로 웹사이트를 인터넷에 공개(배포)하려면 다음과 같은 과정이 필요합니다.

하지만 GitHub Pages를 사용하면 이 모든 과정이 단순해집니다.

2. GitHub Pages로 배포하기

우리는 앞서 03-1에서 간단한 웹 페이지를 만들었습니다. 이번에는 조금 다른 방식으로 배포를 해보도록 하겠습니다. 또한 배포를 하며 주의해야 할 사항에 대해 말씀을 드려보도록 하겠습니다.

2.1 웹 VSCode로 GitHub 편집하기

GitHub에는 웹 브라우저에서 바로 VSCode처럼 코드를 편집할 수 있는 기능이 있습니다. 이 기능을 활용하면 별도의 프로그램 설치 없이도 파일을 만들고 수정할 수 있습니다.

웹 VSCode 접속하기

GitHub 저장소 주소에서 github.com을 github.dev로 바꾸면 웹 VSCode로 접속할 수 있습니다. 전체 URL 구조는 아래와 같습니다.

* 바뀌기 전 주소: https://github.com/사용자이름/저장소이름
* 바뀐 후 주소: https://github.dev/사용자이름/저장소이름

예를 들어, https://github.com/paullabkorea/menu를 https://github.dev/paullabkorea/menu로 바꾸면 됩니다.

처음 접속하면 "이 저장소를 열겠습니까?"라는 확인 메시지가 나타납니다. 확인을 누르고, 상단에 본인의 GitHub 아이디를 클릭하면 웹 VSCode 환경이 열립니다.

2.2 간단한 메뉴 페이지 만들기

이제 웹 VSCode에서 간단한 메뉴 구조를 가진 웹사이트를 만들어 보겠습니다. 우리가 만들 구조는 다음과 같습니다.

저장소/
├── index.html      (메인 페이지)
├── a/
│   └── index.html  (A 메뉴 페이지)
└── b/
    └── index.html  (B 메뉴 페이지)

이 구조를 통해 웹사이트에서 폴더와 URL이 어떻게 연결되는지 이해할 수 있습니다.

2.2.1 메인 페이지 만들기

먼저 최상위에 index.html 파일을 만듭니다. 웹 VSCode의 탐색기에서 마우스 오른쪽 버튼을 클릭하고 '새 파일'을 선택한 후 index.html이라고 입력합니다. index.html에는 다음 내용을 입력합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 페이지</title>
</head>
<body>
    <h1>메인 페이지입니다</h1>
    <nav>
        <a href="./a/">A 페이지로 이동</a> |
        <a href="./b/">B 페이지로 이동</a>
    </nav>
</body>
</html>

2.2.2 A 폴더와 페이지 만들기

이번에는 a 폴더를 만들고 그 안에 index.html을 만들어 보겠습니다. 탐색기에서 마우스 오른쪽 버튼을 클릭하고 '새 폴더'를 선택한 후 a라고 입력합니다. 그리고 a 폴더 위에서 다시 마우스 오른쪽 버튼을 클릭하고 '새 파일'을 선택한 후 index.html이라고 입력합니다. index.html에는 다음 내용을 입력합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A 페이지</title>
</head>
<body>
    <h1>A 페이지입니다</h1>
    <nav>
        <a href="../">메인으로 돌아가기</a> |
        <a href="../b/">B 페이지로 이동</a>
    </nav>
</body>
</html>

2.2.3 B 폴더와 페이지 만들기

같은 방식으로 b 폴더를 만들고 그 안에 index.html을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B 페이지</title>
</head>
<body>
    <h1>B 페이지입니다</h1>
    <nav>
        <a href="../">메인으로 돌아가기</a> |
        <a href="../a/">A 페이지로 이동</a>
    </nav>
</body>
</html>

2.3 변경사항 저장하기

웹 VSCode에서 파일을 만들거나 수정하면, 왼쪽 사이드바의 '소스 제어' 아이콘에 숫자가 표시됩니다. 이 숫자는 변경된 파일의 개수를 나타냅니다.

변경사항을 저장하려면 다음 단계를 따릅니다.

1. 왼쪽 사이드바에서 '소스 제어' 아이콘(분기 모양)을 클릭합니다.
2. 변경된 파일들 옆의 '+' 버튼을 클릭하여 스테이징합니다.
3. 상단의 메시지 입력란에 "메뉴 페이지 추가"처럼 변경 내용을 설명하는 메시지를 입력합니다.
4. 메시지 하단에 '커밋 및 푸시' 버튼을 클릭하거나, 체크 표시(✓) 버튼을 클릭하거나 Ctrl+Enter를 눌러 커밋합니다.

2.4 GitHub Pages 활성화하기

이 단계는 앞서 진행했던 것과 같습니다. 웹 VSCode 주소에서 github.dev를 github.com으로 바꾸고 Settings 탭으로 이동합니다.

1. Settings 클릭
2. Pages 클릭
3. None 버튼 클릭
4. main 브랜치 선택
5. Save 클릭

약 2 ~ 3분 정도 기다리고 페이지 새로고침을 해보면 아래와 같이 배포된 URL이 나타납니다. 클릭해보세요.

이제 다음과 같은 URL로 각 페이지에 접속할 수 있습니다.

3. 커스텀 도메인 연결하기

GitHub Pages는 커스텀 도메인 연결도 지원합니다. 'myname.com' 같은 자신만의 도메인을 구매했다면, 이를 GitHub Pages와 연결할 수 있습니다. Pages 설정에서 'Custom domain' 란에 도메인을 입력하고, 도메인 제공업체에서 DNS 설정을 조정하면 됩니다. 단계별로는 아래와 같습니다.

1. Custom Domain 구입(Cafe24, 가비아 등)
2. GitHub Pages 설정에서 도메인 입력
3. 도메인 제공업체에서 DNS 설정 변경
   • A 레코드: 185.199.108.153 주소로 설정
   • CNAME 레코드: 사용자이름.github.io로 설정
4. 변경사항 저장 및 전파 대기(30분에서 1시간 소요될 수 있음)

3번 같은 경우 도메인 제공업체마다 설정 방법이 다르므로, 해당 업체의 가이드를 참고하는 것이 좋습니다. 이미지는 Cafe24의 예시입니다. DNS 관리 페이지에서 A 레코드와 CNAME 레코드를 추가하는 모습입니다.

실제 연결하는 실습은 5.5장에서 진행합니다. 위 설명으로 충분한 이해가 되셨다면 넘어가셔도 좋습니다.