소소한 코딩일지

Bundling(번들링) 이란 웹 페이지의 고도화로 인해 다양한 파일들 사이의 상호작용이 발생하고 대규모 웹 서비스들이 탄생하게 되면서, 무수한 코드라인을 관리하기 힘들어졌다. 대표적인 문제점들로 다음과 같은 사항들이 있을 수 있다. 1. 전역 범위를 갖는 수많은 JS파일 내 변수의 중복선이 발생할 수 있다. 2. 수 백개에 달하는 JS 파일로 인한 늦은 로딩 3. 수동적인 개발 루틴 이러한 문제들을 해결해줄 수 있는 것이 바로 'Bundler'이다. Bundler는 연관성이 높은 자원을 모듈로 묶어주는 도구를 의미하고 아래와 같은 장점을 기대할 수 있다. 1. 모듈 단위의 코드 작성이 가능 2. 네트워크 병목현상 완화 가능 (최적화, 네트워크 코스트 절감) 3. 웹 개발 작업 자동화 웹팩 (Webpac..

프로젝트를 하면서 웹팩을 본 적은 있지만 실제 내가 핸들링해본 적이 없다. 웹팩이라는 bundler에 대해 공부를 하면서 이번 기회에 webpack을 가지고 직접 build 가능한 프로젝트를 한번 생성해보고, 그 과정을 정리해보기 위해서 글을 쓴다. 기본 세팅 mkdir webpack-demo //실습 폴더 생성 cd webpack-demo npm init -y //package.json 생성 npm install webpack webpack-cli --save -dev // 웹팩 라이브러리 설치 npm lodash //lodash 라이브러리 설치 위 명령어로 실습 폴더와 라이브러리를 세팅한다. 그러면 다음과 같은 폴더 구성으로 세팅이 완료된다. 다음으로 루트 경로에 index.html과 src/inde..