프론트엔드 기술 스택의 전망이 궁금해서 패키지 비교 사이트에서 찾아서 정리해보았다.
제일 인기가 많은 라이브러리는 기울임, 밑줄 표시해두었다.
애니메이션 라이브러리
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
GSAP
gsap
GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...any.
www.npmjs.com
고성능 애니메이션 라이브러리로, 선형적이지 않은 함수와 애니메이션 시퀀스 제어 기능이 탁월
Framer Motion
framer-motion
A simple and powerful JavaScript animation library. Latest version: 10.16.1, last published: 2 days ago. Start using framer-motion in your project by running `npm i framer-motion`. There are 3165 other projects in the npm registry using framer-motion.
www.npmjs.com
리액트를 위한 사용하기 쉬운 애니메이션 라이브러리로, 선언적인 문법으로 애니메이션을 나타냄
Motion One
motion
A tiny, performant animation library for the web. Latest version: 10.16.2, last published: 3 months ago. Start using motion in your project by running `npm i motion`. There are 67 other projects in the npm registry using motion.
www.npmjs.com
CSS 전/후처리기
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Sass
sass
A pure JavaScript implementation of Sass.. Latest version: 1.66.1, last published: 4 days ago. Start using sass in your project by running `npm i sass`. There are 8227 other projects in the npm registry using sass.
www.npmjs.com
CSS 전처리기로, 변수, 중첩, 믹스인 등의 편리한 기능을 제공하며 CSS 작성을 더 쉽고 가독성 있게 만듬
Less
less
Leaner CSS. Latest version: 4.2.0, last published: 17 days ago. Start using less in your project by running `npm i less`. There are 9080 other projects in the npm registry using less.
www.npmjs.com
CSS 전처리기로, Sass와 유사한 기능을 제공하면서 동적 스타일을 만들고 관리하는데 유용함
PostCss
postcss
Tool for transforming styles with JS plugins. Latest version: 8.4.28, last published: 7 days ago. Start using postcss in your project by running `npm i postcss`. There are 11258 other projects in the npm registry using postcss.
www.npmjs.com
CSS 후처리기로, 다양한 플러그인을 통해 CSS를 개선하고 최적화할 수 있음
CSS 프레임워크
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Tailwindcss
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
유틸리티 기반의 CSS 프레임워크로, 클래스를 사용하여 모듈식 디자인 시스템을 구축할 수 있음
Bootstrap
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
반응형 웹 디자인을 지원하는 CSS 프레임워크로, 다양한 컴포넌트와 스타일을 병렬로 단순화할 수 있음
Material Ui
Overview - Material UI
Material UI is a library of React UI components that implements Google's Material Design.
mui.com
리액트 기반의 구글 머티리얼 스타일 가이드에 따른 컴포넌트 라이브러리를 제공함
Ant Design
Ant Design - The world's second most popular React UI framework
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
ant.design
디자인 시스템과 React 컴포넌트 라이브러리를 제공하며, 높은 품질의 UI 경험을 구축할 수 있음
Bulma
Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
bulma.io
순수 CSS 프레임워크로, 가볍고 모듈식 구조로 디자인 요소를 쉽게 지정할 수 있음
Semantic Ui
Semantic UI
Shipping Choose your shipping options
semantic-ui.com
시맨틱 클래스 명을 사용하여 개발자와 디자이너 모두에게 익숙한 구조를 제공하는 UI 프레임워크
Css-In-Js 프레임워크(Css-In-Js Framework)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Styled Components
styled-components
CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.. Latest version: 6.0.7, last published: 20 days ago. Start using styled-components in your project by running `npm i styled-components`. There are 22254 othe
www.npmjs.com
CSS-in-JS 라이브러리 중 하나로, JavaScript에서 CSS 스타일을 작성할 수 있음
Css Modules
react-css-modules
Seamless mapping of class names to CSS modules inside of React components.. Latest version: 4.7.11, last published: 4 years ago. Start using react-css-modules in your project by running `npm i react-css-modules`. There are 315 other projects in the npm reg
www.npmjs.com
컴포넌트 범위의 스타일링을 위한 라이브러리로, 클래스 이름 충돌 없이 스타일을 적용할 수 있으며 리액트와 잘 호환됨
Styled Jsx
styled-jsx
Full CSS support for JSX without compromises. Latest version: 5.1.2, last published: 7 months ago. Start using styled-jsx in your project by running `npm i styled-jsx`. There are 596 other projects in the npm registry using styled-jsx.
www.npmjs.com
리액트 컴포넌트 내부에서 완전한 격리된 스타일링을 가능하게 하는 서버와 클라이언트 사이드 모두에서 동작하는 CSS-in-JS 라이브러리
Emotion
emotion
The Next Generation of CSS-in-JS.. Latest version: 11.0.0, last published: 3 years ago. Start using emotion in your project by running `npm i emotion`. There are 1554 other projects in the npm registry using emotion.
www.npmjs.com
CSS-in-JS 라이브러리로, 높은 성능과 강력한 컴포지션 기능을 제공하며, 컴포넌트 내부에서 스타일을 관리할 수 있어 생산성과 유지 보수성이 향상됨
JS 프레임워크/라이브러리(JS Framework/Library)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
React
react
React is a JavaScript library for building user interfaces.. Latest version: 18.2.0, last published: a year ago. Start using react in your project by running `npm i react`. There are 111595 other projects in the npm registry using react.
www.npmjs.com
사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반 아키텍처를 제공함
Angular
@angular/core
Angular - the core framework. Latest version: 16.2.1, last published: 6 days ago. Start using @angular/core in your project by running `npm i @angular/core`. There are 13638 other projects in the npm registry using @angular/core.
www.npmjs.com
웹 애플리케이션 개발을 위한 플랫폼과 프레임워크로, 다양한 기능과 뛰어난 확장성을 가지고 있음
Vue
vue
The progressive JavaScript framework for building modern web UI.. Latest version: 3.3.4, last published: 3 months ago. Start using vue in your project by running `npm i vue`. There are 69881 other projects in the npm registry using vue.
www.npmjs.com
웹 인터페이스 개발을 위한 직관적이고 유연한 프레임워크로, 개발력 있는 아키텍처를 가짐
Svelte
svelte
Cybernetically enhanced web apps. Latest version: 4.2.0, last published: 12 days ago. Start using svelte in your project by running `npm i svelte`. There are 1352 other projects in the npm registry using svelte.
www.npmjs.com
리액티브 웹 애플리케이션 개발을 위한 프레임워크로, 컴파일 단계에서 컴포넌트들을 최적화함
Alpine
alpinejs
The rugged, minimal JavaScript framework. Latest version: 3.12.3, last published: 2 months ago. Start using alpinejs in your project by running `npm i alpinejs`. There are 64 other projects in the npm registry using alpinejs.
www.npmjs.com
최소한의 특성을 가진 가벼운 프레임워크로, 선언적인 문법을 사용하여 간단한 인터랙티브한 기능을 가짐
Solid
solid-js
A declarative JavaScript library for building user interfaces.. Latest version: 1.7.11, last published: 12 days ago. Start using solid-js in your project by running `npm i solid-js`. There are 402 other projects in the npm registry using solid-js.
www.npmjs.com
디자인 성능과 효율이 뛰어난 정적 런타임 및 템플릿 컴파일을 가진 리액티브 프레임워크
리액트 풀스택 프레임워크(React FullStack Framework)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Next
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org
서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 기반의 프레임워크로, 성능 최적화와 개발 생산성을 향상시키는 데 초점을 맞춤
Gastby
The Fastest Frontend for the Headless Web | Gatsby
Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.
www.gatsbyjs.com
정적 사이트 생성 및 데이터 소스에 대한 풍부한 플러그인을 제공하는 React 기반의 프레임워크로, 높은 성능과 SEO 최적화를 목표로 함
Astro
Add Integrations
Build faster websites with less client-side JavaScript.
docs.astro.build
React, Vue, Svelte 등 다양한 UI 컴포넌트를 결합하여 개발할 수 있는 신규 프레임워크로, 최소한의 JavaScript를 사용해 최적의 성능을 제공함
Remix
Remix - Build Better Websites
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
remix.run
데이터 패칭과 서버 렌더링을 최적화하여 유연한 사용자 경험를 제공하는 React 기반의 프레임워크로, 프론트엔드 및 백엔드 개발자에게 최선의 작업 환경을 구성함
상태관리 라이브러리(State Management Library)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Redux
Flux 패턴을 차용한 리액트 상태 관리 라이브러리로, 중앙 집중식의 스토어로 애플리케이션의 전체 상태를 관리함
Redux-Toolkit
Redux Toolkit | Redux Toolkit
The official, opinionated, batteries-included toolset for efficient Redux development
redux-toolkit.js.org
Redux-Toolkit: Redux 개발을 쉽고 편리하게 도와주는 도구로, 기본 설정이 간소화되어 있으며 리덕스 개발 시 효율성과 생산성이 향상됨
Zustand
Zustand
zustand-demo.pmnd.rs
작고 가볍며 간단한 API를 제공하는 상태 관리 라이브러리로, 리액트와 사용이 용이
Recoil
Recoil
A state management library for React.
recoiljs.org
페이스북에서 개발한 리액트 상태 관리 라이브러리로, 아토믹 디자인 개념을 이용해 상태 관리의 중복을 최소화함
Jotai
Jotai, primitive and flexible state management for React
Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and
jotai.org
원자와 상태 관리를 연결하여 상태 업데이트를 최적화할 수 있는 리액트 상태 관리 라이브러리
Valtio
Valtio, makes proxy-state simple for React and Vanilla
const state = proxy({ dur: 4, count: 1 }); const incDur = () => {++state.dur}; const decDur = () => {--state.dur}; const incCount = () => { ++state.count; setTimeout(incCount, 100 * state.dur); }; incCount(); const snap = useSnapshot(state) return ( {snap.
valtio.pmnd.rs
Proxy 기반의 상태 관리 라이브러리로, 상태 변경 감지를 자동으로 처리하며 다양한 웹 프레임워크와 사용이 가능함
Mobx
About MobX · MobX 🇺🇦
<img src="https://mobx.js.org/assets/mobx.png" alt="logo" height="120" align="right" />
mobx.js.org
관찰 가능한 상태 트리를 사용하여 리액트 애플리케이션의 상태를 관리하는 라이브러리로, 간편한 API와 높은 성능이 특징
클라이언트 사이드 렌더링 라이브러리(CSR Library)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
React-Router-Dom
react-router-dom
Declarative routing for React web applications. Latest version: 6.15.0, last published: 13 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 17950 other projects in the npm registry using react-router-dom
www.npmjs.com
리액트 기반 애플리케이션에서 페이지 간 이동을 관리하고 쉽게 네비게이션을 구현할 수 있는 도구
데이터 패칭 라이브러리(Data Fetching Library)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
SWR
데이터 가져오기를 위한 React Hooks – SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
swr.vercel.app
데이터 패칭, 캐싱, 동기화 및 에러 처리를 단순화하는 라이브러리로, 빠르고 안정적인 웹 애플리케이션 개발이 가능하게 함
React-Query(Tanstack)
TanStack Query | React Query, Solid Query, Svelte Query, Vue Query
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue
tanstack.com
데이터 패칭, 캐싱, 동기화 등을 처리하는 라이브러리로, 선언적 API를 사용하여 쉽게 서버와 클라이언트를 동기화할 수 있음
Graph-Ql
GraphQL | A query language for your API
Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featu
graphql.org
쿼리 언어 및 런타임 시스템으로, 데이터를 요청하고 받아오는 방식을 새롭게 정의함
=> 엄연히 라이브러리나 프레임워크와는 무관하다.
RTK-Query
RTK Query Overview | Redux Toolkit
RTK Query > Overview: a summary of the RTK Query data caching API for Redux Toolkit
redux-toolkit.js.org
Redux Toolkit이 제공하는 데이터 패칭 라이브러리로, Redux 생태계에서 효율적인 API 요청 관리가 가능하게 함
리액트 테스팅 프레임워크(React Testing Framework)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Jest
jest
Delightful JavaScript Testing.. Latest version: 29.6.3, last published: 2 days ago. Start using jest in your project by running `npm i jest`. There are 12230 other projects in the npm registry using jest.
www.npmjs.com
빠르고 사용하기 쉬운 자바스크립트 테스팅 프레임워크로, 독립적인 환경에서 다양한 테스트 기능을 지원
RTL
@testing-library/react
Simple and complete React DOM testing utilities that encourage good testing practices.. Latest version: 14.0.0, last published: 6 months ago. Start using @testing-library/react in your project by running `npm i @testing-library/react`. There are 15276 othe
www.npmjs.com
리액트 컴포넌트 테스트에 특화된 라이브러리로, 개발자가 사용자 관점에 가까운 방식으로 테스트를 작성할 수 있음
Mocha
mocha
simple, flexible, fun test framework. Latest version: 10.2.0, last published: 8 months ago. Start using mocha in your project by running `npm i mocha`. There are 9817 other projects in the npm registry using mocha.
www.npmjs.com
자바스크립트 테스팅 프레임워크로, 비동기 테스트 지원과 유연한 설정이 특징
Puppeteer
puppeteer
A high-level API to control headless Chrome over the DevTools Protocol. Latest version: 21.1.0, last published: 5 days ago. Start using puppeteer in your project by running `npm i puppeteer`. There are 6043 other projects in the npm registry using puppetee
www.npmjs.com
웹 페이지에 대한 자동화 테스트를 할 수 있는 라이브러리로, 헤드리스 크롬을 사용하여 웹 애플리케이션을 테스트함
Cypress
cypress
Cypress is a next generation front end testing tool built for the modern web. Latest version: 12.17.4, last published: 7 days ago. Start using cypress in your project by running `npm i cypress`. There are 511 other projects in the npm registry using cypres
www.npmjs.com
End-to-End(E2E) 테스트를 위한 도구로, 웹 애플리케이션의 사용자 경험을 종합적으로 테스트할 수 있음
Karma
karma
Spectacular Test Runner for JavaScript.. Latest version: 6.4.2, last published: 4 months ago. Start using karma in your project by running `npm i karma`. There are 1205 other projects in the npm registry using karma.
www.npmjs.com
JavaScript 코드를 여러 브라우저와 플랫폼에서 테스트하기 위한 명령 줄 도구
Enzyme
enzyme
JavaScript Testing utilities for React. Latest version: 3.11.0, last published: 4 years ago. Start using enzyme in your project by running `npm i enzyme`. There are 1907 other projects in the npm registry using enzyme.
www.npmjs.com
리액트 컴포넌트 테스트를 위한 라이브러리로, shallow 렌더링과 DOM 조작이 가능하게 함
Jasmine
jasmine
CLI for Jasmine, a simple JavaScript testing framework for browsers and Node. Latest version: 5.1.0, last published: a month ago. Start using jasmine in your project by running `npm i jasmine`. There are 977 other projects in the npm registry using jasmine
www.npmjs.com
자바스크립트 코드 테스트를 위한 개발력 있는 테스팅 프레임워크
JS 모듈 번들러(JS Module Bundler)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Webpack
webpack
Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.. Latest version:
www.npmjs.com
모듈 번들러로, 다양한 모듈 형식을 사용하여 웹 애플리케이션의 자원들을 번들링하는 도구
Esbuild
esbuild
An extremely fast JavaScript and CSS bundler and minifier.. Latest version: 0.19.2, last published: 9 days ago. Start using esbuild in your project by running `npm i esbuild`. There are 3305 other projects in the npm registry using esbuild.
www.npmjs.com
매우 빠른 자바스크립트 번들러로, 성능에 초점을 맞추어 개발됨
Rollup
rollup
Next-generation ES module bundler. Latest version: 3.28.1, last published: a day ago. Start using rollup in your project by running `npm i rollup`. There are 6295 other projects in the npm registry using rollup.
www.npmjs.com
SM 기반의 모듈 번들러로, 작은 코드 크기와 트리 쉐이킹 기능을 지원함
Vite
vite
Native-ESM powered web dev build tool. Latest version: 4.4.9, last published: 16 days ago. Start using vite in your project by running `npm i vite`. There are 2073 other projects in the npm registry using vite.
www.npmjs.com
빠르고 가볍게 웹 개발 환경을 구축할 수 있는 번들러로, 개발 중 HMR과 빌드 성능 개선이 가능함
Swc
@swc/core
Super-fast alternative for babel. Latest version: 1.3.78, last published: 5 days ago. Start using @swc/core in your project by running `npm i @swc/core`. There are 695 other projects in the npm registry using @swc/core.
www.npmjs.com
웹팩 플러그인 등으로 사용할 수 있는 빠른 자바스크립트/타입스크립트 컴파일러
Turbo
turbo
Turborepo is a high-performance build system for JavaScript and TypeScript codebases.. Latest version: 1.10.12, last published: a month ago. Start using turbo in your project by running `npm i turbo`. There are 22 other projects in the npm registry using t
www.npmjs.com
웹 어셈블리로 작성된 고성능 빌드 시스템으로, 웹 개발자에게 빠른 빌드 속도를 제공함
Snowpack
snowpack
The ESM-powered frontend build tool. Fast, lightweight, unbundled.. Latest version: 3.8.8, last published: 2 years ago. Start using snowpack in your project by running `npm i snowpack`. There are 60 other projects in the npm registry using snowpack.
www.npmjs.com
빠른 개발 및 빌드를 가능하게 하는 스케폴딩 도구이며, 웹 개발 환경을 웹표준 기반으로 쉽게 세팅함
JS 트랜스파일러(JS Transpiler)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
TypeScript
typescript
TypeScript is a language for application scale JavaScript development. Latest version: 5.1.6, last published: 2 months ago. Start using typescript in your project by running `npm i typescript`. There are 45412 other projects in the npm registry using types
www.npmjs.com
자바스크립트에 정적 타입을 추가한 확장으로, 코드의 안정성과 가독성을 높이며 자동 완성 등 개발 생산성 향상을 가져옴
CoffeeScript
coffeescript
Unfancy JavaScript. Latest version: 2.7.0, last published: a year ago. Start using coffeescript in your project by running `npm i coffeescript`. There are 613 other projects in the npm registry using coffeescript.
www.npmjs.com
간결하고 읽기 쉬운 문법을 가진 자바스크립트 전처리기로, 힘든 작업을 최소화하여 가독성 높은 코드를 작성할 수 있음
Babel
Babel
Babel puts a soft cushion between you all the cool new file formats being developed for node.js such as CoffeeScript, SASS, and Jade.. Latest version: 0.0.1, last published: 12 years ago. Start using Babel in your project by running `npm i Babel`. There ar
www.npmjs.com
최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해 ES6+ 코드를 호환 가능한 ES5 코드로 변환하는 라이브러리
JS 패키지 매니저(JS Package Manager)
Compare NPM Packages: Find the Best npm Package for Your Project
npm-compare.com
Npm
npm
a package manager for JavaScript. Latest version: 9.8.1, last published: a month ago. Start using npm in your project by running `npm i npm`. There are 5568 other projects in the npm registry using npm.
www.npmjs.com
자바스크립트 프로젝트에서 사용되는 패키지들을 설치하고 관리하는 기본 패키지 매니저로, 광범위한 커뮤니티를 가짐
Pnpm
pnpm
Fast, disk space efficient package manager. Latest version: 8.6.12, last published: 17 days ago. Start using pnpm in your project by running `npm i pnpm`. There are 119 other projects in the npm registry using pnpm.
www.npmjs.com
링크 구조를 사용하여 Npm과 호환되는 패키지 매니저로, 디스크 공간 및 설치 속도 개선이 가능함
Yarn
yarn
📦🐈 Fast, reliable, and secure dependency management.. Latest version: 1.22.19, last published: a year ago. Start using yarn in your project by running `npm i yarn`. There are 1473 other projects in the npm registry using yarn.
www.npmjs.com
빠른 설치와 메모이제이션 등 다양한 기능을 제공하는 패키지 매니저로, 페이스북이 개발함
