나의 작은 컨트리뷰션 (w. Swiper)

키즈노트의 "포토몰" 서비스를 알고 계시나요? 포토몰은 키즈노트에 업로드된 사진과 알림장을 이용해서 앨범을 만들 수 있는 서비스예요.

최근 포토몰에 키링, 그립톡과 같이 굿즈를 만들 수 있는 기능이 추가되었는데요, 저는 이 프로젝트에 참여하면서 작은 컨트리뷰션을 하게 되어 그 후기를 남겨보려고 해요.

🧐 어떤 계기로 컨트리뷰션을 하게 되었나요?

키즈노트 앱의 포토몰로 진입하면 상품 리스트가 노출되고 있는데요, 카테고리를 선택하면 리스트를 필터링할 수 있어요.
여기서 카테고리 리스트는 Swiper라는 라이브러리로 구현되어 있어서 자연스러운 슬라이드 동작을 보여주고 있습니다.

이 슬라이드 동작을 세밀하게 조작하기 위해 Swiper의 ref에 접근해야 했는데, 아래처럼 타입 에러가 발생했어요.

분명 console.log에는 정상적인 값들이 찍히고 있었는데 말이죠. 🤔

임시방편으로 (무적의...) // @ts-ignore를 사용했지만, 근본적인 해결책은 아니었어요.

이전에 타사 라이브러리에서 버전 문제로 타입을 읽지 못했던 경험이 있기 때문에, 가장 먼저 Swiper의 버전을 확인해 보았어요.

그러나 프로젝트에서 최신 버전을 사용하고 있었어요.

구글링을 해보니 Github Issue에 동일한 제보가 있는 것을 발견했어요.

라이브러리에서 해당 타입을 지원하지 않는다는 것을 확인하고 컨트리뷰션을 하기로 결심했어요.
컨트리뷰션 경험은 거의 없지만, 동작에 변경이 생기는 큰 작업이 아니어서 부담이 적었어요.

🪜 컨트리뷰션은 어떻게 진행되었나요?

가장 먼저 컨트리뷰션 문서를 꼼꼼하게 읽어주었어요.

그리고 새로운 이슈를 등록해 주었습니다.
(번역을 도와주신 Chat GPT 선생님 감사합니다 🙏)

Swiper에 이슈를 등록할 땐 아래와 같은 준비물이 필요해요.

• 이슈를 재현할 수 있는 데모 링크
• 설명
• 현재 동작
• 기대 동작
• 버전
• 플랫폼 또는 브라우저 버전

저는 이슈를 등록한 다음 곧바로 코드를 수정해서 PR을 등록했어요.

Swiper의 타입이 정의되어 있는 swiper-class.d.ts 파일에 제가 원하는 타입을 추가했어요.

그리고 3주 뒤, 메인테이너에 의해 PR이 머지 되었어요.

11월 19일 수요일, v11.1.15 버전이 릴리즈 되면서 제 코드가 세상 밖으로 나오게 되었어요. 🥳

😆 마무리

컨트리뷰션을 하는 방법 중 하나는, 현재 사용하고 있는 라이브러리의 개선점을 찾는 것이라는 말을 어디선가 들은 적이 있어요. 하지만 라이브러리의 개선 사항을 찾는 것은 쉽지 않은 것 같습니다. (너무 완벽한 것 같은데…?)

저는 우연한 계기로 Swiper에 컨트리뷰션을 할 수 있었는데요, 비록 타입을 정의했을 뿐이지만 많은 개발자가 사용하는 라이브러리에 기여했다는 점이 뿌듯하게 느껴집니다. ☘️