개요

사내 프로젝트에서 svg를 핸들링하기 위해 two.js 라이브러리를 사용하는데, 라이브러리 내에서 타입 선언 작업이 안되있어서 개발에 큰 불편함을 겪고 있었다.

es6 브랜치에서 작업중이라고 한다. 2022. 01. 05 기준으로 es6 브랜치를 확인했을 땐, 작업이 어느정도 끝나가는 것 같았다.

es6 브랜치에서 작업중이라고 한다. 2022. 01. 05 기준으로 es6 브랜치를 확인했을 땐, 작업이 어느정도 끝나가는 것 같았다.

document를 참고해서 컴포넌트에 타입과 인터페이스를 일일이 선언해줄까 했지만, 결코 적은 양이 아니었고, Intellisense도 안나오는 상황도 너무 불편할 것 같아서, 해당 패키지 내부에서 직접 컴파일 하여 types.d.ts를 만들기로 정했다.

node_modules 내부의 패키지 수정

node_modules/two.js 폴더 내에 tsconfig.json 파일을 만들어 컴파일을 해서 타입 선언 파일을 만들어주었다. 또한, node_modules/two.js/package.json에서 “types” 부분을 수정해주었다.

Untitled

그리고 프로젝트 파일로 돌아와서 확인해 보니 정상적으로 Intellisense를 띄워주고 타입을 체크하고 있는 것을 확인했다.

(타입이 100% 정의되있는게 아니라 Intellisense도 제대로 안나오는 경우도 있었고, 공식문서와 다르게 타입을 체크하는 경우도 있었지만, 개발 속도 향상엔 큰 도움이 되었다)

Untitled

patch-package

위처럼 패키지를 직접 수정한다 하더라도, 로컬에서 수정한 것이기 때문에 다른 팀원이 수정된 패키지를 사용하거나, 패키지를 재설치 할 때도 수정된 내용을 유지하려면 별도의 작업이 필요하다.

이 때 patch-package 라이브러리를 이용하면 이를 편하게 관리할 수 있다.

  1. patch-package와 postinstall-postinstall 라이브러리를 설치한다.
npm i --save-dev patch-package postinstall-postinstall