node_modules 를 수정하고 프로젝트에 적용하는 방법

타인의 NPM 패키지 수정하기

라이브러리를 조금 커스터마이징해서 적용하고 싶을 때 유용한 방법이다.

수정 전 주의사항

• 최초 제작자의 라이선스 설정을 꼼꼼히 살펴보아야 한다.
  • 간혹 무단 수정하면 안되는 라이브러리도 있다.
• 최초 제작자가 작성한 라이브러리 이용법을 꼼꼼히 살펴보아야 한다.
  • 내가 원했던 기능이 이미 존재했을 수도 있고, 라이브러리 동작방식을 아는데도 도움이 된다.

수정 방법 1: Github Fork 뜨기

Github 프로젝트 Fork 뜨기

Github 에서 원본 라이브러리 프로젝트를 찾아 Fork 를 떠서 내 계정으로 들고오면 된다.

package.json 에서 의존성 주소 수정하기

초기 의존성은 "react-native-nmap": "^0.0.66" 이와 같이 버전 정보만 표기되어 있는데, 이는 단순히 npm 패키지 저장소에서 해당 버전을 찾아 가져오기 때문이다.

내가 커스텀한 JS 패키지를 가져오기 위해서는 간단하게 "react-native-nmap": "https://github.com/n00nietzsche/react-native-naver-map" 내 깃헙에 fork 한 주소를 적어주면 된다.

수정 방법 2: patch-package 이용하기

node_modules 에서 해당 라이브러리 소스코드 수정하기

라이브러리의 소스코드를 내가 원하는대로 수정해준다.

patch-package 를 설치한다.

npm install patch-package

위의 명령어로 설치할 수 있다.

npx patch-package 패키지명 을 이용해 바뀐 내용의 .patch 파일을 생성해준다.

npx patch-package react-native-image-crop-picker

react-native-image-crop-picker 라는 패키지명을 바꿨을 때는 위와 같이 입력해주면 된다.

package.json 파일의 내용을 약간 변경한다.

"scripts": {
  "postinstall": "patch-package"
}

스크립트 부분에 위와 같이 "postinstall": "patch-package" 을 추가해주면 된다.

만들어진 .patch 파일 확인

@@ -3,6 +3,7 @@ package com.reactnative.ivpusic.imagepicker;
 import android.Manifest;
 import android.app.Activity;
 import android.content.ClipData;
+import android.content.ContentValues;
 import android.content.Context;
 import android.content.ContentResolver;
 import android.content.Intent;
@@ -88,6 +89,7 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
     private boolean hideBottomControls = false;
     private boolean enableRotationGesture = false;
     private boolean disableCropperColorSetters = false;
+    private boolean saveToPhotos = false;
     private boolean useFrontCamera = false;
     private ReadableMap options;

@@ -145,6 +147,8 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
         enableRotationGesture = options.hasKey("enableRotationGesture") && options.getBoolean("enableRotationGesture");
         disableCropperColorSetters = options.hasKey("disableCropperColorSetters") && options.getBoolean("disableCropperColorSetters");
         useFrontCamera = options.hasKey("useFrontCamera") && options.getBoolean("useFrontCamera");
+        saveToPhotos = options.hasKey("saveToPhotos") && options.getBoolean("saveToPhotos");

이 파일에는, 내가 어떤 부분을 수정했는지에 대해서 표기된다.