안녕하세요! 로우입니다. 평소에 "오늘은 오픈소스를 기여해야겠다."하고 막 찾아보다가 결국에는 높은 진입장벽에 좌절하며 항상 내일로 미뤘습니다.
그러던 중 !
React Query의 공식 문서를 읽던 중
생각보다 많은 TANSTACK 의 라이브러리들을 보면서 하나 씩 읽던 중에 DB 라이브러리를 들어가서 이게 무슨 "라이브러리지? 우와 오픈소스는 이런 식으로 만드는 구나" 라고 혼잣말을 하게 되면서 점점 저는 빠져들어갔습니다.
여기서 잠깐 TanStack의 DB를 설명드리면
TanStack/db DOCS를 보면
위 사진에서 Optimistic Mutation 이 핵심 키워드라고 생각하시면 됩니다! (낙관적 뮤테이션)Optimistic Mutation 은 서버 응답을 기다리지 않고 먼저 UI를 업데이트하는 기법이라고 합니다 ! 즉, 사용자가 액션을 취하면 "성공할 것 이라고 낙관적으로 가정"하고 즉시 화면에 반영한다고 생각하시면 됩니다.
그렇게 저는 어떤 라이브러리 인지 파악하고 코드를 읽게됩니다.
예전에는 호기롭게 React, TypeScript의 동작방식을 이해해보기 위해서 내부함수들을 봤었던 적이 있는데 이게 완벽하게 이해는 하지 못했어서 생각보다 흥미가 빨리 떨어졌던 기억이 있어서 코드를 읽는게 조금 무서웠습니다.
하지만 이상하게도 아직 Beta 과정이기도 하고 개발 중이기에 주석도 잘 되어있고, 해당 repo의 commit history도 뭔가 이해가 되는 느낌이었습니다.
그렇게 저는 씩씩하게 이거다! 싶어서 issue를 들어가서 살펴봤습니다.
issue : Add type inference from queryFn return type #356
친절하게도 메인테이너 분이 해당 이슈를 어떻게 해결하면 좋을지 현재 어떤 상황인지 잘 작성이 되어있어서 해당 코드를 먼저 파악하고 어떻게 고쳐야할지 구상을 하였습니다.
이 이슈를 하고 싶다는 댓글을 작성 후, 저는 바로 코드를 작성하러 갔습니다. 히히
How did you solve the problem?
문제 : 기존에는 타입을 명시적으로 지정해야 했습니다.
1// 기존 방식 - 타입을 수동으로 지정2const collection = createCollection<Todo>(queryCollectionOptions({...}))해결 : 요구사항대로 queryFn의 반환 타입에서 자동으로 타입 추론하도록 구현
1// 새로운 방식 - 자동 타입 추론2const collection = createCollection(queryCollectionOptions({3 queryFn: async () => response.json() as Todo[] // 이 타입이 자동으로 추론됨!4}))이렇게 자동으로 타입 추론하게 만들기 위해서 내부 Interface의 타입 우선순위를 만들어야하는데요. 그전에 InferQueryFnOutput 타입 헬퍼 개발하고, electric의 ResoveType 시스템을 보면서 (타입 우선순위: Explicit → Schema → QueryFn → Fallback) 타입 추론 기능을 구현했습니다.
이후 타입 추론 작동에 대한 테스트를 작성하여 PR를 올리고 두손을 모아 기도하였습니다.
공손히 댓글을 달고, 저는 merge를 기다리 면 서 !
약 5일 후..
무려 perfect 칭찬과 함께 merge가 되었습니다 ㅎㅎx99
후기
기능을 만들기 위해서 실제 필요한 타입 및 타입 헬퍼 코드를 작성하고, 타입 테스트까지 작성했습니다. 오픈소스 기여 활동을 통해서, 왜 기업 우대사항에 오픈소스 기여 경험을 보는 지 실제 경험을 통해서 알게 되었으며, 앞으로도 종종 오픈소스 기여를 할 생각이 생겼습니다 !!
타입 추론 로직을 구현할 때, 어려움이 있었지만 오픈소스 기여모임에서 다양한 사람들이 도전하고 성공하는 모습을 보면서 용기를 얻었고 모임 내에 많은 인사이트를 순조롭게 해결했던 것 같습니다 !!
긴 글 읽어주셔서 감사합니다.(__)
issue : https://github.com/TanStack/db/issues/356#event-19218347437 PR : https://github.com/TanStack/db/pull/403