모듈번들러라는 말은 코딩을 하면서 많이 듣던 말이었다.
이 모듈이 무엇인지에 대해 알아보자면
모듈이란?
프로그램을 구성하는 요소로 관련 데이터와 함수를 하나로 묶은 단위를 의미한다.
보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성하며, 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만들게 된다고 한다.
이러한 방식이기에 모듈은 서로 의존성을 띄고있다.
따라서 아래와 같은 문제점이 있다.
- 수많은 모듈들의 의존성 처리
- 모듈이 많아질수록 http요청이 많아질텐데 이로 인한 오버헤드 처리
(* 오버해드 : 특정 기능을 수행하는데 드는 간접적인 시간, 메모리 등 자원) - ES6스펙의 코드를 어떻게 처리할 것인가.
이 문제들을 해결하기위해 모듈번들러 라는것이 등장해서 각각의 모듈의존성을 해결하여 하나의 자바스크립트 파일로 만들 수 있게 되었다.
번들러로는 : Webpack, Parcel, Rollup등이 있다.
(흔히 webpack서버라고 하길래 하나인줄 알았는데 여러가지가 있었다...)
트랜스파일러
트랜스 => 변형
트랜스파일링은 특정언어르 작성된코드를 비슷한 다른 언어로 변환시키는 행위를 말하고 이를 해주는 것이 트랜스파일러라고 한다.
트랜스파일러가 필요한 이유:
모든 브라우저가 ES6의 기능을 제공하지 않기 때문에 이를 ES5로 변환하는 과정이 필요해 이것을 도와주기 위함이다.
또한, React의 JSX도 자바스크립트로 변환시켜주고,
타입스크립트도 자바스크립트로 변형시켜준다.
대표적으로 Babel이 있고, 타입스크립트를 변형시켜주는 도구로는 타입스크립트 트랜스파일러가 있다.
일반적으로는 프론트엔드 프레임워크 및 라이브러리를 사용해 개발 시 모듈번들러에 트랜스파일러를 추가해 사용하는 방식을 사용한다.
타입스크립트의 트랜스 파일러:
typescript compiler ==> 얘를 사용해 .ts나 .tsx를 자바스크립트로 '트랜스파일링'해줄 수 있다.
npm install -g typescript 이런식으로 타입스크립트를 설치하게되면 타입스크립트 컴파일러를 다운받게된다.
엄청좋은데??
참고: 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다.
매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다.
뷰, 리액트와 같은 프런트엔드 프레임워크를 쓰면 개발 편의상 로컬에 웹팩 데브 서버를 띄워놓고 개발하는 경우가 많습니다.
