잠깐!
주저리 카테고리에서는 개인작업, 활동에 대해 작성합니다.그래서 문체가 기존 포스팅과 다를 수 있어유. 주저리라서 개발 기술 정보를 담고 있지 않아,
“이 사람은 뭐하고 사나?”, “아 심심한데 뭐 읽을 거 없나” 등과 같은 상황에 휘뚜루마뚜루 읽기 좋습니다
1. 오픈소스에 기여 해보자!
- 제 2027년 목표 중 하나는 “UI 오픈소스 개발”입니다. 그래서 올해부터 2027년 목표 달성을 위해 어떤 노력을 해야할지 생각해봤는데요.
- 이 중 알고리즘 재학습, 클린 코드, 테스트 코드 공부 등이 있었습니다.
- 알고리즘과 클린 코드의 경우 업무에서 익힐 수 있고, 관련 도서로 학습이 가능했습니다.
(사내 코드 리뷰도 있고 경력이 많으신 분들도 계셔서 덕분에 배울 수 있기도…ㅎㅅㅎ)
- 테스트 코드의 경우, 코드 안전성과 리팩토링 유연성에 장점이 있어 꼭 익히고 싶었습니다.
- 그래서 도서도 좋지만, inflearn의 “실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트”로 학습하고 업무에 적용해보았습니다.
- 덕분에 테스트 코드도 익숙해지고 실무 코드의 안전성도 올라가는 효과가 있었습니다. (강의 광고 아님 패스트 캠퍼스, 유데미, 코드잇 만만세!)
- 하지만… 테스트 코드를 잘 작성하고 알고리즘, 클린 코드만 알면 좋은 오픈소스를 만들 수 있을까요?
- 저는 제일 중요한 게 빠졌다고 생각했습니다, 그건 바로 오픈소스 생태계에 참여하고 있지 않다는 것이죠!!!
- 생태계에 참여를 해야 그 세계를 이해할 수 있고, 더 나은 방향성을 배울 수 있다 생각했습니다.
- 이해를 바탕으로 하지 않은 결과는 아쉽기 마련이니까요 😉
- 그래서 올해(2024) 상반기에 오픈소스 기여를 시도했습니다. 물론 기여에 앞서 심리적 저항감이 컸습니다.
(그거 있잖아요 괜히 잘못된 영어로 말해서 오해를 불러일으키거나, 아니면 거절당할까봐 걱정되는 그런저런 생각 등등등…) - 하지만 전 직장의 CTO님(@sjquant)께서 “작게는 공식문서 수정을 시도해보는 것도 좋다”고 하신 말이 떠올라, 과감히 시작해 보았습니다ㅎㅎ
1) 첫 기여는 가볍게 🪽
- 처음 기여에 도전한 오픈소스는 Star가 2k인 vue-i18n-next 이었습니다. 첫 기여를
vue로 선택한 이유는vue로 3년간 개발한지라 익숙했기 때문이죠! - 정말 간단한 PR이었는데, 라이브러리 문서에 pnpm 설치 코드를 추가한 정도였습니다. 처음 시도해보는 PR이라 긴장도 되고, 혹여 내 영어가 불쾌감을 주지 않을까…긴장했습니다(후덜덜)
- 다행히도 v9.9.0에 기여가 되었습니다! 😊
- 첫 기여가 성공한 후, 심리적 저항성은 100/100 → 20/100정도로 감소 했습니다 😇
- 그래서 매주 2회씩 github의 Trending 목록을 보면서 기여할 수 있는 오픈소스가 있는지 탐색하기 시작했습니다.
- 그 다음 기여는
vue공식문서의 누락된 타입 추가, watch once의 설명 추가였습니다. - watch once 기능의 경우, 2024년 초에 추가된 기능이지만 changelog에만 설명이 있어, docs에 서툰 영어로 설명을 추가했습니다.
- 현재는 다른 기여자께서 어설픈 영어 설명을 수정해주셨답니다!(감사할따름 🥲)
- 이후에도 여러 번 오픈소스 기여에 도전했습니다.
- 그러다 primevue의 Calendar 컴포넌트에서 시간값이 초기화된다는 이슈를 발견했습니다.
- 이슈에 링크된 PR도 없고 생각보다 해결방법도 간단해서 바로 PR을 요청했습니다. 그런데… master 브랜치에서 이슈 현상을 재현해보니 이미 수정된 이슈였습니다😢 😢
- 그래도 기여는 타이밍이라는 교훈을 얻을 수 있어 맘 아프지만 좋은 경험이었습니다..ㅎ
2) 코드 기여도 좋지만, 오픈소스 발전에 참여해보자
- 저는 매달 3번의 기여를 하는 게 목표였습니다. 그런데, 유명한 라이브러리는 수정 속도가 빠른지라 아쉽게 놓치는 경우가 많았습니다 😭
- 어느새 매주 1번의 기여를 못하면 강박도 생기더라구요;;
- 그런데 과연 기여가 본질일까요? 본질이 아닙니다. 저의 목표는 오픈 소스 생태계에 참여하면서 코드 숙련도를 높이고 더불어 그 환경을 이해하는 겁니다!
- 그래서 어느 날, 카페에서 멍 때리면서 제 강박에 대해 회고를 했습니다.
- 그 결과, 기여 PR이 아니라 기능을 제안하거나 이슈를 제보하는 것도 생태계에 기여할 수 있는 방법이라는 생각에 도달하게 됐습니다 🙂
- 생각이 바뀐 뒤로 라이브러리에 기능을 제안하거나 이슈를 제보하는 시도도 해보았습니다.
- 그리고 이 시도로 오픈소스에 새 기능이 추가되는 걸 보며 강박이 사라졌습니다ㅎㅎ
3) 오픈소스 멘토링이 있다고?
- 이후에도 primevue, ant-design에도 기여를 했습니다. 하지만 뭔가 아쉬웠습니다.
- 간단한 기여도 좋지만 리포트된 이슈를 해결하는 기여를 하고 싶다는 생각이 들었습니다.
- 그러다 GDG 인천 오픈채팅방에서 인제님(@injae kim)께서 진행하시는 오픈소스 기여 멘토링 모집글을 발견했습니다.
- 이제까지 진행했던 멘토링 리스트를 보면서 “이거닷!” 하는 생각이 들었습니다.
- 오픈소스 멘토링은 총 3단계로 진행되었습니다.
(1) 우선 신청 단계에서 기여하고 싶은 라이브러리 목록을 제출합니다.
(2) 그러면 인제님께서 기여할 만한 이슈 목록을 정리해서 공유해주십니다.
(3) 오픈 채팅방에서 해결할 이슈를 선택하고, 인제님과 소통하면서 PR을 생성합니다.
- 저는 이 과정을 거쳐 총 2개의 PR을 생성하고 1개의 이슈(이슈제보 링크)를 제보했습니다.
(1) PrimeVue의 Dropdown 컴포넌트 이슈 수정
- 첫 번째 PR은
dropdown컴포넌트에서 아이템 포커스시, 상위 요소에서 가로 스크롤 이동이 발생하는 이슈였습니다.
- 이 이슈는 아래 조건에서 발생했습니다.
1. 상위 요소에서 가로 스크롤이 허용될 때
2. 만약 dropdown에서 드롭다운 아이템을 hover하면,
3. 상위요소에서 가로 스크롤 이동이 발생- 문제가 발생하는 구간은
mousemove이벤트였습니다. - dropdown에서
mousemove이벤트가 발생하면scrollInview함수가 호출되는데, scrollInview함수는 focus된 아이템으로 스크롤이 이동하는 동작(scrollIntoView)이 진행되고 있습니다.
- 하지만
scrollIntoView에서 가로 스크롤 동작을 허용했기에, 예상치 못하게 상위요소에서 가로 스크롤이 발생했습니다. - 아래 이미지는
Dropdown컴포넌트에서 문제가 발생한 부분입니다.
- 해당 이슈의 경우,
scrollIntoView에서 가로 스크롤 동작을 제한하는 방법으로 해결 가능했습니다. - 생성한 PR은 이 링크에서 보실 수 있습니다 🙂
(2) PrimeVue의 dateTable에서 키보드 이슈 수정
- 두 번째 이슈는 dataTable에서 복사 키 입력([metaKey + C])이 동작하지 않는 현상이었습니다.
- 이 이슈는 아래 조건일 때 발생했습니다.
1. dateTable에서
2. 단일, 다중 선택 모드일 때
3. control + c가 작동하지 않음- 여기서 주목할 점은 테이블 아이템 선택모드가 아닐 때는 [metaKey + C]가 동작한다는 점이었습니다.
- 그럼 키 이벤트 부분을 본다면 원인을 확인할 수 있겠죠?
- 예상한대로, 키 이벤트에서 선택모드일 때 [metaKey + A]를 제외한 동작에
e.preventDefault()가 적용되어 있어 [metaKey + C]가 작동하지 않고 있었습니다.
- 이 이슈의 경우, [metaKey + C]일 때는
event.preventDefault()가 실행되지 않게 변경하면 해결할 수 있었습니다.
- 위의 코드를 적용하면, 아래와 같이 DateTable에서 선택모드일 때도 복사 키가 동작합니다!
- 생성한 PR은 이 링크에서 보실 수 있습니다 🙂
(덧, 참고로 PrimeVue는 PR 확인 주기가 길기 때문에… 기여시 여유를 가지는 걸 추천드립니다)
(3) 후원하는 경험까지…
- 해당 멘토링은 PR 경험은 물론, 오픈소스에 후원하는 경험도 할 수 있었습니다. 저의 경우, 평소 관심이 많던 NextUI, MaterialUI를 후원하고
- 추가로 Vue의 유명 개발자인 Evan You에게 10달러 후원, Anthony Fu님에는 매달 8달러 정기후원 하였습니다.
- 일회성 후원도 좋지만 정기 후원을 한 이유는, 정기 후원시 해당 개발자의 프로젝트 개발 정보를 먼저 알 수 있거나 이슈 제보 우선순위가 올라가기 때문입니다.
2. 오픈 소스 기여에 대한 나의 상반기 후기
- 오픈소스 기여 시도를 하다보니 여러 오픈소스의 내부 코드를 보는 게 습관이 되어 버렸습니다.
- 그리고 같은 기능을 구현해도 vue, react별로 다르고 같은 프레임워크끼리도 구현 방향성이 달라, 보는 재미도 있었습니다.
- 덕분에 재사용 컴포넌트를 구현할 때 여러 방향성을 고려하게 되고, 코드 이해도가 이전보다 더 좋아졌습니다ㅎㅎ
- 오픈소스 기여를 시작한지 5개월 정도밖에 되지 않았지만 여러 방법으로 기여할 수 있어 좋은 경험이었습니다.
- 올해 하반기에도 지속적으로 기여할 예정입니다.
- 아래 표는 이제까지 기여, 이슈 제보, 기능 제안했던 리스트입니다. 그럼 2024년 하반기에도 뜻깊은 경험을 해보겠습니다 🙂 (@KumJungMin)
반응형
댓글