[React Native] patch-package를 사용해 라이브러리 커스텀하기

 

 

 

기본적으로 React Native 프로젝트의 .node-modules는 gitignore 에 등록되어 있다.

따라서 라이브러리의 내부 코드를 수정하면 협업 개발자들과 다른 시스템이 동작하게 된다.

이를 방지하기 위해 patch-package를 사용한다.

 

 

공식 문서

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

patch-package

 

설치 방법

npm

npm i patch-package

 

yarn

yarn add patch-package postinstall-postinstall

 

yarn은 새 종속성을 추가하거나 설치하는 명령 후에만 postinstall 스크립트를 실행한다. yarn remove를 사용하여 종속성을 제거하면 postinstall 스크립트가 트리거되지 않는다.

 

• postinstall-postinstall의 역할

postinstall-postinstall 패키지는 이러한 제약을 해결한다. 이 패키지는 프로젝트의 기존 postinstall 스크립트에 hook하는 가벼운 유틸리티이다.

postinstall-postinstall을 설치하면 package.json에 자체 postinstall 스크립트가 추가된다.

이 새 스크립트는 프로젝트의 원본 postinstall 스크립트를 명시적으로 호출하여 yarn을 사용하여 종속성을 추가, 설치 또는 제거하는 상황에 관계없이 실행되도록 한다.

기본적으로 postinstall-postinstall은 종속성을 제거한 후에도 프로젝트의 필수적인 설치 후 작업이 항상 실행되도록 보장한다.

 

 

• -save-dev 혹은 —dev 옵션 활용

웹 프론트엔드 개발 시에는 프로덕션 환경에서 npm을 실행할 필요가 없다. 예를 들어, 웹 사이트나 웹 애플리케이션을 개발하는 경우에는 프로덕션 환경에서 npm 패키지 관리가 필요하지 않다.

이러한 경우 --save-dev(npm), —dev(yarn) 옵션을 사용하여 개발 환경에서만 필요한 패키지를 설치할 수 있다. 옵션을 사용하면 다음과 같은 장점이 있다.

• 프로덕션 빌드 크기 줄이기: 개발 환경에서만 필요한 패키지를 설치하여 프로덕션 배포 시 앱 크기를 줄일 수 있다.
• npm install 명령 간소화: -save-dev 옵션을 사용하면 -dev 옵션을 명시적으로 지정하지 않아도 개발 환경에서 자동으로 패키지가 설치된다.

사용 예시:

npm install --save-dev patch-package
or
yarn install --dev patch-package

 

위 명령은 patch-package 라이브러리를 개발 환경에만 설치한다.

 

 

patch-package 사용 방법

yarn patch-package package-name

 

npx patch-package package-name

 

실행 옵션은 공식 문서를 참고하면 된다.

 

 

728x90

 

 

 

사용 예시

 

1. @react-navigation/bottom-tabs 라이브러리에 다음과 같이 테스트 코드를 추가

 

 

2. 콘솔에서 yarn patch-package @react-navigation/bottom-tabs 실행

 

 

 

3. 프로젝트 폴더에 patches 폴더 생성 확인 및 @react-navigation+bottom-tabs+6.5.2.patch 파일 생성 확인

 

 

 

시퀀스된 패치 파일 삭제

시퀀스된 패치 파일을 삭제하려면 해당 파일을 삭제한 다음 node_modules폴더를 제거하고 다시 설치하면 된다.

마지막 패치 파일이 아닌 패치 파일 중 하나를 삭제한 경우 연속 패치 파일 이름의 시퀀스 번호를 업데이트할 필요는 없지만 깔끔하게 유지하기 위해 해당 방법을 권장하고 있다.

https://www.npmjs.com/package/patch-package#deleting-a-sequenced-patch-file

patch-package