라이브러리 사용 이유
우리가 라이브러리를 쓰는 이유에는 여러가지가 있습니다.
대표적인 세 가지를 꼽자면 다음과 같습니다.
1. 개발 시간을 단축할 수 있습니다.
2. 다수의 애플리케이션에 적용할 수 있습니다.
3. 비슷한 고민과 해결책을 찾기 수월합니다.
라이브러리는 은탄환일까?
처음에는 개발 시간을 단축해서 좋을 수 있지만 꼭 그렇지만도 않습니다. 장점에 못지 않은 단점들도 존재합니다.
1. 기능과 목적에 비해 라이브러리의 용량이 커 번들 사이즈를 늘릴 수 있다.
2. 해당 라이브러리를 직접 수정해야 할 수도 있다.
3. 신뢰도가 떨어진다.
4. deprecated될 수 있다.
이 단점 중 저는 2번에 집중하려 합니다. 종종 개발하다가 라이브러리를 커스텀 해서 사용해야할 경우가 있습니다. 라이브러리 코드에 바로 PR을 보내 제안해 볼 수 있지만, 배포날에 맞추려다 보면 일단 수정이 필요한 경우도 있습니다. 이 때 사용할 수 있는 것이 바로 patch-package입니다.
patch-package란?
patch-package란 node modules에 있는 패키지를 수정하여 배포 단계에 나갈 수 있도록 하고, git을 통해 변경 사항도 추적할 수 있습니다.
patch-package 사용
일단 공식 문서에 따라 patch-package를 사용합니다.
저는 패칭할 라이브러리로 react-native-image-crop-picker를 예시로 들어보겠습니다.
프로젝트에 라이브러리를 설치하고 동작을 확인해봅니다.
기존에 이미 패키지 파일이 있다면 지워주세요!
라이브러리를 직접 수정해보자
react-native-image-crop-picker 라이브러리는 리액트 네이티브에서 사용할 수 있는 이미지 편집 라이브러리 입니다. 이 라이브러리의 기본적인 동작은 아래와 같습니다.
- 이 라이브러리는 기본적으로 크롭할 이미지의
width,height를 기본값으로 받습니다. width와height를 기준으로 크롭할 사각형의 비율이 정해집니다.
이 라이브러리를 통해 실행해보면 iOS에선 다음과 같이 나타납니다.
곱창 포스팅 전에 가려고 찍어둔 것이 있어서 찍어놨습니다..ㅋㅋㅋㅋ 여기 맛있어요!
제가 원하는 동작은 여기서 처음에 크롭하는 사각형 영역이 전체 영역이었으면 좋겠습니다. 이후의 크롭 영역은 사용자가 알아서 조정하도록 합니다. 이 라이브러리는 리액트 네이티브의 라이브러리이기 때문에 iOS, Android에서 해당 코드를 각각 찾아 수정합니다.
💡 라이브러리를 수정할 땐 이로 인한 side-effect가 없는 지를 생각하는 것이 좋습니다. 만약
width와height에 따라 크롭 사각형의 비율이 조정되지 않는다면 동료들이 사용할 때 당황스러울 수 있습니다.
저는 특정한 값을 넣을 때만 패치된 동작이 돌아가도록 했습니다. 이렇게 하면 기존의 코드에 영향을 최소화 할 수 있습니다.
이제 npx patch-package (패칭 라이브러리 이름)을 실행합니다. 이렇게 하면 /patches하단에 새로운 패치 파일이 생성됩니다. 이 패치 파일 안에는 라이브러리의 어떤 내용이 수정되었는 지 적혀있습니다.
이제 프로젝트를 실행하면 수정한 내용이 반영되어 있는 것을 확인할 수 있습니다.
