연습 - 프로젝트 시작

완료됨

이제 필수 git 명령을 배우는 시간을 가졌으므로 git에서 프로젝트를 만드는 방법을 살펴 보겠습니다.

다음 연습에서는 간단한 HTML 파일을 작업 트리에 추가하여 Git 사용을 시작합니다. 그런 다음, 디렉터리의 콘텐츠를 변경하고 변경 내용을 커밋하는 방법을 알아보겠습니다.

파일 만들기 및 추가(스테이징)

빈 디렉터리에서는 Git으로 수행할 수 있는 작업이 많지 않으므로 고양이 사진 웹 사이트의 홈페이지로 사용할 파일을 작업 트리에 추가해 봅시다.

  1. Cloud Shell 세션이 여전히 활성 상태이고 Cats라는 리포지토리 폴더에 있는지 확인합니다.

  2. touch 명령을 사용하여 index.html이라는 파일을 만듭니다.

    touch index.html
    

    touch는 파일이 있는 경우 파일이 마지막으로 수정된 시간을 업데이트합니다. 파일이 없으면 Git은 해당 파일 이름으로 빈 파일을 만듭니다.

  3. 이제 git status를 사용하여 작업 트리의 상태를 가져옵니다.

    git status
    

    Git은 아무것도 커밋되지 않았지만 디렉터리에 새 파일이 포함되어 있음을 알려 응답합니다.

    No commits yet
    
    Untracked files:
      (use "git add <file>..." to include in what will be committed)
    
        index.html
    
    nothing added to commit but untracked files present (use "git add" to track)
    

    git status는 다음에 수행할 수 있는 작업에 대한 힌트를 제공합니다. Git은 설명을 줄이도록 구성할 수 있지만 이 단계에서는 설명이 많을수록 좋습니다.

  4. git add를 사용하여 Git ‘인덱스’에 새 파일을 추가한 다음 git status를 사용하여 상태를 확인합니다. 명령의 끝에 마침표를 반드시 입력하세요. 이렇게 하면 Git은 현재 디렉터리에서 추가되거나 수정된 모든 파일을 인덱싱합니다.

    git add .
    

    이제 커밋이 스테이징되었습니다. Git 인덱스는 커밋을 위한 스테이징 영역입니다. ‘다음’에 만드는 커밋에 포함될 모든 파일 버전의 목록입니다.

    디렉터리의 새 파일이 index.html뿐이었으므로 git add . 대신 git add index.html을 사용할 수도 있었습니다. 그러나 여러 개의 파일이 추가되었다면 git add .는 모든 파일을 처리했을 것입니다.

  5. 마지막으로, git status를 다시 사용하여 변경 내용이 제대로 스테이징되었는지 확인합니다.

    git status
    
  6. 다음 예제와 같은 출력이 표시됩니다.

    On branch main
    
    Initial commit
    
    Changes to be committed:
      (use "git rm --cached <file>..." to unstage)
    
        new file:   index.html
    

첫 번째 커밋 만들기

이제 index.html이 인덱스에 추가되었으므로 다음 단계는 커밋하는 것입니다.

  1. 다음 명령을 사용하여 커밋을 만듭니다.

    git commit index.html -m "Create an empty index.html file"
    

    이 명령에서 -m ‘플래그’는 커밋 메시지를 제공하고 있음을 Git에 알립니다.

    커밋 메시지를 표현하는 다양한 방법이 있지만, 첫 번째 줄은 ‘커밋이 트리에 수행하는 작업’과 같이 작성하는 것이 좋습니다. 또한 첫 번째 문자를 대문자로 시작하고 닫는 마침표를 생략하여 공간을 절약하는 것이 일반적입니다. 메시지의 첫 번째 줄이 “밀어넣을 때 이 커밋은...”으로 시작하는 문장을 완성한다고 가정해보겠습니다.

    커밋 메시지에는 여러 줄이 있을 수 있습니다. 첫 번째 줄은 50자 이하여야 하며 뒤에는 빈 줄이 와야 합니다. 이후 줄은 72자 이하여야 합니다. 엄격한 요구 사항은 아니며, 펀치 카드와 “바보” 터미널을 사용하던 시절을 상기시키지만 git log 출력을 읽기 쉽게 표시합니다.

  2. Git은 응답으로 사용자가 수행한 작업을 확인합니다.

    [main (root-commit) 87e874c] Create an empty index.html file
     1 file changed, 0 insertions(+), 0 deletions(-)
     create mode 100644 index.html
    
  3. git status 명령을 사용하여 작업 트리가 정리되었는지, 즉 작업 트리에 커밋되지 않은 변경 내용이 없는지 확인합니다.

  4. 이제 git log 명령을 사용하여 커밋에 관한 정보를 표시합니다.

    git log
    
  5. Git 응답은 다음 예제와 같습니다.

    commit 87e874c4aeeb3f9692ae5d9875235353708d7dd5
    Author: User Name <user-name@contoso.com>
    Date:   Fri Nov 15 20:47:05 2019 +0000
    
    Create an empty index.html file
    

index.html 수정 및 변경 내용 커밋

웹 사이트의 홈페이지로 사용할 index.html이 생성되었지만 현재 비어 있습니다. 다음 단계는 파일에 일부 HTML을 추가하는 것입니다. 처음에는 간단하게 Cloud Shell 기본 제공 편집기를 사용하여 한 줄의 HTML을 추가하겠습니다.

  1. 터미널 프롬프트에서 code index.html을 입력하여 온라인 편집기에서 index.html을 엽니다.

    code index.html
    
  2. 편집기에서 다음 문을 입력하거나 붙여넣습니다.

    <h1>Our Feline Friends</h1>
    
  3. 파일을 저장하고 온라인 편집기를 닫습니다. Cloud Shell 편집기의 오른쪽 모서리에 있는 줄임표(“...”)를 선택하거나 액셀러레이터 키(Windows 및 Linux의 Ctrl+S, macOS의 Cmd+S)를 사용할 수 있습니다.

  4. git status 명령을 사용하여 작업 트리의 상태를 확인합니다.

    git status
    
  5. Git이 변경된 내용을 인식하고 있음을 알 수 있습니다.

    On branch main
    Changes not staged for commit:
      (use "git add <file>..." to update what will be committed)
      (use "git checkout -- <file>..." to discard changes in working directory)
    
        modified:   index.html
    
    no changes added to commit (use "git add" and/or "git commit -a")
    
  6. 이제 변경 내용을 커밋합니다.

    git commit -a -m "Add a heading to index.html"
    

    이번에는 변경 내용을 스테이징하기 위해 git add 명령을 실행하지 않았습니다. 대신 git commit 명령에 -a 플래그를 사용했습니다. -a 옵션은 마지막 커밋 이후 수정된 파일을 모두 추가합니다. 파일을 추가하지는 않습니다. 새 파일을 추가하려면 여전히 git add가 필요합니다.

  7. 출력을 확인합니다. 다음 예제와 같이 표시됩니다.

    [main 8c9143a] Add a heading to index.html
     1 file changed, 1 insertion(+)
    

index.html의 변경 내용이 커밋되었습니다. 현재 파일 버전만 표시되지만 이제 리포지토리에는 두 가지 파일 버전이 있습니다. Git을 사용할 경우의 혜택 중 하나는 변경한 내용을 롤백하거나 시간을 되돌려 이전 버전을 확인할 수 있다는 것입니다. 이 중요 항목은 뒷부분에서 자세히 살펴봅니다.