웹팩이 뭔가요?

이 글은 웹팩 핸드북을 보며 정리한 글입니다 😅 사실 프론트엔드 공부를 시작하며 드문 드문 웹팩이란 단어를 보았지만, 당장 필요한 기술이 아니라 판단되어 공부하지 않았습니다. 하지만 핸드북을 보며 개념을 이해하고 나니 자바스크립트랑 조금 더 친숙해진 것 같아 기분이 좋습니다!

 

웹팩

웹팩모듈 번들러. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 ((HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

 

모듈

성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 됩니다.

 

모듈 번들링

웹 애플리케이션을 구성하는 몇십, 몇백 개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 합니다.

 

빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다

 

웹팩의 등장 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성

다른 파일에 동일한 변수명을 사용했을 경우 뒤에 사용한 변수의 값이 앞에서 초기화 한 변수를 덮어씁니다. => 파일별로 관리가 안됨.

 

2. 웹 개발 작업 자동화 도구

• HTML, CSS, JS 압축
• 이미지 압축
• CSS 전처리기 변환

3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹 사이트의 로딩 속도를 높이기 위해 웹 태스크 매니저를 이용해 파일들을 압축하고 병합하는 작업들을 진행합니다.

웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그때 그때 요청하자는 철학을 갖고 있습니다.

 

웹팩이 해결하려는 문제들

1. 자바스크립트 변수 유효 범위 > ES6 모듈 문법과 웹팩의 모듈 번들링으로 해결합니다.

함수를 만들고 다른 파일에서 사용하기 위해 Export, Import 를 사용했는데, 여기에 저런 큰 뜻이 있는 줄 몰랐다.

왜 그렇게 쓰는지 몰랐는데, 변수 유효 범위를 제한하기 위함이었다!!

 

2. 브라우저별 HTTP 요청 숫자의 제약

TCP 스펙에 따라 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있습니다. 아래의 표는 최신 브라우저 별 최대 HTTP 요청 횟수입니다. 따라서, HTTP 요청 숫자를 줄이는 것이 웹 애플리케이션의 성능을 높여줄 뿐만 아니라 사용자가 사이트를 조작하는 시간을 앞당겨 줄 수 있죠. 웹팩을 이용해 여러 개의 파일을 하나로 합치면 위와 같은 브라우저별 HTTP 요청 숫자 제약을 피할 수 있습니다.

 

잠깐! TCP 란? 면접 준비하며 정리했던 것을 아래에 적었습니다!

Transfer Control Protocol 의 약자로 신뢰성 있는 데이터 통신을 가능하게 해주는 프로토콜을 말합니다. connection 연결하여 3 way-handshake 방식으로 양방향 통신을 하는 특징이 있습니다. TCP를 사용함으로써 데이터의 순차 전송을 보장하고 흐름을 제어할 수 있으며 혼잡 제어와 오류 감지도 할 수 있습니다.

🔍 신뢰성 있는 데이터 통신이 무슨 뜻인가요?

데이터를 순차적으로 포트 번호에 해당하는 프로세스에 전달하는 것을 말합니다.

🔍 TCP의 문제점은 없나요?

신뢰성은 보장되지만 매번 connection을 연결해서 시간 손실이 발생합니다. 게다가 패킷을 조금만 손실해도 재전송되기 때문에 상황에 따라 비효율적일 수 있습니다. 신뢰성이 좀 떨어져도 속도를 높이고 싶은 경우 UDP를 쓰는 것이 더 알맞다고 생각합니다.

🔍 순차 전송, 흐름 제어, 혼잡 제어, 오류 감지는 것은 어떻게 하는건가요?

3 way-handshake 를 통해 양방향 통신을 합니다. 클라이언트와 서버가 syn, ack,fin 같은 제어 비트를 주고받으며 서로의 상태를 계속 체크하며 데이터를 주고받습니다. 이 방식을 통해 신뢰성 있는 데이터 통신이 가능합니다.

🔍 프로토콜을 사용하지 않으면 발생하는 문제들은 뭔가요?

순차 전송 문제, 흐름 문제, 혼잡 문제, 오류 감지 문제가 발생할 수 있습니다. 순차 전송 문제는 송신자가 의도한 순서대로 수신자에게 데이터가 전달되지 않는 것을 말합니다. 흐름 문제는 송수신자 간의 데이터 처리 속도 차이 때문에 문제가 발생하는 것을 말합니다. 혼잡 문제는 네트워크 데이터 처리 속도(라우터) 때문에 문제가 발생하는 것입니다. 오류 감지 문제는 프로토콜을 사용하면 checksum이라는 비트를 이용해 해결할 수 있습니다.

 

Dynamic Loading & Lazy Loading

웹팩의 Code Splitting을 이용하여 해결합니다.

이 기능을 사용하여 코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있습니다. 더 작은 번들을 만들고 리소스 우선순위를 올바르게 제어하기 위해서 사용하며, 잘 활용하면 로드 시간에 큰 영향을 끼칠 수 있습니다.

• Entry Points: entry 설정을 사용하여 코드를 수동으로 분할합니다.
• Prevent Duplication: Entry dependencies 또는 SplitChunksPlugin을 사용하여 중복 청크를 제거하고 청크를 분할합니다.
• Dynamic Imports: 모듈 내에서 인라인 함수 호출을 통해 코드를 분할합니다.

 

좋은 건 알겠는데, 언제 쓰지? -> 사실 난 이미 쓰고 있었다..

혹시나 해서 찾아봤더니 역시나 CRA에 이미 들어 있었고 저는 저도 모르게 사용하고 있었습니다.... 현업에서는 직접 세팅할지 몰라도 CRA로 모든 프젝을 하고 있는 저는 따로 설치할 필요 없이 자동으로 세팅된 값에 따라 사용하고 있었습니다. 이래서 웹팩 웹팩 했나 봅니다. CRA 가 정말 편하지만, 그만큼 상세한 부분들은 신경 쓰지 않게 되어 까막눈이 되기 쉽다고 또 한 번 느꼈습니다. 😭

 

참고 링크들!입니다.

웹팩 핸드북

CRA의 웹팩 설정이 궁금하다면 여기 👉 eject 해서 웹팩 config 보여준 블로그

react + webpack + babel 개발 환경 구축