집 > 기사 > 웹 프론트엔드 > 최신 프런트엔드 프레임워크, 라이브러리 및 도구 비교

클래스 라이브러리

클래스 라이브러리는 함수를 체계적으로 모아 놓은 것입니다. 일반적인 클래스 라이브러리에는 문자열 처리, 날짜, HTML DOM 요소, 이벤트, 쿠키, 애니메이션, 네트워크 요청 및 기타 기능이 포함됩니다. 함수를 직접 구현하여 함수가 호출될 때 값을 반환해야 하는지 여부를 선택할 수 있습니다.

클래스 라이브러리는 일반적으로 프로젝트의 세부 사항을 원활하게 구현하는 데 도움이 되는 높은 수준의 추상화 방법을 제공합니다. 예를 들어, Ajax는 일반적으로 XMLHttpRequest API를 사용하는데, 이는 함수를 구현하는 데 몇 줄의 코드만 필요하지만 브라우저마다 미묘한 차이가 있습니다. 클래스 라이브러리는 개발자가 더 높은 수준의 비즈니스 로직에 집중할 수 있도록 더 간단한 ajax() 기능을 제공합니다.

클래스 라이브러리는 개발 시간을 20% 단축할 수 있으며 개발자는 구현 세부 사항에 대해 걱정할 필요가 없습니다.

그러나 단점도 있습니다.

클래스 라이브러리의 버그는 찾아 수정하기 어렵습니다.
개발팀은 패치의 빠른 릴리스를 보장할 수 없습니다
패치가 API를 변경하여 변경해야 할 엄청난 양의 코드
학습 과정에서 문제가 발생하거나 학습 리소스를 얻고 싶다면 학습 교류 그룹에 가입하세요
343599877, 프론트엔드를 함께 배워보아요!

Framework

Framework는 애플리케이션의 뼈대입니다. 특정 방식으로 소프트웨어를 설계하고 특정 노드에 자체 로직을 구현해야 합니다. 프레임워크는 일반적으로 이벤트, 저장소, 데이터 바인딩과 같은 기능을 제공합니다.

프레임워크는 일반적으로 클래스 라이브러리보다 높은 수준의 추상화를 제공하여 프로젝트의 처음 80%를 빠르게 구축하는 데 도움이 됩니다.

프레임워크의 단점:

응용 프로그램이 프레임워크의 범위를 벗어나면 마지막 20%가 어려울 수 있습니다.
프레임워크 업데이트가 어렵습니다.
핵심 프레임워크 코드와 개념이 거의 업데이트되지 않습니다.

도구

도구는 개발 작업에 도움이 되지만 프로젝트의 필수적인 부분은 아닙니다. 도구에는 빌드 시스템, 컴파일러, 트랜스파일러, 코드 분할기, 이미지 압축기, 배포 메커니즘 등이 포함됩니다.

도구는 개발 프로세스를 더 쉽게 만드는 데 도움이 됩니다. 예를 들어, 많은 코더는 코드 분리, 중첩, 렌더링 시간 변수, 루프 및 기능을 제공하기 때문에 CSS보다 Sass를 선호합니다. 브라우저는 Sass/SCSS 구문을 이해하지 못하므로 테스트 및 배포 전에 적절한 도구를 사용하여 코드를 CSS로 컴파일해야 합니다.

라이브러리, 프레임워크 및 도구의 차이점

라이브러리, 프레임워크 및 도구의 차이는 매우 작습니다. 프레임워크에는 클래스 라이브러리가 포함될 수 있으며, 클래스 라이브러리는 프레임워크와 유사한 메서드를 구현할 수 있습니다. 따라서 라이브러리, 프레임워크, 도구를 명확하게 구분할 필요가 없습니다.

JavaScript 프레임워크 및 라이브러리

인기순 순위는 다음과 같습니다.

jQuery

jQuery
Types	Libraries
웹사이트	jquery.com
Knowledge Base	github.com/jquery/jquery
현재 버전	3.2.1
Developers	jQuery Team
릴리스 날짜	2006년 8월
크기	최소 30kb
사용	범용
사용률	웹사이트의 72.4%

WordPress, ASP.NET 및 기타 프레임워크가 출시된 후에도 jQuery는 여전히 가장 일반적으로 사용되는 JavaScript 라이브러리입니다. 이는 이벤트 핸들러, 애니메이션 및 Ajax 호출을 적용하기 위해 DOM 노드 검색 및 연결에 CSS 선택기를 도입함으로써 클라이언트 측 개발에 혁명을 일으켰습니다.

jQuery는 최근 몇 년 동안 인기를 얻었으며 여전히 소량의 JavaScript 기능이 필요한 프로젝트에 좋은 선택입니다.

장점:

작은 배포 규모
평탄한 학습 곡선, 풍부한 온라인 도움말
간결한 구문
확장이 용이함

단점:

추가됨 기본 API에 대한 속도 오버헤드
나쁜 브라우저 호환성, 개선됨
플랫 사용
일부 업계에서는

Lodash 및 Underscore 사용에 반대

Lodash
type	클래스 라이브러리
website	lodash.com/
지식 기반	github.com/lodash/lodash/
현재 버전	4.17.4
개발자	John-David Dalton
출시 날짜	2012년 4월
Size	최소 4kb – 24kb
Usage	Universal
사용량	낮음
밑줄
Type	클래스 라이브러리
Website	underscorejs.org/
Knowledge Base	github.com/jashkenas/underscore
현재 버전	1.8.3
개발자	Jeremy Ashkenas
릴리스 날짜	2009년 10월
Size	최소 6kb
Usage	Universal
사용 등급	낮음

이 섹션에서는 Lodash와 Underscore에 대해 함께 이야기합니다. 기본 문자열, 숫자, 배열 및 기타 기본 개체 메서드를 보완하기 위해 수백 가지 기능적 JavaScript 유틸리티를 제공합니다. 두 라이브러리 사이에 일부 겹치는 부분이 있지만 동일한 프로젝트에서 두 라이브러리가 모두 사용될 가능성은 없습니다.

클라이언트 측에서는 이 두 클래스 라이브러리의 사용률이 매우 낮지만, 서버 측의 Node.js 애플리케이션에서는 이 두 클래스 라이브러리를 사용할 수 있습니다.

장점:

작고 간단함
배우기 쉬운 좋은 문서
대부분의 라이브러리 및 프레임워크와 호환 가능
내장 객체를 확장하지 않음
사용 가능 클라이언트 측에서 또는 서버에서

을 사용하십시오. 단점:

일부 메소드는 ES2015 이상의 JavaScript 버전에서만 사용할 수 있습니다.

AngularJS 1.

angularjs.org

Knowledge Basegithub.com/angular /angular.js현재 버전1.6.4개발자Google출시 날짜2010년 10월크기144KBUse단일 페이지 애플리케이션Usage낮음Angular는 프레임워크(또는 MVC) 목록의 첫 번째입니다. 애플리케이션 프레임워크) 클래스. 현재 가장 널리 사용되는 Angular 버전은 1.x로, DOM 작업과 애플리케이션 로직을 분리하면서 양방향 데이터 바인딩으로 HTML을 확장합니다. 장점: 은 표준 MEAN 스택(MongoDB, Express.JS, AngularJS, NodeJS)용입니다. 부분적으로,








버전 2(현재 버전 4!)가 출시되었지만 Angular 1.x는 아직 개발 중입니다.
	일부 대기업에서 사용하는 널리 사용되는 프레임워크
최신 웹 애플리케이션 개발을 위한 솔루션

에서 사용할 수 있는 많은 기사와 튜토리얼이 있습니다:

학습 곡선 가파른 코드 라이브러리

는 Angular 2.x
angular 2.x로 업그레이드할 수 없습니다(현재 Angular 4.x)

Angular

Types
Framework
Website
angular.io

지식 기반

github.com/angular /angular. js

현재 버전4.1DeveloperGoogle출시 날짜2016년 9월크기 최소 4 50kbUse 단일 페이지 신청사용량낮음

Angular 2.0은 2016년 9월에 출시되었습니다. 이는 TypeScript를 사용하여 생성된 모듈식 구성 요소 기반 모델을 도입하는 완전한 재작성입니다. Angular 4.0은 2017년 3월에 출시되었습니다.

Angular 2.x는 v1과 완전히 다르며 다른 버전과 호환되지 않습니다. 아마도 Google은 프로젝트에 다른 이름을 지정해야 할 것입니다! C# 및 Java와 같은) 개발자에게는 TypeScript가 여러 가지 장점을 제공합니다.

단점:

1.x와 비교하면, ular 2.x는 어렵다 이해하세요

학습 과정에서 문제가 발생하거나 학습 리소스를 얻고 싶다면 학습 교류 그룹에 오신 것을 환영합니다

Framework

Website

facebook.github.io/re act /github.com /facebook/react15.5.4 Facebook 및 기여자2013년 3월21kb분단일 페이지 애플리케이션LowReact는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리로, 작년에 가장 인기 있는 클래스 라이브러리이기도 했습니다. 이는 MVC(Model-View-Controller) 개발의 "뷰" 부분에 중점을 두고 있으며 이를 사용하여 상태 보존 UI 구성 요소를 쉽게 만들 수 있습니다. 가상 DOM을 구현하는 데 선호되는 클래스 라이브러리 중 하나입니다. 해당 메모리 구조는 차이점을 효율적으로 계산할 수 있으며 페이지 업데이트가 더 효율적입니다. 통계에 따르면 React는 웹사이트보다는 애플리케이션에서 사용되기 때문에 활용도가 낮은 것 같습니다. 작고 효율적이며 빠르고 유연함 간단한 구성 요소 모델

	Knowledge Base
	현재 버전
	개발자
	릴리스 날짜
	크기
	사용
	Usage

	장점:

좋은 문서 및 온라인 리소스

서버 측 렌더링 가능

현재 인기가 있고 경험이 풍부함 급속한 성장
단점:

DOM 수정 코드 및 기타 라이브러리와 호환되지 않습니다

React the ES6 Way에 대해 자세히 알아보세요

Types

Framework

Websitevuejs.orggithub.com/vuejs/vue2.0 Evan You 2014년 2월 최소 19kb단일 페이지 애플리케이션낮음

Knowledge Base

현재 버전

Developers

출시 날짜

크기

Usage

Vue.js는 사용자 인터페이스 구축을 위한 가볍고 진보적인 프레임워크입니다. 강력한 단일 페이지 애플리케이션을 구축하기 위해 다른 클래스 라이브러리와 통합할 수 있는 React와 유사한 가상 DOM 기반 뷰 레이어를 제공합니다. 프레임워크는 이전에 AngularJS에서 작업했으며 AngularJS에서 자신이 가장 좋아하는 부분을 추출한 Evan You가 만들었습니다.

Vue.js는 HTML 템플릿 구문을 사용하여 DOM을 인스턴스 데이터에 바인딩합니다. 모델은 데이터가 변경될 때 뷰를 업데이트하는 순수한 JavaScript 개체입니다.

장점 : ant ant ant가 빠르게 사용될 수 있으며 점점 인기가 높아질 수 있습니다.

새로운 프로젝트 – 위험이 더 커질 수 있음
업데이트를 개발자에게 부분적으로 의존함
다른 프레임워크에 비해 리소스가 적음

Backbone.js

Types

Website

backbonejs.orgBackbone .js는 서버 측 프레임워크에서 흔히 볼 수 있는 MVC 구조를 제공하는 최초의 클라이언트 측 옵션 중 하나입니다. 유일한 종속성은 Underscore.js입니다. Backbone.js는 다른 프로젝트와 통합될 수 있기 때문에 라이브러리라고 주장하지만 대부분의 개발자는 이를 프레임워크로 생각하는 것 같습니다. 작은 크기, 가벼운 무게, 낮은 복잡성 HTML 논리가 추가되지 않음

Knowledge Base	github.com/jashkenas/backbone/
현재 버전	1.3 .3
Developer	Jeremy Ashkenas
출시 날짜	2010년 10월
Size	최소 8kb
Usage	단일 페이지 애플리케이션
usage	Low

장점:

풍부한 파일

Trello, WordPress.com, LinkedIn 및 Groupon

단점:
AngularJS와 같은 다른 프레임워크에 비해 추상화 수준이 낮습니다.
데이터 바인딩과 같은 기능을 구현하려면 추가 구성 요소가 필요합니다.
최신 프레임워크는 더 이상 지원되지 않습니다. MVC 아키텍처 사용

Ember.js

type

website

js.com

지식 기반

github .com/emberjs/ember.js

현재 버전

2.15.0

Developer

Ember 팀

릴리스 날짜

2011년 12월

크기

최소 95kb

사용

단일 페이지 신청

사용률

낮음

Ember.js는 MVVM(Model-View-ViewModel) 패턴을 기반으로 하는 프레임워크 중 하나입니다. 단일 패키지에 템플릿, 데이터 바인딩 및 클래스 라이브러리를 구현합니다.

장점:

클라이언트 애플리케이션을 위한 단일 솔루션 제공
개발자는 개발 효율성을 즉시 향상시킬 수 있습니다. jQuery를 사용합니다.
우수한 이전 버전과의 호환성 및 업그레이드 옵션
최신 웹 개발 표준 채택

단점:

대규모 분산
더 작은 구성 요소 구조로 이동하는 다른 프레임워크에 비해 매우 큽니다.
곡선이 가파르다

Knockout.js

Knockout.js
Type	Framework
Website	knockoutjs.com
지식 기반	github.com/knockout/knockout
현재 버전	3.4.2
Developer	Steve Sanderson
릴리스 날짜	2010년 7월
크기	최소 59kb
사용법	단일 페이지 애플리케이션
사용법	Low

Knockout.js는 템플릿 및 종속성 추적을 통해 UI가 기본 데이터와 동기화를 유지하도록 보장하는 최초의 MVVM 프레임워크 중 하나입니다.

장점:

작고 가벼우며 종속성 없음
우수한 브라우저 지원, IE6 지원 가능
좋은 문서 리소스

단점:

대규모 프로젝트에서는 복잡함
개발 속도가 느려짐
사용량이 줄어들고 있는 것 같습니다.

더 많은 프레임워크 및 라이브러리

다음 프로젝트는 특별히 인기가 없지만 고려할 가치가 있습니다.

Polymer – 여러 브라우저에서 HTML5 웹 구성 요소를 지원합니다.
Meteor – 웹 애플리케이션을 위한 풀 스택 플랫폼
Aurelia – 비교적 새롭고 가벼운 크로스 플랫폼 프레임워크
Svelte – 프레임워크 소스 코드를 clean JavaScript
Conditioner.js – 상태에 따라 모듈을 자동으로 로드 및 언로드하는 클래스 라이브러리

도구: 일반적인 작업 수행

빌드 도구는 전처리, 컴파일, 이미지 최적화, 축소와 같은 다양한 웹 개발 작업을 자동화합니다. 코드, 코드 분석, 테스트 실행 등 작업은 실행 가능한 패키지에서 균일하게 관리될 수 있습니다.

현재 가장 인기 있는 도구는 다음과 같습니다.

Gulp.js

Gulp.js
Website	gulpjs.com
K 지식 라이브러리	github.com / gulpjs/gulp
현재 버전	3.9.1
월 다운로드	3백만

Gulp는 최초의 작업 실행 도구는 아니었지만 빠르게 가장 인기 있는 도구가 되었습니다. 읽기 쉬운 JavaScript 코드를 사용하여 Gulp는 소스 파일을 스트림으로 로드하고 빌드 폴더에 출력하기 전에 다양한 플러그인을 통해 데이터를 관리합니다. 다른 옵션보다 먼저 Gulp.js를 확인하는 것은 쉽고 빠르며 재미있습니다.

NPM

NPM
Website	npmjs.com
지식 Base	github.com/npm/npm
현재 버전	4.5.0
월 다운로드	3백만

npm은 Node.js 패키지 관리자이지만 스크립팅 도구를 사용하여 일반적인 작업을 실행할 수 있습니다. 이는 몇 가지 종속성이 있는 간단한 프로젝트에 적합한 선택입니다. 그러나 더 복잡한 작업에는 적용 가능성이 낮아질 수 있습니다.

Grunt

Grunt
Website	gruntjs.com
지식 기반	github.com/g runtjs /grunt
현재 버전	1.0.1
	월 200만 다운로드

Grunt는 대량 채택을 본 최초의 JavaScript 작업 실행 도구 중 하나였지만 속도와 복잡한 JSON 구성으로 인해 Gulp가 등장했습니다. 이제 이러한 문제가 해결되었으므로 Grunt는 여전히 인기 있는 선택입니다.

도구: 모듈 바인딩

여러 JavaScript 파일을 관리하는 것이 지루한 일이 되었습니다. 기본적으로 브라우저 파일은 컴파일되지 않으므로 해당 종속성을 적절한 순서로 로드하거나 연결해야 합니다. ES6 모듈 및 CommonJS와 같은 옵션이 있지만 브라우저 지원은 제한되어 있으므로 모듈 바인딩이 중요해집니다.

WebPack

WebPack
Website	webpack.js.org
지식 기반	github.com/webpack/ webpack
현재 버전	2.5 .1
	월 6백만 다운로드

Webpack은 모든 인기 있는 모듈 옵션을 지원하며 React 개발의 대명사가 되었습니다. Webpack은 모듈 번들러라고 주장하지만 이미 범용 작업 실행기로 사용될 수 있습니다.

Browserify

Browserify
Website	browserify.org
지식 기반	github.com/subst ack/node-browserify
현재 버전	14.3 .0
월간 다운로드	2.6백만

Browserify는 Node.js에서 사용되는 CommonJS 모듈을 지원하며 모든 모듈을 단일 브라우저 호환 파일로 컴파일합니다.

RequireJS

RequireJS
Website	requirejs.org
지식 기반	github.com/jr burke /r.js
현재 버전	2.3 .3
월간 다운로드 수 백만 건

RequireJS는 Node.js에서도 작동하는 브라우저 내 모듈 로더입니다.

도구: 코드 분석

코드 분석 도구는 코드에서 잠재적인 오류나 구문 표준의 편차를 분석하는 데 사용됩니다. 닫히지 않은 괄호나 선언되지 않은 변수는 항상 감지됩니다.

ESLint

ESLint
Website	eslint.org
지식 기반	github.com/eslin t/es lint
현재 버전	3.19. 0
월간 다운로드	6백만

ESLint는 플러그형 코드 분석 도구입니다. 각 규칙은 플러그인이므로 개인 취향에 맞게 구성할 수 있습니다.

JSHint

JSHint
Website	jshint.com
지식 기반	github.com/jshin t/j 신트
현재 버전	2.9. 4
월 다운로드	2백만

JSHint는 실제 오류와 이전 구문의 균형을 잘 맞추는 유연한 JavaScript 코드 분석 도구입니다.

JSLint

JSLint
Website	jslint.com
지식 기반	github.com/reid /no de-jslint
현재 버전	0.10 .3
월별 다운로드	50000

JSLint는 엄격한 기본 규칙 세트를 구현하는 최초의 코드 분석 도구 중 하나입니다.

도구: 단위 테스트

테스트 중심 개발 작업을 수행하려면 코드를 작성하여 자신의 코드를 테스트해야 합니다. Ava, Tape 및 Jest를 포함하여 다양한 옵션이 있지만 현재 가장 인기 있는 세 가지 도구는 다음과 같습니다.

기술 자료

github.com/mochajs/mocha

현재 버전3.3.0월별 다운로드5백만Mocha는 다음에서 사용할 수 있는 JavaScript 테스트 프레임워크입니다. 노드 .js 또는 브라우저에서 테스트를 실행하세요. 비동기식 테스트를 지원하며 테스트 코드를 읽기 쉬운 방식으로 표현할 수 있는 Chai와 함께 자주 사용됩니다. jasmine.github.io



Jasmine
	Jasmine
	Website

지식 기반

github.com /jasmine/jasmine-npm

현재 버전 2.6.0월별 다운로드 2백만 건Jasmine은 브라우저에서 UI와 상호 작용을 자동으로 테스트할 수 있는 동작 중심 테스트 도구입니다.



QUnit
	QUnit
	Website

지식 기반

github.com/kof/ node- qunit

현재 버전월별 다운로드

QUnit은 특정 매개변수를 입력하면 함수 결과를 확인할 수 있는 단위 테스트 프레임워크입니다. 또한 특정 코드 분기가 누락되지 않았는지 확인하기 위해 테스트 결과를 보고합니다.

요약 및 제안

현재 가장 효율적인 프레임워크는 React이며, 다른 프레임워크들도 대중적인 트렌드에 맞게 발전하고 있습니다.

안전하고 다양한 웹 애플리케이션이 필요하다면 Vue.js 사용을 고려해 보세요.

모놀리식 프레임워크는 더 이상 인기가 없습니다. 대규모 프로젝트의 엄격한 구조 관리가 필요한 경우 AngularJS가 좋은 선택입니다. 현재 대부분의 사람들은 Angular 1.0을 고수하지만 장기적으로 TypeScript를 배우고 싶다면 Angular 4.x가 더 나은 선택입니다.

jQuery는 현재 그다지 인기가 없고 기술 뉴스에서도 거의 언급되지 않지만, jQuery가 적극적으로 개발되고 있으며 웹 사이트와 애플리케이션을 위한 강력한 도구라는 점은 부인할 수 없습니다. jQuery는 학습 곡선이 완만하며 전 세계 많은 개발자가 잘 이해하고 있습니다.

모험을 느끼고 싶다면 빌드 시 JavaScript를 사전 렌더링하고 개발 방식을 변경할 수 있는 흥미로운 클라이언트/서버 프레임워크인 Svelte를 사용해 보세요.

도구 선택은 프로젝트마다 다릅니다. 현재 대부분의 개발자가 Gulp를 사용하고 있지만 WebPack은 점점 더 대중화되고 있습니다. 동시에 ESLint 및 Mocha와 같은 테스트 도구도 놓칠 수 없습니다.

1.0.0
25000

위 내용은 최신 프런트엔드 프레임워크, 라이브러리 및 도구 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML 형식의 일부 용도 요약다음 기사：HTML 형식의 일부 용도 요약