* 웹팩
- 실제 개발시에 중복도 없애주고, console.log 같은것도 없앨 수 있음.
- 수만개의 컴포넌트들을 합쳐서 한 파일로 만들어준다
- node를 알아야함(node = javascript 실행기)
* 프로젝트 생성
1. 폴더 생성 후, 터미널에서 생성한 폴더로 들어가기
2. init하기
npm init- package name 정하고, author 에 이름 적고, license 에는 MIT 라고 적음. (MIT가 뭘까) >>> 상업적으로 수정/배포 해도되지만 피해는 사용자가 감수하는 라이센스래
3. react-dom, cli 설치
npm i -D react react-dom
npm i -D webpack webpack-cli- 설치하면 package.json에 출력됨.
- -D 는 개발용이라는 뜻임.(실제 서비스할 때에는 웹팩이 필요 없다)
4. 바벨설치
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader- @babel/core : 바벨의 기본적인것들
- @babel/preset-env : 우리 브라우저에 맞게 알아서 최신문법을 엣날 문법으로 바꿔줌
- @babel/preset-react : jsx 같은 것 들 지원
- @babel-loader : 바벨과 웹팩을 연결해줌
5. 자동빌드
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin
npm i -D webpack-dev-server- @pmmmwh... : 자동리프레쉬 플러그인
- webpack-dev-server : 개발용 서버를 주렴. 하는 명령어
- package.json 의 "script" 영역을 "dev":"webpack serve --env development" 로 변경
"scripts": {
"dev": "webpack serve --env development"
},
6. webpack.config.js 추가
**설정 내용 작성해야함
7. client.jsx, index.html, 실행시킬 000.jsx 파일 추가
- client.jsx
// npm에서 설치한 애들 불러오는 것!
const React = require('react');
// const ReactDom = require('react-dom');
const ReactDom = require('react-dom/client'); // new version 용
// 같은폴더내에서 쪼개놓은 아이 불러오는 것
const WordRelay = require('./WordRelay_hooks');
const rootNode = document.querySelector('#root');
// ReactDom.render(<WordRelay />, document.querySelector('#root'));
ReactDom.createRoot(rootNode).render(// new version 용
<WordRelay/>
)
- index.html
<html>
<head>
<meta charset="UTF-8"/>
<title> 끝말잇기☆★☆ </title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>
- wordRelay_hooks.jsx
// npm에서 설치한 애들 불러오는 것!
const React = require('react');
const { useState, useRef } = React;
const WordRelay = () => {
const [word, setWord] = useState('구름');
const [value, setValue] = useState('');
const [result, setResult] = useState('');
const inputRef = useRef(null);
const onSubmitForm = (e) => {
e.preventDefault();
if(word[word.length - 1] === value[0]) {
setResult('딩동댕');
setWord(value);
setValue('');
inputRef.current.focus();
}else{
setResult('땡');
setValue('');
inputRef.current.focus();
}
}
const onChangeInput = (e) => {
setValue(e.currentTarget.value);
// currentTarget : 이벤트 생성 위치
// target : 이벤트 발생 위치
};
return (
<>
<div>{ word }</div>
<form onSubmit= { onSubmitForm }>
<label htmlFor="wordInput">글자를 입력하세요</label>
<input id="wordInput" className="wordInput" ref= { inputRef } value= { value } onChange= { onChangeInput }/>
{/* value 와 onChange 세트로 넣을거 아니면 defaultValue 를 사용해야한다. */}
<button>입력!!!!!!!!!!!!!!</button>
</form>
<div>{ result }</div>
</>
)
}
module.exports = WordRelay;// 이 줄을 추가해야 client.jsx 에서 불러올 수 있다.'React' 카테고리의 다른 글
| error)Uncaught Error: Extension context invalidated. (0) | 2022.06.03 |
|---|---|
| error ) Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. (0) | 2022.06.01 |
| React webpack.config.js 작성 (0) | 2022.06.01 |
| React - require / import 차이 (0) | 2022.06.01 |
| 시작 > React 사용이유 / setState 주의점 (0) | 2022.06.01 |