List.js: HTML 리스트의 검색, 정렬, 필터링을 위한 경량 JavaScript 라이브러리

Source

• Evernote/Technote scraps/List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve.md

Summary

List.js는 7KB 크기의 경량 크로스브라우저 JavaScript 라이브러리로, 기존 HTML 리스트에 검색, 정렬, 필터링 기능을 쉽게 추가할 수 있게 해줍니다. 템플릿 시스템을 통해 항목의 동적 추가, 수정, 삭제가 가능하며, HTML 구조와 JavaScript 설정을 분리하여 직관적으로 사용할 수 있습니다.

Key Points

• 7KB 미만의 경량 크로스브라우저 네이티브 JavaScript 라이브러리
• 기존 HTML 리스트에 검색(Search), 정렬(Sort), 필터(Filter) 기능 즉시 적용
• 템플릿 기반의 직관적인 API를 통한 항목의 동적 추가(Add), 조회(Get), 수정(Update), 삭제(Remove)
• HTML 구조와 JavaScript 로직을 분리하여 유지보수 용이
• 문서 작성 당시 베타 버전임을 명시함

Related

• JavaScript 성능 향상을 위한 Thread-level Speculation (TLS)

• JavaScript 의 현대적 활용 분야 (2019)

• JavaScript 기반 분산 컴퓨팅 고려사항

• 크롬 개발자 도구 101

• Cycle.js

• 8bit.js: Web Audio API 기반 8비트 사운드 라이브러리

• 웹의 병목 현상: JavaScript

• CSS를 이용한 클라이언트 측 전체 텍스트 검색

• ML 기반 번들링: JavaScript 툴링의 미래

• HTML에서 Javascript와 CSS 기반으로 애니메이션을 구현하는 방법

• Node.js 란? (IBM developerWorks)

• Requirify: 브라우저 콘솔에서 동적 라이브러리 로딩

• Web Workers: JavaScript 멀티스레딩

• Web Animations API: element.animate() (Chrome 36)

• Prototype용 선택 상자 플러그인

• 비동기적 JavaScript

• HTTP Archive: jQuery 호스팅 및 버전 분산 분석 (2013)

• 북마클릿(Bookmarklet) 정의

• Nock: Node.js HTTP 모킹 라이브러리

• Three.js 시작 가이드 (Aerotwist)

• Distributed Electronic Rights in JavaScript

• 풀스택 JavaScript 프레임워크 학습 조언 (Quora)

• Design Patterns in JavaScript (tcorral)

• D3.js를 활용한 한국 지도 시각화 가이드

• CSS :scope 가상 클래스의 용도 및 동작 방식

• JavaScript Promises: 개념, 용어 및 표준화

• requestAnimationFrame 사용법

• 2017 년 JavaScript 테스트 개요 (Powtoon Engineering)

• JavaScript this 키워드 동작 원리

• JavaScript 엔진의 동작 원리 (V8 기준)

• 웹의 불안전한 JavaScript 사용 관행에 대한 측정 연구

• JavaScript 과잉 조직화 (Over-Organizing) 의 적절성

• Web Workers API 개요 및 기본 사용법

• JSWhiz: JavaScript 메모리 누수 정적 분석 도구

• CSRF)

• JavaScript 패키지 매니저의 간략한 역사 (npm, Yarn, pnpm)

• 더글라스 크록포드의 작업 철학 및 JavaScript 관점

• Web Framework Benchmark Inspired

• 자바스크립트에서의 Continuation-passing style (CPS) 소개

• 웹 기반 연산 오프로딩 및 상태 시리얼라이제이션 연구 동향

• 대규모 JavaScript 애플리케이션 설계 및 엔지니어 성장

• 종성 분리 알고리즘

• grunt-usemin을 사용한 프론트엔드 자산 패키징

• proxyquire: Node.js require 의존성 오버라이드 라이브러리

• awesome-javascript (스크랩 실패)

• jQuery 이벤트 핸들링: .on() 사용 권장

• VueJS 프로젝트에 Prettier + ES6 Lint 적용

• 자바스크립트 객체 더하기 연산의 타입 변환 규칙

• 리눅스 환경 HLS 스트리밍 참조 링크 모음

• HTTP 클라이언트 라이브러리의 리다이렉트 지원 방식 제안

• Freemarker 템플릿 상속을 통한 레이아웃 관리

• 대시보드 장착 Nexus 7 및 KITT 테마 커스텀 런처

• Bower: 웹 프론트엔드 패키지 관리자

• 자바스크립트 프로토타입(Prototype) 개념 정리

• PC 게임 실행 가능 여부 확인 방법

• Distributed Web Worker 개발 중 Promise 및 이벤트 처리 이슈

• 자바스크립트 동작 원리: 엔진, 런타임, 호출 스택

• 자바스크립트 디자인 패턴 - 프록시(Proxy)

• 2017년 주목할 만한 Java 라이브러리 목록

• Chromecast 에서 Game Boy 에뮬레이터 실행 방법 (개념 증명)

• 실시간 투표 애플리케이션 구축 (Node.js, Express, AngularJS, MongoDB)

• 자바스크립트 메모리 관리 및 4가지 흔한 메모리 누수 대처법

• Simple Ajax 예제

• 텍스트 교체하기: 5가지 방법 (Swapping Out Text, Five Different Ways)

• HTML5 게임 오프라인 지원 가이드

• 페이스북 스파르탄 프로젝트의 비밀병기 Bolt.JS

• ECMAScript 6 Generator 개요 및 Node.js 활용

• JavaScript 학습 자료 (2013)

• CSS 최신 동향 파악을 위한 Adobe Web Platform 블로그

• Meteor.js 시작하기 및 아키텍처 개요

• PayPal 의 Node.js 전환 사례 요약

• The “When Can I Use” Web Widget

• PayPal의 Kraken.js 프레임워크 리뷰 및 평가

• harp.js: 전처리 기능을 갖춘 정적 웹서버

• jQuery 애플리케이션 아키텍처 도구 (Addy Osmani)

• 자바스크립트 아키텍처 v0.4

• AJAX 기본 원리 및 XMLHttpRequest 구현

• Node.js 세션 관리 (Session Management)

• Angular.js 의 핵심 개념 및 장점 요약

• API 하이퍼미디어 형식 선택 가이드 (HAL, JSON-LD, Collection+JSON, SIREN)

• HTML5 Video Player Comparison (2011)

• 파이썬 urllib를 이용한 웹 소스 출력 스크립트

• Didact: 리액트 원리 학습을 위한 DIY 가이드 시리즈 소개

• Git remote-tracking branch 개념 및 동작 원리

• Play Framework 개요

• 31 CSS Web Design Galleries You’ll Love

• Hiding Native HTML5 Video Controls in Full-Screen Mode

• Objective-C 함수 포인터와 코드 블럭

• Fluent 2016: Node.js 기반 하이퍼미디어 마이크로서비스 구현 튜토리얼

• math.js 원격 코드 실행(RCE) 취약점 발견 및 악용 기법

• GitHub의 jQuery 제거 사례

• AngularJS 와 RequireJS 를 활용한 대규모 웹 어플리케이션 개발

• Node.js 유지 사용의 이유 (Mimul’s Developer World)

• 곽철용 짤 생성기 개발 후기 (Vue + HTML Canvas)

• 자바스크립트 배열 메소드 5가지 (indexOf, filter, forEach, map, reduce)

• The Web Ahead: Jen Simmons 인터뷰 요약

• WebSocket과 Node.js를 이용한 동시 영상 동기화 데모

• Scala + Play Framework 2 Server 성능 향상 시키기

• 브라우저 앙상블을 활용한 분산 컴퓨팅 (WeevilScout)

• 2012년 비즈니스 및 마케팅 트렌드 예측 자료 12선 (슬라이드쉐어)

• Node.js 네이티브 애드온의 인자 검증 개선 (NanCheck)

• Node.js on Android (2013)

• 넷플릭스 성능 케이스스터디 (NHN FE.JS Wiki #184)

• Node.js Cluster 모듈 개요 및 활용

• Java 기반 웹 채팅 서버의 동시성 문제 및 아키텍처 검토

• 게임 개발팀 A의 정기 회의 매뉴얼

• Godot 엔진을 활용한 Spine(SD) 애니메이션 실행 가이드

• 브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화

• O Docs를 사용한 API 문서화

• Angular 2 대신 Vue.js 선택 및 React 배제 이유

• Node.js 의 핵심 관점 (Core Perspective to NodeJS)