react-loading-skeleton 오픈소스(opensource) 기여 후기

1.  오픈소스에 기여하게 된 계기

    1) Skeleton Loading을 위한 react-loading-skeleton 선택

개인 프로젝트를 진행하며 Skeleton Loading을 사용하기위해 npm trend를 검색해보았다.

npm trend

위 사진의 npm trend를 보면 react-content-loader와 react-loading-skeleton이 가장 인기가 많은것을 볼 수 있다.

이중에서 custom 기능을 제공하는 react-content-loader보다 직관적으로 설명이 되어있는 react-loading-skeleton을 사용해보기로 했다.

    2) Github README의 설명과 다르게 동작하는 오류 발견

Github README의 설명을 보면 skeleton의 width prop을 주지 않으면 default width는 100% 라고 되어있다.

https://github.com/dvtng/react-loading-skeleton

그러나 내 프로젝트에서는 width를 주지 않으면 Skeleton Loading이 나오지 않았다.

2.  오픈소스 수정 

    1) 첫 번째 원인 파악 및 PR

원인을 파악하기 위해 개발자 도구를 열어서 확인해보았다.

Skeleton의 구조는 이중 span으로로 구성되어 있었고 자식 요소의 span은 width:100% 스타일이 들어가있지만 부모 요소의 span과 함께 width:0인 것을 확인하였다.

<span classname="skeletoncontainer"> //width:0
    <span classname="skeleton line"/> //width:100%
</span>

따라서, 부모 span에 width:100%를 주면 될 것 같다는 가설을 세웠고, react-laoding-skeleton 프로젝트를 받아서 확인하였다.

react-loading-skeleton에는 스토리북이 설정되어있었고 스토리북으로 제대로 반영이 되는지 확인할 수 있었다.

부모 span에 width:100%를 주면 다른 사용자에게 side effect를 주진 않을지, 다른 방법도 있는지 여러 테스트를 해보았고, 

width가 없거나 100%일 때 부모 span에 width:100%를 주도록 코드를 수정하였고, 테스트코드 또한 완성하여 PR을 했다.

첫 번째 PR 보러가기

Fix an issue that does not render Skeleton when width param is nullable by kwangminini · Pull Request #177 · dvtng/react-loadi

    2) 미흡했던 원인 파악

첫 번째 PR을 하고 리뷰를 받았을 때 제대로 원인파악을 하지 않은 나 자신을 다시 한번 되돌아보게 되었다.

첫 번째 리뷰

사실, 나는 정확한 원인을 알려고하기 보다는 해결책부터 알아보았다.
스토리북에서 해당 오류가 발견되지 않는다는것을 알고 있었지만 이것은 스토리북 자체 css의 영향일 것이라 추측하고 넘겼었다.

 

오픈소스 담당 개발자는 해당 오류가 나지 않아서 나에게 자세한 설명을 요구했고, 나 또한 정확한 원인을 알려고하기 보다는 해결책부터 확인했기 때문에 제대로 된 설명을 하지 못했었던 것이다.

 

    3) 두 번째 원인 파악 및 PR

그래서 원인이 무엇이길래 부모 span과 자식 span의 width가 0이였을까 열심히 찾아보던 중 <Skeleton/>을 감싸고있는 부모 element에 display:flex일 때에만 이런 오류가 발생한다는 것을 확인하였다.

<div style={{display:'flex'}}>
    <Skeleton/>  //width:0
</div>

<div>
    <Skeleton/>  //width:100%
</div>

심지어, 스토리북에서도 부모 element에 display:flex가 있을 때 이런 오류가 발생했다.
(내가 처음에 추측했던 스토리북 자체 css때문에 오류가 안난다는 것은 망상이였던 것이다.)

자식 요소의 % width는 부모의 길이를 기준으로 % 길이를 잡아야하는데 display:flex는 자식의 길이에 부모가 영향을 받으니 서로 상대적인 길이가 필요하다보니 모두 0이 되어버린 것이다.

 

이러한 내용을 예제와 함께 코멘트를 달았고, Side Effect를 생각해서 코드 수정보다는 README에 이러한 상황을 표기하는걸로 하였다.

코멘트 내용

따라서, README를 수정하여 PR을 올렸다.

 

두 번째 PR 보러가기

add Skeleton width guide to README Example by kwangminini · Pull Request #178 · dvtng/react-loading-skeleton

 

3. 후기

많은 개발자가 사용하는 오픈소스에서 나와 같은 오류를 겪을 개발자에게 도움이 될 내용을 문서화했다는 것 자체로도 뿌듯하다.

이번 PR은 결국 소스코드 수정이 아닌 README 수정이 이루어졌지만 많은 것을 배울 수 있었다.

수많은 개발자가 사용하는 오픈소스인 만큼 소스코드 수정이 필요할 때에는 정확한 원인 파악이 필수이며, 눈에 보이는 오류조건이 아닌 여러 조건에서 테스트 또한 해보아야 한다.

 

npm trend 상위 오픈소스의 오류를 발견하곤 신나서 빨리 수정하려다 보니 정확한 원인 파악을 하지 못했고, 원인 파악보다 빠른 해결을 우선했던 내 모습을 반성하는 계기가 되었다.

 

ps) 반영된 결과

 

README에 반영된 PR