webpack을 사용하는 이유
여러 컴포넌트를 모아서 한방에 합쳐서 하나의 js파일로 만들어 준다.
합치면서 babel도 적용할 수 있고, console.log 같은 것도 모두 빼버릴 수 있는 기능을 제공한다.
webpack을 하려면 node를 알아야한다.
node는 js 실행기 그 이상 그 이하도 아니다. (백엔드 아님..)
react할 때 node를 알아야 한다. 라는것이 서버 백엔드를 알아야 한다는 것이 아니라는 것이다. webpack을 돌리기 위한 그 js실행기를 알아야 한다는 뜻이다.
1. node를 설치하고
2. (터미널로 강의 폴더로 이동 후) npm init
3. package.json이 생성된다.
4. npm i react react-dom
5. npm i -D webpack webpack-cli
(-D는 개발용으로만 사용한다는 의미이다. 실제 서비스 할 때는 webpack이 필요 없다고 한다.)
6. package.json에 우리가 설치한 package들이 잘 기록되어있는지 확인
(개발용 devDependencies, 실제 서비스 dependencies)
7. 강의 폴더에 webpack.config.js 생성 및 아래와 같이 작성
module.exports = {
}8. 강의 폴더에 client.jsx 생성 및 아래와 같이 작성
const React = require('react');
const ReactDom = require('react-dom');
ReactDom.render(<WorldRelay/>, document.querySelector('#root'));9. 강의 폴더에 index.html 생성 및 아래와 같이 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>10. 강의 폴더에 WorldRelay.jsx 파일 생성 및 작성
//필요로 하는 패키지나 라이브러리 불러오기
const React = require('react');
const {Component} = React;
class WordRelay extends Component{
state={
}
render() {
return (
<div>
</div>
);
}
}
//쪼갠 파일에서 쓰는 컴포넌트를 밖에서도 사용할 수 있게 해주는 것. (이것이 노드의 모듈 시스템)
module.exports = WordRelay;여기서 node module 시스템 처음 봤음. export default ~ 이거랑 다른가. 아무튼 저렇게 module.exports를 해줘야 밖에서 사용할 수 있다고 함.
실제로 이제 client.jsx파일을 수정해줘야한다.
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay'); //module.export를 했기 때문에 require로 가져올 수 있다.
ReactDom.render(<WordRelay/>, document.querySelector('#root'));
근데 여기서 문제점이 있는데, 위에서 만들었던 index.html에서는 app.js 한개만 사용해야한다. 그게 아니면 기존 방식 처럼 <script src=~></script> <script src=~></script> <script src=~></script> 이렇게 여러 <script>태그를 사용해야하는데 그것을 안하려고 webpack을 사용하는 것이다.
11. webpack.config.js 에 아래의 내용 추가
const path = require('path'); //node에 기본적으로 제공해주는 path를 쉽게 조작하기 위한 라이브러리
module.exports = {
name: 'word_relay-setting', //어떤 것을 위한 웹팩 설정인지
mode: 'development', //실서비스에서는 production
devtool: 'eval', //빠르게(개발시에만), 'hidden-source-map' //실서버 배포시에는 저거쓰면됨.
resolve: {
extensions: ['.js', '.jsx'] //확장자 적어놓으면 xxx.js, xxx.jsx 알아서 찾아서 빌드한다.
},
//여기서 부터가 제일 중요
//entry : 입력,
//output: 출력
entry: {
app:['./client'] // './WordRelay.jsx' 는 이미 client.jsx에서 불러오고 있기 때문에 굳이 써주지 않아도 된다.
},
output: {
//path.join : 파라미터로 전달된 경로를 합쳐준다.
//__dirname -> 현재 경로 webpack.config.js가 있는 곳(lecture)
path: path.join(__dirname, 'dist'), //C:\Users\iLovePC\Desktop\codingapple\zerocho-react-webgame\lecture 에 dist를 더해준다.
filename: "app.js"
}
}
'코딩이야기 > 인터넷 강의' 카테고리의 다른 글
| section1. 2-7. @babel/preset-env와 plugins (1) | 2024.05.17 |
|---|---|
| section1. 2-5. 웹팩으로 빌드하기 (0) | 2024.05.15 |
| section1. 2-2. class와 hooks 비교하기 (0) | 2024.05.13 |
| section1. 2-1. React Hooks 사용하기 (0) | 2024.05.13 |
| section0. 11-ref (0) | 2024.05.13 |