Wijmo, NPM, Webpack 및 JavaScript 프레임 워크를 사용하여 웹 앱 빌드

추천0

페이지 정보

작성자 GrapeCity

작성일 2020-08-27 14:30 조회 6,368회 댓글 0건

검색

본문

개발자가 NPM, Webpack 및 프레임워크를 사용하는 이유

최근까지 대부분의 JavaScript 개발자는 일부 JavaScript 파일을 로드하기 위해서 스크립트 태그를 사용하여 응용 프로그램에 컴포넌트를 추가한 다음, 다른 스크립트 블록에서 해당 컴포넌트를 참조하였습니다.

<!-- dependencies 불러오기 -->
<link href="http://cdn.wijmo.com/5.latest/styles/wijmo.css" 
      rel="stylesheet"/>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.js"></script>


<!-- 코드에서 사용 -->
<script>
   var theGrid = new wijmo.grid.FlexGrid('#myGrid', {
      itemsSource: getMyData();
   });
</script>

이 접근 방식은 간단하며 작고 단순한 애플리케이션에 적합합니다. 그러나 애플리케이션과 프레임워크의 복잡성이 증가함에 따라 종속성(dependencies)과 버전을 추적하는 것이 더욱 어려워지고 오류가 발생하기 쉽습니다.

로드 해야 하는 모든 파일과 순서를 파악한 후에도 웹을 통해 작은 파일을 많이 불러와 지는 것은 효율적이지 않으므로 애플리케이션 로딩 시간이 문제가 될 수 있습니다.

이러한 문제를 해결하기 위해 개발자가 작업을 보다 쉽고 효율적으로 수행 할 수 있는 새로운 도구가 등장했습니다. 오늘날 가장 많이 사용 되는 두 가지 도구는 다음과 같습니다.

NPM : Node Package Manager는 애플리케이션에 쉽게 추가 할 수있는 600,000 개 이상의 패키지 (코드 빌딩 블록)를 포함하는 세계 최대의 소프트웨어 레지스트리입니다. NPM을 사용하면 이러한 패키지에 대한 종속성 및 버전을 쉽게 추적 할 수 있습니다.

Webpack : Webpack은 JavaScript 애플리케이션을 위한 모듈 번들러입니다. 웹팩은 애플리케이션을 처리하고 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 빌드한 다음 이러한 모듈을 효율적인 배포를 위해 하나 이상의 번들로 패키징합니다.

이 시리즈에서는 NPM 및 Webpack과 함께 Wijmo를 사용하여 가장 인기 있는 JavaScript 애플리케이션 프레임워크를 대상으로 하는 응용 프로그램을 만드는 방법을 보여줍니다.

Angular : 웹, 모바일 또는 데스크톱에 있는 자바스크립트 애플리케이션을 구축하기 위한 Google의 프레임워크으로 모든 기능을 갖춘 이 프레임워크는 선언적 템플릿, 종속성 주입을 결합하고 엔드 투 엔드 도구를 포함합니다.

React : Facebook의 프레임워크는 스스로를 "사용자 인터페이스 구축을 위한 JavaScript 라이브러리"라고 부릅니다. 애플리케이션에 결합되는 구성 요소를 만들기 위해 HTML과 유사한 구문으로 JavaScript를 확장합니다.

Vue.js : 라이브러리와 모든 기능을 갖춘 프레임워크 사이에서 확장되는 생태계인 Vue는 이 목록에서 가장 작은 프레임워크입니다. HTML, JS 및 CSS를 결합하여 캡슐화된 재사용 가능한 구성 요소를 만드는 기존 HTML 및 JavaScript 또는 "vue"파일을 작성할 수 있습니다.

NPM, Webpack 또는 위에 나열된 프레임워크에 대한 자세한 내용은 다루지 않습니다. 이러한 모든 도구는 매우 인기가 있고 철저하게 문서화되어 있으며, 좋은 개요를 위해 프레임워크에 대한 e-book을 읽을 수 있습니다.

대신 각 프레임워크로 작성된 간단한 애플리케이션에 Wijmo를 추가하는 작업에 집중할 것입니다. 시리즈의 다음 3개 블로그에서는 각 프레임워크에서 Wijmo를 사용하여 간단한 애플리케이션을 만드는 방법을 설명합니다. 그들 모두를 정독하여 차이점과 공통점을 볼 수 있습니다.

애플리케이션을 만들고 유지하는 기본 단계는 모든 프레임워크에서 동일합니다.