당신이 알아야 할 멋진 JavaScript 라이브러리 및 프레임 워크

JavaScript : 네트워크 언어 및 생태계의 지속적인 진화

JavaScript는 20 년 이상 태어 났으며 계속 발전해 왔습니다. 최근 몇 년 동안, 그 개발은 놀랍도록 빠르며 사람들이 오늘날 인기있는 프론트 엔드 JavaScript 기술이 몇 년 안에 여전히 중요할지 궁금해합니다.

그러나 개발 효율성을 향상시키기위한 최신 도구와 프레임 워크를 갖는 것이 중요합니다. 이 기사는 주요 JavaScript 라이브러리, 프레임 워크 및 지금 배워야 할 도구 중 일부를 살펴볼 것입니다.

이 기사에서 다루는 라이브러리 및 프레임 워크 색인 :

액자

• 반응
• vue
• ember.js
• 모난
• 다음 .js
• 날씬한
• 이온
• 개츠비
• Meteor.js
• 표현하다

도서관

• jQuery
• Chart.js
• 3.js
• D3
• 애니메이션 .js

작업 러너

• 꿀벌
• eslint
• 바벨
• 꿀꿀 거리는 소리
• 웹 팩

테스트 도구

• 농담
• 여자 이름
• 모카

소개

JavaScript Ecosystem은 자체 라이브러리, 프레임 워크, 도구, 패키지 관리자 및 JavaScript로 편집 된 새로운 언어를 보유하고 있습니다. 흥미롭게도 NPM은 JavaScript의 사실상 패키지 관리자이며 세계에서 가장 큰 소프트웨어 등록 센터이기도합니다. 2017 년 1 월 Linux.com의 기사에서 발췌 :

NPM 레지스트리에는 350,000 개가 넘는 패키지가 있으며 다음으로 가장 인기있는 패키지 레지스트리 (Apache Maven Repository)의 두 배 이상입니다. 실제로, 그것은 현재 세계에서 가장 큰 패키지 등록 센터입니다.

단 8 개월 만에 NPM 레지스트리에는 약 500,000 패키지가있었습니다. 이것은 다른 패키지 창고에 비해 크게 증가합니다.

프론트 엔드 JavaScript 개발자로서 최신 JavaScript 도구 및 라이브러리를 따라 잡는 것이 중요합니다. 기술이 대중화되면 수요가 높아질 것이며, 이는 더 많은 임금 코딩 작업을 의미합니다. 그래서 나는 당신이 알아야 할 인기있는 JavaScript 기술 목록을 작성했습니다.

액자

프레임 워크에는 응용 프로그램 제어의 흐름을 결정하는 아키텍처가 있습니다. 프레임 워크는 프레임 워크 구조를 설명하고 모든 것을 구성하는 방법을 알려줍니다. 애플리케이션을 시작하고 실행하는 데 필요한 기본 기능은 프레임 워크에서 제공합니다. 또한 프레임 워크의 디자인 원칙과 패턴을 따라야합니다. 프레임 워크와 라이브러리의 차이점은 라이브러리를 호출하고 프레임 워크가 귀하를 부르는 것입니다.

프레임 워크에는 일반적으로 많은 라이브러리가 포함되어 있으며 추상화 수준이 높습니다. 프레임 워크에는 이벤트 처리, AJAX 호출, 템플릿 및 데이터 바인딩 및 테스트와 같은 내장 기능이 있습니다.

반응

React는 Facebook 및 Instagram의 개발자가 제작 한 JavaScript 라이브러리입니다. React는 개발자에게 가장 인기있는 기술 중 하나로 평가되었습니다.

그렇다면 왜 React가 그렇게 인기가 있습니까? React를 사용하면 선언적 방법을 사용하여 대화식 UI를 만들 수 있으며 "보기가 다음과 같아야한다"고 선언하여 응용 프로그램 상태를 제어 할 수 있습니다. 구성 요소가 재사용 가능한 UI 요소 인 구성 요소 기반 모델을 사용합니다.

React는 가상 DOM을 사용하므로 DOM을 직접 조작하는 것에 대해 걱정할 필요가 없습니다. React의 다른 주목할만한 기능으로는 일원 데이터 흐름, 옵션 JSX 구문 및 제로 빌드 구성으로 React 프로젝트를 생성하기위한 명령 줄 도구가 있습니다.

모난

Angular는 한때 프론트 엔드 개발자 중에서 가장 인기있는 JavaScript 기술이었습니다. 여전히 Google뿐만 아니라 개인 및 기업 커뮤니티에서 널리 사용되고 지원됩니다.

각도 특징 중 일부는 다음과 같습니다.

• JavaScript 대신 기본 언어로 TypeScript를 사용하십시오
• 구성 요소 기반 아키텍처
• 모바일 및 웹 플랫폼의 성능 향상
• 더 나은 도구 및 비계 옵션

vue.js

초보자를위한 최고의 JavaScript 프레임 워크를 찾고 계십니까? Vue.js 프레임 워크는 최근 몇 년 동안 매우 인기가 있습니다. Github Stars에 관한 한 Github에서 가장 인기있는 JavaScript 프레임 워크이기도합니다. Vue는 덜 임의의 프레임 워크라고 주장하므로 개발자가 쉽게 파악할 수 있습니다. VUE의 HTML 기반 템플릿 구문은 렌더링 된 DOM을 인스턴스 데이터에 바인딩합니다.

이 프레임 워크는 가상 DOM 및 재사용 가능한 구성 요소와 함께 위젯 및 전체 웹 애플리케이션을 만들 수있는 재사용 가능한 구성 요소를 제공합니다. 또한 JSX 구문을 사용하여 직접 렌더링 기능을 작성할 수 있습니다. 상태가 변경되면 vue.js는 반응 시스템을 사용하여 어떤 변화가 발생했는지 결정하고 최소한 양의 구성 요소를 다시 렌더링합니다. vue.js는 다른 라이브러리의 쉽게 통합을 지원합니다.

다음 .js

Next.js는 "프로덕션 환경을위한 React 프레임 워크"라고 부릅니다. 서버 측 렌더링 및 정적 웹 사이트 생성을 포함하여 새로운 기능을 추가하는 React 기반 프레임 워크입니다. React는 클라이언트 브라우저에서 JavaScript를 사용하여 렌더링되는 웹 응용 프로그램을 작성하는 데 일반적으로 사용되는 JavaScript 패키지입니다. 최상의 개발 경험과 생산 환경에서 필요한 모든 기능을 제공합니다.

### ember.js

Ember.js는 기존 단일 페이지 애플리케이션 생태계 패턴에서 언어, 모범 사례 및 패턴을 활용하여 개발자가 확장 가능한 단일 페이지 웹 애플리케이션을 구축 할 수 있도록 돕는 JavaScript 프레임 워크입니다. 데이터 관리 및 응용 프로그램 흐름을 포함한 포괄적 인 솔루션을 제공하여 클라이언트 JavaScript 응용 프로그램을 개발할 수 있습니다. 초보자를위한 최고의 JavaScript 프레임 워크를 찾고 있다면 이것은 훌륭한 선택입니다.

날씬한

브라우저에서 대부분의 작업이 수행되는 React 및 Vue와 같은 기존 프레임 워크와 달리 Svelte는 응용 프로그램을 구축 할 때 이러한 작업을 컴파일 단계로 전송합니다. 따라서 사용자 인터페이스 개발에 유용한 선택이됩니다.

이온

Ionic은 고속 상호 대화식 응용 프로그램을 만들기위한 모바일 최적화 된 UI 구성 요소, 제스처 및 도구를 제공하는 무료 및 오픈 소스 프레임 워크입니다. 하이브리드 모바일 애플리케이션을 만들 수 있습니다.

### 개츠비

이 오픈 소스 정적 웹 사이트 생성기는 WebPack 및 GraphQL Technologies를 사용하여 구축되며 React 프론트 엔드 개발 프레임 워크를 기반으로 구축됩니다. Gatsby를 사용하여 점진적인 웹 응용 프로그램을 만들고 빠르고 안전한 정적 웹 사이트를 만들 수 있습니다. Tinder, Snapchat 및 긍정과 같은 잘 알려진 많은 조직에서 사용되며 웹 사이트를 구축 할 때 매우 빠르고 유연합니다.

Meteor.js

Meteor.js는 웹 및 모바일 애플리케이션을 개발하기위한 무료 JavaScript 프레임 워크입니다. 유성은 편리하고 인기가 있으며 반응성 UI를 가지고 있습니다. 숙련 된 개발자라면 Meteor.js를 사용해보십시오. 빠르고 편리한 개발 프로세스가 있습니다.

Meteor는 특히 클라이언트와 서버간에 공유 코드 기반이있는 풀 스택 애플리케이션을 작성하는 데 특히 적합합니다.

표현하다

Express는 모든 웹 응용 프로그램에 대한 서버 측 코드를 작성하는 인기 있고 강력한 도구입니다. 무료 및 오픈 소스입니다. 웹 애플리케이션을 빠르고 쉽게 설계하고 만드는 데 사용됩니다.

도서관

JavaScript 라이브러리 (JS 라이브러리)를 이해하는 가장 좋은 방법은이를 사용하는 것입니다. 라이브러리는 특정 기능을 제공하는 재사용 가능한 코드 스 니펫입니다. 응용 프로그램에 사용할 수있는 기능, 개체 및 클래스 모음입니다. 라이브러리는 다른 계층을 초록하므로 구현 세부 사항에 대해 걱정할 필요가 없습니다.

"어떤 JavaScript 라이브러리를 사용해야합니까?"에 대해 궁금해하고 일부 매개 변수를 전달할 수 있습니다. 그러나 라이브러리 사용 방식을 제한하는 구조적 제약 조건을 설정하지 않습니다. 가장 일반적인 JavaScript 라이브러리를 찾고 계십니까? 간단한 JavaScript 라이브러리로 시작하십시오. 인기있는 기본 JavaScript 라이브러리에는 다음이 포함됩니다.

jQuery

배울 최고의 JavaScript 라이브러리를 찾고 계십니까? JQuery는 가장 일반적인 JavaScript 라이브러리 중 하나입니다. JavaScript를 사용하기 쉽고 DOM 조작을 이전보다 쉽게 ​​만드는 라이브러리입니다. JQuery의 간단한 학습 곡선과 사용하기 쉬운 구문은 새로운 세대의 고객 개발자를 생성했습니다. 몇 년 전, JQuery는 브라우저를 지원하는 강력한 웹 사이트를 구축하기위한 신뢰할 수있는 솔루션으로 간주되었습니다. CSS 선택기를 기반으로 DOM 운영, 이벤트 처리 및 AJAX 호출과 같은 jQuery의 핵심 기능이 인기를 얻었습니다.

그러나 상황이 바뀌었고 JavaScript 환경이 지속적으로 발전하고 있습니다. JQuery의 기능 중 일부는 새로운 ECMAScript 사양에 통합되었습니다. 또한 오늘날 사용되는 새로운 라이브러리 및 프레임 워크에는 DOM을 바인딩하는 기본 방법이 있으므로 일반적인 DOM 작동 기술이 더 이상 필요하지 않습니다. jQuery는 인기가 감소하고 있지만 곧 사라질 것이라고 생각하지 않습니다. JavaScript 라이브러리 (또는 JS 라이브러리)를 시작하려면 이것을 확인하십시오.

D3 : 데이터 중심 문서

D3 (또는 D3.JS)은 SVG, HTML 및 CSS와 같은 웹 표준을 사용하여 대화식 시각화를 생성하기위한 강력한 JavaScript 라이브러리입니다. 다른 비주얼 라이브러리와 달리 D3은 최종 시각 효과를보다 잘 제어합니다.

D3은 데이터를 DOM에 바인딩 한 다음 문서를 변환하여 작동합니다. 또한 기본 기능을 확장하는 플러그인과 라이브러리가 포함 된 자체 생태계도 있습니다. 도서관은 2011 년부터 시작되었으며 시작하기위한 많은 문서와 튜토리얼이 있습니다.

### Chart.js

이 아름다운 JavaScript 라이브러리는 개발자와 디자이너가 JavaScript를 사용하여 데이터를 쉽게 시각화 할 수 있도록 설계되었습니다. Chart.js는 가장 널리 사용되는 데이터 시각화 패키지 중 하나이며 가장 사용자 친화적 인 패키지 중 하나입니다. 소량의 코드만으로도 Chart.js는 데이터에 대한 즉시 사용 가능한 대화식 시각화를 만들 수 있습니다. 이것은 배울 수있는 최고의 JavaScript 라이브러리 중 하나입니다.

애니메이션 .js

간단하고 강력한 애니메이션 애니메이션 라이브러리를 사용하면 CSS 속성과 SVG 이미지 및 DOM 속성에 대한 다양한 애니메이션을 만들 수 있습니다. Anime.js에 대한 자세한 내용은 여기를 참조하십시오.

3.js

Three.js는 웹 브라우저에서 3 차원 컴퓨터 이미지를 생성하고 애니메이션하기위한 JavaScript 라이브러리입니다. 효과, 설정, 카메라, 조명, 재료, 모델, 셰이더, 애니메이션 및 3D 객체가 포함 된 단일 JavaScript 파일입니다.

도구

도구는 개발 프로세스에 도움이되는 일련의 루틴입니다. 라이브러리와 달리 도구는 일반적으로 클라이언트 코드에서 작업을 수행합니다. 코드를 입력으로 사용하고 작업을 수행 한 다음 출력을 반환합니다. 일반적으로 사용되는 도구에는 번역기 및 빌드 도구, 자산 압축기, 모듈 번들러 및 스캐 폴딩 도구가 포함됩니다.

일반 작업 러너

Universal Task Runner는 특정 반복적 인 작업을 자동화하는 데 사용되는 도구입니다. 인기있는 일반 작업 주자는 다음과 같습니다.

꿀벌

Gulp는 웹 개발에서 작업 러너 및 빌드 시스템으로 사용되는 JavaScript 툴킷입니다. 컴파일, 코드 압축, 이미지 최적화, 장치 테스트 및 코드 검사와 같은 반복적 인 작업을 자동화해야합니다. JavaScript에 익숙하지 않은 사람들에게도 Gulp는 작업을 더 쉽게 작성합니다.

Gulp는 파이프 라인을 사용하여 한 플러그인에서 다른 플러그인으로 데이터를 스트리밍하고 최종 결과는 대상 폴더로 출력됩니다. Grunt와 비교할 때 Gulp는 중간 결과를 저장하기위한 임시 파일을 생성하지 않기 때문에 I/O 통화 수가 줄어 듭니다.

### grunt

Grunt 작업 러너 및 자동화 도구에는 GruntFile이라는 파일로 정의 된 사용자 정의 작업을 실행할 수있는 명령 줄 인터페이스가 있습니다. Grunt에는 선택할 수있는 수천 개의 플러그인이 있으며, 이는 가장 일반적인 반복적 인 작업을 다루어야합니다. Grunt를 사용하면 단일 명령으로 모든 작업을 실행하여 작업을 단순화 할 수 있습니다.

### npm

Gulp와 Grunt는 시간이 걸리는 새로운 도구를 배우고 마스터하는 데 시간을 보내야합니다. Node.js와 함께 번들 된 대안을 선택하여 프로젝트에 추가 종속성을 추가하지 않을 수 있습니다. NPM은 패키지 관리자로 더 잘 알려져 있지만 NPM 스크립트를 사용하여 위에서 언급 한 대부분의 작업을 수행 할 수 있습니다.

### eslint

Eslint는 삽입 가능한 JavaScript 도구로 오류 또는 불일치를 유발할 수있는 문제에 대한 코드를 분석합니다.

### 더 예쁘다

Pretier는 강한 의견을 가진 코드 포피터입니다. 코드를 분석하고 최대 라인 길이를 고려하고 필요에 따라 코드를 중단하는 표준에 대해 코드를 재 인쇄하여 일관된 스타일을 시행합니다. 여러 언어로 작동하며 좋아하는 편집자와 통합 할 수 있습니다.

### 웹 팩

Webpack Module Bundler를 사용하면 브라우저 용 JavaScript 파일을 번들로 만들 수 있으며 Webpack은 스타일과 자산을 수정하고 번들로 만들 수도 있습니다.

### 바벨

Babel은 새로운 언어 기능을 오래된 언어 기능으로 변환하는 무료 오픈 소스 JavaScript 컴파일러입니다. "번역기"라고도합니다. Bundler 만 사용하는 경우 누구나 모든 최신 JavaScript 기능을 사용하지만 이전 브라우저에서 실행되는 코드를 작성할 수 있습니다.

### 테스트 도구

테스트는 응용 프로그램이 예상되는 비즈니스 및 기술 요구 사항을 충족하는지 확인하고 확인하는 프로세스입니다. 테스트 중심 개발 방법은 또한 오류를 감지하는 데 도움이되며 최신 프론트 엔드 개발 스택의 일부로 간주되어야합니다.

농담

Jest는 Facebook에서 작성한 비교적 새로운 테스트 프레임 워크이며 React 커뮤니티에 인기가 있습니다. 그러나 Jest 문서에 따르면 Jest가 React와 함께 사용하도록 특별히 설계된 오해가 있습니다.

Jest는 React 특이 적 테스트 러너로 간주 될 수 있지만 실제로 JavaScript 라이브러리 또는 프레임 워크에 적응할 수있는 범용 테스트 플랫폼입니다. Jest를 사용하여 JavaScript 코드를 테스트 할 수 있습니다.

다른 테스트 스위트를 통해 JEST를 사용하는 것의 가장 큰 장점은 테스트 작성을 시작하기 위해 구성이없는 구성 또는 최소 구성이 필요하다는 것입니다. 이 프레임 워크에는 내장 어설 션 라이브러리가 있으며 모의 기능 또는 스파이 사용을 지원합니다.

Jest에는 스냅 샷 테스트라는 기능이있어 응용 프로그램의 UI가 예기치 않게 변경되지 않도록 할 수 있습니다. Facebook 개발자와 다른 기고자들은 최근이 프로젝트에 많은 노력을 기울이고 있었기 때문에 Jest가 앞으로 몇 년 동안 가장 인기있는 JavaScript 테스트 프레임 워크가되면 놀라운 일이 아닙니다.

모카

이 JavaScript Test Framework에는 브라우저 지원, 약속, 테스트 범위보고 및 실행 테스트를위한 JavaScript API를 포함한 비동기 지원이 있습니다. Mocha는 일반적으로 Assertion Library 자체가 없기 때문에 Chai, Dour.js, expect.js 또는 더 나은 자격과 같은 어설 션 라이브러리와 함께 사용됩니다.

여자 이름

Jasmine은 JavaScript의 행동 중심 테스트 프레임 워크입니다. Jasmine 旨在成为一个浏览器、平台和框架无关的测试套件。 Jasmine에는 매칭 자체라는 자체 어설 션 라이브러리가있어 깨끗하고 읽기 쉬운 구문을 제공합니다. Jasmine에는 내장 테스트 러너가 없으므로 Karma와 같은 범용 테스트 러너를 대신 사용해야 할 수도 있습니다.

요약

웹 언어 인 JavaScript는 1995 년 창립 이후 관련성을 유지했습니다. 브라우저가 다른 언어로 대체하기로 결정하지 않는 한 이런 식으로 남아있을 수 있습니다. JavaScript로 컴파일하는 다른 많은 언어가 있지만 다른 스크립팅 언어는 가까운 미래에 JavaScript를 대체하지 않습니다. 왜? JavaScript가 너무 인기가있어 교체하기에는 대체되었습니다.

웹 개발의 현재 트렌드에서 볼 수 있듯이 JavaScript 환경은 확실히 진화하고 있습니다. 오래된 라이브러리와 프레임 워크는 새로운 기술로 대체되었습니다. 새로운 세대의 프론트 엔드 라이브러리, 프레임 워크 및 도구가 떠오르고 광범위한 수용을 얻고 있습니다.

이 기사는 업데이트되었으며 Ezekiel Lawson의 기여를 포함합니다. Ezekiel은 JavaScript, Vue.js, HTML 및 CSS와 같은 웹 기술을 사용하여 깨끗하고 유지 관리 가능한 코드 작성에 중점을 둔 프론트 엔드 개발자입니다.

위 내용은 당신이 알아야 할 멋진 JavaScript 라이브러리 및 프레임 워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!