일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- named type
- private-access-to-photos
- RN업데이트
- react
- react-native-image-picker
- async
- axios
- RN새로운아키텍쳐
- react-native
- Throttle
- animation
- await
- 비동기
- Hash-table
- debounce
- CS
- Swift
- promise.all
- ios
- react-native-permissions
- javascript
- no-permission-handler-detected
- react animation
- Promise
- motion.div
- hydration mismatch
- react native
- rn
- React-Native업데이트
- RN아키텍쳐
- Today
- Total
하루살이 개발일지
patch-package를 통해 node_modules 수정하기 본문
1. patch-package 란?
patch-package는 자바스크립트 프로젝트에서 node_modules를 수정할 수 있게 해주는 라이브러리이다.
이를 통해 node_modules 내부에서 수정하고 싶은 부분이 있다면, 변경 사항을 패치 파일로 저장하고 git 업로드 등을 통해 쉽게 공유할 수 있게 해 준다.
2. 언제 필요한가
특정 패키지 내부 버그 수정이 필요할 때 해당 패키지가 새로운 공식 릴리즈가 되는 것을 기다릴 필요 없이 즉시 직접 수정하고 싶을 때, 혹은 프로젝트에서의 특별한 요구 사항으로 패키지를 수정하고 싶은 경우 등에 유용하다.
3. 사용 방법
3.1. patch-package 설치
// yarn
yarn add patch-package postinstall-postinstall
// npm
npm i patch-package postinstall-postinstall
postinstall-postinstall 은 패키지 설치 후 자동으로 패치를 적용하기 위한 추가 스크립트이다.
3.2. 패키지 수정
node_modules에서 변경이 필요한 부분을 직접 수정한다.
예시로, 현재 나의 node_modules의 expo 폴더에서 AppEntry.js라는 파일을 다음과 같이 수정해 보겠다.
3.3. 패치 생성
수정 사항을 저장한 후, 변경 사항을 패치 파일로 만드는 과정이 필요하다.
터미널에 다음과 같은 명령어를 입력한다.
npx patch-package (패키지 이름)
이 명령은 프로젝트 루트 경로에 'patches' 폴더를 생성하고, 변경 사항에 대한 패치 파일을 저장한다.
3.4. 자동 패치 설정
프로젝트를 사용하는 다른 사람들이 npm install 또는 yarn을 실행할 때 패치가 자동으로 설정되도록 하는 과정이 필요하다.
이를 위해 package.json에 postinstall 스크립트를 추가해 준다.
"scripts": {
"postinstall": "patch-package"
}
3.5. 변경사항을 github에 push
위 과정이 완료되었다면 변경사항을 github에 commit & push 한 후 팀원들에게 공유한다.
4. 적용 확인
patch-package가 잘 실행되는지 확인하는 과정이다.
4.1. node_modules 삭제
rm -rf node_modules
node_modules 폴더를 날려버린다.
4.2. npm i 로 재설치
npm i
yarn
npm i 혹은 yarn 명령어를 통해 node_modules를 재설치한다.
4.3. 설치된 node_modules 에 변경사항이 잘 적용되는 지 확인
변경사항이 잘 적용되어 설치되는 모습이 확인되면, 성공이다.
레퍼런스
'웹개발 > JavaScript' 카테고리의 다른 글
[JavaScript] Promise.allSettled vs. Promise.all (4) | 2024.07.29 |
---|---|
브라우저 렌더링 원리 (0) | 2024.02.26 |
JavaScript의 비동기 처리 (Event Loop와 Call Stack) (0) | 2023.10.18 |
[JavaScript] AJAX란? (XMLHttpRequest, Fetch, Axios) (0) | 2023.10.18 |
[JavaScript] 콜백 지옥, Promise, async/await에 대하여 (0) | 2023.10.18 |