Skip to main content

예제 코드 찾기 및 이해

GitHub의 예제 코드에서 학습하여 코딩 기술을 향상시킵니다.

GitHub의 코드로 학습하는 방법

GitHub의 프로젝트를 통해 새로운 기술 학습 및 자신의 프로젝트를 위한 영감 찾기 등의 훌륭한 방법으로 학습할 수 있습니다.

그러나 GitHub에 수백만 개의 공개적으로 사용할 수 있는 리포지토리가 있어 프로젝트에 적용되는 코드를 찾는 것이 더욱 어려울 수 있습니다. 완벽한 리포지토리를 찾은 후에도 코드베이스를 탐색하여 유용한 예제를 찾는 것은 쉽지 않습니다.

전체 프로젝트를 이해하는 대신 단일 기능 또는 함수를 선택하여 어떻게 작동하는지 확인하는 것이 더 나은 접근 방식입니다. Copilot Chat 및 GitHub의 검색 기능을 사용하여 기능을 찾고 코드베이스를 따라갈 수 있습니다. 이는 백 엔드에서 프런트 엔드까지 기능이 어떻게 작동하는지 확인할 수 있으므로 학습할 수 있는 좋은 방법입니다.

이 가이드에서는 Jekyll 웹 사이트의 파일에서 데이터를 로드하고 표시하는 방법을 학습하는 예제 시나리오를 수행하여 학습하는 방법을 알아봅니다. 그런 다음, 팁과 기술을 다른 프로젝트 및 프로그래밍 언어에 적용할 수 있습니다.

예제 프로젝트 찾기

첫 번째 단계는 학습할 올바른 프로젝트를 찾는 것입니다.

Copilot Chat을 사용하여 리포지토리 식별

학습할 수 있는 코드가 포함된 프로젝트를 찾는 가장 빠른 방법은 Copilot Chat에 요청하여 기준에 맞는 리포지토리를 찾는 것입니다.

Copilot Chat을 열고 범용 채팅을 시작합니다. 그런 다음 다음과 같이 질문합니다.

Jekyll을 사용하여 리포지토리의 파일 데이터를 표시하는 인기 있는 리포지토리를 찾을 수 있나요?

Copilot은 관련 리포지토리 링크를 반환하며, 해당 리포지토리에 대한 후속 질문을 할 수도 있습니다.

Copilot은 더 많은 결과가 포함된 GitHub 검색 링크로 응답을 종료하는 경우가 많습니다. 다음으로 이러한 결과를 검토하겠습니다. 다음으로, 이러한 결과를 검토합니다.

검색을 사용하여 더 많은 옵션 식별

Copilot에 검색 결과에 대한 링크가 포함된 경우 링크를 따릅니다. 그렇지 않은 경우 아래 단계에 따라 사용자 고유의 검색 쿼리를 구성합니다.

  1. Advanced search로 이동합니다.
  2. "Advanced options" 섹션에서 "Written in this language" 드롭다운을 사용하여 프로그래밍 언어를 선택합니다. Jekyll 사이트의 경우 "HTML"을 선택합니다.
  3. 필요에 따라 "Repositories options"에서 "With this many stars" 옆에 >150을 입력합니다. 이렇게 하면 잘 유지 관리될 가능성이 있는 인기 있는 리포지토리를 찾는 데 도움이 됩니다.
  4. 페이지 맨 위로 이동하여 Search를 클릭합니다.

Tip

검색 쿼리에 토픽과 텍스트를 추가하여 검색 결과의 범위를 더 좁힐 수 있습니다. 예를 들어 topic:jekyll "blog"는 소유자가 Jekyll과 관련된 것으로 분류한 리포지토리를 반환하며 리포지토리 이름 또는 설명에 "blog"라는 단어를 사용합니다. 인기 있는 토픽 목록은 GitHub의 토픽을 참조하세요.

프로젝트 선택

Copilot 및 검색 결과를 검토하고 github/choosealicense.com 리포지토리를 사용하기로 결정했습니다. 이 리포지토리에는 오픈 소스 라이선스에 대한 정보를 공유하는 Jekyll 웹 사이트인 Choose a License의 소스 코드가 포함되어 있습니다.

특히 데이터 파일의 인기 있는 오픈 소스 라이선스를 표시하는 Licenses 페이지에 관심이 있습니다.

프로젝트 구조 파악하기

데이터 파일을 표시하는 코드를 살펴보기 전에 일반적인 리포지토리에 대해 살펴보겠습니다.

리포지토리를 처음 방문하면 어디서부터 시작해야 할지 막막할 수 있습니다. 프로젝트마다 고유한 개별 방식으로 구성되어 있지만, 일반적으로 방향을 파악하기 위해 일반적으로 사용할 수 있는 문서화 방법이 있습니다.

README.md 파일

리포지토리의 첫 페이지이며 파일 목록 아래에 자동으로 렌더링되는 README.md 파일을 읽는 것이 좋습니다. 유지 관리자마다 서로 다른 정보를 포함하지만 프로젝트에 대한 정보, 로컬 컴퓨터에서 빌드하는 방법 및 문서에 대한 링크를 종종 찾을 수 있습니다.

github/choosealicense.com 리포지토리에 있는 README.md 파일은 라이선스 파일이 있는 위치(/_licenses), 각 라이선스가 가질 수 있는 특성, 컴퓨터에서 웹 사이트를 실행하는 방법을 설명합니다.

Copilot Chat 사용

README.md 파일에서 모든 답변을 제공하지 않는 경우 Copilot에게 리포지토리를 탐색하고 기능을 찾는 데 도움이 되도록 요청할 수 있습니다.

Copilot Chat을 열려면 검색 창 옆에 있는 GitHub Copilot 아이콘을 클릭하여 질문하면 됩니다. 예시:

이 Jekyll 웹 사이트의 주요 방문 페이지는 무엇인가요?

Copilot 리포지토리에 대한 질문을 하면 관련 파일을 반환하고, 기능에서 사용하는 부분을 설명하고, 링크를 포함할 수 있습니다.

리포지토리의 Wiki

정보의 또 다른 가능한 소스는 리포지토리의 Wiki이며, 특히 호스팅 문서를 위한 리포지토리의 섹션입니다. GitHub의 모든 리포지토리에는 Wiki를 사용할 수 있는 기능이 제공되지만 모든 리포지토리에서 사용하는 것은 아닙니다. Wiki에 액세스하려면 리포지토리에서 Wiki 탭을 클릭합니다.

릴리스

리포지토리의 소스 코드가 실행 파일로 빌드되는 경우 일부 리포지토리 유지 관리자는 리포지토리의 릴리스를 사용하여 이진 파일을 게시합니다. 프로젝트를 직접 빌드하지 않고도 이러한 이진 파일을 다운로드하고 실행하여 코드베이스를 탐색하는 동안 애플리케이션의 작동 방식을 검사할 수 있습니다.

파일 목록과 README.md 오른쪽에 있는 사이드바에서 리포지토리의 릴리스를 찾을 수 있습니다.

내부 문서

리포지토리의 콘텐츠에서 내부 문서를 찾아볼 수도 있습니다. 단일 Markdown 파일 또는 Markdown 파일로 가득 찬 디렉터리일 수도 있습니다. 찾아야 할 일반적인 이름에는 "docs", "documentation", "wiki", "resources", "help", "manual"이 포함됩니다.

이제 리포지토리의 전체 구조를 이해했으므로 GitHub 검색을 사용하여 필요한 특정 기능을 찾아야 합니다.

리포지토리 내에서 검색하기 위해 페이지 맨 위에 있는 검색 필드를 클릭하면 GitHub에서 자동으로 repo 검색 한정자를 추가하여 검색 결과가 표시되는 리포지토리로 제한됩니다.

시작하기 위해 검색할 항목이 필요합니다. 항목은 조사하려는 기능과 관련된 고유한 텍스트 문자열이 될 수도 있고, 페이지의 HTML 소스를 살펴보고 특정 class 또는 id 특성에서 찾을 수도 있습니다.

이 예제에서는 repo:github/choosealicense "If you’re looking for a reference table?" 쿼리를 사용하여 라이선스 페이지 상단에서 텍스트를 검색합니다. 그러면 licenses.html이라는 파일로 하나의 결과가 반환됩니다.

이제 결과를 클릭하고 더 자세히 알아볼 수 있습니다. licenses.html은 찾고 있던 "Licences" 페이지의 원본입니다. 검색한 문자열과 각 라이선스가 아래 코드에 포함되어 있음을 확인할 수 있습니다.

{% include license-overview.html license-id="agpl-3.0" %}

소스 코드 이해

관심 있는 특정 코드를 찾았으므로 이 코드를 이해하는 단계로 넘어갈 수 있습니다.

Copilot Chat에 코드에 관해 질문하기

Copilot을 사용하여 파일 또는 특정 코드 줄에 대해 자세히 알아볼 수 있습니다. Copilot은 프로그래밍 언어에 대한 정보를 리포지토리의 컨텍스트와 결합하여 질문에 아주 자세하게 답변합니다.

11번째 줄에 있는 {% include %} 태그가 어떻게 작동하는지 Copilot에게 설명을 요청해 보겠습니다. 해당 줄 번호를 클릭합니다. 그런 다음, 줄 오른쪽에 있는 을 클릭합니다. 채팅 창에서 다음과 같이 질문합니다.

이 줄에서는 무슨 일이 일어나고 있나요?

Copilot은 해당 줄에 license-overview.html 파일이 포함되어 있으며 표시할 license-id"agpl-3.0"이 전달되고 있음을 설명합니다.

Tip

Copilot Chat의 응답을 이해하지 못하는 경우 언제든지 답변을 단순화하거나 특정 부분을 확장하도록 요청할 수 있습니다.

주석 읽기

주석은 코드를 이해하는 데 사용할 수 있고, 실행되지 않는 사람이 읽을 수 있는 주석입니다. 일반적으로 // 또는 /*와 같은 문자로 구분됩니다.

다음과 같은 몇 가지 유형의 주석을 찾을 수 있습니다.

  • : 특정 줄에서 수행하는 작업을 설명하는 한 줄짜리 주석
  • 블록: 함수 또는 파일 전체에서 수행되는 작업을 설명할 때 사용되는 여러 줄에 걸쳐 작성되는 주석
  • 파일: 코드베이스 특정 부분의 개요를 제공하는 파일의 맨 처음에 있는 블록 주석

프로그래밍 언어 참조에서 함수 찾기

모든 프로그래밍 언어에는 언어의 모든 측면을 설명하는 온라인 참조 자료가 있습니다.

검색 엔진을 사용하여 프로그래밍 언어와 함수를 검색하는 경우 해당 함수의 참조 페이지에 대한 링크를 찾아야 합니다.

예를 들어, 검색 엔진에서 jekyll include를 검색하면 Jekyll 문서의 "포함" 문서를 반환해야 합니다. Jekyll의 문서를 자세히 읽어보면 라이선스 파일들이 _licenses 디렉터리에 있는 컬렉션이라는 것을 알 수 있습니다.

Tip

프로그래밍 언어 참조에서 함수를 찾을 수 없는 경우 해당 함수가 코드베이스 자체에 정의되어 있을 가능성이 높습니다. GitHub Copilot에 문의하여 찾으세요.

학습한 내용을 요약하자면, licenses.html 파일에는 표시된 각 라이선스에 대한 /_includes/license-overview.html이 포함되어 있습니다. /_includes/license-overview.html 파일은 /_licenses 컬렉션의 라이선스에 제공된 license-id와 일치하고 세부 정보를 렌더링합니다.

작은 변경 내용으로 실험하기

프로젝트를 컴퓨터의 로컬에서 실행할 수 있다면, 아주 작은 변화를 주어 어떤 일이 발생하는지 학습하는 것이 아주 효과적인 방법입니다.

텍스트를 변경하는 것으로 시작한 다음, 함수와 파일이 서로 상호 작용하는 방식을 실험하는 등 더 큰 변경을 수행할 수 있습니다.

_includes 디렉터리에서 license-overview.html 파일을 찾은 다음, 라이선스가 표시되는 방식을 변경하거나 컬렉션에서 라이선스를 로드하는 방법을 실험해 보세요.

라이선스 파일 중 하나의 시작 부분에서 메타데이터를 변경하거나, license-overview.html에 표시되는 특성을 변경하거나, 고유한 특성을 추가해 볼 수도 있습니다. 변경을 완료한 후에는, README.md 지침에 따라 브라우저에서 메타데이터를 확인하여 테스트할 수 있습니다.

학습한 내용 적용하기

github/choosealicense.com 리포지토리는 대규모 Jekyll 프로젝트의 좋은 예이며, Jekyll 및 GitHub Pages를 활용하여 어떤 것들이 가능한지를 보여 줍니다. 리포지토리의 구조, 컬렉션을 사용하는 방법, 라이선스 데이터를 포함하는 방식으로 학습한 내용을 적용하여 고유한 프로젝트를 빌드할 수 있나요?

다음 단계

이제 예제 코드의 작동 방식을 이해했으므로 사용자 고유의 프로젝트에서 다시 사용할 수 있습니다. 코드 재사용은 소프트웨어 개발의 강력한 부분이지만, 이를 올바르고 합법적으로 수행하려면 따라야 할 중요한 단계가 있습니다. 전체 자습서를 보려면 프로젝트에서 다른 사용자의 코드 다시 사용을(를) 참조하세요.