📚 웹팩 알아보기 (쓰는 이유, 다양한 모듈 스펙, 엔트리/아웃풋)

👩🏻안녕하세요 웹팩 다뤄보는 시간을 가져보겠습니다 ! 제가 웹팩을 공부하는 이유는 좀 더 효율적인 작업 환경을 만들기 위해서인데요! 웹팩의 좋은점 세 가지를 간략하게 소개해드릴게요.

1. 파일 단위의 자바스크립트 모듈 관리의 필요성 (모듈번들링)
2. 웹 개발 작업 자동화 도구 (HTML,CSS,JS,이미지 압축 + CSS 전처리기 변환)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

을 위해서 사용해보도록 할거에요.

먼저 파일 단위 자바스크립트 모듈 관리 필요성을 알아보자면, 웹 애플리케이션을 제작하려면 HTML,CSS,JS,이미지,폰트 등 많은 파일들이 필요하죠 ! 이게 모두 다 모듈이라고 지칭합니다. 모듈 번들링이란 수많은 파일들을 하나의 파일로 병합 및 압축 해주는 동작을 의미해요. 그리고 웹팩 다뤄보면서 자주 들어보셨을 '빌드하다 = 번들링 = 변환하다' 이 세 가지 뜻이 다 같은 뜻입니다. 🙌

웹 개발 작업 자동화 도구란 HTML,CSS,JS,이미지 압축과 CSS 전처리기 변환 해주는 일들을 자동화 해주는 도구들이 필요했는데 그래서 그런트와 걸프라는 것이 등장했어요. 참고로 걸프는 첫 회사 때 사용해봤는데 진짜 편하더라구요... 하지만 저는 다수가 선택한 웹팩을 배워보겠습니다 !!

웹 어플리케이션의 빠른 로딩 속도와 높은 성능을 위한 이유는 일반적으로 특정 웹사이트를 접근할 때 3초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 돼요. 그래서 웹사이트 로딩 속도를 높이기 위해 많은 노력들을 해야 되는데, 그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것입니다. 작업한 파일은 많은데 파일 수를 줄여준다라... 정말 신박한 거 같아요.

 

🐥 웹팩을 알아가기 전, 간단하게 개념 정리 하고 갑시다.

 

---

 

IIFE (Immediately Invoked Function Expression)

즉시 실행 함수표현은 정의되자마자 즉시 실행되는 자바스크립트 함수를 말해요.

(function () {
    statements
})();

위처럼 첫 번째 괄호로 둘러싸인 익명함수입니다. 이는 전역 스코프에 불필요한 변수를 추가해 오염시키는 것을 방지할 수 있을 뿐만 아니라, IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이에요. 두 번째 괄호는 즉시 실행 함수를 생성하는 괄호입니다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행시켜줘요.

 

다양한 모듈 스펙

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD, CommonJS 입니다. CommonJS는 자바스크립트로 사용하는 모든 환경에서 모듈화 하는 것이 목표입니다. export 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식이지요. 대표적인 서버 사이드 플랫폼인 Node.js에서 이 방식을 사용합니다.

 

내보낼 때 (export)

export function sum(a,b) { return a + b;}

 

가져올 때 (import)

import * as math from './math.js'

 

AMD : 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표입니다. 주로 브라우저 환경을 말해요.

UMD : AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태에요. 각 커뮤니티에서 각자의 스펙을 제안하다가 ES2015 에서 표준모듈 시스템을 내놓았어요. 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이지요.

 

<script type="module" src="src/math.js"></script>

HTML 브라우저에서는 위 코드처럼 모듈을 사용할 수 있어요. 이렇게 되면 script 구문 안에 type="module" 을 입력해줘야 한답니다. 하지만 이럴 때는 서버를 돌려야 되는데 npm으로 lite-server 패키지를 설치해 줘야해요.

$npx lite-server

설치명령어를 입력하여 설치해주고 현재 폴더를 서버로 만들어 줍니다 ! 

 

---

 

엔트리 / 아웃풋

웹팩은 여러개 파일을 하나의 파일로 만들어 주는 번들러라고 했잖아요. 하나의 시작점으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어줘요. app.js 부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이예요. 위에 사진을 보면 좀 더 이해하기 쉬울 겁니다.

 

그래서 엔트리와 아웃풋이 뭐냐하면, 엔트리는 왼쪽에 있는 파일들을 뜻하고(=시작점) 아웃풋은 오른쪽에 하나의 파일로 만들어진 것을 뜻해요. 웹팩 들어가기에 앞서 개념들을 알아봤는데요. 다음편은 실전으로 설명해 드리겠습니다.