본문 바로가기
블록체인_9기/🩵 React

45강_230703_React(babel, WebPack)

weeji 2023. 7. 3.
728x90

 

목차

045

 

 

 

Babel

Babel의 기본적인 개념은 이전 게시물로 정리를 해놓았으니 해당 주소로 들어가서 확인해보도록 하자!

 

43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기)

React ? React는 사용자 인터페이스를 만들기 위한 라이브러리이다. 위의 React에 대한 정의는 공식적으로 정의된 내용이다. react는 페이스북에서 2011년도 쯤 여러 실력좋은 개발자들이 모여서 만든

oo0ojw.tistory.com

ES6문법인 import와 export도 이전 게시물로 정리해 놓은 내용이 있으니 해당 주소로 들어가서 확인해보도록 하자!

 

44강_230629_React(import/export, 조건부 렌더링, React 라이브러리 다운로드, 토글버튼 구현, 댓글등록 구

import / export require : NodeJS에서 사용되는 CommonJS 키워드이다. import : ES6에서 새롭게 도입된 키워드이다. 두 키워드 모두 다른 파일의 코드를 불러오는 키워드지만, 다른 문법 구조를 가진다. // requir

oo0ojw.tistory.com

 

 

Babel의 속성

🧐 preset

  • babel 플러그인과 플러그인의 집합을 그룹화한 것으로 일련의 변환 옵션을 적용하는데 사용된다.
  • 프리셋은 관련된 플러그인들의 집합으로 구성되어 있으며, 특정한 작업이나 환경에 대한 변환 설정을 포함하고 있다.
    • 예) @babel/preset-env : 최신 JS 문법을 구식 JS 문법으로 변환하는데 사용된다.
    • 예) @babel/preset-react : React의 JSX에서 CommonJS로 변환하는데 사용한다.

🧐 plugins

  • babel 플러그인들을 지정하는데 사용된다.
    • plugin : 특정한 변환 작업을 수행하는 babel의 작은 조각이다. 각각의 plugin은 자체적인 기능을 가지고 있으며, 특정한 변환을 수행하기 위해서 선택적으로 활성화 할 수 있다.
  • 세밀한 제어와 특정 변환 작업의 선택적 적용이 가능하다.

 

'preset' 속성은 특정한 작업이나 환경에 대한 변환 설정을 쉽게 적용할 수 있도록 도와주고, 'plugins' 속성은 개별적인 플러그인들을 직접 지정하여 더 세밀하고 사용자 정의된 변환 설정을 구성할 수 있다.

 

 

 

Babel 기본 사용법

1. Babel 기본 구성을 설치한다.

  • babel/core : 바벨의 최신 버전을 설치한다. 바벨을 실행하기 위해 꼭 설치해야 한다.
    • Javascript 코드를 파싱하고 변환하는 작업을 수행한다.
  • babel/cli : 바벨을 실행하기 위해 설치한다. 터미널 도구를 사용하기 위해 작업을 가능하게 한다.
    • babel/cli를 컴퓨터에 전체적으로 설치가 가능하지만 프로젝트별로 로컬에 설치하는 것이 좋다.
  • babel/preset-env : Babel 프리셋 중 하나이다. 프로젝트 대상 환경에 필요한 변환만을 수행하고, 지원하지 않는 문법이나 기능을 자동으로 변환해준다.
    • 프리셋: 특정 환경에서 필요한 변환설정을 모아둔 것이다.
// 1. package.json 설치
npm init -y

// 2. babel 구성 설치
npm install @babel/core @babel/cli @babel/preset-env

2. Babel 환경 구성

  • .babelrc 파일 생성
    • .babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용한다.
    • rc : Run Commonds, Run Controll 등의 의미가 있다.

3. Babel 실행

  • npx babel [변환할 파일명] --out-file [내보낼 경로]

 

Babel 기본 사용법_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 babel을 사용하기 위한 pakage.json과 babel 구성을 설치한다.

// 1. package.json 설치
npm init -y

// 2. babel 구성 설치
npm install @babel/core @babel/cli @babel/preset-env

 

2. app.js_동작하고자 하는 함수를 입력한다.

  • 배열 arr의 값과 arr2의 값을 가진 배열 arr3를 생성한다.
  • arr3와 test함수의 매개변수로 입력받은 msg의 값을 console에 출력한다.
// 화살표 함수 ES6문법
const test = (msg) => {
  const arr = [1, 2, 3];
  const arr2 = [4, 5, 6];

  // 스프레드 연산자 ES6
  const arr3 = [...arr, ...arr2];
  // 템플릿 리터럴 ES6
  console.log(...arr3, msg);
};

test("문자 고고");

 

3. .babelrc_presets를 이용해서 플러그인을 설정한다.

  • presets: Babel의 변환 옵션을 그룹화한 것이다.
    • 특정 환경이나 스펙에 맞춰 미리 정의된 Babel 플러그인의 집합니다.
    • 각 프리셋은 특정 버전의 Javascript 스펙이나 브라우저 환경에 대한 변환 설정을 제공한다.
  • @babel/preset-env : 최신 Javascript문법을 사용하여 작성된 코드를 대상 환경에 맞는 버전의 Javascript로 변환한다.
{
  // 설정
  "presets": ["@babel/preset-env"] // 자바스크립트 기능 또는 구문을 변환하는 babel 플러그인
}

 

4. 터미널에서 babel을 실행시킨다.

  • babel을 사용하여 app.js 파일을 변환하고, 변환된 코드를 dist/app.js 파일에 출력하도록 한다.
npx babel app.js --out-file dist/app.js

 

5. dist/app.js_babel을 이용해 코드의 버전이 변환된 것을 확인할 수 있다.

  • 위에서 작성한 app.js 파일의 코드에 브라우저 환경에 맞춰 코드가 수정되었다.
"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
// 화살표 함수 ES6문법
var test = function test(msg) {
  var _console;
  var arr = [1, 2, 3];
  var arr2 = [4, 5, 6];

  // 스프레드 연산자 ES6
  var arr3 = [].concat(arr, arr2);
  // 템플릿 리터럴 ES6
  (_console = console).log.apply(_console, _toConsumableArray(arr3).concat([msg]));
};
test("문자 고고");

 

 

Babel 모듈 시스템 변환

@babel/plugin-transform-modules-commonjs

  • Babel의 플러그인으로 ES6 모듈을 CommonJS 형식의 모듈로 변환하는 역할을 한다.
    • CommonJS는 Node.js에서 사용되는 모듈시스템이다.
  • ES6에서의 모듈은 import / export 구문을 사용해서 모듈을 정의하고 내보내고 가져오는 방식을 가진다.
    • 하지만 일부 환경에서는 ES6 모듈을 지원하지 않을 수 있어, 대신 CommonJS 모듈을 사용해야하기 때문에 " @babel/plugin-transform-modules-commonjs" 플러그인을 사용하면 ES6 모듈을 CommonJS 모듈로 변환할 수 있다.

 

Babel 모듈 시스템 변환_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 babel을 사용하기 위한 pakage.json과 babel 구성을 설치한다.

// pakage.json 설치
npm init -y

// babel 구성요소 설치
npm install @babel/core @babel/cli @babel/preset-env

// ES6 -> CommonJS 변환해주는 플러그인 설치
npm install @babel/plugin-transform-modules-commonjs

 

2. server.js_동작하고자 하는 함수를 입력한다.

  • express 모듈을 불러와 서버를 열어준다.
import express from "express";

const app = express();
app.listen(3000, () => {
  console.log("server on~");
});

3. .babelrc_presets를 이용해서 플러그인을 설정한다.

  • plugins : 사용할 플러그인을 설정한다.
{
  // 설정
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

 

4. 터미널에서 babel을 실행시킨다.

  • babel을 사용하여 server.js 파일을 변환하고, 변환된 코드를 dist/server.js 파일에 출력하도록 한다.
npx babel server.js --out-file dist/server.js

 

5. dist/server.js_babel을 이용해 코드의 버전이 변환된 것을 확인할 수 있다.

"use strict";

var _express = _interopRequireDefault(require("express"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// # babel02 만들고
// npm init -y
// npm install @babel/core @babel/cli @babel/preset-env
// npm install @babel/plugin-transform-modules-commonjs

// ES6 문법으로 작성

const app = (0, _express.default)();
app.listen(3000, () => {
  console.log("server on~");
});

// npx babel server.js --out-file dist/server.js

 

 

Babel JSX 문법 컴파일하기

@babel/preset-react

  • Babel의 프리셋 중 하나이다.
  • React에서 사용되는 최신 Javascript 문법과 JSX 문법을 구식 Javascript로 변환할 수 있다.
  • JSX는 브라우저에서 직접 실행되지 않으므로, Babel과 같은 도구를 사용하여 일반 Javascript로 변환해야한다.
  • " @babel/preset-react " 를 사용하면 JSX를 일반 Javascript로 변환할 수 있다.

 

 

Babel JSX 문법 컴파일하기_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 babel을 사용하기 위한 pakage.json과 babel 구성을 설치한다.

// pakage.json 설치
npm init -y

// babel 구성요소 설치
npm install @babel/core @babel/cli @babel/preset-react

 

2. app.js_동작하고자 하는 함수를 입력한다.

class App extends React.Component {
  render() {
    return (
      <ul>
        <li>리스트 01</li>
      </ul>
    );
  }
}

// 루트설정
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);

 

3. .babelrc_presets를 이용해서 플러그인을 설정한다.

{
  // 설정
  "presets": ["@babel/preset-react"]
}

 

4. 터미널에서 babel을 실행시킨다.

  • babel을 사용하여 app.js 파일을 변환하고, 변환된 코드를 dist/app.js 파일에 출력하도록 한다.
npx babel app.js --out-file dist/app.js

 

5. dist/app.js_babel을 이용해 코드의 버전이 변환된 것을 확인할 수 있다.

class App extends React.Component {
  render() {
    return /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\uB9AC\uC2A4\uD2B8 01"));
  }
}

// 루트설정
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render( /*#__PURE__*/React.createElement(App, null));

 

 

 

 

WebPack

  • webpack은 여러 개의 모듈( javascript, css, html, image 등)을 하나의 javascript 파일로 묶어주는 모듈 번들러이다.
  • React를 통해 개발을 하면 기능을 여러 컴포넌트로 분리해서 작업을 진행하게 되는데, webpack은 이 분리된 자원들을 하나의 javascript로 변환해준다.
    • ex) 1.js, 2.js, 3.js를 webpack으로 빌드하면 bundle.js 하나로 묶여서 구성해준다.
  • JSX를 해석해주는 babel을 적용할 수 있고, 코드 최적화 수행, console.log와 같이 실제 서비스에서 필요없는 코드를 자동으로 제거하는 등의 여러 기능을 사용할 수 있다.

💡 모듈 번들러란?

  • 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image등)을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다.

🧐 Module?

  • 프로그램을 구성할 때의 구성요소로, 관련된 데이터나 함수를 하나로 묶은 단위이다.
    • 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위이다.
    • 예) user
      • user.controller
      • user.service
      • user.view

🧐 Module Bundling?

  • 의존성을 가지고 동작하는 모듈 코드를 하나의 파일로 만들어주는 것이다.
  • 웹 애플리케이션을 구성하는 몇 십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라한다.

 

Webpack의 속성

💡 Entry

  • 진입점을 지정한다.
  • 시작점으로 사용할 모듈을 webpack에 알려준다.

💡 Output

  • 변환한 파일의 내보내는 번들링 방법을 결정한다.
  • 생성한 번들링 파일의 위치나 이름을 지정한다.

💡 Loaders

  • 번들링 중에 모듈의 소스 코드에 적용되는 자바스크립트나 css 이미지 파일 등을 처리한다.
  • webpack이 자바스크립트 외의 다른 자원(html, css, image 등)을 변환할 수 있도록 해준다.

💡 Plugins

  • 번들 최적화, html 파일생성, 환경변수 삽입 등의 추가적인 기능을 설정한다.

 

 

Webpack의 기본 사용_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 webpack을 사용하기 위한 pakage.json과 webpack 구성을 설치한다.

  • webpack: webpack을 설치하여 사용할 수 있도록 한다.
  • webpack-cli: webpack 명령어를 사용하기 위한 도구이다. webpack을 터미널에서 사용핧 수 있도록 해준다.
// pakage.json 설치
npm init -y

// webpack 구성 설치
npm install webpack webpack-cli

 

2. pages/home.js & src/index.js_동작하고자 하는 함수를 입력한다.

  • CommonJS와 React를 사용하여 컴포넌트를 렌더링한다.
    •  home.js
      • module.exports를 이용하여 name키에 "문자임" 값이 들어있는 객체를 내보낸다.
    • index.js
      •  home.js에서 내보낸 객체를 받아, React.createElement 함수를 사용하여 div 요소를 생성하고 home.name의 값을 div안에 렌더링한다.

home.js

module.exports = {
  name: "문자임",
};

index.js

const home = require("./pages/home");
console.log(home.name);

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(React.createElement("div", null, home.name));

 

3. webpack.config.js_webpack 파일을 설정한다.

const path = require("path");

// webpack 구성 객체를 만들어서 내보내주자
module.exports = {
    // 진입점 시작점 설정
    entry: "./src/index.js",

    // 번들된 파일의 내보낼 파일 옵션
    output : {
        // 파일 이름 설정
        filename : "bundle.js",
        // 파일의 폴더 설정
        path : path.join(__dirname, "dist"),
    }
}

 

 

Webpack의 loaders속성 사용_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 webpack을 사용하기 위한 pakage.json과 webpack 구성을 설치한다.

  • css-loader : CSS 파일을 웹 팩에서 해석하고 처리하는 역할을 한다.
    • css 파일을 모듈로 간주하여 모듈 시스쳄으로 로드할 수 있게 해준다.
  • style-loader : 웹 팩에서 해석된 css를 동적으로 '<style>' 태그를 삽입하는 역할을 한다.
    • 웹 팩 번들링된 JS 파일에서 스타일을 추출하여 동적으로 DOM에 삽입하여 스타일을 적용할 수 있게 해준다.
// pakage.json 설치
npm init -y

// webpack 구성요소 설치
npm install webpack webpack-cli css-loader style-loader

 

2. src/index.js & src/index.css_동작하고자 하는 함수를 입력한다.

  • index.css에서 설정한 내용을 import로 가져와 적용시킨다.

index.css

* {
    background-color: red;
}

index.js

import "./index.css";
// css 파일 가져옴

console.log("시작");

 

3. webpack.config.js_webpack 파일을 설정한다.

const path = require("path");

// webpack 구성 객체 내보내자
module.exports = {
  // 진입점 시작점
  entry: "./src/index.js",

  // 모듈의 규칙 설정
  module: {
    rules: [
      {
        // test : 파일 확장자와 일치하는 정규식의 키를 생성
        // .css 확장자 파일의 규칙을 설정한다.
        test: /\.css$/,
        // use 확장자에 맞는 파일을 처리할 때 사용할 로더를 지정한다.
        // style-loader, css-loader를 사용할 것이다.
        // CSS 파일을 번들링하자
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // 번들링된 파일 내보내기 속성
  output: {
    // 내보내는 파일의 이름
    filename: "bundle.js",

    // 내보내는 파일의 경로
    path: path.join(__dirname, "dist"),
  },
};

 

 

Webpack의 plugins 속성 사용_예시

#. 폴더의 경로는 다음과 같다.

1. 터미널에서 webpack을 사용하기 위한 pakage.json과 webpack, babel 구성을 설치한다.

💙 webpack

💡 html-webpack-plugin

  • webpack을 사용하여 HTML 파일을 생성하는 도구이다.
  • webpack은 주로 JS의 모듈번들링을 위해 사용하지만 해당 패키지를 추가로 설치하면 HTML 파일을 자동으로 생성하고 번들파일과 연결하는 기능을 제공한다.
  • webpack으로 번들링된 JS파일과 HTML 템플릿 파일에 동적으로 데이터를 삽입해준다.

html-webpack-plugin의 주요 기능

  • HTML 파일 생성: 지정된 HTML 템플릿 파일을 기반으로 최종 HTML 파일을 생성한다.
    • 동적으로 번들링된 JS 파일이 포함된 HTML 파일을 자동으로 생성할 수 있다.
  • 자동 스크립트 삽입: webpack에서 생성된 JS 번들 파일을 자동으로 HTML 파일에 연결한다.
  • 템플릿 기능: HTML 템플릿 파일에 동적 데이터를 삽입할 수 있는 기능을 제공한다.
// pakage.json 설치
npm init -y

// webpack 구성요소 설치
npm install webpack webpack-cli html-webpack-plugin

 

💙 babel

💡 babel-loader

  • webpack과 함께 사용되는 Babel을 통해 JS파일을 변환하는 webpack loader다.
  • babel의 변환작업을 웹 팩의 빌드 과정에서 수행할 수 있도록 도와준다.
    • babel의 변환작업: 최선 JS문법을 구식 JS문법으로 변환해주는 것.

babel-loader의 주요 기능

  • JS 변환: 웹 팩에서 JS 파일을 로드할 때 babel을 사용하여 변환 작업을 수행한다. 따라서, 최신JS 문법을 구형 브라우저에서 이해할 수 있도록 ES5 형식으로 변환한다.
  • babel 구성 적용: babel의 구성 파일인 '.babelrc'나 'babel.config.js'와 같은 설정 파일을 읽어 babel 변환 옵션을 적용한다.
  •  다른 웹 팩 로더와의 통합이 가능: 웹 팩에서 다른 로더들과 함께 동작할 수 있다.
    • 예) CSS 로더, 이미지 로더와 함께 사용하여 웹 팩에서 JS말고도 다른 유형의 파일을 처리할 수 있다.
// babel 구성요소 설치
npm i @babel/preset-env @babel/preset-react
npm i @babel/core babel-loader

 

💙 React

💡 react

  • react 애플리케이션을 개발하기 위해 필요한 패키지이다.

💡 react-dom

  • react 애플리케이션을 웹 브라우저에서 렌더링하기 위한 도구이다.
  • 가상 DOM의 변경사항을 실제 DOM에 적용하는 역할을 담당한다.
// React 설치
npm i react react-dom

 

2. .babelrc_presets를 이용해서 플러그인을 설정한다.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

 

 

3. src/app.js_render에 화면에 그려줄 내용을 작성하여 export로 내보낸다.

  • import React from "react"; : react를 사용할 수 있도록 import 한다.
import React from "react";

// export를 간력화 할 수 있다.
export default class App extends React.Component {
  render() {
    return <div>안녕</div>;
  }
}

 

4. src/index.js_app.js에서 내보낸 내용을 import로 받아 가상DOM을 생성해 render 한다.

import React from "react";
// react v.18부터 "react-dom/client"에서 createRoot를 사용하라고 권장함
import { createRoot } from "react-dom/client";
import App from "./app";

const root = createRoot(document.querySelector("#root"));
root.render(<App />);

 

5. dist/index.html_webpack으로 생성된 html에서 script와 div태그가 적용된 내용을 확인할 수 있다.

  • html-webpack-plugin으로 src폴더의 파일에서 입력한 내용을 바탕으로 html 파일이 생성되었다.
  • app.js에서 입력한 div 태그가 body태그 안에 그려진 것을 확인할 수 있다.
  • index.js에서 입력한 가상dom 생성이 id = "root"요소를 가진 DOM을 가상dom으로 선택한 것을 확인할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script defer src="bundle.js"></script></head>
<body>
    <div id="root"></div>
</body>
</html>

 

6. webpack.config.js_webpack 파일을 설정한다.

// html-webpack-plugin
// 애플리케이션에 포함된 번들을 관리하는 프로세스를 만들어준다.
// 주로 react 같은 애플리케이션을 작성할 때 주로사용한다.
// ex) SPA (싱글 페이지 애플리케이션)
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// webpack 구성 객체 내보내기
module.exports = {
  // 개발모드 설정 (빌드할 때 시간 최적화 단계를 건너뛰고)
  mode: "development",

  // 진입점 시작점
  entry: "./src/index.js",

  // 모듈의 규칙
  module: {
    rules: [
      {
        // test : .js 나 .jsx 확장자를 가진 파일에 대한 규칙을 생성
        test: /\.(js|jsx)$/,
        // node_modules 폴더를 제외하고 파일처리
        // exclude: 제외할 폴더
        exclude: /node_modules/,
        // babel-loader를 이용해서 파일을 번들링한다.
        use: ["babel-loader"],
      },
    ],
  },

  // plugin 설정
  plugins: [
    // HtmlWebpackPlugin을 사용해서 index.html 번들링 폴더에 생성
    new HtmlWebpackPlugin({
      template: "src/index.html",
      filename: "index.html",
    }),
  ],

  // 번들링을 내보낼 속성
  output: {
    // 번들 파일 이름
    filename: "bundle.js",
    // 경로 설정
    path: path.join(__dirname, "dist"),
  },
};

 

 

 

 

 

 

728x90
저작자표시

'블록체인_9기 > 🩵 React' 카테고리의 다른 글

48강_230706_React(Hook 함수(useNavigate, useLocation, useParams, useSearchParams), 상점 사이트 제작 )  (0) 2023.07.06
47강_230705_React(Router, 가위바위보 제작)  (0) 2023.07.05
46강_230704_React(vscode_snippet, React 라이브러리, Hooks)  (0) 2023.07.04
44강_230629_React(import/export, 조건부 렌더링, React 라이브러리 다운로드, 토글버튼 구현, 댓글등록 구현)  (0) 2023.06.29
43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기)  (0) 2023.06.28

'블록체인_9기/🩵 React' 관련글

티스토리툴바