첫 오픈소스 기여
소개
평소에 저는 오픈소스 프로젝트에 기여하는 것에 대해 큰 관심을 가지고 있었습니다.
이유는 개발 과정에서 다양한 라이브러리를 활용하게 되는데,
이러한 라이브러리들을 사용하면서 언젠가는 단순한 사용자가 아닌, 공급자가 되고 싶다는 생각이 들었기 때문입니다.
아직 제 기여가 공급자로서 인정받을 만큼 크지는 않지만, 이 경험을 공유하고자 합니다.
계기
이번에 새로운 직장으로 이직하게 되었는데,
새 회사의 프로젝트에서는 아직 스토리북과 단위 테스트를 도입하지 않은 상태였습니다.
평소에 스토리북을 매우 즐겨 사용하고, 지난 근무 회사들에서 스토리북 도입을 성공적으로 추진했던 저는
이번에도 스토리북의 이점에 대해 팀원들에게 설명하여 도입에 대한 합의를 이끌어냈습니다.
스토리북을 설치할 프로젝트에서는 CSS in JS 라이브러리인 emotion을 사용하고 있었기 때문에,
프로젝트에 적용 중인 emotion 기반의 전역 스타일을 스토리북과 통합해야 했습니다.
검색 결과, https://storybook.js.org/recipes/@emotion/styled와 같은 공식 가이드와 애드온이 있었고,
이를 사용하기로 결정했습니다.
이슈 작성
공식 문서에 따라 전역 스타일을 통합했지만, 콘솔에서 valid prop 'theme' supplied to 'React.Fragment'. React.Fragment can only have 'key' and 'children' props. 경고가 지속적으로 발생했습니다.
에러 로그를 확인해보니 전역 스타일을 추가하기 위해 사용한 애드온의 withThemeFromJSXProvider 함수에서 경고가 발생하고 있었습니다.
음… 이 함수를 사용해서 경고가 발생하는 건 확실한 것 같은데, 그래도 스토리북쯤 되는 레포지토리의 공식 애드온이고 다운로드 수도 7만 정도 되는데 정말 라이브러리에서 발생한 문제일까?
새로운 프로젝트를 생성하고 깔끔하게 필수 의존성만 설치한 후 다시 시도해 보았지만, 여전히 같은 경고가 발생했습니다.
그래서 이슈를 작성해 보기로 합니다.
https://github.com/storybookjs/addon-styling/issues/35
이슈 템플릿에 맞춰 버그에 대한 설명, 어떻게 발생하는지, 발생한 환경 등을 작성했습니다.
내가 고칠 수 있겠는데?
이슈를 작성한 후에, 자바스크립트로 작성된 라이브러리이고 경고 내용도 명확하다는 생각이 들어 레포지토리를 찾아가
문제가 되는 함수를 확인해 보았습니다.
const ProviderComponent = Provider || React.Fragment;
return (
<ProviderComponent theme={theme}>
{GlobalStyles && <GlobalStyles />}
{storyFn()}
</ProviderComponent>
);
경고 내용은 React.Fragment의 props로는 key와 children만 받을 수 있다는 것인데,
위 코드에서는 Fragment의 경우에도 theme를 전달할 수 있는 케이스가 있었습니다.
이를 Provider가 없을 때는 theme를 제공하지 않도록 분기 처리했습니다.
if(!Provider) {
return (
<>
{GlobalStyles && <GlobalStyles />}
{storyFn()}
</>
);
}
분기 처리한 후 실행해 보니, 경고가 더 이상 발생하지 않았습니다.
풀 리퀘스트
경고는 사라졌지만, 더 깔끔하고 좋은 방법이 있지 않을까? 테스트 코드도 작성하지 않았는데? 전체 코드를 완전히 파악하고 있지 않은 상태에서 사이드 이펙트가 발생하지 않을까?
이런 여러 가지 생각 때문에 PR을 제출하는 것에 많은 고민이 있었습니다.
결국 내린 결정은 “아무튼, 관리자가 판단해주겠지, 더 좋은 방법이 있다면 PR을 알아서 거부하겠지”라고 생각하고 PR을 작성하기로 했습니다.
그 전에 readme에서 contribution rule 항목을 꼼꼼하게 살펴보고,
프로젝트를 포크한 후 rule에 따라 새로운 브랜치를 만들고, 원본 레포지토리에 대한 PR을 작성했습니다. 이어서 작성했던 이슈와 연결해 주었습니다.
병합
https://github.com/storybookjs/addon-styling/pull/36
https://github.com/storybookjs/addon-styling/releases/tag/v1.0.6
걱정과는 달리, 감사 코멘트와 함께 수정 사항이 병합되었고, 패치된 패키지는 바로 npm에 publish 되었습니다.
후기
이렇게 작은 기여지만, 첫 오픈소스 참여를 하게 되었습니다.
처음이라 혹시 방해나 되지 않을까 걱정했지만, 지금 와서 돌이켜 생각해 보니, 지금까지 회사에서 일하며 겪었던 워크플로우와 크게 다르지 않다는 것을 깨달았습니다.
앞으로 오픈소스 프로젝트의 이슈 탭에서 보이는 버그들을 내 능력 범위 내에서 적극적으로 수정해보고 싶은 마음이 들었고, 깊이 있는 학습을 통해 결국 사용자가 아닌 공급자가 되고자 하는 열망도 더욱 커졌습니다.
