2020년 5월 24일

소문으로만 들어온 웹팩(webpack) 기반의 웹 프로그램 (PWA) 만들기

소문으로만 들어온 웹팩(webpack) 

웹팩은 오픈 소스 자바스크립트 정적 모듈 번들러(1) 로 여러개로 나누어져 있는 코드들을 사용되는 방식에 따라 분리하여 최적화하는 도구이다. 번들링을 통하여 파일은 합쳐지고 네트워킹 요청횟수는 줄어들게 되며 결과적으로 성능 향상을 가져오게 된다.

1) 번들링의 개념은 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미.


그림1. Dependency Graph with Webpack


webpack 기반의 개발을 위하여 bootstrap 4 를 기반으로 하는 반응형 Admin Template "Adminator" 를 사용하였다. 

그림2. Adminator


아쉬운점은 이용한 Adminator   가 webpack 3.8.1 를 기반으로 하고 있고 원개발자가 4.x 버전으로 업데이트 계획이 없다는 것이다. 4.x 부터는 속도 개선이 있다고 하던데 이를 확인하지 못한점이 아쉽다.

빌드 시간이 꽤나 소요되어 개발에 있어 상당한 불편함이 있었다. 다만 webpack-dev-server 사용하면 빌드과정 없이 실시간으로 수정된 웹 프로그램이 리로드되어 개발과정이 쉬워진다.

참고로 빌드를 위한 HW 사양은 아래와 같다.
  • MacBook Pro ( 15-inch, Mid 20154)
  • 2.5GHz 4Core Indel Core i7
  • 16G 1600MHz DDR3

웹팩에 대한 사전 지식없이 개발 

목표는 kendoui  기반으로 만들어진 관리자 웹 프로그램을 webpack 을 적용하여 개발하는 것이다.  이를 통하여 클라이언트와 서버를 완전하게 분리하여 성능적인 향상을 가져오는 것이 목적이다. 

Adminator 덕분에 webpack 에 대한 지식이 없었지만 큰 무리없이 시작할 수 있었으며 개발 과정에서 필요한 기술을 자연스럽게 습득할 수 있어 시간을 절약할 수 있었다. 



Adminator 에서 사용된 webpack 버전을 4.x 버전으로 변경하여 사용하여 보았다. 원작성자의 많은 부분을 수정해야 하는 이슈가 있어고 일부 HTML  내에서 자바 코드 처리하는 부분에있어 해결되지 않는 문제도 있다.  추가로 정리및 수정이 필요하다.



참고자료

댓글 없음:

댓글 쓰기