DEV.to의 편집기 가이드에 엑스트라 브래킷이 있었고 제거했습니다 .D
PR: https://github.com/thepracticaldev/dev.to/pull/4500
인기있는 오픈 소스 프로젝트에서 대부분의 좋은 첫 번째 이슈가 해결되었고 누군가 이미 그 문제를 해결하고 있음을 알게 될 것입니다. 이 경우 채팅 채널에 참여할 수 있습니다. 프로젝트는 Slack, Discord, Spectrum, GitHub 토론 또는 도움을 요청할 수있는 기타 채팅 채널을 사용합니다. 이러한 채팅 채널에서 이슈를 찾는데 도움을 요청하는 메시지를 드롭 할 수 있습니다. 그러면 관리자가 이슈를 찾는데 도움을 줄 것입니다.
이것은 매우 정상적이며 기여 경험이 있더라도 새로운 조직에 기여하려고 할 때 처음에는 어려운 이슈를 발견 할 것입니다.
이슈에 대한 의견으로 언제든지 도움을 요청할 수 있습니다. 그러면 메인테이너가 이슈를 디버그하는데 도움을 주고 변경이 필요한 올바른 파일을 알려줄 수 있지만 도움을 요청하기 전에 직접 탐색 해보세요.
코드 탐색을 시작하기 전에 항상 리파지토리의 CONTRIBUTING.md 파일을 읽어보세요. (리파지토리에 CONTRIBUTING.md가없는 경우, whoop whoop 🎉 CONTRIBUTING.md를 추가하는 Pull Request를 보낼 수있는 기회입니다). 일반적으로 기여하는데 필요할 수 있는 로컬 설정 가이드 및 기타 정보가 있습니다. 로컬로 설정한 다음 탐색하거나 GitHub 자체에서 탐색한 다음 로컬 설정을 수행하여 변경할 수 있습니다.
나는 당신이 코드에서 놀고 실행하기 때문에 로컬로 탐색하는 것을 선호합니다.
어썸. 이제 당신은
🗸 작업하려는 문제를 결정했습니다. 🗸 CONTRIBUTING.md 읽습니다.
이제 우리는 탐색합니다 아아아아 !! 그러나 잠시만..
재미있는 사실, 전체 코드를 이해할 필요는 없습니다.🎉
선택한 이슈와 관련된 코드에만 신경을 쓰면됩니다.
팁 : VSCode에서 CTRL + SHIFT + F를 사용하여 전체 프로젝트에서 무언가를 찾거나 GitHub에서 검색 창을 사용하여 관련 코드를 찾을 수 있습니다.
기여하고 있는 프로젝트가 웹사이트인 경우 인터페이스에 표시되는 단어를 검색 할 수 있습니다. 예 : DEV의 내비게이션 바에 기여하고 싶다면 “Write a Post”버튼을 검색 할 수 있습니다.
웹사이트가 아닌 경우 항목 파일로 시작하는 가져 오기를 따라 관련 기능을 찾을 수 있습니다.
NPM 패키지의 main
속성이 있는 package.json을 찾을 수 있습니다. main
의 값은 해당 NPM 패키지를 import/require 때 가져 오는 파일입니다.
CLI에 기여하는 경우 CLI 명령을 실행할 때 실행되는 파일을 가리키는 package.json에서 bin
을 찾을 수 있습니다.
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 논리를 처리하는 파일을 찾을 수 있습니다.
웹사이트와 웹앱을 빌드 한 후 React의 소스 코드를 보면 코드가 다르게 보일 것입니다. 일부 리파지토리에는 다른 방법으로는 볼 수 없는 몇 가지 추가 주제에 대한 지식이 필요합니다.
일부 프로젝트는 추상 구문 트리(Abstract Syntax Trees) 위에 구축되는 반면 일부 리파지토리는 다른 언어/라이브러리를 사용합니다.
이 코드는 언뜻 보기에는 어려울 것 같지만 그 이상은 다르다. 그것은 우리의 자바스크립트 개발자들이 보통 접하는 것과는 다릅니다.
코드베이스를 둘러 보는데 시간을 할애 할 수 있으며 문제가 발생하면 언제든지 메인테이너에게 질문 할 수 있습니다.
이 글을 읽어 주셔서 감사합니다 🎉 git, GitHub 또는 기여에 대한 질문이 있으면 댓글로 질문하거나 내 트위터 DM @saurabhcodes으로 저에게 연락 할 수 있습니다.
🌻🌻🌻🌻