공지: 메인테이너가 되어 이 프로젝트를 관리하는데 도움을 주시겠습니까? 관심 있으신 분들은 트위터로 DM을 보내주시고 maintainer's guide을 정독하세요.
이 튜토리얼은 기여가 처음인 분들이 쉽고 간단하게 프로젝트에 참여할 수 있도록 도움을 주기 위한 튜토리얼입니다.
이 튜토리얼은 다른 언어(포르투갈어, 스페인어, 이탈리아어)로도 제공됩니다.
- 오픈소스 프로젝트에 기여하기
- 깃허브를 더 능숙하게 사용하기
- 이 프로젝트는 초보자들을 위한 프로젝트입니다. 앵커 태그
<a href="" target=""></a>를 작성하고 수정할 수 있다면 이 프로젝트에 참여할 수 있습니다.
- 처음으로 오픈소스에 기여 해보고 싶거나 다른 프로젝트에 기여 경험이 있지만 더 많은 기여를 경험하고 싶은 분들을 위한 프로젝트입니다.
웹 개발자 취업을 희망하는 사람들과 현직 개발자들에게 Git 버전 관리는 필수입니다. GitHub는 많은 사람들이 사용하는 가장 대중적인 Git 호스팅 서비스이자 오픈소스 커뮤니티입니다. GitHub를 능숙하게 사용하는 것은 개발자로써 중요한 기술 중 하나입니다. 프로젝트에 기여하면 GitHub 사용에 대한 자신감이 높아지고 GitHub 프로필에 기여 내용이 표시됩니다.
만약 본인이 입문자이며 Git과 GitHub에 대해 배우고 싶다면 이 가이드를 참고하세요: You Should've Learned Git Yesterday.
여러분은 이 프로젝트의 웹 페이지에 위 그림과 같은 카드를 기여하게 될 것입니다. 카드에는 본인 이름, 트위터 아이디, 간단한 소개 및 여러분들이 추천하는 웹 개발자들을 위한 유용한 리소스 링크가 포함됩니다.
HTML 파일 내부에 카드 템플릿의 복사본을 만들고 본인의 정보로 수정하세요.
|
기여하기: - 1단계: 저장소 fork
- 2단계: 저장소 Clone
- 3단계: 새 브랜치 생성
- 4단계: index.html 파일 열기
- 5단계: 카드 템플릿 복사
- 6단계: 내용 변경
- 7단계: 변경 사항 Commit
- 8단계: 변경 사항 GitHub에 Push
- 9단계: PR 제출
- 10단계: 축하합니다!
|
작업을 위해서 몇 가지 준비를 해보겠습니다.
- GitHub 계정에 로그인하세요. 만약 아직 계정이 없으시다면 GitHub에 가입하세요. 작업 진행을 위해 GitHub Hello World 튜토리얼을 정독하시는 것을 추천드립니다.
- GitHub 데스크탑 앱을 설치하세요.
- 커맨드 라인에서 Git을 사용하는 것이 편하다면 GitHub 데스크탑 앱을 설치하지 않으셔도 됩니다.(커맨드 라인에서 Git 사용에 대한 가이드는 이 프로젝트와 유사한 프로젝트인 first-contributions을 참고하세요.) 또는
- VS Code를 사용하는 경우 통합 Git이 제공되므로 에디터에서 직접 필요한 작업을 수행할 수 있습니다.
이제 모든 준비가 완료되었으므로 본격적으로 프로젝트 기여를 위한 작업을 시작해보겠습니다.
간단한 10단계를 통해 오픈소스 기여자가 되어보세요.
예상 소요 시간: 30분 미만.
- 이 단계에서의 목표는 프로젝트의 복사본을 만들어 여러분의 GitHub 계정에 저장하는 것입니다.
- 저장소는 GitHub에서 프로젝트가 호출되는 방식이며 포크는 프로젝트의 복사본입니다.
- 이 저장소의 메인 페이지에서 아래 그림과 같은 버튼을 찾으세요.
- 이제 여러분의 계정에 프로젝트 사본 복사가 완료되었습니다.
- 이제 프로젝트의 로컬 복사본이 필요합니다. 로컬 복사본이란 여러분의 컴퓨터에 저장된 프로젝트의 복사본을 의미합니다.
- GitHub 데스크탑 앱을 엽니다. 앱에서 다음 작업을 수행하세요:
- File을 클릭한 다음 Clone repository를 클릭하세요.
|
 |
- GitHub에서 프로젝트 및 Fork 목록을 볼 수 있습니다.
<your-github-username>/Contribute-To-This-Project를 클릭하세요.- Clone을 클릭하세요
|
 |
- fork된 프로젝트는 왼쪽에 fork 아이콘이 있습니다.
- fork에는 고유한 GitHub 사용자 이름이 있습니다.
|
 |
- 프로젝트가 하드디스크로 복사되는데 시간이 소요됩니다. 일반적으로
..\Documents\GitHub를 기본 경로로 설정하는 것을 추천드립니다.
- 이제 프로젝트의 로컬 복사본이 생성되었습니다.
- 저장소가 복제되고 GitHub 데스크탑에서 열리면 새로운 브랜치를 생성할 차례입니다.
- 브랜치는 수정 사항을
Master라는 프로젝트의 주요 부분과 분리하는 수단입니다. 예를 들어 잘못된 수정을 통해 원하지 않은 결과를 얻게되더라도 간단히 브랜치 삭제를 통해 메인 프로젝트에 영향을 끼치지않게 할 수 있습니다.
- Current branch를 클릭하세요.
- New를 클릭하세요.
|
 |
- 브랜치 이름을 지정하세요.
Create branch를 클릭하세요.
|
 |
- 브랜치 이름을 마음대로 지정할 수 있지만, 이 브랜치는 본인의 이름이 입력된 카드를 프로젝트에 추가하기 위한 브랜치이므로 브랜치의 의도를 잘 나타낼 수 있는
your-name-card로 지정하는 것이 좋습니다.
- 이제 마스터와 분리된 새로운 브랜치를 생성했습니다.
- 다음 단계를 위해 이 브랜치에서 작업중인지 확인하세요. GitHub 데스크탑 앱의 상단 중앙에 Current branch에서 현재 브랜치의 이름이 표시됩니다.
절대 master 브랜치에서 작업하지 마세요.
- 이제 선호하는 코드 에디터에서 편집할 파일을 열어야 합니다.
- 컴퓨터에서 프로젝트 폴더를 찾으세요. 기본 값으로 설정했다면 다음과 같은 경로에서 프로젝트 폴더를 찾을 수 있습니다.
your-computer > Documents > GitHub > Contribute-To-This-Project
index.html 파일은 Contribute-To-This-Project 폴더에 저장되어 있습니다.
- 코드 에디터(Sublime, VS Code, Atom 등)를 열고
Open file 명령으로 프로젝트의 메인 디렉토리에서 index.html 파일을 찾습니다. - 하드 디스크에 저장된 파일을 우클릭해 직접 코드 에디터로 여는 방법도 있습니다.
|
 |
- 이제 코드 에디터에서 편집할 파일을 열었으며 편경할 준비가 완료되었습니다.
- 작업을 시작하기에 앞서, 카드 템플릿의 복사본을 만들어야 합니다.
- html 파일 상단,
<head> 및 <header> 섹션 아래에 == TEMPLATE ==레이블이 지정된 섹션이 있습니다. - 아래 이미지에 빨간색으로 표시된 사각형 내부의
Contributor card START부터 Contributor card END 주석 사이의 모든 코드를 복사하세요.
|
 |
- 복사한 코드를 주석 바로 아래에 붙여넣으세요.
- 카드의 시작 부분과 마지막 끝 부분 사이에 공백 한 줄이 있는지 확인하세요. 코드를 가능한 명확하게 유지하는 것이 좋습니다.
- 린터나 스타일 포매터를 사용하지마세요. 프로젝트에 Prettier 설정이 있습니다.
|
 |
- 이제 카드를 본인의 정보로 변경하고 편집할 차례입니다.
- 이제 html 편집을 시작할 것입니다. 카드에서 수정해야될 필드의 내용을 변경합니다.
- 'Name'을 자신의 이름으로 변경합니다.
-
class="name"를 수정 하지마세요.
|
 |
href="Insert URL here"에 트위터 계정 URL을 입력하세요.- 텍스트 필드에 계정 이름을 입력하세요.
|
 |
- 트위터가 아닌 다른 연락처를 사용하려면 Font Awesome Icons에서 본인이 사용하고 싶은 아이콘을 찾아
<i class="fa fa-twitter"></i>에서 fa-twitter 부분을 수정하면 됩니다. 예를 들어 페이스북 아이콘을 사용하려면 fa-twitter 대신 fa-facebook를 사용하면 됩니다.
- 여러분에 대해 알려주세요.
- 블로그 게시물처럼 자세한 설명이 아닌 트윗처럼 짧고 간결하게 작성하세요.
|
 |
- 웹 개발과 관련해 유용한 리소스가 있는 커뮤니티의 링크 3개를 공유하세요.
- 영상, 강연, 팟캐스트, 기사, 참고 자료 무엇이든 좋습니다.
- 만약 여러분이 초보자라도 부담갖지말고 아는 것 무엇이든 공유하세요. 많은 사람들이 도움을 받을 수 있을겁니다.
|
 |
- 링크:
href="here"의 # 부분에 링크를 삽입하세요. - 설명:
title="here"부분에 간단한 설명을 작성하세요. - 이름: >here` 부분에 리소스의 이름을 쓰세요.
|
- 변경된 내용들이 모두 저장되었는지 확인하세요.
- 변경된 내용들을 꼭 테스트하세요. 브라우저에서 html 파일을 열고 카드가 웹사이트에서 어떻게 보이는지 확인해야합니다. 전체 페이지에 이상이 없는지 확인하세요. 링크를 클릭하고 제대로 동작하는지도 확인해야합니다. 콘솔(Ctrl + Shift + J (Windows / Linux) 또는 Cmd + Opt + J (Mac))을 열고 에러 메시지가 없는지 확인하세요.
- 이제 코드 편집을 무사히 마쳤습니다! 다음 단계에서는 변경 사항을 GitHub로 보낸 다음 제출해 메인 프로젝트와 병합할 것입니다.
- 다시 GitHub 데스크탑 앱으로 돌아갑니다.
- 변경 사항이 스테이징 영역에 자동으로 추가됩니다.
- Git에 의해 모든 변경 사항이 기록되었습니다.
- 앱에 반영된 것을 확인할 수 있습니다. 파일에 추가된 부분은 녹색으로 표시되며 삭제된 항목은 빨간색으로 표시됩니다.
- 다음 단계는 commit입니다.
- commit은 간단히 "변경 사항 확인" 정도로 설명할 수 있습니다.
|
 |
- GitHub 데스크탑 헤더는 다음과 같아야 합니다.
Current repository에서 프로젝트 이름 옆 fork 아이콘을 확인하세요.- 여러분의
Current branch에 3단계에서 입력한 이름의 브랜치가 있을 것입니다.
|
 |
- Commit을 위해 Summary 필드를 작성하세요.
- 이 필드는 여러분이 무엇을 변경했는지를 설명하는 commit 메시지입니다.
- 이 경우 "Add my card information"가 적당한 commit 메시지가 될 것입니다.
- 필수는 아니지만, 더 자세한 설명이 담긴 Description을 추가할 수 있습니다.
- Commit 버튼을 클릭하세요. 버튼에
Commit to "your-branch-name"를 확인할 수 있을 것입니다.
|
 |
- 이제 변경된 내용들이 저장되고 commit되었습니다. 그러나 변경 사항들은 여러분의 로컬 컴퓨터에만 저장된 것입니다.
- GitHub의 저장소와 로컬 변경 사항을 동기화하는 것을 push라고 합니다. push를 통해 로컬 컴퓨터 저장소의 변경 사항들을 GitHub의 저장소로 "pushing"합니다.
- 몇 초 후에 작업이 완료되고 GitHub에 여러분의 컴퓨터의 브랜치 복사본과 정확히 일치하는 복사본이 존재하게 됩니다.
- 여러분이 기다리시던 Pull Request(PR)를 제출하는 단계입니다.
- 지금까지 실시한 모든 작업들은 여러분의 GitHub의 계정의 프로젝트 fork에 있었습니다.
- 이제 병합될 변경 사항을 메인 프로젝트에 보낼 차례입니다.
- 이것을 Pull Request라고 합니다. Pull Request는 말 그대로 프로젝트 관리자에게 끌어오도록(Pull) 요청(Request)하는 작업입니다.
- GitHub에서 여러분의 fork 저장소의 메인 페이지로 이동하세요. (맨 위의 사용자 이름과 fork 아이콘이 있습니다.)
- 저장소 상단에서 pull request 메시지가 적혀진 녹색 버튼이 있습니다.
Compare and pull request를 클릭하세요.
|
 |
- 아래는
Open a pull request 페이지입니다. - 우리는 지금 여러분의 브랜치의 fork를
Master 브랜치가 아닌 기존 프로젝트와 병합하려고 시도하고 있다는 것을 꼭 기억하세요. - 아래 이미지는 pull request의 헤더가 어떻게 구성되는지를 보여주고 있습니다.
- 가장 왼쪽 드롭박스에는 기존의 프로젝트가 있으며, 다음은 master 브랜치, 이어서 생성한 fork와 브랜치가 있습니다.
|
 |
- pull request 생성:
- 제목을 작성하세요.
- 설명에 추가적인 설명을 작성하세요.
Create pull request를 클릭하세요.
|
 |
- 다른 옵션들에 당황하지마세요. 여러분은 이 세 단계만 실시하시면 됩니다.
Allow edits from maintainers을 선택한 상태로 두세요.- 이제 Pull Request가 프로젝트 메인테이너에게 전송될 것입니다. 리뷰 후 검토가 완료되면 여러분이 변경한 내용이 프로젝트 웹 페이지에 반영됩니다.
모든 단계가 완료되었습니다! 여러분은 이제 GitHub의 오픈 소스 프로젝트에 기여했습니다.
라이브 웹 페이지에 여러분의 코드가 추가 되었습니다. https://syknapse.github.io/Contribute-To-This-Project
여러분이 추가하고 변경한 내용은 즉시 반영되지 않습니다. 먼저 프로젝트 메인테이너의 리뷰, 승인 및 병합 과정을 거쳐야합니다. 병합되면 카드가 라이브 웹 페이지에 표시됩니다.
PR에 대한 리뷰어의 수정 요청은 매우 일반적인 일입니다. 만약 여러분의 PR에 리뷰어가 수정 요청을 한다면 좋은 기회라고 생각하세요. 리뷰어의 의견과 요청된 변경 사항을 확인하고 변경 후 여러분의 브랜치에서 다시 commit, push 하시면 됩니다. PR은 새로운 변경 사항과 함께 자동으로 업데이트됩니다.
PR에 대해 가능한 빠르게 리뷰와 병합이 이루어지지만 남는 시간에 작업하기 때문에 며칠정도 소요될 수 있습니다.
- 병합된 Pull Request 확인하세요.
- 변경 사항이 승인되거나 추가적인 요청사항이 있을 경우 GitHub에서 메일을 발송하게 됩니다. 그리고 PR이 master와 최종적으로 병합되면 여러분의 카드가 추가됩니다.
- 이 프로젝트가 여러분에게 도움 되었다면 ⭐ star ⭐를 클릭해주시고 트위터에 공유하세요.
- 이 프로젝트의 제작자인 Syk Hhoudeib에게 연락하고 싶다면 트위터와 링크를 통해 연락할 수 있습니다.
- 이 프로젝트는 오픈 소스 프로젝트입니다. 카드 기여 외에도 버그, 개선 사항 및 새로운 기능 추가 등의 수정 사항은 언제든 환영입니다. issue를 관리하고 새로운 pull request를 보내세요.
- 커뮤니티를 참여하시려면 Pull Requerst 옆에 위치한 GitHub Discussions 탭을 확인하세요. 이 곳에서 본인 소개, 오픈 소스에 대한 토론 및 프로젝트 메인테이너와 소통할 수 있습니다. 커뮤니티에 참여해 기능을 추가하고 커뮤니티를 발전시키는데 도움을 주시겠습니까?
- 프로젝트에 기여해 주셔서 감사합니다. 이제
에서 초보자들도 참여할 수 있는 옵션을 찾아 다른 프로젝트에도 기여해보세요.
- PR을 리뷰하고 병합하는데 도움을 줄 콜라보레이터를 찾고 있습니다. 고급 Git 작업을 직접 해보고 싶으시면 트위터로 DM을 보내주시고 maintainer's guide를 정독하세요.
이 프로젝트는 Roshan Jossey가 만든 최고의 프로젝트 first-contributions에서 많은 영향을 받았습니다.
또한 #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe에서 큰 영감을 받았습니다.
MIT License
처음으로 ↑
