강의자료: 웹 게임을 만들며 배우는 React
React Hooks 사용하기
- 리액트에서 class보다 hooks를 권유함 (함수형태)
코드가 훨씬 짧아짐. - state를 객체로 묶지 않고 분리하고 함수에 초기값을 설정
class와 hooks 비교하기
- state가 변경되면 함수가 다시 실행됨
- class -> classname으로
for -> htmlfor
웹팩 설치하기
- 스크립트가 많아지면 유지보수가 힘들어짐 그래서 웹팩이 만들어짐
- jsx 파일로 만들어주면 리액트 전용으로 만들어진 것이라고 알릴수 있음
package.json에 패키지들을 넣어주면 된다.
모듈 시스템과 웹팩 설정
- class를 다른 파일에서 불러와서 사용
- 분리할 때 꼭 필요한 코드
📝 WordRelay.jsx
//리액트 가져오기
const React = require('react');
const { Component } = require('react');
// 모듈을 밖에서도 쓸 수 있게 해주는 코드
module.exports = WordRelay;- 📝Client.jsx
//npm에 설치한 react 불러오기
const React = require('react');
const ReactDom = require('react-dom');
//WordRelay 모듈 불러오기
const WordRelay = require('./WordRelay');
ReactDom.render(<WordRelay />, document.querySelector('#root'));html에는 하나의 코드만 불러올 수 있으니까./dist/app.js파일에 다 들어가야함.
<html>
<head>
<meta charset="UTF-8"/>
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>- 웹팩은
webpack.config.js로 다 돌아감
const path = require('path'); //경로 조작하기 위한
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스할려면 production
devtool: 'eval', //빠르게
resolve: {
extensions: ['.js','jsx']
}, //entry에서 확장자 달기 귀찮을 때 쓰는 방법
entry: {
app: ['./client.jsx','WordRelay.jsx'],
},//입력
output: {
path: path.join(__dirname, 'dist'), //dirname은 현재폴더이니까 경로를 쉽고빠르게 조작 가능
filename: 'app.js'
},//출력
};-
웹팩에서
client.jsx를 불러오면client.jsx에서WordRelay.jsx를 불러오니까 webpack에서client.jsx를 불러오면 알아서 둘 다 불러와짐 -
명령어 설정이 안되어있어서 설정해줘야함
package.json에서 설정
"scripts": {
"dev": "webpack"
},그리고 `npm run dev webpack` 터미널에 적어줌- 명령어로 실행
터미널에npx webpack쓰기
webpack이 실행되면 dist 폴더에 app.js 파일 생성
웹팩으로 빌드하기
- babel설치
- module 설정
: entry에 파일을 불러와서 모듈을 적용한 후 output에 빼기 위해
💖웹팩 만들기 정리 (구구단 문제를 웹팩으로)
- 해당 폴더에서
npm init,
name은 폴더명같게
나머지 다 넘기고
author에 이름,
license에 MIT,
yes npm i react react-dom설치npm i -D webpack webpack-cli설치npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react- 폴더에 newfile
webpack.config.js만들고
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'eval',//hidden-source-map
resolve: {
extensions: ['.jsx','.js'],
},
entry: {
app: './client',
},
module:{
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options:{
presets:['@babel/preset-env','@babel/preset-react'],
plugins:[],
},
}],
},
output:{
filename: 'app.js',
path: path.join(__dirname, 'dist'),
},
};package.json파일에"dev": "webpack"추가- newfile생성 :
client.jsx,GuGudan.jsx생성
📝GuGudan.jsx
const React = require('react');
const { useState, useRef } = React;
....//코드 넣기
module.exports = GuGudan;📝client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const GuGudan = require('./GuGudan');
ReactDom.render(<GuGudan />, document.querySelector('#root'));- 터미널
npx webpack입력 후 오류같은거 수정하고 성공하기
dist 파일에 app.js가 생성되었는지 확인 index.html파일 생성 후 코드입력하고 확인
<html>
<head>
<meta charset="UTF-8">
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>@babel/preset-env와 plugins
- plugin들의 모음이 preset
- @babel/preset-env에 설정을 하고 싶다면
presets에 preset을 병렬로 정리한 후 중괄호를 열어 안에 설정을 넣어줌
presets:
[['@babel/preset-env', {
targets: {
browsers: ['list 2 chrome versions'],
},
}],
'@babel/preset-react',
],🔗브라우저스 리스트 주소
사이트 들어가서 추가 옵션 적용해 보기
-
브라우저 지원 옵션을 설정할 수 있음
-
module안에 플러그인 말고도 다른 plugins를 설정할 수 있음
- 엄청 많음....
plugins :[
new webpack.LoaderOptionsPlugins({debug: true}),
],위에서 const webpack = require('webpack'); 불러와야함끝말잇기
- value와 onChange는 세트, 그게아니면 defaultValue
- 코드 써보면서 중요한 것
- 내가 만든 함수는 = () => {}로 표기- ;세미콜론 꼭 넣기
웹팩 데브 서버와 핫 리로딩
- 핫 리로딩 하기위해서
npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D터미널에 입력 - 서버도 필요함
npm i -D webpack-dev-server깔기 package.json에서"dev": "webpack serve --env development",로 변경
4.webpack.config.js파일에
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');입력
module부분에도rules에babel-loaderoptions에서plugins:['react-refresh/bable',]추가
전체plugins에plugins:[new RefreshWebpackPlugin()],추가
devSever: {
devMiddleware: { publicPath:'/dist/'},
static: {directory: path.resolve(__dirname)},
hot:true
}추가
hooks로 전환
- hooks로 전환하면 this 안씀
const { useState, useRef } = React;로 바꿔주기
21.10.28 끝👶
자바 공부 좀 해야겠다,,
