변경하지 않고 확대해보자(webpack 과 babel)

플러그인 아키텍쳐

플러그인(plugin) 또는 추가 기능(애드인;add-in, 애드온;add-on)은 호스트 응용 프로그램과 서로 응답하는 컴퓨터 프로그램이며, 특정한 "주문식" 기능을 제공한다. 응용 프로그램이 플러그인을 제공하는 까닭은 많다. 이를테면, 서드파티 개발자들이 응용 프로그램을 확장하는 기능을 만들게 하거나, 뜻밖의 기능을 지원하거나 응용 프로그램의 크기를 줄이거나, 호환되지 않는 소프트웨어 라이선스 문제로 인해 소스 코드를 응용 프로그램에서 분리하는 것을 들 수 있다.
-위키백과 출처

대표적 예시 : 크롬 브라우저의 확장 프로그램, VSCode 확장 프로그램

미들웨어

컴퓨터 제작 회사가 사용자의 특정한 요구대로 만들어 제공하는 프로그램으로, 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어이다. 응용 소프트웨어가 운영 체제로부터 제공받는 서비스 이외에 추가적으로 이용할 수 있는 서비스를 제공하는 컴퓨터 소프트웨어이다. "소프트웨어 글루"(software glue)로 이야기된다.[1] 응용 소프트웨어는 유연하고 확장, 축소가 편리하여야 하며 이러한 장점을 충족하기에 개발자의 다른 기종 간 플랫폼을 다시 구축할 필요가 없어야 한다. 이를테면 데이터베이스 시스템, 전자 통신 소프트웨어, 메시지 및 쿼리 처리 소프트웨어를 들 수 있다.
-위키백과 출처

대표적 예시 : 노드's EXPRESS

컴포넌트

컴포넌트 기반 개발(component-based development, CBD)은 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발방법론이다. 기업들은 쇼핑바구니, 사용자 인증, 검색엔진, 카탈로그 등 상업적으로 이용 가능한 컴포넌트를 결합하여 그들의 전자상거래 응용 프로그램을 개발하는 컴포넌트 기반 개발을 사용한다. [1]
-위키백과 출처

대표적 예시 : 리액트

이러한 소프트웨어 공학은 어떻게 안정적으로 변화를 할 것인가에 대한 목표로 부터 시작되었다. 즉, 바뀌지 않아도 될 로직은 바뀌지 않고 아니, 바꿀수 없게 만들고 바뀌어야 하는 로직을 사이드에서 추가하고 가공하여 하나의 최종 결과물을 만들어 내자는 것이 위 3개의 아키텍쳐의 목표라고 할 수 있다.
이러한 프로세스를 크게 bundling process라고도 불리운다.

bundling process : 앵겔프로그램을 받아서 하나의 파일을 만들어내는 과정을 말한다.

대표적 번들러
webpack

webpack은 플러그인이라는 아키텍쳐를 가지고 있음.

webpack 설정을 보면 아래와 같다

// webpack과 babel settings
// yarn add init -y
// webpack-cli
// webpack-dev-server, babel-loader, @babel/core , @babel/preset-env, @babel/preset-react, html-webpack-plugin
// mkdir webpack.config.js
// webpack은 exports를 사용해서 만들어줘야한다.

// -> webpack이 하는일 entry의 자바스크립트를 읽어서 어떤 변환과정을 거쳐 output한다.
// 변환 과정이 어떤 일을 할지는 webpack이 아닌 다른 프로그램들이 어떤 변환과정을 거쳐 webpack의 출력으로 전송한다.
// 이것이 bundling 프로세스 앵겔프로그램을 받아서 하나의 파일을 만들어내는 과정을 말한다.
// 하나의 파일을 만들때 또하나의 처리과정이 필요할 수도 있다 그 일을 하는 것을 webpack에서는 plugin이라 부른다.
// 과정 : 1. entry에 있는 자바스크립트 파일에서 입력값을 받고
//        2. module의 소프트웨어들한테 그 입력값을 넘겨줌
//        3. 모듈에서 특정 파일을 처리함 transpile을 해줌
//        4. 플러그인 한테 넘기고 플러그인처리후
//        5. output로 보냄

// html-webpack-plugin : html파일을 받아서 최종적인 output 파일을 템플릿화 또는 부가적인 처리를 가능하게 해주는 패키지
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 다른 OS에서 같은 파일 위치를 찾아주는 노드에서 제공해주는 path __dirname: 현재 디렉토리라는 의미
const path = require("path");

module.exports = {
  // webpack이 최종적으로 서비스할 용도의 파일인가 아닌가 스위칭하는 옵션
  mode: "development",
  // 어떤 자바스크립트에서 시작?
  entry: "./app.js",
  // 출력 정보
  output: {
    // 어느 디렉토리 명을 쓸꺼야 주로 distribution인 dist를 많이 사용
    path: path.resolve(__dirname, "dist"),
    // 어떤 파일 이름을 쓸꺼야
    filename: "bundle.js",
  },
  devServer: {
    compress: true,
    port: 9999,
  },
  module: {
    // webpack이 정한 규칙
    // 로더들을 지정하는 부분이다.
    rules: [
      {
        // 어떤 로더 이름인지 적어준다.
        use: {
          // 모든 파일들을 바벨로더 처리하지 않는 파일들을 제거해줘야함.=> test, exclude
          test: /\.js$/, //true 인것만
          exclude: /node_modules/, // false 인것만
          loader: "babel-loader",
          options: {
            // 미리 설치한 바벨 플러그인을 설정해주면 된다.
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  //
  plugins: [
    // 스펙은 인스턴스를 만들어줘야함. => new  객체 사용
    new HtmlWebpackPlugin({
      title: "2.3 setup babel & webpack",
      template: "index.html",
    }),
  ],
};

여기서 Loader란 자바스크립트와 JSON파일이 아닌 다른 자원을 빌드 할 수 있도록 도와주는 속성이다.

Babel은 traspiler로 특정언어로 작성된 코드를 비슷한 다른 언어로 변화시켜주는 역할을 한다. 예로 ES6 문법으로 작성된 코드를 ES5문법으로 변화 시키는 과정을 해주기 위해 Babel을 추가한다
Babel또한 플러그인 구조이다.