JavaScript는 수년에 걸쳐 점점 더 인기를 얻었고 커뮤니티는 빠르게 성장하고 있으며 개발자는 매일 언어를 위한 도구를 지속적으로 개발 및 구축하고 있습니다.
이것은 JavaScript에서 문자 그대로 원하는 모든 것에 대해 항상 여러 옵션이 있기 때문에 특정 작업에 사용할 도구/프레임워크/라이브러리를 결정할 때 압도적입니다. 처음에는 배울 라이브러리나 프레임워크를 결정하는 것이 여전히 어렵습니다.
이 기사는 여러 JavaScript 프론트엔드 프레임워크/라이브러리 사용의 이점을 이해하는 데 중점을 두고 궁극적으로 이에 대한 더 명확한 그림을 제공합니다. 하나를 선택하는 결정 프로세스를 더 쉽게 만들기 위한 것입니다.
목차
반응
반응 프레임워크가 아니라 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
오픈 소스이며 Facebook과 개별 개발자 커뮤니티에서 유지 관리합니다. React는 처음에 조던 워커 Facebook의 내부 도구로 사용됩니다. 이후 2013년에 오픈소스로 공개되어 일반 대중에게 공개되었으며, 이후 폭넓은 인기를 얻었습니다.
일부 기능은 다음과 같습니다.
- 반응성, 사용자 정의 및 재사용 가능한 구성 요소 제공
- 가상 DOM 활용
- 매우 빠름
- 구성 요소 기반
- 단방향 데이터 바인딩
- 코드 재사용성
- 그 뒤에는 활기차고 번성하는 생태계가 있습니다.
- 편리한 상태 관리 처리
설치/사용
React는 두 가지 방식으로 프론트엔드에서 사용할 수 있습니다.
CDN을 통해
당신은 그들의 공식 사이트 HTML 마크업의 헤더 태그에 포함할 수 있는 스크립트 링크를 가져옵니다. 목적에 따라 링크를 선택하십시오.
예를 들어 개발 환경에서 사용하는 경우 다음을 수행합니다.
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
그리고, 생산을 위해
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Node.JS 사용
이미 NodeJS가 설치되어 있다고 가정합니다. React를 설치하려면 다음 명령을 입력하기만 하면 됩니다.
sudo npm i -g create-react-app –save-dev
설치가 완료되면 다음 명령을 입력하십시오
create-react-app my-first-react-application
위의 명령은 개발 서버, webpack 및 babel을 포함하여 React가 적절하게 실행되는 데 필요한 모든 라이브러리를 설치합니다.
my-first-react-application 폴더로 이동하여 다음 명령을 실행합니다.
npm 시작
위와 같이 하면 3000번 포트에서 개발 서버가 실행됩니다. 그리고 3000번 포트로 서버 IP에 접속하면 아래와 같은 모습을 볼 수 있을 것입니다.
React는 많은 대규모 조직에서 인기를 얻고 주문형입니다. 학습에 관심이 있다면 이 강의를 수강하는 것이 좋습니다. 완전한 과정.
뷰.js
뷰.js 대화형 사용자 인터페이스 및 단일 페이지 응용 프로그램을 구축하기 위한 진보적인 JavaScript 프레임워크입니다. 뷰 레이어에 중점을 둔 코어 라이브러리가 있는 모델-뷰 프레임워크입니다. Vue는 단일 페이지 애플리케이션을 지원하는 기능으로 유명합니다. React와 달리 Vue는 JSX가 아닌 원시 HTML을 사용합니다.
Vue.js는 오픈 소스이며 처음에 에반 유 2014년 2월에 공개되었습니다. 다음은 몇 가지 기능입니다.
- 반응형 및 구성 가능한 뷰 구성 요소를 제공합니다.
- 가상 DOM 활용
- 핵심 라이브러리(예: 라우팅 및 상태 관리)에 초점을 유지합니다.
- CSS의 범위 지정은 CSS-In-J 없이 처리됩니다.
- 구성 요소 내 단방향 바인딩.
- 필수 애드온 지원
- 코드 재사용성
설치/사용
CDN을 통해 또는 Node.js와 함께 프런트 엔드에서 Vue.js를 사용할 수 있습니다.
CDN 방식을 사용하려면 HTML 페이지 헤더 섹션에 다음 스크립트를 추가할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
위의 스크립트는 중요한 콘솔 메시지를 포함하고 있어 개발용으로 적합합니다. 그러나 생산을 위해서는 아래의 것을 사용해야 합니다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
그리고 Nodejs와 함께 사용하려면 npm 명령어로 설치하면 됩니다.
npm install vue
공식 Vue JS를 읽는 것이 좋습니다. 선적 서류 비치 더 알아보거나 복용을 고려하려면 길.
모난
모난 동적 페이지를 위한 구조적 JavaScript 프레임워크입니다. HTML을 템플릿 언어로 사용할 수 있으며 HTML 구문을 사용하여 응용 프로그램 구성 요소를 명확하고 간결하게 표현할 수 있습니다. Google 및 기타 기여자가 유지 관리하는 오픈 소스 프로젝트입니다.
설치
최신 Nodejs가 설치되어 있는지 확인하십시오. 가장 먼저 설치해야 할 것은 Angular CLI 도구입니다.
npm install -g @angular/cli
설치가 완료되면 다음 명령으로 새 프로젝트를 생성할 수 있습니다.
ng new my-first-angular-app
화면의 지시를 따릅니다. 이것은 일부 파일과 폴더를 생성하고 npm 모듈을 사용하여 Angular가 제대로 실행되는 데 필요한 타사 라이브러리를 다운로드합니다.
새로 생성된 애플리케이션을 시작하려면 앱 폴더에서 다음 명령을 실행합니다.
ng server
그러면 포트 4200에서 서버가 자동으로 시작됩니다.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
결론
따라서 배우기로 선택한 것은 “어떤 것이 더 나은지”보다 개인적인 취향입니다.
위에 나열된 모든 프레임워크/라이브러리는 훌륭합니다. 다음은 간략한 요약입니다.
- 외부 의존성을 다룰 필요 없이 의존하고 싶은 프레임워크를 원한다면 Angular를 배워야 합니다.
- 빠른 PWA, 단일 페이지 애플리케이션을 빌드하고 JSX에 익숙하다면 React를 배워야 합니다.
- React는 대규모 커뮤니티 덕분에 가장 활기찬 커뮤니티와 더 많은 취업 기회를 제공합니다.
- React는 시작하기가 비교적 쉽습니다.
- React는 사용자 정의가 가능하며 UI의 각 부분을 구성 요소로 취급합니다.
- Vue는 React와 동일한 장점이 있지만 JSX가 없습니다.
- Vue의 취업 시장은 지속적으로 증가하고 있습니다.
다음은 그 중 3개의 인기도를 비교한 Google 트렌드 차트입니다.
프론트엔드 개발에 관심이 있다면 다음을 확인하세요. 유데미 코스.