개발자를 채용하는 회사들 중에는 오픈소스 생태계 기여 여부를 확인하는 기업들도 많은 것 같습니다. 저는 '개발 공부하기도 힘든데 오픈소스 기여는 어떻게 시작할지 감도 안 온다'라고 계속 생각하면서 지냈는데, 이번 글에서는 우연히 오픈소스를 기여를 하게된 이야기를 하고자 합니다.

오픈소스랑 친해지기

React 개발자라면 일상적으로 오픈소스 라이브러리를 사용합니다. 제가 진행 중인 프로젝트에서 사용되는 오픈소스 라이브러리를 나열해보자면

• React
• Typescript(Type 추가)
• Zustand(전역상태 관리)
• TailwindCSS(스타일링)
• Pretendard(폰트)
• Radix-primitive(Headless UI)
• ShadnCN-UI(Radix-primitive 기본 스타일링 추가)
• Storybook(독립적 컴포넌트 개발)
• msw(API mocking)
• Playwright(E2E 테스팅)
• AutoAnimate

로 무려 10가지가 넘습니다. 이 라이브러리들은 전부 github star가 1만 개가 넘는 대형 라이브러리들이라 흔하게 발견되는 이슈들은 전부 빠르게 해결되는 것 같습니다. 하지만, 소프트웨어는 계속 업그레이드 합니다. 특히 Next.js 같은 경우에는 대형 업데이트들이 계속 이루어지고 있습니다. 그렇게 되면 자연스럽게 기존 라이브러리와의 통합에 문제가 생길 가능성이 매우 높아집니다. 저는 프로젝트를 하면서 stackoverflow에서 구글링을 해도 해결책을 찾을 수 없는 문제들을 많이 마주하게 되면서, github issues 탭과 친해지게 되었습니다.

• 스토리북 같은 경우 issues 탭에 1000개가 넘는 이슈가 달려있습니다.

오픈소스의 친절함

github issues에는 별의별 문제로 사람들이 버그리포트를 작성하는 것을 확인할 수 있었습니다. 기능 추가를 제안하는 시니어 개발자 아니라 버그 현상에 대해서만 캐쥬얼하게 설명하는 이슈도 많이 달려있었습니다. 놀라운 점은, 거의 모든 경우에 메인테이너/콜라보레이터가 답글을 달거나 일반 개발자들끼리도 해결책을 찾아 공유한다는 것이었습니다. issues 탭을 좀 더 캐쥬얼한 곳이고 부담갖지 않아도 된다는 것을 알게되었고 저도 문제가 있을 때는 bug report를 달기 시작했습니다.

• 제가 신고한 버그 리포트 중 하나입니다.

• 저와 동일한 문제를 겪고 있는 개발자가 있었고, 해결책까지 제시해주었습니다.

기회 잡기

Next.js와 Zustand를 통합시키려는 와중에 공식 문서에서 오탈자를 찾았습니다. 아무렇지도 않게 넘어갈 수도 있었지지만, github issues가 자유롭게 버그를 신고할 수 있는 공간인 걸 알아서 해당 이슈를 고치는 pull request를 작성해보았습니다. 놀랍게도, 10분만에 콜라보레이터로부터 approval 메시지가 올라왔습니다. 그리고 2시간 쯤 되었을 때 pull request가 merge 되었더군요.

• 공식 문서에 있던 오탈자입니다. must be use 대신 must be used로 고쳐야 함을 알 수 있습니다.

• 제가 올렸던 pull request입니다.

• 이슈를 올리기가 무섭게 LGTM을 다는 모습.

마무리

오픈소스에 달기도 처음엔 부담스럽겠지만 생각보다 메인테이너들은 친절하고 최대한 해결해주려고 할 겁니다. 그러니까 저 같이 몇시간 동안 문제를 고민해봐도 답이 안 나오시면 github issues, discussions 탭을 적극적으로 확인하고 소통해보시는 것도 좋은 문제해결 방법 중 하나인 것 같습니다.

Reference

제가 기여한 부분은 https://github.com/pmndrs/zustand/pull/2530 에서 확인하실 수 있습니다.