댓글 메뉴 업데이트

! 이 글에는 기술 용어가 포함되어 있습니다

새 소식

일부 FastComments 테넌트는 댓글 위젯을 사용자 정의합니다. 이는 사용자 정의와 우리 구현 간의 계약을 생성합니다. 우리는 이 계약을 깨지 않도록 최선을 다하지만, 이 발표의 일환으로 작은 파괴적인 변경이 발생했습니다.

개발자를 위한 안내

댓글 메뉴의 CSS 선택자가 변경되었습니다.

이전:

.comment .menu .menu-content

새로운:

.menu-content

기존 테넌트

"menu-content" 선택자를 이미 사용 중이라면, 축하합니다! 우리는 이 선택자를 사용 중인 모든 테넌트의 위젯 구성을 점검하고 업데이트하여 문제가 발생하지 않도록 했습니다.

문제가 있을 경우 알려주세요.

이유

댓글 위젯이 만들어진 이후 댓글 메뉴는 순수한 CSS 기반의 드롭다운이었습니다. 이는 많은 코드가 필요하지 않으면서 드롭다운 메뉴를 구현하는 간단하고 빠른 방법입니다 - FastComments의 디자인 목표 중 하나입니다.

그러나 수년 동안 몇 가지 문제를 겪었습니다.

하나는 댓글 영역에 특정 높이가 있고 스크롤 가능한 경우, Streaming Chat처럼 메뉴의 하단에 접근하기 어려워지는 것입니다. 메뉴가 스크롤 가능한 콘텐츠 영역을 넘어가려고 하기 때문에 메뉴의 일부가 보이지 않게 되고, 원하는 작업을 처리하기 위해 마우스를 이동하고 다시 메뉴 위에 오버해야합니다. 이는 사용하기에 답답함을 느끼게 했습니다.

메뉴 방향을 위로 뒤집는 등의 몇 가지 우회 방법이 있었지만, 위젯 높이가 충분히 높지 않거나 메뉴에 많은 작업 항목이 있을 경우(관리자를 위한 경우 등) 이것도 작동하지 않습니다. 이 경우 메뉴를 스크롤 가능한 콘텐츠 영역 아래로 드롭하는 것이 이상적입니다.

크기 이점

이번 변경의 이점 중 하나는 많은 코드를 비동기적으로 로드되는 모듈로 추상화할 수 있었다는 것입니다. 이를 통해 위젯의 초기 로드가 부풀려지지 않으면서 댓글 데이터에 대해 수행할 수 있는 작업을 확장할 수 있습니다. 편집 메뉴 위에 오버할 때 처음으로 네트워크 호출이 발생하지만, 초기 번들은 매우 작습니다(< 1kb) 따라서 크게 눈에 띄지 않을 것입니다.

소프트웨어를 발전시키면서도 크기를 줄이는 것은 매우 어렵습니다. 보통 소프트웨어는 빠르게 시작하여 느려지는 경향이 있습니다. 그래서 우리는 FastComments의 빠름을 유지하기 위해 항상 기쁘게 노력하고 있습니다:

이전: 28.76kb gzipped (총 108.02kb)
이후: 28.39kb gzipped (총 105.79kb)

더 적은 코드는 페이지 로드 시 브라우저가 구문 분석해야 할 코드가 줄어든다는 뜻입니다. 이로 인한 영향은 더 많은 기능이 추가됨에 따라 확장될 것입니다.

성능 이점

이전 메뉴는 모든 메뉴 항목을 렌더링하고, 모든 확장을 로드하여 확장에 추가할 항목이 있는지 확인한 다음, 이들 또한 렌더링했습니다 - 모든 댓글에 대해 그렇게 해서 콘텐츠가 여러분의 마우스를 준비하도록 했습니다.

보통 30 - 100개의 객체가 있기 때문에 큰 문제가 되지 않는 경향이 있지만, 그 영향은 커지고 있었습니다. 새로운 시스템은 이제 메뉴가 필요할 때만 렌더링되므로 이 걱정을 제거합니다.

단점은 새로운 메뉴가 우리가 원하는 것을 달성하기 위해 JS를 사용하여 위치를 지정하고 렌더링된다는 것입니다. 그러나 우리는 가능한 한 계속 최적화해 나갈 것이며, 현재로서는 성능이 좋습니다.

결론

이러한 변경 사항을 적용하는 데 인내해 주신 고객들에게 감사드립니다. 여러분이 FastComments를 계속 사랑해 주시기를 바랍니다.

감사합니다!