dev.to 의 Saurabh Daware 님 이 작성한 A Guide for Contributing to Any Open Source JavaScript Project Ever 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다

모든 오픈소스 자바스크립트 프로젝트에 기여를 위한 가이드 💛

최근 코드베이스가 크거나 이슈가 생기고 good first issue 가 어려워 보일 때 어떤식으로 오픈소스 프로젝트에 기여할 수 있느냐고 묻는 사람들이 있었습니다.

이런 질문들을 많이 접했고 이 아티클에서는 어떻게 리파지토리를 탐색할 수 있는지 작업 가능한 적절한 이슈를 찾을 수 있는지 그리고 방금 말한 몇가지 질문에 답하도록 노력해보겠습니다. 🐨🌻

렛츠고 🎉

목차

1. 올바른 리파지토리 찾기 🕵

당신이 사용하는 것에 기여하거나 당신을 흥분시키는 것을 발견하고 기여하기 전에 그것을 가지고 놀아봅시다.

기여를 하기 전에 도구/라이브러리/웹사이트를 사용하는 것이 좋습니다. 이것은 그것이 무엇을하고 어떻게 작동하는지에 대한 좋은 개요(overview)를 제공 할 것입니다.

PR 만들기 과정이 불편하다면 먼저 First Contributions Repository에 기여할 수 있습니다. 목록에 이름을 추가하고 PR을 보내야합니다! 그들은 과정을 설명하는 좋은 가이드를 가지고 있습니다.

2. 올바른 문제 찾기 📚

이슈 섹션에서 good first issue 태그가 있는 이슈를 찾을 수 있습니다. 필수는 아니지만 일반적으로 ‘이 이슈는 다루기 쉽다’라는 관리자의 신호입니다. 만약 여러분이 더 흥분되는 이슈를 발견한다면 그것을 시도해보세요!

문서와 관련된 이슈는 시작하기 더 쉽기에 찾기를 제안하겠지만 그런 이슈를 찾을 수 없다면 원하는 것을 고를 수도 있습니다. 리파지토리에 익숙해지면 더 어려운 문제를 계속 선택할 수 있습니다.

그리고 앞으로 나가기 전에 여러분이 이말을 많이 들었을 수도 있다는 것을 알고 있습니다. 아마도 저는 이 말을 하는 1000번째 사람 일 것 입니다.

🎉 EVERY. CONTRIBUTION. MATTERS 🎉

문서의 철자 수정조차도 메인테이너에게 큰 도움이되며 그러한 기여에 대해 완전히 자랑스러워 해야합니다!

제가 자랑스럽게 생각하는 것이 있습니다 :

DEV.to의 편집기 가이드에 엑스트라 브래킷이 있었고 제거했습니다 .D

PR: https://github.com/thepracticaldev/dev.to/pull/4500

Q. 모든 이슈가 처리됩니다. 이슈를 어떻게 찾나요?

인기있는 오픈 소스 프로젝트에서 대부분의 좋은 첫 번째 이슈가 해결되었고 누군가 이미 그 문제를 해결하고 있음을 알게 될 것입니다. 이 경우 채팅 채널에 참여할 수 있습니다. 프로젝트는 Slack, Discord, Spectrum, GitHub 토론 또는 도움을 요청할 수있는 기타 채팅 채널을 사용합니다. 이러한 채팅 채널에서 이슈를 찾는데 도움을 요청하는 메시지를 드롭 할 수 있습니다. 그러면 관리자가 이슈를 찾는데 도움을 줄 것입니다.

Q. 이슈를 찾았지만 어려운 것 같습니다.

이것은 매우 정상적이며 기여 경험이 있더라도 새로운 조직에 기여하려고 할 때 처음에는 어려운 이슈를 발견 할 것입니다.

이슈에 대한 의견으로 언제든지 도움을 요청할 수 있습니다. 그러면 메인테이너가 이슈를 디버그하는데 도움을 주고 변경이 필요한 올바른 파일을 알려줄 수 있지만 도움을 요청하기 전에 직접 탐색 해보세요.

3. 코드 탐색 🤠

코드 탐색을 시작하기 전에 항상 리파지토리의 CONTRIBUTING.md 파일을 읽어보세요. (리파지토리에 CONTRIBUTING.md가없는 경우, whoop whoop 🎉 CONTRIBUTING.md를 추가하는 Pull Request를 보낼 수있는 기회입니다). 일반적으로 기여하는데 필요할 수 있는 로컬 설정 가이드 및 기타 정보가 있습니다. 로컬로 설정한 다음 탐색하거나 GitHub 자체에서 탐색한 다음 로컬 설정을 수행하여 변경할 수 있습니다.

나는 당신이 코드에서 놀고 실행하기 때문에 로컬로 탐색하는 것을 선호합니다.

어썸. 이제 당신은

🗸 작업하려는 문제를 결정했습니다. 🗸 CONTRIBUTING.md 읽습니다.

이제 우리는 탐색합니다 아아아아 !! 그러나 잠시만..

Q. 코드베이스가 매우 큽니다! 전체 코드베이스를 어떻게 이해할 수 있습니까?

재미있는 사실, 전체 코드를 이해할 필요는 없습니다.🎉

선택한 이슈와 관련된 코드에만 신경을 쓰면됩니다.

3a. 코드에서 올바른 파일 찾기

팁 : VSCode에서 CTRL + SHIFT + F를 사용하여 전체 프로젝트에서 무언가를 찾거나 GitHub에서 검색 창을 사용하여 관련 코드를 찾을 수 있습니다.

웹 사이트/프론트 엔드 리파지토리

기여하고 있는 프로젝트가 웹사이트인 경우 인터페이스에 표시되는 단어를 검색 할 수 있습니다. 예 : DEV의 내비게이션 바에 기여하고 싶다면 “Write a Post”버튼을 검색 할 수 있습니다.

웹사이트가 아닌 경우 항목 파일로 시작하는 가져 오기를 따라 관련 기능을 찾을 수 있습니다.

라이브러리, NPM 패키지 및 CLI에서

NPM 패키지의 main 속성이 있는 package.json을 찾을 수 있습니다. main의 값은 해당 NPM 패키지를 import/require 때 가져 오는 파일입니다.

CLI에 기여하는 경우 CLI 명령을 실행할 때 실행되는 파일을 가리키는 package.json에서 bin을 찾을 수 있습니다.

Mono-repos

React, Gatsby, Next와 같은 일부 프로젝트는 모노 레포를 따릅니다. 동일한 리파지토리에 모든 관련 프로젝트가 있습니다. 이러한 프로젝트에서는 루트 수준에서 packages라는 폴더를 찾을 수 있으며 packages 내에서 npm 라이브러리 이름의 폴더를 찾을 수 있습니다. (예 packages/react, packages/next, packages/gatsby).

패키지 안에 package.json 파일이 있는 경우 일반적으로 이러한 라이브러리에서 가져 오는 함수를 내보내는 파일을 가리키는 메인 키를 찾을 수 있습니다.

예

React를 사용했다면 일반적으로 useEffect 및 이와 같은 다른 훅을 임포트 하죠?

import { useEffect } from 'react';

즉, 패키지 반응이 useEffect 함수를 내 보내야 함을 의미합니다 🤔

알아 보죠!

앞서 언급했듯 모노레포에는 대개 packages 폴더가 있고 안에는 NPM library 이름의 패키지가 들어 있다(이 경우 ‘react’). 그러니 ‘packages/react/`로 들어가보죠. 🚀

이제 엔트리 파일을 찾고 package.json 파일을 살펴 보겠습니다.

React의 Package.json에는 {'main': 'index.js'}가 있습니다. 이는 우리가 react 패키지에서 가져온 모든 것을 index.js에서 내보내야 함을 의미합니다. useEffect 함수가 있는지 보죠!

Whoop whoop 🎉 그렇습니다!

이제 해당 함수에 대한 import를 수행하여 useEffect 논리를 처리하는 파일을 찾을 수 있습니다.

3b. 추가 지식이 필요한 프로젝트

웹사이트와 웹앱을 빌드 한 후 React의 소스 코드를 보면 코드가 다르게 보일 것입니다. 일부 리파지토리에는 다른 방법으로는 볼 수 없는 몇 가지 추가 주제에 대한 지식이 필요합니다.

일부 프로젝트는 추상 구문 트리(Abstract Syntax Trees) 위에 구축되는 반면 일부 리파지토리는 다른 언어/라이브러리를 사용합니다.

이 코드는 언뜻 보기에는 어려울 것 같지만 그 이상은 다르다. 그것은 우리의 자바스크립트 개발자들이 보통 접하는 것과는 다릅니다.

코드베이스를 둘러 보는데 시간을 할애 할 수 있으며 문제가 발생하면 언제든지 메인테이너에게 질문 할 수 있습니다.

초기 기여를위한 GitHub 리파지토리

Git 및 GitHub 학습을 위한 리소스

이 글을 읽어 주셔서 감사합니다 🎉 git, GitHub 또는 기여에 대한 질문이 있으면 댓글로 질문하거나 내 트위터 DM @saurabhcodes으로 저에게 연락 할 수 있습니다.

🌻🌻🌻🌻