Patch Package로 의존성 이슈 해결하기

 

서비스의 배포일정을 앞에 두고 사용 중인 라이브러리에서 이슈가 발견되어 빌드가 되지 않는 상황을 해결한 경험을 정리해봅니다.

프로젝트의 프론트엔드는 Next.js로 구현되어있고, 문제의 라이브러리는 'suneditor라는 텍스트 에이터 라이브러리입니다.

 

---

글은 크게 4가지 항목으로 진행됩니다.

 

1. 문제가 발생하는 라이브러리

2. 어떻게 대응할 것인가?

3. patch-package의 사용

4. 다른 옵션들

 

 

 

1. 문제 발생을 확인

게시글 작성 기능을 위해서 'suneditor' 라는 라이브러리를 사용하였습니다.

 

 

개발환경에서 실행하는 동안에는 문제가 없는 상태였으나,  CI/CD 환경에서 빌드를 하는 도중 에러가 발생하는 상황입니다.

 

 

당황스러운 마음을 안고 검색을 통해서 라이브러리의 github에서 관련 정보를 찾을 수 있었습니다.

pr을 살펴보니 이미 해당 이슈에 대한 작업은 완료된 상태이나, 다음 버전 배포에 포함될 예정인 상황이었습니다. (현재 2.45.1 사용)

 

 

2. 어떻게 대응할 것인가?

배포일을 바로 앞에 두고 발견된 이슈이지만, 배포되는 기능의 핵심 요소에 해당하기 때문에 필수로 반영되어야했습니다.

두가지 방법을 고려하였는데, 하나는 새로운 라이브러리 도입하는 것이었고 다른 하나는 이슈를 해결할 수 있는 다른 방법을 찾아 보는 것이었습니다. 배포를 바로 앞에 두고 있었기 때문에 변경점이 많은 라이브러리 교체보다는 이슈를 해결하는 방향에 초점을 맞췄고 'patch-package' 라는 또 다른 라이브러리를 사용해서 수정을 시도했습니다. (patch-package github)

 

 

 

3. patch-package 사용

 

우선 라이브러리의 github페이지에서 안내하는대로 의존성을 설치합니다.

$ yarn add patch-package postinstall-postinstall

 

 

이어서 스크립트를 추가해줍니다.

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

 

 

그리고 라이브러리의 github 페이지에서 pr에 반영된 커밋을 찾아서 변경해야할 부분을 확인합니다.

(공백같이 보이는 잘못된 문자열이 들어간 이슈였습니다.)

 

 

실제 수정이 필요한 파일을 찾아서 node_modules 폴더에서 찾아서 수정을 합니다.

 

수정된 내용을 patch-package 를 사용해서 반영합니다.

$ npx patch-package suneditor

 

 

성공적으로 실행되었다면 디렉토리에서 patches 폴더를 확인할 수 있고, 내부에 변경점을 기록하는 파일을 찾을 수 있습니다.

 

이제 이 파일을 git을 사용해서 소스코드에 반영해주면 수정사항이 적용됩니다.

지금부터는 다른 환경에서 yarn install을 실행할 때 위에 추가했던 postinstall 스크립트가 실행되면서 변경사항을 반영시켜줍니다. 

 

 

4. 다른 옵션들

배포일을 앞두고 있었기 때문에 다급하게 해결이 필요한 상황이었기 때문에 patch-package로 수정을 해보았습니다.

patch-package는 임시 처리 성격이 강하기 때문에 장기적인 관점에서는 공식 업데이트를 기다렸다 사용하거나 다른 라이브러리를 사용하는 것이 안정성에 도움이 됩니다.

 

이외에도 라이브러리의 git repository를 fork 하여 사용하거나 다른 라이브러리를 사용하는 방법도 있을 수 있습니다.

 

 

 

 

감사합니다.

 

 

 

 

---

[이미지 출처]

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