Mong dev blog

1. 들어가며아코디언 애니메이션을 구현할 때 JavaScript와 CSS 중 어떤 방식이 더 적합할까?2024년 말에 CSS에 interpolate-size라는 새로운 실험 속성이 추가되었다.이 속성은 height나 width 같은 레이아웃 속성의 애니메이션을 보다 자연스럽게 처리할 수 있도록 도와준다고 한다.그럼 JS 방식과 비교했을 때 성능적으로 어떤 장점이 있을까?JS 기반 아코디언은 scrollHeight를 계산해 max-height를 동적으로 변경하는 방식으로 동작한다.반면, interpolate-size를 사용하면 스크립트 연산 없이 애니메이션을 적용할 수 있다.이론적으로 CSS 방식이 더 성능이 좋아야 하지만, 실제 성능 테스트 데이터를 확보해 확인해보고 싶었다.그러나 수동 테스트만으로는 정..

1. 들어가며… 서비스 플랫폼의 경우 FAQ, Q&A에 주로 아코디언을 사용한다. 그리고 FAQ나 Q&A는 유저가 자주 묻는 질문이거나 유저에게 기본으로 전달하고 싶은 내용이다. 그런데 유저가 일일이 항목을 열어 내용을 보기도 하지만, 특정 키워드가 궁금해 검색하는 경우는 없을까? 혹시나 싶어 검색 기능을 사용해봤지만 대부분의 사이트에서 내부 콘텐츠 검색 기능을 제공하지 않고 있었다. ❓ 어떻게 해야 검색이 가능한 아코디언 UI를 만들 수 있을까? 방법은 총 2가지가 있는데, 이번 시간에는 2가지 방법으로 컨텐츠 검색이 가능한 아코디언을 만들어보았다! (만약 UI 라이브러리의 아코디언 구조가 궁금하다면 이 포스팅을 참고하자) 2. 콘텐츠 접근이 가능한 아코디언 만들기 1) details 태그로 구현하는 ..

1. 들어가며… 얼마 전에 컨텐츠를 접었다 펼칠 수 있는 UI가 필요해, 아코디언(accordion) 컴포넌트를 만들었다. 이때 라이브러리의 아코디언을 참고했는데, 공통으로 제공하는 기능이지만 구현 방식이 조금씩 다른 걸 볼 수 있었다. 그래서 이번 시간에는 구현 시 참고했던 라이브러리들의 구조를 조금 더 살펴보는 시간을 가져보겠다. 2. 라이브러리별 아코디언 구조 맛보기 📌 라이브러리의 아코디언은 어떤 구조를 가질까? 여러 UI 라이브러리 중 MaterialUI, NextUI, Vuetify의 아코디언 구조를 확인해보았다. 1) 아코디언이 뭘까? 아코디언은 사용자가 필요한 정보를 보거나 숨길 수 있는 UI이다. 주로 Q&A나 FAQ와 같이 많은 정보를 효율적으로 표시할 필요가 있는 곳에서 사용된다. 아..