Skip to content

JellyBrick/modern-web-swiss-army-knife

Repository files navigation

modern-web-swiss-army-knife

요약

라이브러리 하나로 모던 웹 99% 만들기

주의사항

  • npm 및 yarn legacy 환경에서만 동작합니다.
  • 패키지 호이스팅을 가정하고 만들어진 라이브러리입니다. (의도적인 ghost-deps)
  • pnpm에서는 정상 동작하지 않습니다. (별도의 설정이 필요합니다)

라이브러리 설명

  • @chakra-ui/react: Chakra UI
  • @chromatic-com/storybook: Storybook Util
  • @dotenvx/dotenvx: .env reader
  • @egjs: egjs 라이브러리 모음 (by naver)
    • @egjs/axes
    • @egjs/conveyer
    • @egjs/grid
    • @egjs/imready
    • @egjs/persist
    • @egjs/react-flicking
    • @egjs/react-infinitegrid
  • @emotion: CSS-in-JS 라이브러리
    • @emotion/babel-plugin
    • @emotion/babel-preset-css-prop
    • @emotion/css
    • @emotion/react
    • @emotion/styled
  • @floating-ui: 팝업 UI 위치 계산해주는 라이브러리
    • @floating-ui/core
    • @floating-ui/dom
    • @floating-ui/react
  • @fluentui: ms Fluent UI 프레임워크
    • @fluentui/react
    • @fluentui/react-components
  • @headlessui/react: UI 프레임워크
  • @hocuspocus: Tiptap 에디터의 Collaborative Editing을 위한 라이브러리
    • @hocuspocus/extension-database
    • @hocuspocus/extension-logger
    • @hocuspocus/provider
    • @hocuspocus/server
    • @hocuspocus/transformer
  • @hono: Hono 웹서버
    • @hono/node-server
    • @hono/node-ws
    • @hono/swagger-ui
    • @hono/trpc-server
    • @hono/typia-validator
    • @hono/zod-openapi
    • @hono/zod-validator
  • @hookform/resolvers: shadcn-ui에서 사용
  • @linaria: CSS-in-JS 라이브러리
    • @linaria/core
    • @linaria/react
  • @mantine: UI 프레임워크
    • @mantine/carousel
    • @mantine/charts
    • @mantine/code-highlight
    • @mantine/core
    • @mantine/dates
    • @mantine/dropzone
    • @mantine/form
    • @mantine/hooks
    • @mantine/modals
    • @mantine/notifications
    • @mantine/nprogress
    • @mantine/spotlight
    • @mantine/tiptap
  • @mui: Material UI 프레임워크
    • @mui/base
    • @mui/icons-material
    • @mui/material
    • @mui/system
    • @mui/x-charts
    • @mui/x-data-grid
    • @mui/x-date-pickers
    • @mui/x-tree-view
  • @radix-ui: UI 프레임워크 (shadcn-ui용)
    • @radix-ui/react-accordion
    • @radix-ui/react-alert-dialog
    • @radix-ui/react-aspect-ratio
    • @radix-ui/react-avatar
    • @radix-ui/react-checkbox
    • @radix-ui/react-collapsible
    • @radix-ui/react-context-menu
    • @radix-ui/react-dialog
    • @radix-ui/react-dropdown-menu
    • @radix-ui/react-hover-card
    • @radix-ui/react-label
    • @radix-ui/react-menubar
    • @radix-ui/react-navigation-menu
    • @radix-ui/react-popover
    • @radix-ui/react-progress
    • @radix-ui/react-radio-group
    • @radix-ui/react-scroll-area
    • @radix-ui/react-select
    • @radix-ui/react-separator
    • @radix-ui/react-slider
    • @radix-ui/react-slot
    • @radix-ui/react-switch
    • @radix-ui/react-tabs
    • @radix-ui/react-toast
    • @radix-ui/react-toggle
    • @radix-ui/react-toggle-group
    • @radix-ui/react-tooltip
  • @react-spring/web: React Spring 애니메이션 라이브러리
  • @solid-primitives: solid-js용 유틸리티 라이브러리
    • @solid-primitives/active-element
    • @solid-primitives/audio
    • @solid-primitives/clipboard
    • @solid-primitives/connectivity
    • @solid-primitives/context
    • @solid-primitives/controlled-props
    • @solid-primitives/date
    • @solid-primitives/destructure
    • @solid-primitives/devices
    • @solid-primitives/event-bus
    • @solid-primitives/event-listener
    • @solid-primitives/event-props
    • @solid-primitives/fetch
    • @solid-primitives/fullscreen
    • @solid-primitives/graphql
    • @solid-primitives/immutable
    • @solid-primitives/intersection-observer
    • @solid-primitives/jsx-tokenizer
    • @solid-primitives/keyed
    • @solid-primitives/map
    • @solid-primitives/media
    • @solid-primitives/memo
    • @solid-primitives/mouse
    • @solid-primitives/mutable
    • @solid-primitives/mutation-observer
    • @solid-primitives/page-visibility
    • @solid-primitives/permission
    • @solid-primitives/promise
    • @solid-primitives/props
    • @solid-primitives/raf
    • @solid-primitives/range
    • @solid-primitives/refs
    • @solid-primitives/resize-observer
    • @solid-primitives/resource
    • @solid-primitives/rootless
    • @solid-primitives/scheduled
    • @solid-primitives/script-loader
    • @solid-primitives/set
    • @solid-primitives/share
    • @solid-primitives/signal-builders
    • @solid-primitives/state-machine
    • @solid-primitives/static-store
    • @solid-primitives/storage
    • @solid-primitives/stream
    • @solid-primitives/timer
    • @solid-primitives/transition-group
    • @solid-primitives/tween
    • @solid-primitives/websocket
  • @solidjs/router: SolidJS 라우터
  • @stitches/react: CSS-in-JS 라이브러리
  • @storybook: UI 테스팅 & 프리뷰 프레임워크
    • @storybook/addon-docs
    • @storybook/addon-essentials
    • @storybook/addon-interactions
    • @storybook/addon-links
    • @storybook/addon-onboarding
    • @storybook/blocks
    • @storybook/react
    • @storybook/react-vite
    • @storybook/test
  • @suid: solid-js 용 material UI 라이브러리
    • @suid/icons-material
    • @suid/material
    • @suid/vite-plugin
  • @suspensive/react: React Suspense 라이브러리
  • @suyongs/solid-utility: solid-js용 유틸리티 라이브러리
  • @svgr/plugin-svgo: svg를 react 컴포넌트로 변환해주는 라이브러리
  • @swc: Rust로 만든 TypeScript 컴파일러
    • @swc/cli
    • @swc/core
  • @tailwindcss/typography: Tailwind용 Typography 플러그인
  • @tanstack: TanStack 라이브러리 모음
    • @tanstack/react-query: react-query
    • @tanstack/react-virtual: virtualization
    • @tanstack/solid-query: solid용 query
    • @tanstack/solid-virtual: solid용 virtualization
  • @tiptap: wysiwyg 에디터
    • @tiptap/extension-collaboration
    • @tiptap/extension-collaboration-cursor
    • @tiptap/pm
    • @tiptap/react
    • @tiptap/starter-kit
  • @total-typescript/ts-reset: TypeScript 설정 리셋 라이브러리
  • @types: 타입 지원용
    • @types/axios
    • @types/color
    • @types/d3
    • @types/d3-array
    • @types/hammerjs
    • @types/luxon
    • @types/node
    • @types/node-forge
    • @types/react
    • @types/react-dom
    • @types/stylis
    • @types/three
    • @types/turndown
    • @types/uuid
  • @typescript-eslint/eslint-plugin: ts용 eslint 플러그인 1
  • @typescript-eslint/parser: ts용 eslint 플러그인 2
  • @use-gesture/react: 제스쳐 라이브러리 (react용)
  • @use-gesture/vanilla: 제스쳐 라이브러리 (vanilla용)
  • @vanilla-extract: CSS-in-JS 라이브러리
    • @vanilla-extract/css
    • @vanilla-extract/css-utils
    • @vanilla-extract/dynamic
    • @vanilla-extract/recipes
    • @vanilla-extract/rollup-plugin
    • @vanilla-extract/sprinkles
    • @vanilla-extract/vite-plugin
  • @vitejs/plugin-react-swc: react vite 플러그인 (swc용)
  • @wyw-in-js: @linaria용 유틸리티
    • @wyw-in-js/babel-preset
    • @wyw-in-js/vite
  • allotment: pane 라이브러리 (react용)
  • antd: UI 프레임워크
  • atropos: 3D Parallax 라이브러리
  • autoprefixer: tailwind용
  • axios: HTTP 클라이언트
  • babel: JS Transpiler
    • babel-preset-react
    • babel-preset-solid
  • builtin-modules: node.js 내장 모듈 리스트 가져오는 라이브러리 (번들러용 유틸리티)
  • class-variance-authority: CSS-in-JS 라이브러리 (tailwind용)
  • clsx: CSS 클래스 조합 라이브러리
  • cmdk: shadcn-ui용 라이브러리
  • color: 색상 관련 라이브러리
  • concurrently: 스크립트 병렬 실행 라이브러리
  • d3: 데이터 시각화 라이브러리
    • d3-array
  • date-fns: 날짜 관련 라이브러리 (moment 대체 1)
  • dayjs: 날짜 관련 라이브러리 (moment 대체 2)
  • deepmerge-ts: 객체 병합 라이브러리
  • embla-carousel-react: shadcn-ui용 라이브러리
  • emotion-solid: @emotion을 solid-js에서 사용하기 위한 라이브러리
  • es-hangul: 한글 유틸리티 라이브러리
  • es-toolkit: lodash같은 JS 유틸리티 라이브러리
  • esbuild
  • eslint: 코드 품질 검사
    • eslint-import-resolver-typescript
    • eslint-plugin-import
    • eslint-plugin-prettier
    • eslint-plugin-react-hooks
    • eslint-plugin-react-refresh
    • eslint-plugin-solid
  • fast-average-color: 이미지 색상 추출 라이브러리
  • framer-motion: react용 애니메이션 라이브러리
  • hammerjs: 제스처 라이브러리
  • hono: hono 웹서버 (@hono와 동일)
    • hono-rate-limiter
  • immutable: 불변 객체 라이브러리
  • input-otp: shadow-ui용 라이브러리
  • jotai: 상태 관리 라이브러리 (react용)
  • jotai-cache: jotai 플러그인
  • jsonwebtoken: jwt 라이브러리
  • lightningcss: css 파서
  • lossless-json: recursive한 JSON도 제대로 파싱해주는 라이브러리
  • lucide-react: shadcn-ui용
  • luxon: 날짜 라이브러리 (moment 대체 3)
  • magic-regexp: regexp 빌더
  • matter-js: 2D 물리 라이브러리
  • moment: 날짜 라이브러리 (deprecated, 비추)
  • msw: API Mocking 라이브러리
  • nanoid: unique한 ID 생성하는 라이브러리
  • next-themes: shadcn-ui용
  • node-forge: 브라우저단 암호화 라이브러리
  • overlay-kit: 오버레이(toast, modal 등)들 제어용 라이브러리
  • patch-package: npm 패키지 수정 라이브러리
  • peerjs: webrtc 라이브러리
  • postcss: css 후처리기
    • postcss-loader
    • postcss-preset-mantine
    • postcss-simple-vars
  • prettier: 코드 포맷터
  • prisma: ORM 라이브러리
  • prop-types: prop 타입 체크 라이브러리
  • prosemirror: Tiptap의 base 에디터
    • prosemirror-dev-toolkit
    • prosemirror-history
    • prosemirror-inputrules
    • prosemirror-markdown
    • prosemirror-model
    • prosemirror-transform
    • prosemirror-view
  • react: 리액트
  • react-day-picker: shadcn-ui
  • react-dom: 리액트 DOM
  • react-flip-toolkit: MAGIC 애니메이션 라이브러리
  • react-hook-form: form 라이브러리 (shadow-ui용)
  • react-resizable-panels: panel 라이브러리
  • react-router: 리액트 라우터
  • react-theme-provider: 테마 프로바이더 라이브러리
  • react-three-fiber: Three.js 래퍼 라이브러리
  • react-transition-group: 리액트 애니메이션 라이브러리
  • react-virtualized: virtualization 라이브러리 1
  • react-virtuoso: 리액트 최고존엄 virtualization 라이브러리
  • react-window: virtualization 라이브러리 2
  • recoil: 상태 관리 라이브러리 (react용)
  • reflect-metadata: ts legacy decorator에 metadata를 추가하는 라이브러리 (typeorm용)
  • remark-gfm: markdown 파서 (github향 첨가)
  • rollup: 롤업
  • rooks: 리액트용 훅 라이브러리
  • semver: 버저닝 라이브러리
  • serve: 파일 서빙용 서버 유틸리티
  • solid-floating-ui: @floating-ui의 solid-js용 라이브러리
  • solid-js: react 대체 라이브러리 (react보다 빠르고 간편함)
  • solid-tiptap: @tiptap의 solid-js용 라이브러리
  • solid-transition-group: solid-js 애니메이션 라이브러리
  • sonner: shadow-ui용 라이브러리
  • storybook: 위 설명 참고
    • storybook
    • storybook-solidjs
    • storybook-solidjs-vite
  • styled-components: CSS-in-JS 라이브러리
  • stylis: lightweight css 파서
  • tailwind-merge: tailwind class 병합 유틸리티
  • tailwindcss: tailwind
  • tailwindcss-animate: tailwind 애니메이션 플러그인
  • terser: JS 압축기
  • three: 3D 라이브러리
  • ts-pattern: ts 패턴 매칭 라이브러리
  • ts-regex-builder: ts regexp 빌더
  • tstl: stl ts버전
  • tsx: node-ts 대용품 (ts 바로 실행가능)
  • turndown: 마크다운 파서
  • type-fest: 타입 유틸리티 라이브러리
  • typeorm: ORM 라이브러리
  • typescript: 타입스크립트
  • typia: samchon 깃허브 참고
  • use-gesture: 제스처 라이브러리
  • uuid: uuid v4 생성 라이브러리
  • vaul: shadow-ui용 라이브러리
  • vite: 최고 존엄 번들러

    (발음법: "veet"와 비슷한 /vit/ 입니다.)

  • vite-plugin-react: react용 vite 플러그인
  • vite-plugin-solid: solid-js용 vite 플러그인
  • vite-plugin-static-copy: vite용 파일 복사 플러그인
  • vite-plugin-svgr: svgr vite 플러그인
  • vitest: 테스팅 라이브러리
  • wouter: 경량화된 react router
  • y-prosemirror: prosemirror 라이브러리
  • zod: type validation 라이브러리
  • zustand: 상태 관리 라이브러리 (react용)