연습 - Alice로 분기 만들기 - Training

10분

개발자 친구 Alice는 웹 사이트에서 고양이 사진의 스타일을 설정하는 CSS를 추가하려고 합니다. Alice는 자신의 분기에서 이 작업을 수행하려고 합니다.

설정

Alice의 역할을 연습하기 전에 약간의 작업을 수행하여 모든 사람이 파일을 공유하고 추가할 수 있는 bare 리포지토리를 설정해야 합니다.

Git은 이미 Azure Cloud Shell에 설치되어 있으므로 오른쪽 Cloud Shell에서 Git을 사용할 수 있습니다.

참고 항목

이 연습에서는 Cloud Shell이 클래식 모드여야 합니다. Cloud Shell 창의 맨 위에서 기타 아이콘(...)을 선택하고 설정을 선택하고 클래식 버전으로 이동을 선택합니다.

공유 bare 리포지토리 만들기

Shared.git라는 새 디렉터리를 만들어 bare 리포지토리를 저장합니다.
```
mkdir Shared.git
cd Shared.git
```
이제 다음 명령을 실행하여 공유 디렉터리에 bare 리포지토리를 만듭니다.
```
git init --bare
```
새 리포지토리의 기본 분기 이름을 설정합니다. 이 단계를 수행하려면 다른 분기(예제에서는 main 분기)를 가리키도록 HEAD 분기를 변경합니다.
```
git symbolic-ref HEAD refs/heads/main
```

Bob을 위한 공유 리포지토리 복제

이 디렉터리에서 한 수준 위로 이동하여 Bob이 리포지토리를 저장할 디렉터리를 만듭니다.
```
cd ..
mkdir Bob
```

Bob을 위한 리포지토리를 복제하고 구성합니다.

cd Bob
git clone ../Shared.git .
git config user.name Bob
git config user.email bob@contoso.com
git symbolic-ref HEAD refs/heads/main

참고

main의 기본 분기로 시작하고자 하므로 기본 분기 이름인 refs/heads/master가 아닌 refs/heads/main을 가리키도록 HEAD를 변경해야 합니다.

베이스 파일 추가

최종 설정 단계에서는 기본 웹 사이트 파일을 추가하고 공유 리포지토리로 푸시합니다. 이러한 명령의 경우 여전히 Bob 디렉터리에서 작업하고 있습니다.

Linux touch 명령을 실행하여 일부 파일을 만든 다음 Git를 사용하여 스테이징하고 커밋합니다.

touch index.html
mkdir Assets
touch Assets/site.css
git add .
git commit -m "Create empty index.html and site.css files"

이제 Cloud Shell 코드 편집기를 사용하여 일부 HTML을 파일에 추가합니다. code 명령을 실행하면 편집기를 열 수 있습니다. 터미널 프롬프트에서 code index.html을 입력하여 온라인 편집기에서 index.html을 엽니다.
```
code index.html
```

다음 HTML 코드에 붙여넣습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
    <link rel="stylesheet" href="CSS/site.css">
  </head>
  <body>
    <nav><a href="./index.html">home</a></nav>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <footer><hr>Copyright (c) 2021 Contoso Cats</footer>
  </body>
</html>

파일을 저장하고 편집기를 닫습니다. 편집기의 오른쪽 모서리에서 줄임표(‘...’)를 선택하거나 액셀러레이터 키(Windows 및 Linux의 경우 Ctrl+S, macOS의 경우 Cmd+S)를 사용할 수 있습니다.
Assets 디렉터리로 전환하고 편집기에서 site.css를 엽니다.
```
cd Assets
code site.css
```

다음 CSS를 파일에 추가합니다.

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; background-color: #F0FFF8; }
nav, footer { background-color: #C0D8DF; }

파일을 저장하고 편집기를 닫습니다.

Bob 디렉터리로 돌아가서 다시 커밋합니다.
```
cd ..
git add .
git commit -m "Add simple HTML and stylesheet"
git push --set-upstream origin main
```
참고

다른 기본 분기 이름을 사용하므로 기본 분기를 원본 리포지토리의 주 분기에 연결하도록 git에 지시해야 합니다.

출력을 확인합니다. 다음과 같은 경고가 표시되는 경우 걱정하지 마세요. 이 경고는 사용자에게 Git 기본 동작의 변경 사항을 알리는 것뿐입니다.

warning: push.default is unset; its implicit value has changed in
Git 2.0 from 'matching' to 'simple'. To squelch this message
and maintain the traditional behavior, use:

  git config --global push.default matching

To squelch this message and adopt the new behavior now, run:

  git config --global push.default simple

When push.default is set to 'matching', git will push local branches
to the remote branches that already exist with the same name.

Since Git 2.0, Git defaults to the more conservative 'simple'
behavior, which only pushes the current branch to the corresponding
remote branch that 'git pull' uses to update the current branch.

See 'git help config' and search for 'push.default' for further information.
(the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
'current' instead of 'simple' if you sometimes use older versions of Git)

이 경고가 다시 표시되지 않도록 하려면 다음 명령을 실행하면 됩니다.

git config --global push.default simple

출력에서 성공의 표시로 다음을 확인합니다.

Counting objects: 9, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (9/9), 953 bytes | 953.00 KiB/s, done.
Total 9 (delta 0), reused 0 (delta 0)
To ../Shared.git
 * [new branch]      main -> main

Alice를 위한 분기 만들기

Alice는 add-style이라는 토픽 분기를 만들어 작업을 수행하려고 합니다. Alice의 역할을 맡아 분기를 만든 다음 이 분기에 코드를 추가해 보겠습니다.

이 디렉터리에서 한 수준 위로 이동하고 Alice의 리포지토리 복사본용 디렉터리를 만듭니다.
```
cd ..
mkdir Alice
```

Alice를 위한 리포지토리를 복제하고 구성합니다.

cd Alice
git clone ../Shared.git .
git config user.name Alice
git config user.email alice@contoso.com

이제 리포지토리의 현재 복사본이 있습니다. 확인하려면 파일 내용을 나열하고 git status를 실행하여 리포지토리의 상태를 확인할 수 있습니다.
```
ls
git status
```
git branch 명령을 실행하여 add-style이라는 분기를 만듭니다. 그런 다음, git checkout 명령을 실행하여 해당 분기로 전환합니다(이를 ‘현재 분기’로 지정함).
```
git branch add-style
git checkout add-style
```
Alice/Assets 디렉터리에서 site.css를 엽니다. 이 파일의 맨 아래에 다음 CSS 클래스 정의를 추가합니다.
```
.cat { max-width: 40%; padding: 5 }
```
파일 변경 내용을 저장하고 편집기를 닫습니다.

변경 내용을 커밋합니다.

git commit -a -m "Add style for cat pictures"

이 시점에서 Alice는 자신의 스타일을 모든 사용자가 사용할 수 있도록 하고 싶어서 main으로 다시 전환하고 다른 개발자의 변경 내용을 적용하기 위해 끌어오기를 수행합니다.
```
git checkout main
git pull
```
출력에는 main 분기가 최신 상태로 표시됩니다(즉, Alice의 컴퓨터에 있는 main이 공유 리포지토리의 main과 일치). 따라서 Alice는 git merge --ff-only 명령으로 ‘빠른 진행’ 병합을 수행하여 add-style 분기를 main 분기에 병합합니다. 그런 다음에는 앨리스가 main을 자신의 리포지토리에서 공유 리포지토리로 푸시합니다.
```
git merge --ff-only add-style
git push
```

이 경우 main 분기에 변경 내용이 없기 때문에 빠른 진행 병합이 반드시 필요한 것은 아니지만, 어쨌든 Git는 변경 내용을 병합합니다. 그러나 main이 변경된 경우에는 --ff-only 병합이 실패하므로 --ff only 플래그를 사용하는 것이 좋습니다.

계속

연습 - Alice로 분기 만들기

설정

공유 bare 리포지토리 만들기

Bob을 위한 공유 리포지토리 복제

베이스 파일 추가

Alice를 위한 분기 만들기

피드백