오픈소스 Supabase에 이것저것 기여하기 (w/오픈소스멘토링3기)

2021 오픈소스 컨트리뷰션을 시작으로 오픈소스 기여는 번역이나 오타 수정을 위주로 하고 있었습니다.

코드 기여는 당연히도 제 능력으론 부족한 영역이라고 생각했고, 그 방대한 양의 코드를 읽고 이해할 수 없다고 생각했습니다.

하지만 저는 Supabase 에 기능을 추가해 배포 대기 상태에 있으며(얏호!) 이후 오픈소스멘토링3기에 참여하여 추가로 코드를 수정하는 PR을 제출한 상태입니다.

누군가에겐 귀엽지만 저에겐 뿌듯했던 그 과정을 적어보려 합니다.


1. 문서 예제 오타를 수정하다

Merged: Fix typo on triggers docs

저희 회사는 백엔드 개발자없이 Supabase를 사용합니다.
어쩌다 이런 선택을 했는지는 이 글에 적어두었습니다.

Docs를 읽다 예제 코드를 복사 붙여넣기 후 실행했는데 지속적으로 오류가 나서 살펴보다 스펠링 오류를 발견하여 Fix한 뒤 PR을 제출하였습니다.

아주 작은 수정이지만 앞으로 예제를 실행하는 분들은 오류를 겪지 않게 되겠다는 상상 그리고 Star 64.2k를 받은 레포에 기여했다니 뿌듯했습니다. 😅

2. Kakao OIDC 기능을 추가하다

Merged: feat: add kakao OIDC

회사 서비스에 카카오 소셜 로그인을 붙이는 작업을 했었습니다.
auth 관련 기능은 Supabase에 의존하고 있으므로 제공되는 기능만 사용하게 됩니다.

저희는 웹뷰를 사용하므로 유려한 로그인 과정을 제공하기 위해서는 앱인 경우 카카오앱을 실행해 웹으로 계정 관련 정보를 넘겨주는 로직이 필요했습니다.
하지만 이를 Supabase에서 지원하지 않고 있었으므로 앱에서 카카오웹로그인 창이 뜨는 끔찍한 UX를 제공할 수 밖에 없었습니다.

추이를 보았을 때 기존의 이메일 가입보다 소셜로그인인 카카오 가입자 수가 압도적으로 많아짐을 파악한 후,
저는 유저에게 더 좋은 가입 경험을 선사해주고 싶다고 생각했습니다.

제가 구현하고자 했던 기능은 OIDC를 사용해 구현할 수 있었고, Supabase에 직접 기능을 추가해 보기로 했습니다.

  1. supabase/gotrue 기여 가이드를 충실히 따라해서 개발 환경을 구성했습니다.
  2. feat: azure oidc fix와 같은 기존에 merge된 OIDC 관련된 PR을 전부 읽고 어떤 코드를 어디에 어떻게 넣어야 하는지 분석했습니다.
  3. Kakao OIDC 문서를 정독한 후에 코드를 추가할 수 있었습니다.

아무래도 계정 관련이라 테스트하기가 제일 어려울 듯한데 저는 저희 서비스가 Supabase를 사용하고 있어서 환경변수와 엔드포인트를 적절히 수정해서 테스트할 수 있었습니다.

PR을 제출하고, 링크 건 관련 이슈에서 메인테이너가 "@MiryangJung의 훌륭한 PR을 확인하세요" 라고 답글을 단 것을 보고 정말 기뻐서 날아갈 뻔 했습니다.

이 PR을 제출하면서 어려웠던 것들은 아래와 같은 것들이였습니다.

  • Go 언어가 익숙하지 않아 린트, 문법 등을 찾아보면서 한 것
  • Docker 사용이 처음인 것
  • 다양한 테스트용 유저가 없던 것 (내 카카오 계정만 사용)
  • 한/영 언어마다 카카오 문서의 구성이 달라서 링크를 걸 때 두 언어 다 유심히 잘 읽어봐야했던 것
  • 시간대가 달라서 코멘트가 달리면 빠른 피드백이 불가능했던 것

처음으로 코드를 기여했고, 머지가 되어서 정말 기뻤고 기쁘고 계속 기쁠 것입니다. 🤣

3. Kakao OIDC 문서를 추가하다

Open: docs: Add Using Kakao Login JS SDK

카카오 OIDC를 추가한 PR에서 메인테이너의 관련 문서도 추가해 달라는 요청이 있어 추가했습니다.

이미 로컬에서 테스트하면서 사용법 정도는 익혔고, 코드도 있었기에 쉽게 생각했었습니다.

하지만 번역이 아니라 새로운 챕터를 추가하는 것이였고,
기존의 문서와 룩앤필과 컨벤션이 맞춰진 예시 코드, 말투, 구성 등을 따라야 하니 꽤나 신경쓸 것이 많았습니다.
그리고 영어로 문서를 쓰는 것이 처음이라 정말 어려웠습니다.😖
이 자리를 빌어 Papago에게 감사의 인사를 올리며...

4. 대시보드 템플릿 오류를 고치다

Merged: fix: RLS Policy template for insert based on user_id

Supabase 대시보드를 사용할 때 계속 겪고 있던 오류가 있었습니다.
대시보드 템플릿을 선택하면 입력창으로 넘어가는 데 이 때 선택한 템플릿의 정보와 다른 정보가 입력되는 오류였습니다.

간단할 듯하여 이 오류를 해결하고자 코드를 살펴봤고, 정말 쉽게 해결 가능해서 바로 수정 후 PR을 올렸습니다.

깃렌즈로 보았을 때 약 4개월 전부터 나타났을 오류였는데 아무도 발견 또는 수정하지 않은 것이 의문이자 재밌었습니다.

5. 타입 에러를 발생시키다

Open: Make type error when a null value with eq operator from the not filter

대전 개발자 모임에서 오픈소스 멘토링(온라인) 3기를 알게 되어 신청 후 선정되어 참여하게 되었습니다.

원하는 오픈소스 레포에서 기존에 제출된 이슈 중 하나를 고르거나 직접 이슈를 만든 뒤 진행하게 됩니다.

저는 supabase/postgrest-js의 이슈를 선택했고,
멘토님과 함께 다양한 해결 방법을 살펴보았는데요. PostgREST syntax을 철저히 따라야 했으므로 최선의 방법을 모색해 코드를 작성했습니다.

Supabase의 JS SDK를 사용할 때 not 필터에서 eq 오퍼레이터를 같이 사용할 때 null 값은 사용될 수 없으므로 타입 에러를 발생시키도록 하도록 했습니다.

멘토님이 테스트 코드를 추가하는 것도 추천해 주셔서, 시간이 날 때 추가해 보려합니다! 🤩

5개의 기여를 하면서

이렇게나 큰 오픈소스 프로젝트에서 어리둥절한 버그부터 오타 수정, 기능 추가까지 다양하게 기여할 수 있다는 것이 정말 재밌습니다.

Supabase는 메인테이너분들도 빠르고 적극적이고, 급 성장 중이고, 다양한 언어(Go, TS, Rust, Dart 등)를 사용하고 있어 오픈소스 기회의 땅임이 확실합니다.

저희 회사는 Supabase를 사용하고 있으니... 많은 기여가 될 수록 게속 튼튼해지는 저희의 서비스... 어부지리를 바라며....


오픈소스 멘토링(온라인) 3기 참여 후기

오픈소스 멘토링(온라인) 3기

장점 뿐인 멘토링... 그 이유를 적어봅니다.

  1. 멘토님이 적극적으로 선정한 이슈를 해결할 수 있도록 제안과 격려를 해주신다.
  2. 팀원분들이 선정한 레포와 이슈를 보면서 같이 성장하고 공부가 된다.
  3. 번아웃이 와서 VSCode를 쳐다도 보기 싫었는데 모두 열심히 하셔서 나도 에너지를 얻어 재밌게 할 수 있다.
  4. 이런 프로젝트로 다른 개발자를 도울 수 있다는 점을 알게 되었다.
  5. 다 같이 몰려와서 따봉을 눌러주니 재밌고 따듯하다.

그래서 저도 4번의 이유로 부트캠프에서 멘토링을 하는 그룹을 대상으로 MDN 번역 스터디를 해보려고 구성 중입니다.

좋은 프로젝트를 진행하시는 인제멘토님에게 또 감사의 인사를 올리며...

아 그리고 참가비는 원하는 오픈소스에 $50 기부하기입니다. 저는 Supabase에 기부했습니다.


오픈소스 기여 소심하게 기웃댔다면 앞으로는 더 적극적으로 기웃대보려 합니다. 끝!