출처 : https://www.youtube.com/watch?v=ydDUm1yPZs0 [Cand Dev]
와 우선 강의 엄청 알짜배기만 초보자들 쉽게 쏚쏚 잘 설명함.. 디박쓰
목소리도 좋음 두번 대박쓰,,
강의의 중점은 webpack, babel가 어떻게 리액트를 보여주는지에 대한 중점을 두고 webpack.config파일에서 필요한 설정들을 하면서 브라우저에 보여주는 과정을 설명해준다. zeroCho 자바스크립트 기본 리액트 강의와 비슷한 맥락으로 알려줌
- npm init
- webpack(dev-server/-cli) 설치 , config설정 (bundle.js 생성)
- react/ react-dom / @babel/core,cli,preset-env,preset-react설치
- .babelrc 설정
- App.js에 reactDom사용해 그려주기
- css-loader, style-loader 설치
- import css
시작해볼까 언능 하고 점심먹을꺼임 배고파아아ㅏㅇㅇㅇ
오늘 맛있는거 먹을꺼임 점심은 칼국수 먹음
npm init -y
우선 npm초기설정을 한다. 나중에 npm에 대해서도 자세히 공부할건데, npm은 Node Package Manager로 플러그인을 관리해주는 node.js의 기본 패키지 관리자이다. npm init은 package.json을 생성하는 명령어이며, -y를 붙이면 기본설정값으로 설정된다.
출처 : https://bogyum-uncle.tistory.com/107 [정리잘된 npm 명령어 목록 ]
디렉토리에 대한 package.json 파일이 생성됨!
npm install webpack webpack-cli webpack-dev-server -D
개발자 모드로 webpack, webpack-cli, webpack-dev-server를 설치한다.
웹팩(webpack)이란?
웹팩은 자바스크립트 기반의 모듈 번들러이다. 웹 어플리케이션 개발에 필요한 다양한 요소들을 하나의 파일로 병합 병합 및 압축해주는 역활을 한다. 주요한 요소로는 Entry, Output, Loaders, Plugins, Mode, Browser Compatibility가 있다.
webpack-cli (명령어 ) , webpack-dev-server (빠른 실시간 리로드 기능을 갖춘 개발용 서버)
출처: 나무위키 , https://webpack.kr/ [webpack 공홈]
리액트에서 웹팩은 src에서 개발한 컴포넌트들을 webpack을 통해 하나의 js로 만들어서 index.html에 적용하는것같음.. 사실 webpack공부를 많이 안해서 나중에 날잡고 다시 공부해야 해잉 ㅜㅜ 오늘 공부내용이 아니니 PASS@@@@
번들링할 디렉토리와 보여질 디렉토리를 만들고 index.html 파일을 만든다.
그 다음에는 webpack.config.js 파일을 만들어 webpack 을 어떻게 사용할건지 setting을 해줘야함!
webpack.config.js
const path = require("path");
const config = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.join(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
};
module.exports = config;mode(개발모드) : development, production, nonr
entry : 내부의 디펜던시 그래프 를 생성하기 위해 사용해야 하는 모듈
output: 번들을 보낼 위치와 네임
module.rules : webpack 설정 내에 여러 개의 로더를 지정
package.json scripts 설정
*package.json
"scripts":{
"start": "webpack --mode=development",
"build:" "webpack --mode=development",
"dev" : "webpack-dev-server"
}
start : 웹팩의 개발모드를 사용해서 start 명령어 쓸꺼임.
(마우스 오버하면 친절하게 npm start 쓰라고 알려줌 ㅎㅎㅎ)
이렇게 하면 기본셋팅완료!
index.js 와 index.html만들기
src / index.js : 번들링 할 파일
public / index.html : 보여질 파일
*index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
</head>
<body>
<div id="root"></div>
</body>
</html>*index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <>
<h1>Hello Webpack! (feat.babel)</h1>
</>
}
ReactDOM.render(<App />,document.getElementById('root'))그런다음 npm start 하면?
bundle.js 파일이 생성됨. index.html에 bundle.js 연결하고 라이브서버
근데 계속 오류남..
그 이유는 .. .babelrc 생성을 안해줌. 생성해주고 다시 npm start / npm run dev 입력하면
성공 ! css 연결하고 싶으면 css-loader / style-loader 설치
webpack.config 파일도 설정.
*webpack.config.js
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},리액트 조질꺼임 이제,, 졸라 조질꺼임.,, 조짐당해도 조질꺼야,,,
뎀벼 시불
