파일의 분리와 이식
이전에 코드의 중복, 무수하게 늘어나는 코드의 관리 때문에 웹팩을 사용한다고 했다. 만약 클래스를 통해 코드를 분리하면 아래와 같이 사용할 수 있다.
WordRelay.jsx 파일로 코드 분리
const React = require('react');
const {Component} = React;
class WordRelay extends Component{
state = {
};
render(){
}
}
module.exports = WordRelay;
// 이처럼 써줌으로써 외부에 사용 가능하다. const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require(./WordRelay);
// 이와 같이 방금 작성한 jsx파일을 불러준다. ()안은 상대경로
ReactDOM.render(<WordRelay/>, document.querySelector('#root'));이처럼 모듈화해서 사용해준다.
webpack.config를 사용한 모듈화
이후 웹팩을 사용해서 jsx파일을 하나의 파일로 만들어주면 된다.
이는 webpack.config.js 파일 안에 작성해준다.
const path = require('path');
// node의 경로 설정을 돕는 도구.
module.exports = {
name: 'wordrelay-setting', // 설정의 이름
mode : 'development', // 개발용, 만약 실서비스용이면 : 'production'
devtool : 'eval', // 빠르게 하겠다는 의미
entry : {
app: ['./client.jsx', './wordRelay.jsx'],
}, // 입력 부분
output : {
path : path.join(__dirname, 'dist'), // 현재 폴더 안의 dist 폴더를 말한다.
filename : 'app.js'
}, // 출력 부분
};
webpack 실행
console에서 웹팩을 실행하기 위해서는 명령어 등록을 해주거나 package.json파일을 수정해야 한다. node을 시작하면 생성되는 package.json 파일 내부는 아래처럼 설정 정보들이 적혀있다.
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"name": "react_ws",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {},여기에 웹팩을 사용하기 위해 추가해준다.
"scripts" : {
"dev" : "webpack"
}
이렇게 설정 후에 콘솔에 webpack을 빌드하면 app.js 파일이 생성된다. 이전에 이 js파일을 이식해둔 html 코드를 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>웹팩을 통해서 jsx 파일을 합쳐 app.js를 만들었지만 실행해보면 오류가 나고 제대로 실행이 되지 않는다.
이전에 작성한 jsx의 아래 부분에서 문제가 생긴다.
ReactDOM.render(<WordRelay/>, document.querySelector('#root'));webpack에도 babel을 사용해야하고, babel에서 webpack 사용을 위한 설정을 따로 해주어야 한다.
node를 통해 babel을 설치해준다.
- npm i -D @babel/core
- npm i -D @babel/preset-env
- npm i -D @babel/preset-react
- npm i -D @babel-loader
바벨 코어와 바벨 최신 문법을 사용하는 브라우저에 맞는 문법으로 변환해주는 preset-env, jsx를 사용할 수 있는 preset-react, babel과 webpack을 연결해주는 babel-loader까지 설치해준다.
이후 webpack.config.js에 설치한 babel을 사용하기 위한 module파트를 추가해준다.
module.exports = {
name: 'wordrelay-setting', // 설정의 이름
mode : 'development', // 개발용, 만약 실서비스용이면 : 'production'
devtool : 'eval', // 빠르게 하겠다는 의미
resolve : {
extensions : ['.js', '.jsx'], // 자동으로 js와 jsx 파일을 찾아서 연결해준다.
},
entry : {
app: ['./client'],
}, // 입력 부분
// 사용할 모듈 부분 설정 추가
module : {
rules : [{
test: /\.jsx?/,
loader : 'babel-loader',
options : {
presets: ['@babel/preset-env','@babel/preset-react']
}
}]
}, // 모듈 입력
output : {
path : path.join(__dirname, 'dist'), // 현재 폴더 안의 dist 폴더를 말한다.
filename : 'app.js'
}, // 출력 부분
};이렇게 되면 오류가 없이 webpack 빌드를 하게 된다
최종 정리
설정을 완료한다면 아래의 jsx와
const React = require('react');
const {Component} = React;
class WordRelay extends Component{
state = {
text : 'Hello, webpack',
};
render(){
return <h1>{this.state.text}</h1>;
}
}
module.exports = WordRelay; 아래의 jsx를 합쳐서
const React = require('react');
const ReactDom = require('react-dom/client');
const WordRelay = require('./wordRelay');
ReactDom.createRoot(document.querySelector('#root')).render(<WordRelay/>);app.js 파일을 생성하고 html에서 그 합쳐지 app.js를 통해 페이지가 출력된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>