Material UI에 기여할뻔한 얘기

MUI

Material UI에 contribute할뻔했다. 정확히는 버그를 발견하고 이슈를 올려서 수정하겠다는 피드백을 받고, MUI 멤버의 PR에 리뷰도 달았다. 이것도 contribution이라고 쳐준다면, 기여했다고도 할 수 있겠다. 아무튼간 뿌듯한 경험이었어서 기록해놓겠다고 생각만 하다가 드디어 한다.

 

• 이슈
• PR

버그인가..?

업무 중에 MUI Chip 컴포넌트를 사용하는데, 의도대로 색상 적용이 되지 않았다. 처음에는 내가 뭘 잘못 사용했거나 원래 MUI가 그렇듯 커스터마이징하기가 어려운 것이라고 생각했다.

MUI를 써봤다면 알겠지만 컴포넌트에 어떤 prop을 주느냐에 따라 오만가지 클래스명이 추가된다. 근데 아무리 봐도 prop을 맞게 줬는데 클래스명이 문서의 설명과 다르게 적용되고 있었다.

뭐야 이거... 버근가?

 

다음 스텝은 당연히 구글링이었는데, 잘 안 나왔다. Chip 자체가 추가된지 그리 오래되지 않은 컴포넌트라 레퍼런스가 많이 없었던 것 같다.

결국엔 MUI 코드를 열어봤다. 컴포넌트에 클래스명들을 추가해주는 코드(로 추정되는 부분)에 variant라는 prop에 따른 클래스명 추가가 누락되어 있었다. 이 쯤 되니 버그가 맞는 것 같았다.

이슈 올리기

버그가 재현이 쉬웠던 것도 있지만, 이슈 템플릿이 잘 정의되어 있어서 이슈 올리는 것은 간단했다. 정해진 항목들에 맞게 설명을 적으면 되었다. Live Example도 추가해야 했는데, 이것도 디펜던시가 정의된 CodeSandbox를 fork해서 만들면 되어서 편했다.

 

 

형식은 지키되 내용을 어떻게 쓸지 너무 신경쓰지 않아도 될 것 같은게, 뭔가 부족하거나 잘못됐다면 컨트리뷰터들이 의견을 주기도 하고 제목이나 태그 같은건 직접 수정도 한다. 내가 올린 이슈의 경우에도 Live Example을 좀 더 상세히 만들어달라고 해서 그렇게 했고, 의미가 명확하지 않았는지(🥲) 제목도 한 차례 수정당했다.

결과

하루 정도 뒤에 답변이 달리고 수정 PR이 올라왔다. 직접 수정을 해보고 싶은 생각도 있었어서 좀 아쉬운 면도 있었다. 근데 버그 자체에 대한 수정 뿐만 아니라 테스트 코드 수정, 문서 업데이트도 포함되어서 수정사항이 생각보다 많았다. 나처럼 평소에 사용만 하던 사람이 갑작스레 PR을 올리기 쉬워보이진 않았다.

다만 나름대로 혼자서 수정을 해보고 있었어서 리뷰 정도는 남길 수 있었다. 불필요해보이는 코드가 있어서 지워도 되지 않냐고 의견을 주었고, 받아들여졌다. 🙂

해당 PR은 머지가 됐고 다음 업데이트에 반영이 되었다.

끝

MUI 같은 네임드 라이브러리도 (당연히) 버그가 있다는 걸 새삼 느꼈다. 라이브러리를 사용하다가 안 되는게 있을 때, 구글링으로도 해결이 잘 안 된다면 코드를 열어보자. 이슈도 올려보고. 그러다보면 PR도 올리게 되고 컨트리뷰터도 되고 그러는게 아닐까.