Open Source 디버깅하고 흔적 남기기
회사에서 Pdf 관련 이슈를 처리하게 되었다. 우리가 개발하는 서비스 중 하나가 Pdf를 렌더링해주는 기능을 포함하고 있는데, react-pdf 라이브러리를 사용하고 있다. 그런데 웬걸 이놈이 깨진다.
렌더링을 할때 텍스트를 자르는 알고리즘이 뻗어버리는 문제가 있었다. 이걸 디버깅을 했어야했다(우리가 가졌던 문제는 얘때문이 아니었는데, 라이브러리 디버깅을 하다보니까 얘를 찾게되었다..) 그래서 내생에 처음으로 진짜 각잡고 라이브러리 디버깅을 해보게 되었다.
Yarn link를 통해서 라이브러리 디버깅하기
나에게 주어진것은 myApp 과 문제의 라이브러리 react-pdf이다.
react-pdf의 경우 mono-repo로 구성되어있고, 그래서 packages안에 내가 사용하는 react-pdf/renderer 패키지가 자리잡고 있다. 처음에 조금 쫄았지만 그냥 mono-repo라도 똑같았다.
- 우선 myApp과 react-pdf 리포를 둘다 각각 클론해와서 빌드를 해준다.
- `yarn link` 의 설명을 해주는 docs 페이지로 가면 대문짝만하게 적어놨다.
Symlink a package folder during development
이 문서에 따르면 ‘yarn link’ 는 개발 과정 동안 패키지를 프로젝트에 링크시켜서 사용하는 용도이다. 패키지 내의 이슈를 분석하거나 할때 용이하다. 그래서 우선 @react-pdf/renderer 패키지로 이동한다. 그리고 yarn link를 해준다.
React Invalid Hook call 오류 해결하기
원래는 위의 단계만 해도 되야한다. 하지만 놀랍게도 오류가 생긴다. 이 이유는 react관련이다. react-pdf의 renderer 패키지는 react를 peer-dependency로 가지고 있지만 react-pdf가 react를 가지고 있기때문에 내 프로젝트(react) 가 실행됬을때 얘 입장에서는 프로젝트내에 react가 두개나 있는거다.
여기를 보면 상세한 설명을 확인할 수 있다. 다른 기타 이유로도 발생하지만 우리는
You might have more than one copy of React in the same app.
이것때문에 문제가 발생한다.
이것도 yarn link로 똑같이 해결할 수 있다. 이번엔 대신에 myApp의 react, react-dom에서 링크를 만들고, react-pdf에서 각각 link 해줘야한다.
이후에 package를 다시 빌드하고, myApp도 다시 빌드하면 정상 동작을 하는 것을 확인할 수 있다.
분석하고 PR 과 Issue를 남긴 후기
- 내가 남긴 PR
- 내가 남긴 Issue
하루를 꼬박써서 분석한걸 PR과 Issue로 정리해서 올렸다. 아직 lerna 기반 패키지가 어떻게 관리되는지 다 파악하지는 못했지만 디버깅할 정도로는 이해할 수 있던 시간이었다. 이제 PR 피드백으로 test 를 좀 추가해달라는 요청사항을 반영하려고 한다.
또한 남들이 잔뜩 작성한 코드를 살펴보는게 재미있었다. 얘도 star가 10k나 되는 프로젝트인데 나같은 개발자도 뭔가 기여를 할 수 있는 부분도 있다는게 재미있었다. 또한 이 프로젝트는 ramda로 개발하고 있어서 JavaScript로 함수형 개발을 하는 사람들은 어떻게 하나 볼수 있었던 시간이었다.
