이전 포스팅에서는 웹팩에 바벨을 적용해보았습니다.
그리고 바벨이 왜 중요한지에 대한 이유도 알아보았고요.
바벨이 필요한 이유는 자바스크립트의 버전이 점점 올라가면서
다양한 함수들을 구현하여 코드를 더 간편하게 작성할 수 있게 되었습니다.
하지만 브라우저 간에 호환이 안 되는 문제점이 발생하면서
바벨의 중요성은 더욱 부각되었죠
더 상세한 이야기가 궁금하시다면 아래의 이전 포스팅을 보시면 됩니다.
2022.08.11 - [IT_Web/Webpack] - 웹팩 바벨 설치 및 활용 webpack에서 babel이 필요한 이유는?
웹팩 바벨 설치 및 활용 webpack에서 babel이 필요한 이유는?
이전 포스팅에서는 HTML, Javascript, css 파일을 웹팩에서 배포 시 압축하는 방법을 알아보았습니다 혹시 못보신분이 계시다면 아래의 링크를 통해 보실 수 있습니다 2022.08.02 - [IT_Web/Webpack] - 웹팩 CSS
tantangerine.tistory.com
이전 포스팅부터 따라오셨다면
기존 코드들이 있으실 겁니다
그 코드를 리액트로 만들어보겠습니다
리액트로 바벨을 적용해야 하기 때문에 리액트 관련 바벨을 추가하며,
리액트 관련 라이브러리를 추가하겠습니다
npm i --save-dev @babel/preset-react react react-dom
.babelrc 파일에
@babel/preset-react를 코드 추가하여 줍니다.
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
web.common.js 파일에서
jsx문법을 추가해 주시면 됩니다.
web.common.js
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{......},
{......},
{
test: /\.(js|jsx)$/, // 추가
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
그리고 이제 기존에 html 파일에
React로 변경된 파일들을 적용해야 합니다
우선 app.js를 만들어서 index.js와 html 파일에 적용을 해줍니다
import React from 'react';
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<h1>React Title</h1>
</div>
);
};
export default App;
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : false;
위의 파일을 만들어서 index.js에
컴포넌트로 전달합니다
import { btnChange } from "./app/btn";
import { changeColor } from "./app/color";
import "./css/main.css";
import App from "./js/App"; // 추가
btnChange.addEventListener("click", function() {
changeColor("pink");
})
html 파일에도 코드를 추가하여줍니다
이렇게 하면 리액트가 추가됩니다
그다음은 app.js에서 리액트 라이브러리를 추가하여 코드를 작성하여
리액트 관련 개발을 하면 되겠습니다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 class="card-title">Card Title</h1>
<button class="btn-change">버튼 변경</button>
<img src="./assets/funnelback.png">
<div id="app"></div> /* 코드 추가 */
</body>
</html>
오늘은 정말 간단한 시간을 가졌습니다
바벨 적용도 그냥 한 줄의 라이브러리 설치와
한 개의 파일만 만들면 간단하게 적용이 되며 설치가 됩니다
오늘은 이렇게 설치가 간단하게 된다는 걸 알면 조금 허무하긴 하네요
아무튼 그래도 이런 방법을 아는 것도 중요한 공부라고 생각합니다
그럼 다음 포스팅도 기대해주시고
대모험이 끝나는 그날까지 파이팅합시다!!
'IT_Web > Webpack' 카테고리의 다른 글
| 웹팩 바벨 설치 및 활용 webpack에서 babel이 필요한 이유는? (0) | 2022.08.11 |
|---|---|
| 웹팩 CSS와 html 및 webpack 활용해서 JS파일 압축하기 (0) | 2022.08.02 |
| 웹팩 빌드시 파일자동 삭제 및 webpack build시 CSS파일 생성 (0) | 2022.08.01 |
| 웹팩(Webpack) - 개발, 운영, 공통 파일 분리하여 관리하는 Webpack-merge 설치 및 활용 (0) | 2022.07.28 |
| 웹팩 실시간 코드 반영 및 Webpack file-loader 이미지 파일 적용하기 (0) | 2022.07.27 |