{"meta":{"title":"코드 작성 및 저장","intro":"핵심 개발자 워크플로를 따라 브랜치를 만들고 코드를 작성한 다음, Copilot 및 GitHub Desktop을 사용하여 풀 리퀘스트를 엽니다.","product":"시작하기","breadcrumbs":[{"href":"/ko/get-started","title":"시작하기"},{"href":"/ko/get-started/start-your-journey","title":"여정 시작"},{"href":"/ko/get-started/start-your-journey/writing-and-storing-your-code","title":"코드 작성 및 저장"}],"documentType":"article"},"body":"# 코드 작성 및 저장\n\n핵심 개발자 워크플로를 따라 브랜치를 만들고 코드를 작성한 다음, Copilot 및 GitHub Desktop을 사용하여 풀 리퀘스트를 엽니다.\n\n이제 계획한 웹 사이트 기능인 별표가 표시된 리포지토리를 나열하는 페이지를 빌드합니다. 그 과정에서 분기, 커밋 및 끌어오기 요청을 사용하여 작업 공간을 설정하고, 변경 내용을 만들고 저장하고, 검토를 위해 제안하는 핵심 개발자 워크플로를 따릅니다.\n\n## 사전 요구 사항\n\n* 리포지토리의 `stargazers-log` 로컬 복제본입니다. 아직 설정하지 않은 경우 [로컬 환경에서 코드에 연결하기](/ko/get-started/start-your-journey/connecting-to-your-code-locally)을 참조하세요.\n\n## 브랜치 생성하기\n\n브랜치를 사용하면 준비가 될 때까지 코드의 `main` 복사본은 변경하지 않고 별도의 공간에서 기능을 작업할 수 있습니다.\n\n1. GitHub Desktop을 엽니다.\n2. 앱 맨 위에서 **현재 분기**를 클릭한 다음 **새 분기**를 클릭합니다.\n3. 분기 `add-starred-list`이름을 지정한 다음 분기 **만들기**를 클릭합니다.\n4. **브랜치 게시**를 클릭하여 브랜치를 GitHub에서 사용할 수 있게 합니다.\n\n## 웹 사이트 코드 빌드\n\n기능에는 샘플 데이터, 스타일시트, 데이터를 표시하는 스크립트 및 업데이트된 홈페이지와 같은 몇 가지 파일이 필요합니다.\n\n이러한 파일을 직접 작성하거나 AI 도우미에게 요청 Copilot하여 생성할 수 있습니다. 모든 GitHub 계정에는 무료 GitHub Copilot에 대한 액세스와 AI 크레딧이 포함되어 있으므로, Copilot를 바로 사용하기 시작할 수 있습니다.\n\n사용 가능한 계획 및 사용 방법에 대한 Copilot 자세한 내용은 설명서의 [GitHub Copilot 계획](/ko/copilot/get-started/plans).\n\n편집기에서 열고 공동 파일럿 채팅 다음과 같은 프롬프트를 사용하여 파일을 만들도록 요청합니다.\n\n<!-- markdownlint-disable search-replace -->\n\n```text copy\nCreate a starred repositories page for my software project. Add:\n- events.json with sample data for a few starred repositories\n- style.css to style a simple list\n- script.js to fetch events.json and render the list\n- an update to index.html that links style.css and script.js\n\nUse the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.\n```\n\n<!-- markdownlint-enable search-replace -->\n\n<a href=\"vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=button\" target=\"_blank\" class=\"btn btn-primary mt-3 mr-3 no-underline\" aria-label=\"Open Copilot Chat in Visual Studio Code\">\n<span>다음에서 열기공동 파일럿 채팅VS Code</span><svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-link-external\" aria-label=\"link external icon\" role=\"img\"><path d=\"M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z\"></path></svg>\n</a><br><br>\n\n생성되는 항목을 Copilot 검토한 다음 아래 예제와 일치하도록 파일을 조정합니다.\n\nCopilot를 사용하지 않았다면 코드 편집기를 사용하여 `add-starred-list` 브랜치에서 아래 파일을 생성하세요.\n\n1. 다음 샘플 데이터를 사용하여 명명된 `events.json` 파일을 만듭니다. 파일을 저장합니다.\n\n   ```json copy\n   [\n     { \"name\": \"octocat/Hello-World\", \"starred\": \"2024-01-15\" },\n     { \"name\": \"github/docs\", \"starred\": \"2024-02-02\" },\n     { \"name\": \"octo-org/octo-repo\", \"starred\": \"2024-03-21\" }\n   ]\n   ```\n\n2. 다음 스타일로 명명된 `style.css` 파일을 만듭니다. 파일을 저장합니다.\n\n   ```scss copy\n   body {\n     font-family: sans-serif;\n     margin: 2rem;\n   }\n\n   ul {\n     list-style: none;\n     padding: 0;\n   }\n\n   li {\n     padding: 0.5rem 0;\n     border-bottom: 1px solid #ddd;\n   }\n   ```\n\n3. 다음 코드로 명명된 `script.js` 파일을 만듭니다. 파일을 저장합니다.\n\n   ```javascript copy\n   fetch(\"events.json\")\n     .then((response) => response.json())\n     .then((events) => {\n       const list = document.querySelector(\"#starred\");\n       events.forEach((event) => {\n         const item = document.createElement(\"li\");\n         item.textContent = `${event.name} — starred ${event.starred}`;\n         list.appendChild(item);\n       });\n     });\n   ```\n\n4. 새 파일을 연결하고 목록을 보관하도록 업데이트 `index.html` 합니다. 파일을 저장합니다.\n\n   ```html copy\n   <!DOCTYPE html>\n   <html lang=\"en\">\n     <head>\n       <meta charset=\"utf-8\">\n       <title>Stargazers log</title>\n       <link rel=\"stylesheet\" href=\"style.css\">\n     </head>\n     <body>\n       <h1>Stargazers log</h1>\n       <p>A log of the repositories I've starred.</p>\n       <ul id=\"starred\"></ul>\n       <script src=\"script.js\"></script>\n     </body>\n   </html>\n   ```\n\n## 변경 내용 커밋 및 푸시\n\n커밋하면 변경 내용의 스냅샷이 저장되고 푸시하면 변경 내용이 리포지토리에 저장될 위치로 GitHub 전송됩니다.\n\n1. 에서 GitHub Desktop왼쪽 사이드바에서 변경된 파일을 검토합니다.\n2. 사이드바 아래쪽의 **요약** 필드에 다음과 같은 `Add starred repositories list`커밋 메시지를 입력합니다.\n3. **4개 파일을 커밋을 클릭하여 별표가 추가된 목록에 추가합니다**.\n4. **Push origin**을 클릭하여 커밋을 GitHub로 보냅니다.\n\n## 끌어오기 요청 열기\n\n풀 리퀘스트는 브랜치의 변경 사항을 `main`에 병합하기 전에 검토할 수 있도록 합니다.\n\n1. 에서 GitHub Desktop**끌어오기 요청 미리 보기를** 클릭한 다음 **끌어오기 요청 만들기**를 클릭합니다. 브라우저가 GitHub의 풀 리퀘스트 양식으로 열립니다.\n2. 제목 및 설명을 검토한 다음 기능의 기능에 대한 메모를 추가합니다.\n3. **끌어오기 요청 만들기**를 클릭합니다.\n\n## 달성한 작업\n\n| 과업                                                 | 결과                                              |\n| -------------------------------------------------- | ----------------------------------------------- |\n| 브랜치를 만들었습니다                                        |                                                 |\n| `add-starred-list`를 사용하여 해당 기능을 위한 격리된 공간을 만들었습니다. |                                                 |\n| 코드를 작성했습니다.                                        | 선택적으로 공동 파일럿 채팅의 도움을 받아 해당 기능의 파일을 브랜치에 추가했습니다. |\n| 변경 내용을 푸시했습니다                                      | 브랜치의 변경 내용을 GitHub에 저장했습니다.                     |\n| 끌어오기 요청을 열었습니다.                                    | 검토를 위해 변경 내용을 제안했습니다.                           |\n\n## 추가 읽기\n\n* [개별 GitHub Copilot 플랜 및 혜택 정보](/ko/copilot/concepts/billing/individual-plans)\n* [개인에 대한 사용량 기반 청구](/ko/copilot/concepts/billing/usage-based-billing-for-individuals)\n* [GitHub AI Credits 사용량 모니터링](/ko/copilot/how-tos/manage-and-track-spending/monitor-ai-usage)\n\n## 다음 단계\n\n* 병합하기 전에 자신이 변경한 내용을 검토하여 문제를 초기에 발견하세요.\n  [AUTOTITLE을 계속 진행합니다](/ko/get-started/start-your-journey/reviewing-your-proposed-changes)."}