# 현대 브라우저용 소형 jQuery 대안 Cash

> Clean Markdown view of GeekNews topic #17580. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17580](https://news.hada.io/topic?id=17580)
- GeekNews Markdown: [https://news.hada.io/topic/17580.md](https://news.hada.io/topic/17580.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-11-04T10:05:50+09:00
- Updated: 2024-11-04T10:05:50+09:00
- Original source: [github.com/fabiospampinato](https://github.com/fabiospampinato/cash)
- Points: 4
- Comments: 1

## Topic Body

### CashCash 소개

- CashCash는 현대 브라우저(IE11+)를 위한 매우 작은 jQuery 대안으로, DOM 조작을 위한 jQuery 스타일의 문법을 제공함.
- 코드베이스를 최소화하기 위해 현대 브라우저 기능을 활용하며, jQuery와 유사한 체인 가능한 메서드를 훨씬 작은 파일 크기로 제공함.
- jQuery와 100% 기능 일치를 목표로 하지는 않지만, 일상적인 사용 사례 대부분을 커버함.

### 비교

- **크기 비교**
  - Unminified: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
  - Minified: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
  - Minified & Gzipped: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
  - jQuery Slim 대비 76.6% 크기 감소 효과 있음.

- **기능 비교**
  - 구형 브라우저 지원: Cash ❌, Zepto ❌, jQuery Slim ✔
  - 현대 브라우저 지원: Cash ✔, Zepto ✔, jQuery Slim ✔
  - 적극적인 유지보수: Cash ✔, Zepto ❌, jQuery Slim ✔
  - 네임스페이스 이벤트: Cash ✔, Zepto ❌, jQuery Slim ✔
  - 타입스크립트 코드베이스: Cash ✔, Zepto ❌, jQuery Slim ❌
  - 타입스크립트 타입: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
  - 부분 빌드 지원: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

### 사용법

- Cash는 jsDelivr에서 사용할 수 있으며, 다음과 같이 사용 가능함:
  ```html
  <script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script>
  <script>
    $(function () {
      $('html').addClass('dom-loaded');
      $('<footer>Appended with Cash</footer>').appendTo(document.body);
    });
  </script>
  ```
- npm을 통해 `cash-dom` 패키지로도 사용 가능함:
  ```javascript
  import $ from "cash-dom";
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
  ```

### 문서

- Cash는 쿼리 선택자, 컬렉션 메서드 및 일부 라이브러리 메서드를 제공함.
- jQuery의 API를 참고할 수 있으며, Cash는 jQuery와 호환되는 대부분의 기능을 구현함.
- Cash는 사용자 정의 메서드로 확장 가능함.

### 기여

- 문제를 발견하거나 기능 요청이 있을 경우 이슈를 열어야 함.
- 풀 리퀘스트를 하려면 다음 단계를 따름:
  1. 저장소 클론: `git clone https://github.com/fabiospampinato/cash.git`
  2. 클론한 저장소로 이동: `cd cash`
  3. 의존성 설치: `npm install`
  4. 변경 시 자동으로 Cash 재컴파일: `npm run dev`
  5. 테스트 스위트 열기: `npm run test`
  6. 필요 시 README 업데이트

### 감사

- Cash 개발에 기여한 모든 기여자들에게 감사함.
- 로고 디자인을 담당한 **@hisk**에게 감사함.

### 라이선스

- MIT © Fabio Spampinato

## Comments



### Comment 30698

- Author: neo
- Created: 2024-11-04T10:05:50+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42026054) 
- 브라우저가 DOM 조작을 간단하게 해주어, 두 줄의 코드만으로 충분히 작업할 수 있음
  - `document.querySelector`와 `document.querySelectorAll`을 바인딩하여 사용함
  - 모듈에서 두 함수를 가져와 사용함
  - [GitHub 링크](https://github.com/no-gravity/dqs.js)

- jQuery의 장점은 자동 리스트 처리와 부모 쿼리 기능임
  - 빈 리스트에서 조용히 실패하는 점이 문제임
  - jQuery를 다시 구현한다면, 빈 셋에서 오류를 발생시키고 필요할 때만 조용히 실패하도록 할 것임
  - 라이브러리와 프레임워크의 오래된 논쟁과 관련됨

- 메인스트림 웹사이트가 많은 JavaScript를 사용하기 때문에, 전체 라이브러리를 다시 작성하는 것은 비효율적임

- jQuery 대안으로 개인적으로 만든 라이브러리 소개
  - 애니메이션은 CSS로 구현
  - 하나의 요소나 리스트를 투명하게 사용
  - Vanilla JavaScript 우선, 의존성 없음, 1개의 파일, 340줄 이하
  - [GitHub 링크](https://github.com/gnat/surreal)

- jQuery와 Cash의 차이점에 대해 알게 됨
  - [마이그레이션 가이드 링크](https://github.com/fabiospampinato/cash/blob/master/docs/migration_guide.md)

- Shoestring을 사용하여 JS를 줄였던 경험
  - Cash도 유사한 기능을 제공하지만 문서에서 숨겨져 있음
  - 브라우저의 기본 기능을 사용하는 것이 더 나은 선택임
  - jQuery 대안이 6kB인데 반해 Preact는 절반 크기임

- TypeScript 템플릿 문자열을 사용하여 요소의 타입을 추론하는 목표
  - 예를 들어, `$('div#name')`가 HTMLDivElement로 추론됨

- jQuery 4는 현대 브라우저를 위한 대안임

- 브라우저 확장 프로그램에서 jQuery를 사용했으나, JSX 라이브러리로 전환함
  - jQuery는 복잡한 코드로 변하기 쉬움
  - 적절한 도구를 사용하는 것이 중요함
  - [개인 라이브러리 링크](https://github.com/aleclarson/dough)

- 작은 라이브러리와 프레임워크를 좋아하지만, 실제로는 큰 라이브러리를 사용하게 됨
  - 프레임워크: 50KB
  - 작은 버전: 5KB
  - 대체할 수 없는 라이브러리: 1MB