프로그래머스 데브코스 87일차 with. TS 웹 풀스택

📚요약

새로운 주제로 강의를 시작하는 시간입니다. 이번 시간에는 오픈소스에 실제 기여해 보는 방법을 알아보겠습니다.

 

📖오픈소스

📄오픈소스

오픈 소스란 오픈 소스 소프트웨어를 줄여서 말하는 경우가 많습니다. 소스 코드가 오픈 소스 라이선스 규정에 맞게 공개되어 있어 코드를 정해진 규칙 내에서 자유롭게 활용할 수 있는 소프트웨어를 말합니다.

 

📑기여에 도전하면 좋은 점

• 좋은 코드 학습
• 협업 방식 학습
• 포트폴리오 한 줄
• 영어 독해실력 향상

📑대표적인 라이선스

• MIT
• Apache
• GPL

📄필요한 사전 지식

📑markdown

마크업 언어의 일종입니다. .md 확장자를 가지는 파일을 사용하면 일반 텍스트를 사용해 서식을 적용시킬 수 있습니다.

 

📑Git

소스코드 버전 관리 시스템입니다.

 

📑Github

Git 저장소 호스팅을 지원하는 웹 서비스입니다.

 

📄마인드 셋

• 너무 어려워하지 않기
• 명확한 목표를 세우고 → 단계별로 목표를 설정하고 → 결과에 연연하지 않고 과정을 즐기기

📄Contributor

컨트리뷰터란 단어 자체로는 기여자, 공헌자라는 뜻을 가지고 있습니다. 오픈소스에서는 contribution 활동을 하는 모든 사람을 지칭하는 말입니다.

 

📄실습

MDN 문서에 대해 기여를 해보는 것으로 실습을 진행하겠습니다.

 

실습 이전 설치할 프로그램 목록

• Git
• Nodejs
• Yarn
• VSCode

📑Yarn 설치하기

npm을 이용하지 않고 nodejs에서 제공하고 Yarn 공식 사이트에서 추천하는 corepack을 활용해 yarn을 설치해 보겠습니다. 설치 환경을 위도우입니다.

 

우선 cmd 창을 관리자 권한으로 실행합니다. `corepack -v` 명령어를 통해 버전을 확인할 수 있습니다. corepack이 설치되어 있는 것을 확인했다면 `corepack enable` 명령어를 사용합니다. 아무런 반응이 일어나지 않는 게 정상입니다. 이제 yarn -v를 통해 yarn이 설치된 것을 확인할 수 있습니다.

🍯tip! corepack은 nodejs의 16 버전 이상에 같이 설치가 되기 때문에 corepack 명령어가 동작하지 않으면 nodejs의 버전을 확인 바랍니다.

 

📑가이드라인 읽어보기

MDN 번역에 참여하는 것 또한 contributor로써 오픈 소스에 기여하는 것이라고 할 수 있습니다.

 

자세한 기여 방법에 대한 설명은 Github 사이트에서 확인 바랍니다.

 

해당 사이트를 살펴보면 기준이 정해져 있습니다. Discord나 Google Groups라는 도구를 통해 소통도 할 수 있습니다. 또한 이슈를 통해 첫 기여자가 쉽게 접근할 수 있도록 기여하는 방법이 정리된 글도 있습니다.

 

📑로컬 환경 세팅

mdn의 content repo와 translated-content repo를 fork 하고 로컬 환경으로 clone 하면 됩니다.

 

📑git clone 에러

translated-content를 clone 하는 과정에서 에러가 발생했습니다.

4error: 8128 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output

 단순하게 clone을 재시도하는 것으로는 해결되지 않았습니다.

 

혹시 몰라서 Git의 버전을 업데이트했습니다. `git update-git-for-windows` 명령어를 통해 수행할 수 있습니다.

Git의 버전이 2.44.0 → 2.46.0으로 업데이트되었고, 다시 clone하니 성공했습니다.

 

에러가 발생한 원인은 파일의 규모가 너무 큰 것으로 예상합니다.

 

clone이 끝나면 translated-content repo에서 새로운 브랜치를 만들어 보겠습니다. `git checkout -b <branch name>` 명령어를 수행합니다.

 

파일을 추가로 설정할 예정입니다. content에 .env 파일을 생성합니다.

CONTENT_TRANSLATED_ROOT=/<개인 폴더 위치>/translated-content/files
EDITOR=code

 

`yarn install`과 `yarn start`를 통해  화면을 보며 수정할 곳을 찾을 수 있습니다.

 

📑yarn start 에러

https://chatgpt.com/c/92d2e966-cc8f-4880-9413-a70cc7a1a25e

node_modules 파일을 지웠다가 다시 install하고 start해도 동작하지 않습니다.

 

cmd 창의 관리자 권한으로 실행해도 같은 에러가 발생합니다.

 

node의 버전을 업그레이드하고 yarn을 재설치 해도 같은 상황입니다.

 

다시 에러를 살펴보니 경로가 문제였고, .env 파일 내의 경로를 수정했더니 해결되었습니다. 윈도우 형식으로 경로를 지정해야 에러가 사라집니다.

CONTENT_TRANSLATED_ROOT=C:\Users\kimty\Desktop\TY\programmers\opensource\translated-content
EDITOR=code

 

📑PR 보내기

local로 가져온 repo를 수정하고 fork 해왔던 내 github repo에 push 합니다. 저희는 원작자가 아니기 때문에 merge를 해달라고 요청을 하는데, 이것을  pull request라고 부니다. pull request를 통해 원작자에게 수정한 내용이 있음을 알립니다. 그럼 원작자는 수정된 부분을 확인해  원본의 수정을 허용할지 말지 결정하게 됩니다.

 

PR의 경우 오픈 소스마다 서식을 제공하는 곳이 있고, 제공하지 않는 곳이 있습니다. 따라서 기존 서식이 있다면 확인하고 규칙을 잘 따르는 것이 중요합니다.  PR의 내용으로는 설명과 수정한 부분에 대한 설명, 관련된 이슈 등에 대한 글을 적습니다.

🍯tip! 현황판을 확인해 현재 이슈가 발생해 도움이 필요한 곳을 확인할 수 있습니다.

 

📄이슈

이슈는 github에서 제공하는 기능인데 프로젝트의 진행 간 이슈라고 불릴 수 있는 여러 정보를 공유할 수 있는 게시판입니다. 이슈에는 버그, 에러, 수정 사항, 가이드 등 다양한 정보가 포함됩니다.

 

이슈는 markdown 문법을 사용해 작성할 수 있기 때문에 기본 텍스트보다 정보를 제공하기 좋습니다. 정보를 공유하는 목적으로 작성되기 때문에 정보의 종류에 따라 서식을 정하고 사용하는 것이 나중을 위해 좋습니다. 또한 라벨을 추가해 다양한 이슈를 원하는 기준으로 분류를 할 수 있습니다.

 

📑PR에서 이슈 활용하기

pull request를 작성하던 중에 #을 통해 이전에 작성했던 이슈를 연결할 수 있습니다. 또한 키워드를 사용해 자동으로 적용되는 기능 또한 있습니다.

 

키워드에 대한 자세한 내용은 다음 사이트에 있습니다.

끌어오기 요청을 이슈에 연결 - GitHub Docs

 

❔▪❓

Q. 강의를 듣는 중 에러가 발생해 진행이 안 되는 경우에 어떻게 해야 하는가?

A. 현재는 당장의 강의가 밀리면 안 되기 때문에 일정 시간을 투자해서 해결해 보고, 성과가 나타나지 않으면 넘어가는 방식으로 진행하고 있다.

 

다음 시간에 계속...

 

출처 & 참고

강사님의 강의