Skip to content

JavaScript:Libraries

Node.js Libraries

JavaScript, TypeScript, Node.js, Npm 등 Front-end 분야에서 사용되는 라이브러리 목록 모음.

Node.js runtime

Runtime

  • Node.js
  • Bun - JavaScriptCore 기반의 빠른 JavaScript 런타임/트랜스파일러/NPM 클라이언트
  • deno

Socket

Documentation

Renderer

Push notification

Web frameworks

Backend

  • Wabe - 몇 분만에 커스터마이징 가능한 백엔드를 만드는 오픈소스
  • Express

Http client

SMTP

Desktop application

  • NW.js (node-webkit)
  • Electron
  • NodeGui
  • Tauri - 작고 빠른 실행파일을 생성하는 데스크탑용 웹앱 프레임워크

Security & Encryption & Crypto

  • Passport
  • tus - open protocol for resumable file uploads
  • hashids.js - Web 서비스에 고유 URL을 제공 할 때 ID를 숫자 그대로 보여주면 ID를 예측하거나 데이터 건수 등을 알 수 있기에 임의의 문자열을 만들어서 ID로 보낼때 활용함. YouTube에서 사용하는 방식. - https://github.com/niieani/hashids.js
  • crypto-js - 암호화 라이브러리로 클라이언트와 서버간에 파라미터 보안 강화를 위해 암호화를 사용할 때 활용 가능. - https://github.com/brix/crypto-js

Internet privacy

서명 (웹에서 싸인 처리)

Authentication

  • Auth.js - 웹용 인증 라이브러리
  • AuthKit - The world's best login box powered by WorkOS and Radix.
  • Better Auth - TypeScript용 포괄적인 Auth 프레임워크

Client-Side Rendering (CSR)

Single Page Application

State Management

Design System

  • Storybook - UI component explorer for frontend developers
  • kickstartDS - 디자인 시스템을 위한 스타터킷 오픈소스

Dashboard / Administration

  • gridstack.js - 대쉬보드 생성을 위한 TypeScript 라이브러리

Server-Side Rendering (SSR)

Web Components

Polyfill

UI Placeholder

  • UI Fillers - 디자인을 위한 플레이스홀더들
  • ImgSrc.Space - 쓰기 편한 이미지/비디오 플레이스홀더
  • SQIP - SVG 기반 이미지 플레이스홀더
  • BlurHash - 블러 처리된 이미지 플레이스홀더 생성기
  • Lorem Faces - AI로 자동 생성된 아바타용 얼굴들

Graphics

더 많은 목록은 Web Canvas 항목 참조.

  • PaperJS - HTML canvas vector graphics library
  • Konva.js - HTML5 2d canvas js library for desktop and mobile applications
  • JS Paint - MS Paint 의 자바 스크립트 포팅 버전.
  • Skia Canvas (node) - A canvas environment for Node.js

Javascript Game Engines

Table/Grid

Signing

  • Documenso - 오픈소스 DocuSign 대체제

Kanban

  • jkanban - Vanilla Javascript plugin for manage kanban boards

TOAST UI

WYSIWYG & Editor

Spreadsheet

  • HyperFormula - 엑셀과 비슷한 계산엔진 오픈소스
  • Luckysheet - JS 스프레드시트 라이브러리 오픈소스

CSS

  • LESS
  • SASS
  • Bootstrap
  • Material Design Lite
  • cosha - 이미지에 컬러 쉐도우 입히기
  • CSSgram - Sass/CSS로 만든 인스타그램 필터 라이브러리
  • Buttons
  • Tailwind CSS (Tailwindcss)
  • XP.css - Windows XP 스타일을 구현한 CSS
  • SmolCSS - Minimal snippets for modern CSS layouts and components
  • Pico.css - 미니멀 CSS 프레임워크
  • MVP.css - A minimalist stylesheet
  • CSS Bed - No-Class CSS Frameworks
  • Animatize - 객체를 드래깅 해서 애니메이션 만들기
  • Griffel - 미리 컴파일 가능한 CSS-in-JS
  • Autoprefixer - 브라우저 벤더에 맞는 CSS Prefix를 추가해 준다.
  • Sorted CSS Colors - CSS 색상들을 Hue에 따라 Lightness/Saturation 으로 정렬해서 영문명/RGB/HSL을 보여주는 색상표
  • PostCSS - PostCSS는 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구이다.
  • PurgeCSS - 사용 안하는 CSS 찾아서 삭제해주는 도구

코드 압축 (Minify)

코드 난독화 (Uglify; Obfuscation)

  • Uglify.js

Scroll Box

Font and Icon

캐로셀 라이브러리

  • Flicking - 네이버 FE팀의 Carousel 오픈소스

Query language

Programming language

Template engine

Logging

  • morgan - Node.js Logger.
  • LogLayer - 여러 Javascript 로깅 라이브러리 위에서 동작하는 통합 로거

Logging Browser

  • frontail - streaming logs to the browser

Boilerplate code (Scaffold)

Front-End UI

  • Responsively - 반응형 웹페이지 테스팅 도구 오픈소스

빌더 (Builder)

  • Loopple - 드래그 앤 드롭으로 대쉬보드 만들기
  • Onlook - 오픈 소스 Webflow를 이용한 맞춤형 앱 제작 도구

Test

End-to-End Test (e2e)

Bundler

Task runner

Deploy

  • branch-release
  • Astro - 웹사이트를 빠르게 하기 위해 기존 웹프레임워크에서 JS를 최대한 걷어내주는 오픈소스 도구

Web crawler

(crawling/scraping/spider/spiderbot/crawler/scraper 모두 같은 의미)

Database

  • MiniSearch - JavaScript 인메모리 풀텍스트 검색 엔진

Batch

  • node-cron
  • Node Schedule
  • Agenda

Parsing

YAML

JSON

  • JSON5 - 인간을 위한 JSON

Process manager

이 세 가지 도구 중 어느 것을 사용해도 큰 도움이 될 수 있지만, StrongLoop Process Manager는 Node.js 애플리케이션 라이프사이클 전체를 처리하는 포괄적인 런타임 및 배치 솔루션과 프로덕션의 이전과 이후의 모든 단계에 대한 툴링을 통합 인터페이스를 통해 제공하는 유일한 도구입니다.

아래에서는 이 세 가지 도구를 각각 간략히 살펴보겠습니다. 이 도구들에 대한 상세한 비교를 확인하려면 http://strong-pm.io/compare/를 참조하십시오.

Watch service

파일의 변경을 확인하고 자동 업데이트 해준다.

Node-based editor (visual programming)

차트 & 시각화 (Visualizations)

Gantt chart

  • Frappe - 인터랙티브 Gantt 차트 오픈소스

Timeline

  • Planby - React용 Timeline 컴포넌트

Analytics

favicon

Storage

LocalStorage, SessionStorage, etc

Static web server

List of Static Site Generator

Media Player

WebRTC

  • PeerJS - simplifies WebRTC peer-to-peer data, video, and audio calls.

Audio

Sound/Music

Web automation

  • playwright: Node.js library to automate Chromium, Firefox and WebKit with a single API

Virtual environments

Environment variables

Metrics Aggregations (Stats Aggregation)

CMS

Session

  • OpenReplay - OpenReplay는 사용자가 웹 앱에서 수행하는 작업을 볼 수있는 오픈 소스 세션 재생 스택으로, 문제를 더 빨리 해결하는 데 도움이됩니다.

Image/Background

  • probe-image-size - 파일 다 안받고 이미지 크기 알아내기
  • JS IMAGE CARVER (js-image-carver) - Seam Carving 알고리즘을 사용한, 이미지 내의 중요하지 않은 반복되는 부분(Seam)만 찾아서 줄이거나 확장.
  • pinry - Pinterest 같은 이미지 프리뷰 보드.
  • CompressImage.io - 브라우저에서 JPG / PNG 이미지를 압축해주는 도구 (Offline 으로 동작해서 안전하고 제한 없음)
  • Rough.js - 손으로 그린듯한 이미지를 만드는 라이브러리
  • SVGInject - SVG 파일을 DOM으로 주입할 수 있게 도와준다.
  • Smartcrop.js - 이미지의 중요 부분을 찾아서 잘 보이도록 크롭하는 오픈소스
  • Cornerstone.js - 의료용 이미지 라이브러리 (확대/축소/필터링 등 여러 기능 있음)
  • ImgSrc.Space - 쓰기 편한 이미지/비디오 플레이스 홀더 (3백만장 이상의 이미지/비디오를 무료로 빠르게)
  • Imagemaps - HTML 이미지 맵을 쉽게 만들수 있는 웹 편집기
  • marker.js - JavaScript image annotation, rotation, cropping libraries
  • CleanUp.pictures - LaMa를 사용한, 사진에서 사물 지우기 오픈소스
  • Viewer.js - 이미지 프리뷰.
  • background-removal-js - 브라우저에서의 배경 제거 기능 오픈소스
  • JIMP - 의존성 없는 Node.js용 이미지 프로세싱 라이브러리
  • Cropper.js - 사용자 업로드 이미지(프로필 등)를 업로드해서 crop해 주는 Javascript 라이브러리. - https://github.com/fengyuanchen/cropperjs
  • Croppie - 이미지 Crop 시 확대 축소가 가능한 특징이 있음. - https://github.com/Foliotek/Croppie
  • lightGallery - 이미지 목록 갤러리 활용 가능. 애니메이션 적용도 잘 되어있다.

아바타 (Avatar)

HTTP Status Code

  • HTTP Cats - HTTP 상태코드를 고양이로 보여주는 API

Animation

path animation

ETC (확인요망)

Tooltip/Popup

  • Floating UI - 툴팁/팝업/드롭다운 포지셔닝 라이브러리

WebAssembly

Window Manager

File Manager

IO

  • txt-reader - 큰(GB+)파일을 읽을 수 있는 FileReader

QR code

Random

Debugging/Logging

  • WebHint - 웹사이트 개선을 위한 도구
  • Web Vitals - 훌륭한 사용자 경험을 제공하는 데 필수라고 생각하는 품질 지표에 대한 통합적 지침
  • ScreenLog.js - 개발자 콘솔의 내용을 화면에 띄워주는 라이브러리

Syntaxhighlight

  • Shiki - A beautiful Syntax Highlighter
  • Chalk.ist - 예쁜 소스 코드 이미지 만들기
  • Prism.js - 최신 웹 표준을 염두에 두고 구축된 가볍고 확장 가능한 구문 강조 표시기입니다.

Other Markup

Latex

Markdown

...

Terminal

GIS/Map

  • Mapkick.js - 한줄의 JS코드로 아름답고 인터랙티브한 지도 만들기
  • Mapbox-GL-js는 더이상 3조항 BSD 라이센스가 아닙니다
  • MapLibre GL - MapboxGL JS의 오픈소스 포크

Deep learning

  • Handsfree.js - 웹에서 얼굴/손/포즈 인식을 쉽게
  • tesseract.js
  • tensorflow.js

Compress/Zip/Unzip

  • JSZip - Zip파일 생성/읽기/수정용 JS 라이브러리

Datetime

Date picker

Drag and drop

  • dragula - Drag and drop so simple it hurts - 드래그 & 드롭으로는 추천. 잘 구현되어 있다.

VCS/Git

Lint/Type Checker

private registry

Lightweight

  • UnsuckJS
  • preact
  • Bau
  • lit
  • spræ
  • VanJS
  • TwinSpark
  • dom-proxy
  • roxy
  • Tram-Lite
  • ite
  • reken
  • htmx
  • strawberry
  • Alpine.js
  • Mithril
  • Crank.js
  • diffHTML
  • hyperapp
  • dlite
  • data-template
  • ponys
  • bdc-js
  • RE:DOM
  • petite-vue
  • CalDOM
  • lighterhtml
  • Litedom

Performance - Block DOM

Reactive

  • VanJS - 1KB Reactive UI 프레임워크 without React/JSX
  • RxJS

Utilities

  • Lodash - Array, Collection, Object 등 필수 자료구조를 쉽게 다룰 수 있는 유틸리티.
  • rambda - 함수형 프로그래밍에서 자주 사용되는 함수를 미리 구현한 lodash같은 유틸리티성 라이브러리다.
  • htmlq - Like jq, but for HTML.
  • vkBeautify.js
  • npm-run-all - 여러 스크립트를 순차/병렬 로 실행
  • del-cli - 파일/디렉토리 제거
  • delete-empty - 빈 디렉토리 제거

Format and Schema validation

  • Zod - TypeScript-first schema validation with static type inference
  • Cleave - 폼의 input 요소에 입력하는 숫자 형식을 쉽게 정의 할 수 있음. 지원 형식은 신용 카드, 전화 번호, 날짜 시간, 숫자(금액), 구분 문자 접두사 블록 패턴. React, AngularJS 지원. - https://nosir.github.io/cleave.js/

Form & Input & Select

Clipboard

제품투어, 하이라이트, 문맥 도움말

  • Driver.js - 제품투어, 하이라이트, 문맥 도움말 보여주기 라이브러리 (화면상의 특정 엘리먼트 집중(하이라이트) 조명을 스탭 바이 스탭으로 전환해줌 - 클릭 순서를 배포된 사이트에서 하이라이트로 알려주는 효과 -)
  • highlight.js - 화면의 특정 문구를 강조합니다. HTML5 캔버스 기반으로 작동합니다.

ETC

  • Relay: A JavaScript framework for building data-driven React applications.
  • Flux: Application Architecture for Building User Interfaces.
  • Immutable.js: Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic.
  • Babel
  • Browserify
  • Stylus
  • ded/bowser: 웹 브라우저 버전과 종류를 확인하는 라이브러리.
  • Github - hotkey: Trigger an action on an element with a keyboard shortcut.
  • Svelte
  • Snowpack - 스트리밍 import 지원 : 미리 설치하지 않고 필요할 때 자동으로 모듈을 설치
  • simple-keyboard- 의존성 없는 가상키보드 라이브러리 (Angular, React, Vue, Vanilla JS 지원)
  • Flagsmith - Feature Flag 서비스
  • falso - 가짜 데이터 생성 오픈소스
    • 이메일, 도메인, 이름, 주소, 회사명, 신용카드정보, 이더리움/비트코인 주소 ...
    • git 브랜치/커밋(메시지,SHA,), 폴더/파일/확장자, MAC주소 ...
    • 영화, 음악, 자동차, 슈퍼히어로 ...
  • Sysend.js - 브라우저의 탭간에 메시지를 전송하는 라이브러리
  • pushd
  • Sequelize
  • ejs
  • restify
  • body-parser
  • cookie-parser
  • serve-favicon
  • jamoya-one - 자모야 모여라 - 파일명 자소 분리 해결 도구
  • Tachyon - 페이지 로딩을 빠르게 해주는 스크립트
  • Autocomplete - 빠르고 기능 많은 자동완성 라이브러리 오픈소스

See also

Favorite site

References

  1. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_1-_Cycle.pdf ↩

  2. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_2-_Angular2.pdf ↩

  3. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_3-_Vue.pdf ↩

  4. Meetup_TOAST_Cloud_-Introduction_to_the_JavaScript_Framework_4-_React.pdf ↩

  5. Javascript-audio-effectors-practice_-_Evans_Library.pdf ↩