라이브러리를 수정하고 싶을 때는 patch-package를 사용해보세요!

라이브러리를 사용하다가

 

'아 이 부분만 이렇게 기능이 되면 좋을텐데...', 

'아 이부분 버그는 언제쯤 수정이 되려나... 이부분만 바뀌면 참 좋을텐데...' 

 

라는 아쉬움을 가지고 라이브러리를 사용해본 경험이 누구나 한번 쯤은 있을거다. 

 

이미 해당 라이브러리로 개발을 다 하다가 중간에 라이브러리 자체의 버그를 발견했을 때는 다른 라이브러리로 교체하기도 애매하고... 

 

그럴 때 내가 직접 원하는 부분을 수정해서 해당 라이브러리의 패치 버전을 배포할 수 있는 patch-package라는 라이브러리를 알게되었다!! 

 

https://www.npmjs.com/package/patch-package

patch-package

 

 

최근에 mathlive 라는 수식 입력기 라이브러리를 회사에서 사용하게 되었고, 

해당 라이브러리를 사용하여 수식 문제 유형 개발을 하는데, 개발을 다 하고나서야 나중에 태블릿 모드에서 메뉴 토글이 잘 열리지 않는 버그가 있는 것을 발견하게 되었다. 

 

라이브러리 자체를 수정하지 않고 직접 외부에서 mathlive를 조작해보려고 document.querySelector 를 사용해서 메뉴 토글이 정상적으로 열어질 수 있도록 처리해보려고 했지만, 내가 의도한 대로 조작할 수 없는 이슈가 있었다. (라이브러리 자체를 수정해야만 했다.. ㅠ) 

 

처음에는 해당 문제를 해결하기 위해서 mathlive github에서 동일한 이슈를 겪고 있는 사람들이 있는지 확인해보았지만 딱히 관련한 정보를 찾을 수는 없어서 직접 issue를 올렸으나 답이 오지않았다... 

 

 

https://github.com/arnog/mathlive/issues/2457

 

 

이와 관련해서 회사 직원분들께 이슈가 있음을 전달드렸더니, patch-pacakge라는 것으로 직접 라이브러리의 node module를 수정해서 버그를 수정할 수 있는 방법을 제안해주셨다. (이런 게 있었다니 짱신기....ㅎ.....) 

 

우선 이 방법으로 수정을 하기 위해서는 직접 mathlive 라이브러리의 코드를 분석해보며 이슈를 파악해야했다. 

 

 

mathlive 내에서 태블릿에서 터치가 제대로 동작하지 않는 'menu-toggle' 코드 위주로 분석을 하며 이슈를 파악해보니, menuToggle 의 이벤트가 'click'이 아닌 'pointerdown'으로 되어있어서 발생했던 이슈였다. 

 

터치 디바이스에서는 pointerdown 이벤트가 터치 시작 시 발생하지만, 이 이벤트가 끝날 때까지 기다리지 않는 경우 간헐적으로 이벤트가 발생하지 않는 오류가 종종 발생하는 것이 원인이었다. (!) 

 

mathlive 코드 분석해보기,,,

 

 

항상 메뉴 토글 클릭 시 어떤 디바이스에서든 잘 열리도록 이벤트 발생을 보장하기 위해 click으로 변경을 하기로 했다. 

 

node_modules 내의 mathlive에서 mathlive.mjs와 mathlive.js 에서 menutoggle 이벤트가 pointerdown으로 적용된 부분을 click으로 변경을 하고 테스트를 해보니 태블릿 모드에서도 정상적으로 동작하는 것을 확인할 수 있었다(!)

 

 

 

click 이벤트로 변경하니 메뉴 토글 기능이 정상동작하는 것을 확인할 수 있다.

 

변경을 해준 뒤에, 아래의 cli를 입력해주면 라이브러리의 수정된 패치 버전을 생성할 수있다. 

npx patch-package [변경하고 싶은 라이브러리]

 

 

만약 두번째 패치 버전을 생성하고 싶을 때는 아래와 같이 입력해주면 된다. 

 

npx patch-package [변경하고 싶은 라이브러리] --append 'fix-touchable-opacity' // fix-touchable-opacity는 예시임

 

 

세상에 참 좋은 게 많구나! 

 

라이브러리를 사용하여 원하는 기능을 사용하면서도, 조금씩 커스텀할 수도 있고 잔잔한 버그들도 직접 수정해서 사용할 수 있다는 점이 참 편리하다고 느껴졌다. 

 

혹시나 비슷한 상황에서 라이브러리 자체를 바꾸기보다는 patch-package로 수정된 패치 버전을 배포해서 사용해보는 것을 추천드립니다!