리액트 개발환경 세팅
초기 세팅 디렉토리 이동
- npm init
명령을 치면 package.json이 생김
해당 디렉토리를 workspace로 만드는 작업임
workspace를 만들엇으니 필요한 패키지들을 설치해보자
웹팩 설치
- npm install react react-dom
- npm install -D webpack webpack-cli
- 웹팩 출력 디렉토리인 dist 생성
- webpack.config.js 파일 생성 - webpack설정 파일임
module.exports = {
};바벨 설치
- npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-properties
프로젝트 구조 잡기
- index.html파일 생성 - root 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파일 생성 - 최초 렌더링을 위한 파일
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay'); //불러올 컴포넌트
ReactDom.render(<WordRelay />, document.getElementById('root')); //렌더링- WordRelay.jsx 생성 - 첫번째 컴포넌트 생성
const React = require('react');
const ReactDom = require('react-dom');
class WordRelay extends React.Component {
state = {
text: 'Hello, Webpack',
};
render() {
return <h1>{this.state.text}</h1>;
}
}
module.exports = WordRelay;이제 렌더링할 준비가 되었으니 웹팩을 이용하여 압축 후 출력해보자
- webpack.config.js 수정
const path = require('path');
module.exports = {
name : 'wordrelay-setting', //웹팩 이름
mode : 'development', //실서비스는 production
devtool : 'eval', //실서비스는 hidden-source-map
resolve : { //확장자를 생략하기 위한 설정
extensions : ['.js', '.jsx'] //여기에 확장자를 적어줌
},
module : { //압축시 적용할 모듈 설정
rules : [ //rules는 여러개의 규칙을 적용할 수 있다. 따라서 배열형태임
{
test: /\.jsx?/, //js와 jsx파일에
loader: 'babel-loader', //babel-loader을 적용
options: { //option은
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
},
],
},
entry : {
app : ['./client'] //client.jsx에서 불러오는 모듈은 안적어줘도 자동으로 같이 패킹함
}, //입력 파일 설정
output : {
path : path.join(__dirname,'dist'), //현재디렉토리 + dist
filename : 'app.js'
}, //출력 파일 설정
};이제 웹팩으로 압축을 해보자
- npx webpack
위 명령어 실행시 압축된 파일 목록, 출력파일 등 메시지가 콘솔에 뜸
index.html을 서비스하여 결과를 확인해보자
국물을 달라