(리액트 기본 설정 방법)
npm init을 하면 package.json파일이 생성된다.
npm initReact 개발에 필요한 모든 패키지들을 package.json파일에 넣어준다.
{
"name": "lecture",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "jay",
"license": "MIT"
}터미널에서 리액트와 리액트 돔이 필요 설치해준다.
npm i react react-dom리액트 개발할 때 필요한 웹펙을 설치 해준다.(- 주의, -D는 개발에서 밖에 안쓰인다는 의미이다.)
npm i -D webpack webpack-cli작업하고 있는 폴더안에 webpack.config.js 파일을 생성해준다. 그리고 아래코드 넣어준다.
module.exports = {
};
client.jsx 파일 만들어주고 아래 코드 넣어준다.
const React = require('react');
const ReactDom = require('react-dom');
React.render(<GuGuDan />)
index.html파일을 아래와 같이 해준다.
<html>
<head>
<meta charset="UTF-8" />
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>
client.jsx에 아래와 같이 코드추가
그런데 만약 class가 2만개 3만개 정도되면??.. 감당하지 못한다.
즉 따른 파일로 불리를 해준다.
const React = require('react');
const ReactDom = require('react-dom');
class WordRelay extends React.Component {
state= {
};
render() {
}
}
React.render(<WordRelay />, document.querySelector('#root'));
WordRelay.jsx라는 파일을 따로 만들어 주고 코드를 넣어준다.
// WordRelay.jsx
const React = require('react');
class WordRelay extends React.Component {
state= {
};
render() {
}
}
{ Component }를 넣어주어서 class 안에 코드를 줄여줄 수 있다.
그리고 exports를 넣어준다. 즉 파일을 둘로 쪼갤 때는 const 부분과 module.exports 부분을 추가로 넣어줘야 한다.
const React = require('react');
const { component } = React;
class WordRelay extends Component {
state = {
};
render() {
}
}
module.exports = WordRelay;
module.exports 부분을 써줬으므로 client.jsx 파일에다가 모듈을 불러줄 수 있다. 매우 효율적이다.
// client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
React.render(<WordRelay />, document.querySelector('#root'));
webpack.config.js에서 코드를 넣어준다. (entry부분 매우 중요)
노드에서 경로 조작하도록 path부분을 준다. (dirname은 현재폴더)
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스: production
devtool: 'eval',
entry: {
}, // 입력
output: {
path: path.join(__dirname, 'dist'),
}, // 출력
};아래와 같이 entry부분에 코드 추가.
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스: production
devtool: 'eval',
entry: {
app: ['./client.jsx', 'WordRelay.jsx'],
}, // 입력
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}, // 출력
};
그런데 이미 client.jsx에서 WordRealy.jsx를 불러와 주므로 WordRelay.jsx는 적어줄 필요가 없다.
// client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
React.render(<WordRelay />, document.querySelector('#root'));// webpack.config.js
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스: production
devtool: 'eval',
entry: {
app: ['./client.jsx'],
}, // 입력
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}, // 출력
};
확장자가 많아질 수 도 있으니 webpack.config.js에 resolve를 추가
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스: production
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./client'],
}, // 입력
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}, // 출력
};
<출처 조현영: 웹 게임을 만들며 배우는 React>
https://www.inflearn.com/course/web-game-react/dashboard
[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의
웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다., 8개의 간단한 웹게임을 만들어보며 배우는 리액트 강좌입니다.React Hooks에
www.inflearn.com
'React > ReactBasic(ZeroCho)' 카테고리의 다른 글
| 끝말잇기 Class 만들기 (0) | 2021.09.08 |
|---|---|
| @babel/preset-env와 plugins (0) | 2021.09.08 |
| 예제코드 웹펙으로 빌드(구구단) (0) | 2021.09.08 |
| 웹펙으로 빌드하기 (0) | 2021.09.08 |
| React Component (0) | 2021.09.04 |