'최소기능'으로 리액트 초기설정하기
리액트를 시작하기 위해서는 총 4가지가 필요하다
1. react
2. react-dom
3. babel
4. webpack
$ npm install react react-dom
$ npm install -D webpack webpack-cli
$ mkdir dist src
webpack.config.js, index.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
src디렉토리 안에 index.jsx 생성 -> 리액트 문법을 위한 파일
index.jsx에 hello world을 입력해서 상태 체크하기
const React = require('react')
const ReactDOM = require('react-dom')
class App extends React.Component{
state={
value:'hello world'
}
render(){
return(
<>{this.state.value}</>
)
}
}
실행하기
const React = require('react')
const ReactDOM = require('react-dom/client')
//react와 reactdom를 바꿔서 하나의 파일로 만들어줌
// const ReactDOM = require('react-dom') 이제는 옛날 문법
class App extends React.Component{
state={
value:'hello world'
}
render(){
return(
<>{this.state.value}</>
)
}
}
// ReactDOM.render(<App />,document.querySelector('#root'))
// 이제는 구버전. 사라질 문법
const container = document.querySelector('#root') //뭐에 붙일거니
const root = ReactDOM.createRoot(container) //얘가 최상단이다!
root.render(<App />) //App컴포넌트를 여기에서 실행
프론트엔드 아니면 만질일 없는 webpack인데 하나하나 만들어보는 이유
환경설정을 하려면 알아는둬야함.
jsx 파일을 나눠서 쓰기
index.jsx
const React = require('react')
const ReactDOM = require('react-dom/client')
const App = require('./App.jsx')
//컴포넌트 App.jsx로 내보냄
const container = document.querySelector('#root')
const root = ReactDOM.createRoot(container)
root.render( <App />)
App.jsx
const React = require('react')
const {Component} = React
// 이 두줄을 소화하는 import 코드
// import React,{Component} from 'react'
// import require의 차이점
// 목적은 같지만 만들어진 시기가 다름.
// require가 노트가 나오면서 먼저 나오고 (그래서 브라우저에서 사용못함. nodejs에만)
// import는 ES6가 나오면서 만들어짐.
class App extends Component{
state = {
value : 'hello world!'
}
render(){
return(
<>
{this.state.value}
</>
)
}
}
module.exports = App
webpack.config.js 작성
const path = require('path')
// 여기는 완전한 node.js 파일이므로
// require만 가능, import는 사용불가.
module.exports = {
//4) 특정한 확장자를 찾을것이다
resolve:{
extensions:['.js','.jsx'] //그냥 확장자 지우면 못찾는다고 에러띄움.
},
//3) 나는 [개발]모드다
mode:'development',
name: 'react-projectk', //(옵션)웹팩 이름
//1) 번들할 파일들
entry: {
app:['./src/index.jsx'] //이 안에서 require한 파일들 모조리 가져옴. server.js같이!
},
//2) 내보낼 파일의 위치와 파일명
output: {
path: path.join(__dirname,'dist'), //dist란 파일에 내보낼거고
filename: 'bundle.js' //이름은 bundle.js다
}
}
package.json 파일에 "webpack":"webpack"를 적어주면 터미널에서 이렇게 쳐도 실행이 됨.
$ npm run webpack
//실행이 안 될 경우,
npm install webpack
//상위 폴더에서 이렇게 글로벌 설치를 하는 방법도 있지만
//모든 폴더를 하나하나 훑으면서 지나가며 설치하는 코드라서 추천X
npm install -g webpack
resolve, module 추가
const path = require('path')
module.exports = {
name: 'react-projectk',
mode: 'development',
resolve:{
extensions:['.js','.jsx'] //그냥 확장자 지우면 못찾는다고 에러띄움.
},
entry:{
app:['./src/index']
},
//5) 추가적으로 내보낼 파일(바벨...), 정규식 사용
module:{
rules:[{
// 확장자가 jsx거나, js(?=마지막 한글자를 뺀다는 표시)일 경우 babel을 넣는다
// 왜냐면 바벨은 react제작자들이 만든게 아님. 가져와서 써야하는 형식 정해줌
test:/\/.jsx?/,
}]
},
output:{
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
라이브러리 추가 설치
//웹팩과 바벨을 연결해주는 라이브러리
$ npm install -D babel-loader
//옛날브라우저에서도 구동할 수 있게 코드를 바꿔주는 바벨
$ npm install -D @babel/preset-env
//jsx를 사용할 수 있는 바벨
$ npm install -D @babel/preset-react한꺼번에 아래 코드로 설치 가능하다
$ npm install -D babel-loader @babel/preset-env @babel/preset-react
module 객체 안에 다음 코드를 추가해서 설치한 라이브러리를 가져오면 된다.
여기까지했으면 babel세팅까지 끝낸거임.
//5) 추가적으로 내보낼 파일(바벨...), 정규식 사용
module:{
rules:[{
// 확장자가 jsx거나, js(?=마지막 한글자를 뺀다는 표시)일 경우 babel을 넣는다
// 왜냐면 바벨은 react제작자들이 만든게 아님. 가져와서 써야하는 형식 정해줌
test:/\.jsx?/,
loader:'babel-loader', //webpack과 babel을 연결해주는 babel 라이브러리
options:{
presets:[
'@babel/preset-env', //옛날 브라우저에서도 환경에 맞게 실행해주는 애
'@babel/preset-react' //JSX를 사용하기 위해
]
}
}]
},
터미널에서 webpack을 실행하고 dist폴더 안을 보면 번들파일이 생겨있다.
만약 js 파일에 오류가 있어서 사이트가 제대로 구동이 되지 않을경우
1) js를 수정한다
2) webpack을 다시 실행한다
이래야 최종적으로 사용하는 bundle.js이 수정된 정보로 재생성된다.
세부설정
어떤 브라우저에 맞춰 실행을 할 것이냐
https://github.com/browserslist/browserslist
module:{
rules:[{
test:/\.jsx?/,
loader: 'babel-loader',
options:{
presets:[
//세부설정
['@babel/preset-env',{
//어떤 브라우저에 타겟팅을 할 것인가, browserlist
targets:{
//browserslist 검색하면 나오는 깃헙페이지에 상세설명있음
browsers:[
//최근 크롬버젼 2가지에서만 진행하겠다
`last 2 chrome vesrions`,
//한국에서 점유율 5%이상인 브라우저에서만 진행하겠다
`> 5% in KR`
]
},
debug:true,
}],
'@babel/preset-react'
]
}
}]
},
GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a
🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-en...
github.com
수정한 내용을 새로고침해서 반영하는 devserver
어쨌든저쨌든 결론적으로 봤을때 사용할 파일은 1개의 html, 1개의 javascript이다.
그런데 src 폴더 안에서 코드가 수정됨을 감지하면 번들파일을 다시 만들어야한다.
그럼 서버를 또다시 실행해야함.
이런 귀찮은점을 줄여주는 라이브러리다.
devserver는 자동으로 웹서버를 구축해준다
코드를 수정해도 자동적으로 바꿔줘서 사용자가 임의로 새로고침 안 해도 변경사항이 반영된다.
대신 개발할때만 사용!! 배포할때는 적용안된다!!!
$ npm install -D webpack-dev-serverpackage.json에 "dev":"webpack server --env development" 작성
webpack.config.js 안에 다음 코드 작성해주기
여기까지 오면 localhost:3000에서 로드되고, 수정한대로 자동으로 새로고침해서 웹사이트도 수정된다.
module:{...),
...
//6) src폴더가 수정될때 자동으로 새로고침해주는 애
devServer:{
static:{
directory:path.join(__dirname,'public'), //사용할 파일이 있을 폴더
},
compress:true,
port:3000, //실행할 포트값
hot:true, //수정사항 감지시 바로 로드
historyApiFallback:true, //새로고침
}
새로고침 하지 않고 수정내용 반영하기
$ npm install -D @pmmmwh/react-refresh-webpack-plugin
$ npm install -D react-refresh
설치후, webpack.config.js에 다음 코드 작성
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
...
module:{
rules:[{
...
options:{
presets:[],
//7) 바벨에 대한 플러그인 / 설치한 라이브러리 적용
plugins:[
'react-refresh/babel'
]
}
}]
},
//7) 전체에 대한 플러그인 / 설치한 라이브러리 적용
plugins:[
new webpackPlugin(),
],
...여기까지하면 수정된대로 새로고침하지 않아도 변경된다.
'프로그래밍 > react' 카테고리의 다른 글
| [220420] 리액트로 구구단 만들기 (0) | 2022.04.25 |
|---|---|
| [220420] 리액트에서 css 사용하기 (0) | 2022.04.25 |
| [220418] webpack이란? (0) | 2022.04.19 |
| [220415] 빙고게임 완성하기 - 02 (0) | 2022.04.17 |
| [220414] 빙고게임 완성하기 - 01 (0) | 2022.04.17 |
댓글