목차
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
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"),
},
};
- Babel의 기본구성
- webpack
- https://velog.io/@cjh951114/%EC%A7%81%EB%AC%B4-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8-02.-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%9F%AC%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94
- https://velog.io/@cjh951114/%EC%A7%81%EB%AC%B4-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8-02.-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%9F%AC%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94
- https://goo-gy.github.io/2021-12-31-webpack-react
'블록체인_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 |