Unit3 회고

YEN J·2022년 11월 24일
0

code states

목록 보기
36/43

[React]번들링과 웹팩

🔆 번들링

번들링🗃

: 여러 제품이나 코드, 프로그램을 묶어 패키지로 제공하는 행위

  • 번들: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

번들링의 필요성

  • 변수 간 충돌 방지
  • 번들 파일 용량 압축
  • 사용자 임의 조작 방지

🔆 웹팩

Webpack📦

: 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

  • 모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
  • 모듈 번들러의 등장

    • JavaScript 코드 양의 절대적 증가
    • 대형 웹 애플리케이션의 등장에 따른 세분화된 모듈 파일의 증가
    • 스코프, 네트워크의 코스트 관련 등 여러 문제
      → 이러한 복잡성에 대응하기 위해 하나의 시작점으로부터 의존성을 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러 등장
  • Webpack에서의 모듈

    • 웹팩에서의 모듈은 JavaScript 외의 다양한 파일을 포함한 포괄적 개념
    • 따라서 웹팩은 주요 구성 요소인 로더(loader)를 통해 다양한 파일을 번들링 가능
  • 빌드와 번들링

    • 빌드: 개발 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
    • 번들링: 파일을 묶는 작업, 모듈 간의 의존성 관계를 파악해 그룹화하는 작업

Webpack의 필요성

  • 빠른 로딩 속도높은 성능을 위해
    • 같은 타입의 파일을은 묶어서 요청 및 응답 가능
      → 네트워크 코스트 획기적 감소
    • Webpack loader 사용 시 babel-loader, vue-loader, scss-loader 등 다양한 로더 사용 가능
      • babel-loader: JavaScript ES6의 문법들을 ES5로 변환
      • vue-loader:  Vue 컴포넌트를 일반적인 자바스크립트 모듈로 변환
      • sass-loader: sass/scss파일을 css 파일로 컴파일
    • Webpack4 버전 이상부터 Develoment, Production 두 가지의 모드를 지원
      • Production: 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원

🔆 웹팩의 핵심 컨셉

웹팩의 핵심 컨셉

🏷 Target
: Webpack은 다양한 환경과 target을 컴파일한다

  • target의 기본값: web

  • Browser Compatibility(브라우저 호환성)와 연관된 속성

  • 예시

    module.exports = {
      target: ["web", "es5"],
    };
    

🏷 Entry(엔트리)
: Webpack에서 entry는 개발자가 작성한 코드의 시작점으로 Entry point라고도 한다

  • entry의 기본값: ./src/index.js

  • webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용

  • webpack은 이를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음

  • 예시

    //기본 값
    module.exports = {
        ...
      entry: "./src/index.js",
    };
    
    //지정 값
    module.exports = {
        ...
      entry: "./src/script.js",
    };

🏷 Output(출력)
: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 수행한다

  • 기본 출력 파일: ./dist/main.js 폴더로 설정
    생성된 기타 파일: ./dist 폴더로 설정로 설정

  • path 속성 사용 시 path 모듈을 사용해야 함

  • 예시

    const path = require('path');
    
    module.exports = {
        ...
      output: {
        path: path.resolve(__dirname, "docs"), // 절대 경로로 설정
        filename: "app.bundle.js",
        clean: true
      },
    };

🏷 Loader(로더)
: loader 사용 시 Webpack이 JavaScript와 JSON 파일 외에도 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다

  • test: 변환이 필요한 파일들을 식별하기 위한 속성
  • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
  • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정
    (반대의 경우 include 속성을 이용)
  • testuse 속성 필수
  • module.rules 아래에 지정
  • 예시
    module.exports = {
        ...
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
            exclude: /node_modules/,
          },
        ],
      },
    };

🏷 Plugins(플러그인)
: plugins 사용 시 번들 최적화나 에셋 관리, 환경변수 주입 등 광범위한 작업을 수행할 수 있다

  • 플러그인 사용 시 require()로 플러그인 우선 요청 후 plugins 배열에 사용하고자 하는 플러그인 추가

  • new 연산자를 사용해 플러그인의 인스턴스를 만들어주어야 함

  • 플러그인 예시

    • html-webpack-plugin: 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
    • mini-css-extract-plugin: CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주도록 지원
  • 예시

    const webpack = require('webpack');
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = {
      ...
      plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "src", "index.html"),
        }),
        new MiniCssExtractPlugin(),
      ],
    };

🏷 Optimization(최적화)
: 버전4부터 Webpack은 선택한 항목에 따라 최적화를 실행한다

  • 대표적으로 사용되는 옵션
    • minimize: bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
    • minimizer: defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 가능
  • 예시
    module.exports = {
      ...
      optimization: {
        minimizer: [
          new CssMinimizerPlugin(),
        ]
      }
    };

🔆 웹팩과 리액트

왜 리액트가 번들링이 필요할까❓

: 가벼운 라이브러리로 인기를 얻은 리액트
→ 시간이 지나며 개발자들의 다양한 니즈를 충족시키기 위해 추가적인 라이브러리 설치는 불가피
→ 이러한 라이브러리들을 번들링할 수 있는 웹팩의 필요성이 증가

  • 리액트 개발에 필수적인 라이브러리

    • react, react-dom
      • react: life-cycle에 대한 정보가 들어있는 라이브러리
      • react-dom: react 코드를 브라우저에 보여주는 라이브러리
    • babel-loader: Babel과 webpack을 사용해 JavaScript 파일을 변환하는 로더
    • css-loader: import와 같은 구문을 해석(css관련)하고 적용할 수 있도록 하는 로더
  • 리액트 개발에 도움이 되는 라이브러리

    • react-hot-reloader: 리액트 상태를 유지시키며 저장할 때마다 변경사항을 개발 환경에 적용해주는 라이브러리
    • eslint: JavaScript로 개발 시 자주 발생하는 에러를 방지하기 위한 린터
    • prettier: JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있도록 도와주는 툴

<오늘의 일기>
웹팩으로 번들링하고 깃헙 페이지를 통해 배포까지 해봤던 Unit3. 처음에는 하나하나 이해하고 넘어가려다 보니 어렵게 느껴졌었는데 직접 적용을 해보면서 점차 번들링하는 과정의 큰 흐름을 볼 수 있게 되었다.
요즘 들어 미래의 내가 진짜 개발자가 되어있을까라는 생각이 자주 든다. 막연한 불안감 때문인 것 같은데 이럴 때일수록 불안감은 뒤로 제쳐 두고 지금 나에게 주어진 것들을 열심히 임해서 불안감을 줄여봐야겠다!

0개의 댓글