Popper.js with Framework

새로운 feature 기능이 들어가면서, 기존에 사용하던 popover에 UI에 이슈가 생겼다.

우리 팀은 ngx-bootstrap을 사용중인데, popover에 component를 넣는 방식을 사용하자 간헐적으로 그 위치가 맞지 않고 덜덜거렸다.
(+ 기존의 popover도 hover시, 다른 popover의 position에 영향을 미치는 버그는 있었다😂)

열심히 구글링한 결과, ngx-bootstrap의 고질적인 이슈로, 버그가 수정되지 않고 계속 있는 것 같았다.

시니어분께 상황을 공유하니 이참에 새로운 popover 라이브러리로 갈아타는게 어떻겠냐고 의견을 주셨다. 기존에 있던 버그 + 현재 발생한 이슈를 동시에 다 해결할 수 있는 방법이었다.

여러 패키지들을 조사한 결과, poppper.js가 가장 대중적이고 널리 쓰이는 듯 했다.

해당 패키지를 바로 Angular에 적용하면 되는 줄 알았는데,
알고보니 popper.js는 순수 Javascript 모듈이기 때문에 Angular에서 사용 가능하게 wrapping 된 버전(= Angular 구조에 맞게 popper.js를 사용할 수 있도록 해놓은 것)을 또 찾아야 했다.

👉 Tip: Angular 관련 모듈을 검색할 땐, ng or ngx를 앞에 붙여 찾으면 더 쉽게 찾을 수 있다.

ex) ng popper, ngx popper

검색 결과, ngx-popper를 쓰기로 결정했다.

ngx-popper의 package-lock.json을 보면 아래와 같이 popper.js에 dependency가 걸려있다. 최소 1.14.3 버전을 사용해야 하는것.

"popper.js": {
  "version": "1.14.3",
  "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
  "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
  "dev": true
}

우리 서비스는 popper.js 1.12.9 버전을 사용중이었기 때문에 버전을 올려야했다. dependency가 걸리는 패키지들까지 업데이트 후 적용하니 잘 동작하는 걸 확인할 수 있었다.

이번 일을 통해, 아래와 같이 2가지 사항을 배울 수 있었다.

1. 사용하는 Framework에 맞게 라이브러리를 wrapping 하여 사용하기
2. 새로운 라이브러리를 추가할 땐, dependency 반드시 확인하기

시니어 분께서 "사용하는 Framework에 맞게 라이브러리를 wrapping 하여 사용하기"는 나중에 시간 될 때 한 번 꼭 해보라고 추천도 해주셨다.

Angular 구조를 이해하고 라이브러리가 프레임 워크 안에서 어떻게 동작하는지 알 수 있을것 같았다. (관련 링크)

시간 될때 꼭 해보고 포스팅까지 해보는 걸로💪🏻