레슨 1

비디오 시청: 레슨 1 소개.

이 레슨에서는 가장 작은 문제 - 한 글자의 텍스트 변경에 대처합니다. 이를 위해 우리는 배워야 할 것들이 있습니다:

  • GitLab 개발 환경 설정하는 방법.
  • GitLab 코드 베이스를 탐색하는 방법.
  • GitLab 프로젝트에서 Merge Request을 생성하는 방법.

이 3가지를 학습한 후에, GitLab 팀원이 실시간 코딩 데모를 진행합니다. 데모에서는 학습한 기능을 사용하여 이 작은 문제 중 하나를 완료함으로써 여러분이 문제를 직접 해결할 수 있도록 도와줍니다.

실시간 코딩에서 완료할 문제와 매우 유사한 문제 디렉터리이 “링크된 항목” 섹션에 있으니, 지금이라도 여기에 댓글을 남겨 자신을 하나에 할당하여 따라 할 수 있는지 확인해보세요.

GDK란 무엇인가요?

비디오 시청: GDK란 무엇인가요?

GDK(개발환경 키트, GitLab Development Kit)는 개발자들이 자신의 컴퓨터에서 GitLab을 실행하고 테스트할 수 있는 GitLab의 로컬 인스턴스입니다. 프론트엔드 전용 애플리케이션과는 달리, GDK는 백엔드 서비스, API 및 로컬 데이터베이스를 포함한 전체 GitLab 애플리케이션을 실행시킵니다. 이를 통해 개발자들은 변경 사항을 만들고, 실시간으로 테스트하고, 수정 사항을 유효성 검사할 수 있습니다.

GDK 사용 팁:

  • 문제 해결 문서: GDK에서 문제가 발생할 때 GDK 리포지터리의 문제 해결 문서를 참조하세요. 이러한 자료는 일반적인 문제를 해결하는 데 유용한 명령어와 팁을 제공합니다.
  • Rails 콘솔 사용: Rails 콘솔은 로컬 GitLab 인스턴스와 상호 작용하기 위한 필수 도구입니다. gdk rails c를 실행하여 앞단 기능을 활성화 또는 비활성화하고, 백엔드 작업 등을 수행할 수 있습니다.
  • 최신 상태 유지: GDK를 정기적으로 업데이트하여 gdk update를 실행하세요. 이 명령은 GitLab 프로젝트의 최신 브랜치와 GDK 및 의존성의 최신 브랜치를 가져옵니다. GDK를 최신 상태로 유지하면 최신 버전의 GitLab을 사용하고 최신 버그 수정 사항을 보장할 수 있습니다.

더 궁금한 점이 있거나 특정 질문이 있을 경우, Discord기타 사용 가능한 지원 채널을 통해 GitLab 커뮤니티에 문의하세요.

GDK 로컬로 설치하고 사용하기

비디오 시청: GDK 설치하기.

최신 설치 지침은 GitLab 개발 키트 문서를 참조하세요.

다음은 단계별 요약입니다:

  1. 전제 조건:
  2. 설치:
    • GitLab 개발 키트 (GDK)를 설치할 디렉터리를 선택하세요.
    • 터미널을 열고 선택한 디렉터리로 이동하세요.
    • 터미널에서 설치 스크립트를 다운로드하고 실행하세요:

      curl "https://gitlab.com/gitlab-org/gitlab-development-kit/-/raw/main/support/install" | bash
      
    • 안전한 소스에서만 스크립트를 실행하세요.
    • 설치 프로세스는 약 20분 이상 소요될 수 있습니다.
  3. 리포지터리 선택:
    • 기본 GitLab 리포지터리를 복제하는 대신, 더 넓은 커뮤니티 멤버를 위해 권장되는 커뮤니티 포크를 사용하세요.
    • 커뮤니티 포크를 설치하는 지침에 따르세요.
  4. GDK 구조:
    • 설치 후에 GDK 디렉터리가 생성됩니다.
    • GDK 디렉터리 내에서 GitLab 프로젝트 폴더를 찾을 수 있습니다.
  5. GDK 사용:
    • GDK에는 설치와 상호 작용하기 위해 사용할 수 있는 다양한 명령어가 있습니다. 이러한 명령어를 실행하려면 GDK 또는 GitLab 폴더 내에 있어야 합니다.
    • 터미널에서 gdk start 명령을 실행하여 GDK를 시작하세요.
    • 터미널에서 gdk help 명령을 실행하여 사용 가능한 명령어와 옵션을 살펴볼 수 있습니다.

더 궁금한 점이나 문제가 있을 경우, 문서를 참조하거나 커뮤니티 지원을 찾아보세요.

GDK를 로컬로 실행하는 대신 Gitpod 사용하기

비디오 시청: Gitpod로 GitLab 사용하기.

Gitpod은 개발자가 자신의 컴퓨터가 아닌 Gitpod 서버에서 GitLab 개발 키트(GDK)를 실행할 수 있는 가상 머신을 실행하고 코드를 편집하며 GDK를 직접 확인할 수 있는 웹 기반 통합 개발 환경(IDE)을 제공하는 서비스입니다. Gitpod은 로컬에 GDK를 설치하지 않고도 빠르게 GDK 환경을 구축하거나 작은 Merge Request을 만드는 데 유용하며, 자원이 부족한 기계에서 GDK를 실행할 수 있게 해줍니다.

Gitpod 사용 방법:

  1. GitLab 커뮤니티 포크에 액세스 권한 요청. 또는 공개 포크를 만들 수 있지만 커뮤니티 포크의 장점을 놓치게 될 수 있습니다.
  2. GitLab 커뮤니티 포크 웹사이트로 이동하여 편집을 선택한 후 Gitpod을 선택하세요.
  3. 편집기(일반적으로 main 또는 master 브랜치) 및 컨텍스트와 같은 설정을 구성하세요.
  4. Open을 선택하여 Gitpod 워크스페이스를 생성하세요. 이 프로세스에는 최대 20분이 소요될 수 있습니다. GitLab 개발 키트(GDK)가 Gitpod 워크스페이스에 설치됩니다. 이 설치는 로컬로 다운로드하고 설치하는 것보다 더 빠릅니다.

워크스페이스가 생성되면 선택한 IDE가 브라우저에서 실행됩니다. 원하는 경우 데스크탑 IDE에 연결할 수도 있습니다. Gitpod을 로컬에서 VS Code처럼 사용하세요. 브랜치를 만들고, 코드를 변경하고, 변경 사항을 커밋하고 커뮤니티 포크로 푸시하세요.

기타 팁:

  • 워크스페이스가 파기되지 않도록 정기적으로 코드를 푸시하세요. 비활성 상태의 워크스페이스는 최종적으로 파기됩니다.
  • 필요한 경우 Gitpod 워크스페이스 설정을 사용자 정의하세요. 예를 들어, GitLab 프론트엔드를 공개적으로 이용 가능하게 만들 수 있습니다.
  • 분을 모두 사용하게 되는 경우 Discord 서버의 지원팀에 문의하세요.
  • 로컬로 실행 중인 것과 마찬가지로 Gitpod 워크스페이스에서 gdk startgdk status와 같은 명령어를 사용하여 문제를 해결하세요.

이러한 단계를 따라가면 로컬 설치 없이 GitLab 개발 키트(GDK)을 활용할 수 있는 Gitpod을 활용할 수 있습니다.

GitLab 코드베이스 탐색

GitLab 코드베이스를 탐색하는 것은 기여자에게 필수적입니다. 코드베이스를 탐색하고 특정 파일을 찾는 것은 변경을 수행하고 문제에 대처하는 데 중요하지만 도전적일 수 있습니다. 여기에서는 GitLab에서 파일을 찾고 해당 파일이 렌더링되는 위치를 찾는 단계별 프로세스를 살펴보겠습니다.

이미 작업할 파일을 알고 있고 이제 그 파일이 어디에 렌더링되는지 찾으려면:

  1. 파일의 목적을 이해하기 위해 단서를 모으는 것부터 시작하세요. 파일 자체에서 관련 정보를 찾아보세요. 키워드나 특정 콘텐츠를 찾아 그 맥락을 나타낼 수 있는지 확인하세요.
  2. 파일 경로(또는 폴더 구조)를 조사하여 파일이 렌더링될 수 있는 위치에 대한 통찰을 얻을 수도 있습니다. GitLab의 대부분의 라우팅은 폴더 구조와 매우 유사합니다.
  3. 이 컴포넌트가 사용된 기능(또는 여러 기능 중 하나)을 알아내면 GitLab 사용자 설명서를 활용하여 해당 기능 페이지로 이동하는 방법을 찾을 수 있습니다.
  4. 컴포넌트 계층 구조를 따라가 파일 이름을 전역 검색하여 해당 컴포넌트를 렌더링하는 상위 컴포넌트를 식별합니다. 컴포넌트 계층 구조를 계속 따라가서 인식하는 기능으로 거슬러 올라가거나 GitLab 사용자 설명서에서 검색할 수 있습니다.
  5. GitLens와 같은 확장 기능을 사용하여 git blame을 사용하여 최근에 해당 파일이 변경된 MR을 찾을 수 있습니다. 대부분의 MR에는 따르면 “유효성 검사 방법” 단계를 갖추고 있습니다. 이 단계가 포함되어 있지 않은 경우 이전 변경사항을 찾아 이 단계가 포함된 변경사항을 찾을 때까지 계속 찾아보세요.

수정해야 할 페이지를 알고 있고 파일 경로를 찾고 싶다면 다음 방법을 시도해볼 수 있습니다:

  • 변수를 포함하지 않고 고유한 콘텐츠를 찾아 번역 변수를 검색할 수 있도록 합니다.
  • Vue Dev Tools를 사용하여 컴포넌트 이름을 찾아보세요.
  • HTML의 고유한 식별자(예: data-testid, id 또는 CSS 클래스)를 찾은 후 해당 식별자를 전역으로 검색하여 코드베이스에서 찾습니다.

좋은 Merge Request 작성

비디오 보기: 좋은 MR 작성 방법.

Merge Request을 작성할 때 주의해야 할 중요한 사항이 있습니다:

  • Merge Request(MR)은 GitLab 프로젝트의 영구적인 문서의 일부가 될 것입니다. 나중에 어떤 코드가 원래와 다르게 작동하는지, 대안적인 해결책을 사용하지 않은 이유 등을 이해하는 데 도움이 될 수 있습니다.
  • 적어도 2명의 엔지니어가 귀하의 코드를 검토할 것입니다. 효율성을 위해(귀하가 작성한 코드와 마찬가지로) 귀하의 MR을 더 잘 만드는 데 조금 더 시간을 들이는 것이 다른 사람들이 빠르고 쉽게 읽을 수 있도록 하는 데 도움이 될 것입니다.
  • GitLab에서 생성하는 MR은 공개적으로 이용할 수 있습니다. 따라서 직장을 구할 때 특히 자랑스러운 MR에 대한 링크를 포트폴리오 페이지에 추가할 수 있습니다.
  • MR은 기술 문서이므로 기술적인 글쓰기 스타일을 구현하려고 노력해야 합니다. 이에 대해 잘 모르는 경우 Google의 기술 문서 작성에 대한 권고하는 짧은 코스를 참고하세요. 또한 GitLab에서 기여하고 있다면, GitLab의 기술 문서 기본 원리 코스도 이용할 수 있습니다.

실시간 코딩

비디오 보기: 레슨 1 코드 실습.

이제 여러분 차례입니다. 첫 번째 MR을 완료해 보세요. 방금 완료한 것과 매우 유사한 문제 디렉터리이 여기의 “연결된 항목” 섹션에 있습니다. 기여해 주셔서 감사합니다! (문제가 없는 경우 Discord 또는 다른 이용 가능한 지원 채널에서 알려주시면 더 찾아드리겠습니다)