DEV Community

Cover image for Popper.js with Framework
Nily
Nily

Posted on • Edited on

1

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
}
Enter fullscreen mode Exit fullscreen mode

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


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

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

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

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

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more