1. Intro
create-react-app을 하면 자동으로 리액트 설정을 다 해준다.
대신에 우리는 create-react-app이 하는 일, 기본원리를 이해할 수 없다.
그래서 직접 1번 셋팅해보는 게 좋다.
2. 웹팩을 왜 쓸까?
- 유지보수성을 높일 수 있다.
하나의 HTML 파일에 2만 개의 컴포넌트를 담게되면 유지보수가 거의 불가능하다고 볼 수 있다.
실제 과거 페이스북 컴포넌트는 2만 개라고 한다 : )
- 중복을 줄일 수 있다.
<script type="text/babel" src="index.js">와 같이 스크립트를 가져오게 되면 스크립트간에 중복이 발생한다.
개발자의 원칙은 중복을 제거해야한다.
소크라라는 개발자는 이를 해결하기 위해 웹팩이라는 시스템을 만들어냈다.
여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어준다.
3. 웹팩 설치와 설정
- npm init (author, license 정도만 입력한다)
- package.json이 생기면 개발에 필요한 모든 것들을 넣어준다. (처음에 필요한 것은 리액트와 리액트돔이다.)
- npm i react react-dom
- npm i -D webpack webpack-cli (-D는 개발에서 밖에 안쓴다는 것을 의미, 실제 서비스에는 웹팩이 필요없다)
- 실제 서비스에 쓰이는 것들은 dependencies에 기록되고, 개발에 쓰이는 것들은 devDependencies에 기록된다.
- webpack.config.js 파일을 만들어 module.exports={}를 적어준다.
- client.jsx 파일을 만들어 다음 2개를 적어준다. npm에 설치했던 것을 불러온다.
const React = require('react');
const ReactDom = require('react-dom');
- index.html을 다음과 같이 구성해준다. 스크립트로 작성했던 리액트랑 바벨은 npm에서 불러오기 때문에 써줄 필요가 없다.
<html>
<head>
<meta charset="UTF-8"/>
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>
- 컴포넌트 파일을 만든다. (jsx로 만드는게 좋다. x하나가 더 붙어 리액트 파일임을 개발자가 직관적으로 알 수 있다)
//컴포넌트 파일을 쪼개는 경우 필요한 패키지와 라이브러리
const React = require('react');
const {Component} = React;
class WordRelay extends Component{
//constructor 안넣어줘도 된다.
state = {
text: 'Hello, webpack',
};
reder(){
return(){
return <h1>{this.state.text}</h1>;
}
}
}
//외부에서도 쓸 수 있게 도와주는 코드
//node의 모듈시스템이다.
module.export = WordRelay;
- root에 연결할 컴포넌트를 cliend.jsx 파일에 불러온다.
- 단 하나의 파일만 root에 연결할 수 있어서 모든 파일을 하나로 연결하는 웹팩이 필요한 것이다.
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
//루트에 연결할 컴포넌트
ReactDom.render(
<WordRelay/>, document.querySelector('#root')
);
- webpack.config.js에 사용할 파일들을 등록한다. 하나로 연결하는 과정이다.
- 수 백개 컴포넌트를 이 파일에서 모두 관리하기란 어려워 분리하고 웹팩에서 연결하는 것이다.
- 만약 client.jsx 파일에서 WordRelay.jsx 파일을 불러오고 있다면 적어줄 필요가 없다.
const path = require('path');
module.exports = {
name: 'wordrelay-setting', //이 이름으로 관리하겠다.
mode: 'development', //실서비스용으로 바꾸려면 'production'으로 변경
devtool: 'eval', //빠르게라는 의미
resolve:{ //확장자
extensions: ['.js', '.jsx']
},
entry: { //입력
app: ['./client', './WordRelay'],
},
output: { //출력
path: path.join(__dirname, 'dist'), //__dirname == 현재폴더
filename: 'app.js'
},
};
//즉, client.jsx와 WordRelay.jsx를 합쳐서 app.js로 만들어준다.
4. 웹팩에 바벨 설정, 바벨에 jsx 설정
- npm i -D @babel/core @babel/preset-env @babel/preset-react
- npm i -D babel-loader
- npm i -D @babel/plugin-proposal-class-properties
core: 바벨 기본 문법이 담겨있다.
preset-env : 브라우저에 맞게 최신 문법을 옛날 문법으로 마법처럼~ 바꿔준다.
preset-react: jsx 등을 지원한다.
babel-loader: 바벨과 웹팩을 연결해준다.
babel/plugin-proposal-class-properties: state={} 이 문법을 써주기 위해선 필요하다.
이들은 package.json의 devDependencies에 들어간다. (개발용)
- webpack.config.js에 module을 추가한다.
- entry에 입력된 파일을 읽어 module을 적용해 ouput을 통해 하나로 합쳐준다.
const path = require('path');
module.exports = {
name: 'wordrelay-setting', //이 이름으로 관리하겠다.
mode: 'development', //실서비스용으로 바꾸려면 'production'으로 변경
devtool: 'eval', //빠르게라는 의미(개발), production일 때는 'hidden-source-map'
resolve:{ //확장자
extensions: ['.js', '.jsx']
},
entry: { //입력
app: ['./client', './WordRelay'],
},
module: {
rules:[{
test: /\.jsx?/, //정규표현식, js나 jsx로 설정된 파일 모두
loader: 'babel-loader', //babel-loader 규칙에 따른다.
options:{
presets: ['@babel/preset-env', '@babel/preset-react'],
plugin: ['@babel/plugin-proposal-calss-properties'],
}
}]
},
output: { //출력
path: path.join(__dirname, 'dist'), //__dirname == 현재폴더
filename: 'app.js'
},
};
//즉, client.jsx와 WordRelay.jsx를 합쳐서 app.js로 만들어준다.
5. 웹팩으로 빌드하기
webpack이라는 명령어로 웹팩을 빌드하기 위해 명령어를 커스텀할 수도 있다.
package.json의 scripts 안에 명령어를 커스텀할 수 있다.
만약 위처럼 "dev" : "webpack"이라고 써줬다면
cmd에 "npm run dev" 입력시 webpack 명령어가 실행된다.
만약 오류가 났다면, 그냥 cmd에 "npx webpack"이라고 써주면 된다.
webpack을 실행하면 dist폴더에 app.js 파일을 생성한다.
+ MIT란?
미국 MIT에서 해당 대학의 소프트웨어 공학도들을 돕기 위해 개발한 라이센스이다.
- 해당 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다.
단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다. - 저자 또는 저작권자는 소프트웨어에 관해 아무런 책임을 지지 않는다.
즉 MIT License라고 표기되어 있는 오픈소스들은 수정, 배포가 자유로우며 개인적 혹은 상업적으로 이용해도 되지만 이 소스로 인한 피해는 전적으로 사용자가 감수해야 한다는 것이 주 내용이다.
MIT License란?
오픈소스들을 사용하다 보면 MIT License라는 단어를 아주 흔하게 발견할 수 있다. 그리고 나는 지금까지 MIT License가 MIT에서 만든 오픈소스들을 말하는 줄 알았다.🤣ㅋㅋㅋㅋㅋㅋㅋㅋ좋은 오픈소
velog.io
'FE > React' 카테고리의 다른 글
| useState lazy init 기법 (1) | 2024.02.14 |
|---|---|
| 웹팩 데브 서버와 핫 리로딩 (0) | 2024.02.13 |
| Hooks (useState, useRef, useEffect) (0) | 2024.01.30 |
| 세로 슬라이더 (0) | 2023.11.08 |
| [React] jsx 함수형 기본구조 : import React from "react"는 왜 쓸까? (0) | 2023.07.22 |
