웹팩을 공부해보았다...?

Hwang Tae Young·2022년 11월 25일
0

기초부터 다시 시작해야지 마음먹은 가운데.... 전부터 항상 궁금 했던것..!
Create React App 없이 React를 초기 설정 하려면 어떻게 하면 될까 였다.

일단 단 한번도 해본적이 없기 때문에, 찾아보니 내가 직접 만드려면 중요한 포인트는 다른 설정도 다 중요하지만
webpack, babel을 사용하는 것이 중요하다고 한다. 오늘 내가 쓸 것은 webpack에 대한 것이다.

웹팩이란?

웹팩은 모듈 번들러 라고한다.
여기서 모듈 번들러란 Module + Bundling을 혼합한 용어인데,
module = 분리된 코드 조각, bunding는 묶는다의 의미로 분리된 코드 조각들을 아래의 이미지와 같이 묶는다는 의미라고 생각하면 된다.
(모듈 번들러에 대한 정리 링크)

그렇다면 웹팩을 사용하는 이유는? 무엇일까!

  1. 네트워크 병목을 줄여준다.
    각 브라우저 별 브라우저별 HTTP 요청 숫자의 제약이 있기 때문에, script 태그를 여러개 사용하여 웹 페이지를 로드하면 네트워크 병목현상이 생길 수 있다. 이런 문제를 해결하려면, 하나의 js파일로 로드하면 되지만 하나의 js파일로 개발할 경우 코드의 가독성이나 전역공간의 오염 같은 문제가 발생하게 된다. Webpack은 여러개의 파일을 하나로 묶어주기 때문에 이와 같은 문제를 해결할 수 있고 네트워크 병목현상을 최소화할 수 있다.

  2. 모듈단위의 개발이 가능하다!
    모듈단위의 개발이 가능하기 때문에, 전역 스코프에 대한 걱정을 하지 않아도 되고 하나의 파일에 모든 것을 넣지 않고 모듈 단위로 분리해서 코드를 짜기에
    가독성이 좋아지고, 각 필요한 부분만을 담을 수 있기 때문에 유지보수 효율이 높다.

  3. 코드를 압축, 최적화할 수 있다.
    여러가지의 js파일도 하나의 js파일로 압축시켜 준다.

  4. ES6+ 스크립트를 지원한다.
    webpack은 babel-loader를 사용하여 babel을 지원하기 때문에 컴파일 과정에서(코드를 번들링하는 과정에서)
    구형 브라우저가 사용 가능한 문법으로 코드를 변환해 준다.

현재 내가 찾아본 결과, 내가 이해할 수 있는 부분들은 이정도가 되는 것 같다. 각 모듈간의 의존성, 종속상 이런 것들은 아직
정확히 이해하지 못했기 때문에 글로는 남기지 않겠다.
CRA없이 프로젝트를 하나 진행을 해보면서 웹팩에 대해 더 채워 넣어야 겠다.

출처 : 링크1, 링크2

profile
더 나은 개발자가 되기 위해...☆

0개의 댓글