webpack을 사용하는 이유
수많은 자바스크립트 파일(컴포넌트)을 합쳐서 한개의 자바스크립트 파일로 만들어 관리하기 위함입니다.
node 설치
자바스크립트 실행 도구
webpack을 사용하기 위해서는 사전에 node가 설치 되어있어야 합니다.(npm 자동 설치)
webpack 설정
1. package.json 파일 생성
package.json 파일에 개발에 필요한 모든 패키지들이
dependencies, devDependencies(-D, 개발환경에서만 사용되는 라이브러리)에 포함됩니다.
npm init
2. react, react-dom 설치
· react: 리액트 라이브러리
· react-dom: brower, dom 관리
· node_modules 폴더 생성을 위해 설치가 필요합니다.
npm i react react-dom
3. webpack, webpack cli 설치
webpack
· 리액트 프로젝트의 모든 자바스크립트 파일을 하나의 컴파일된 자바스크립트 파일로 만들어 줍니다.
· webpack.config.js로 컨트롤 됩니다.
webpack-cli
· build 스크립트를 통해 webpack 커맨드를 사용합니다.
npm i -D webpack webpack-cli
4. babel 설치
jsx 문법을 처리하기 위해 필요합니다.
· babel/core: 바벨의 기본적인 요소가 들어있습니다.
· babel/preset-env: 사용자의 브라우저에 맞게 설정되어 es6 -> es5 문법으로 바꿔줍니다.
· babel/preset-react: jsx -> javascript
· babel-loader: babel과 webpack을 연결해줍니다.
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
추가 설치 @babel/plugin-proposal-class-properties
state = { } 문법 사용하기 위해 필요합니다.
npm i -D @babel/plugin-proposal-class-properties
5. 핫 리로딩 개발용 서버 설치
핫리로딩
실시간 미리보기 live server 기능을 하여 npm run dev로 매번 설치하여 미리보기할 필요가 없습니다.
npm i react-refresh @pmmm/react-refresh-webpack-plugin -D
webpack dev server
개발용 서버로서 빌드한 결과물 publicPath에 있는 특정한 폴더로 저장합니다.
npm i -D webpack-dev-server
6. 파일 기본 설정
webpack.config.js 파일 생성
const path = require('path'); //path 불러와서 아래 output에서 사용
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
name: 'NumberBaseball',
mode: 'development', //배포할때 production
devtool: 'eval', //빠르게 실행
resolve: {
extensions: ['.js', '.jsx'] //확장자
},
entry: { //입력
app: ['./client'], //배열형식으로 여러개 파일 설정 가능
},
module: {
rules: [{ //적용할 규칙들
test: /\.jsx?/, //적용할 파일: js, jsx 파일
loader: 'babel-loader',
options: { //babel 옵션
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties', 'react-refresh/babel'],
}
}],
},
plugins: [
new RefreshWebpackPlugin()
],
output: { //출력
path: path.join(__dirname, 'dist'), //dist 폴더 안의 app.js로 만들어줌, __dirname(현재 폴더)
filename: 'app.js',
publicPath: '/dist/',
},
devServer: {
publicPath: '/dist/',
hot: true,
},
};
path
resolve는 /를 절대경로(루트 폴더)로 인식하고, join은 무시합니다.
· path.resolve('a', '/', 'bc) // 결과: /bc
· path.join('a', '/', 'bc) // 결과: ./a/bc
client.jsx
import React from 'react';
import ReactDom from 'react-dom';
import NumberBaseball from './NumberBaseball';
ReactDom.render(<NumberBaseball />, document.querySelector('#root'));
index.html
<!DOCTYPE html>
<html lang="ko">
<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">
<title>숫자야구</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>
로컬 서버 띄울때 명령어
npm run dev
'💻CODING > react. vue' 카테고리의 다른 글
| [react] 리액트 컴포넌트 props로 데이터 전달 (0) | 2021.03.17 |
|---|---|
| [react] react의 반복문 map, 컴포넌트 사용법(ft. props) (0) | 2021.03.17 |
| [react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) (0) | 2021.03.14 |
| [vue] vue.js props / emit 사용방법 (0) | 2021.02.03 |
| [vue] vue.js 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.7) (0) | 2021.02.01 |
댓글