코드 작성 및 저장

이제 계획한 웹 사이트 기능인 별표가 표시된 리포지토리를 나열하는 페이지를 빌드합니다. 그 과정에서 분기, 커밋 및 끌어오기 요청을 사용하여 작업 공간을 설정하고, 변경 내용을 만들고 저장하고, 검토를 위해 제안하는 핵심 개발자 워크플로를 따릅니다.

사전 요구 사항

리포지토리의 stargazers-log 로컬 복제본입니다. 아직 설정하지 않은 경우 Connecting to your code locally을 참조하세요.

브랜치 생성하기

브랜치를 사용하면 준비가 될 때까지 코드의 main 복사본은 변경하지 않고 별도의 공간에서 기능을 작업할 수 있습니다.

GitHub Desktop을 엽니다.
앱 맨 위에서 현재 분기를 클릭한 다음 새 분기를 클릭합니다.
분기 add-starred-list이름을 지정한 다음 분기 만들기를 클릭합니다.
브랜치 게시를 클릭하여 브랜치를 GitHub에서 사용할 수 있게 합니다.

웹 사이트 코드 빌드

기능에는 샘플 데이터, 스타일시트, 데이터를 표시하는 스크립트 및 업데이트된 홈페이지와 같은 몇 가지 파일이 필요합니다.

이러한 파일을 직접 작성하거나 AI 도우미에게 요청 Copilot하여 생성할 수 있습니다. 모든 GitHub 계정에는 무료 GitHub Copilot에 대한 액세스와 AI 크레딧이 포함되어 있으므로, Copilot를 바로 사용하기 시작할 수 있습니다.

사용 가능한 계획 및 사용 방법에 대한 Copilot 자세한 내용은 설명서의 GitHub Copilot 계획.

편집기에서 열고 공동 파일럿 채팅 다음과 같은 프롬프트를 사용하여 파일을 만들도록 요청합니다.

Text

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.

다음에서 열기공동 파일럿 채팅VS Code

생성되는 항목을 Copilot 검토한 다음 아래 예제와 일치하도록 파일을 조정합니다.

Copilot를 사용하지 않았다면 코드 편집기를 사용하여 add-starred-list 브랜치에서 아래 파일을 생성하세요.

다음 샘플 데이터를 사용하여 명명된 events.json 파일을 만듭니다. 파일을 저장합니다.

JSON

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

[
  { "name": "octocat/Hello-World", "starred": "2024-01-15" },
  { "name": "github/docs", "starred": "2024-02-02" },
  { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
]

다음 스타일로 명명된 style.css 파일을 만듭니다. 파일을 저장합니다.

SCSS

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

body {
  font-family: sans-serif;
  margin: 2rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

다음 코드로 명명된 script.js 파일을 만듭니다. 파일을 저장합니다.

JavaScript

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

fetch("events.json")
  .then((response) => response.json())
  .then((events) => {
    const list = document.querySelector("#starred");
    events.forEach((event) => {
      const item = document.createElement("li");
      item.textContent = `${event.name} — starred ${event.starred}`;
      list.appendChild(item);
    });
  });

새 파일을 연결하고 목록을 보관하도록 업데이트 index.html 합니다. 파일을 저장합니다.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stargazers log</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Stargazers log</h1>
    <p>A log of the repositories I've starred.</p>
    <ul id="starred"></ul>
    <script src="script.js"></script>
  </body>
</html>

변경 내용 커밋 및 푸시

커밋하면 변경 내용의 스냅샷이 저장되고 푸시하면 변경 내용이 리포지토리에 저장될 위치로 GitHub 전송됩니다.

에서 GitHub Desktop왼쪽 사이드바에서 변경된 파일을 검토합니다.
사이드바 아래쪽의 요약 필드에 다음과 같은 Add starred repositories list커밋 메시지를 입력합니다.
4개 파일을 커밋을 클릭하여 별표가 추가된 목록에 추가합니다.
Push origin을 클릭하여 커밋을 GitHub로 보냅니다.

끌어오기 요청 열기

풀 리퀘스트는 브랜치의 변경 사항을 main에 병합하기 전에 검토할 수 있도록 합니다.

에서 GitHub Desktop끌어오기 요청 미리 보기를 클릭한 다음 끌어오기 요청 만들기를 클릭합니다. 브라우저가 GitHub의 풀 리퀘스트 양식으로 열립니다.
제목 및 설명을 검토한 다음 기능의 기능에 대한 메모를 추가합니다.
끌어오기 요청 만들기를 클릭합니다.

달성한 작업

과업	결과
브랜치를 만들었습니다
`add-starred-list`를 사용하여 해당 기능을 위한 격리된 공간을 만들었습니다.
코드를 작성했습니다.	선택적으로 공동 파일럿 채팅의 도움을 받아 해당 기능의 파일을 브랜치에 추가했습니다.
변경 내용을 푸시했습니다	브랜치의 변경 내용을 GitHub에 저장했습니다.
끌어오기 요청을 열었습니다.	검토를 위해 변경 내용을 제안했습니다.

추가 읽기

다음 단계

병합하기 전에 자신이 변경한 내용을 검토하여 문제를 초기에 발견하세요. AUTOTITLE을 계속 진행합니다.

Get started

이 기사에서