[package] patch-package로 오픈 소스 수정하여 사용하기

반응형

상황

현재 서비스의 클라이언트는 Graphql 도입과 동시에 apollo-client 가 적용되어 있는데, 이 환경을 조금 더 생산성 있게 관리하기 위해 graphql-code-generator 와 플러그인을 사용해 gql 쿼리 작성 후 스크립트 실행 시 쿼리에 해당하는 커스텀 훅을 아폴로 훅과 결합하여 별도로 생성해줄 수 있도록 되어있다.

문제는 그동안은 React의 Suspense 기능을 사용하지 않고 있다가, 신규 메인 페이지를 작업하던 중 API 의 응답 속도 지연으로 컴포넌트 별 스켈레톤 UI 를 적용해야만 하는 상황이 왔다.

기존 아폴로 훅을 사용해 Suspense 를 적용하려고 하니 작동이 되지 않아 찾아보니,

https://www.apollographql.com/docs/react/data/suspense/

Suspense

apollo-client 에서는 useSuspense 훅을 사용해야만 suspense 기능을 사용할 수 있었다. 그런데 기존 제네레이터 문서에서 suspense 기능은 찾아볼 수 없었고, 결국 소스 코드를 직접 수정하는 일을 거쳤다.

수정한 코드를 바탕으로 오픈소스에 PR을 올렸으나 머지 되기만을 기다릴 순 없어 이런 저런 방법을 찾아보다가 patch-package 를 발견했다.

patch-package

https://github.com/ds300/patch-package

GitHub - ds300/patch-package: Fix broken node modules instantly 🏃🏽‍♀️💨

패키지의 수정 사항을 patch 파일로 만들어서 패키지 설치 시 patch 파일을 통해 소스코드를 업데이트 해주는 라이브러리이다.

방법

기본 설치를 완료한 뒤, 수정하고 싶은 라이브러리에 접근하여 코드를 수정한다.

npx patch-package (패키지 명)

package.json

나의 경우 `npx patch-package @graphql-codegen/typescript-react-apollo` 명령어를 실행했다.

그럼 아래와 같이 root 경로에 patches 폴더와 patch 파일이 생성된다.

생성된 patches 폴더와 patch 파일

수정사항 patch 파일

그리고 안전하게 node_modules 폴더를 삭제한 뒤 패키지를 설치해 보면

patch-package 스크립트가 실행되어 라이브러리 패치를 완료했다는 로그와 함께 실제 소스코드에도 반영되어 있는 것을 확인할 수 있다.

그동안에는 라이브러리 수정이 필요할 땐 혼자 포크해서 수정한 뒤 그걸 다시 설치하는 그런 방식을 임시방편으로 사용했었는데, 이런 간단한 방법이 있었다니.. 이제라도 알게 되어 다행이라 생각했다.