Create-React-App (CRA)
- React 공식 사이트에서 CRA는 React 배우는 환경 또는 Single-Page Application (SPA) 개발에 추천을 해주고 있습니다.
- Multi-Page Application => Server-Side Rendering
생명주기 중에 한번만 리소스를 로딩하는 SPA의 렌더링 방식은 생산성과 성능에 장점이 많은 렌더링 방식입니다. 하지만 항상 좋은 점만 있는것이 아니고 프로그램 특징에 맞게 그에 맞는 선택을 하는게 중요하다고 생각합니다.
npm
- 의존성 및 패키지 관리를 위한 패키지 매니저
- 간략한 npm 명령어
npm init package.json 생성 의존성 초기화
npm install 패키지 설치
-S : dependencies package
-D : devDependencies package (개발용)
-g : global package
npm update 패키지 업데이트
npm start package.json의 scripts에 있는 start 실행,
start 가 없으면 node server.js 실행
npm run `script명령어` package.json의 scripts에 있는 명령어 실행- npx
- node 패키지 실행시키는 하나의 도구
- 패키지가 경로에 있는지 확인
- 경로에 있으면 실행
- 없으면 설치 후 실행Create-React-App 구조는?
Create-React-App 을 npm install 하게되면, 생성된 프로젝트는 기본적으로 웹팩 및 바벨 설정 등이 숨겨져 있습니다. 상세한 설정과 패키지 구성을 보기위해
npm run eject를 실행합니다.
다음과 같이 굉장히 길고 많은 웹팩 설정 등 과 패키지를 포함하고 있다는 것을 볼 수 있습니다. 그만큼 처음 React 를 사용하는데 편리함을 제공하지만 한편으로는 사용하지 않는 기능 또한 모두 포함되어 있을 것입니다.
Webpack, babel?
Webpack
- 오픈 소스 자바스크립트 모듈 번들러입니다. 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 묶어줍니다.
- 하나의 HTML 파일에 script 태그로 여러개의 자바스크립트 파일을 로드해야 할 필요가 없어집니다.
Babel
- ES6+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 트랜스 컴파일러입니다.
Webpack이 자바스크립트 파일을 번들링하기 전에 Babel을 로드하여 ES6+ 코드를 ES5 코드로 트랜스파일링합니다.
설치
$ npm i react react-dom
$ npm i -D webpack webpack-cli webpack-dev-server
$ npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
// 브라우저에서 실행되는 시점에 필요한 기능을 주입합니다.
$ npm i -D babel-polifill
// 수정 후에도 Application의 상태가 사라지지 않게 도와줍니다. (Hot-reloading)
$ npm i -D react-reloading
$ npm i -D @pmmmwh/react-refresh-webpack-plugin./index.html 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF=8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>금오공과대학교 금테코</title>
</head>
<body>
<div id="root"></div>
<!-- Webpack 실행 후 생성되는 파일 위치입니다. -->
<script src="./dist/app.js"></script>
</body>
</html>./src/index.jsx 추가
import React from 'react';
import ReactDom from 'react-dom';
import { App } from './App';
ReactDom.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.querySelector('#root'));- Webpack.config.js의 entry에서 리액트 파일이 시작되는 파일입니다.
./src/App.jsx 추가
import React from 'react';
const App = () => {
return (
<div>app</div>
);
};
export default App;./webpack.config.js 파일 추가
const path = require('path'); // core nodejs 모듈 중 하나, 파일 경로 설정할 때 사용
const RefreshWebpackPlug = require('pmmmwh/react-refresh-webpack-plugin');
module.exports = {
mode: 'development',
resolve: { // 확장자를 생략하게 만들어줍니다.
extensions: ['.js', '.jsx'],
}
entry: { // 리액트 파일이 시작하는 곳
app: ['babel-polyfill'./src/index.js'],
}
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
options: {
// ...
}
}
]
},
plugin: [
new RefreshWebpackPlug()
]
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist/'
},
}- Entry : 웹 자원을 변환하기 위해 필요한 진입점, 모듈 로딩 및 하나의 파일로 묶어줍니다.
- Loader (modules) : JS와 JSON이 아닌 다른 자원 (HTML, CSS 등) 빌드를 도와주는 속성입니다.
- Plugin : 기본 동작 외 추가기능, 결과물 형태를 바꾸기 위한 설정
- Output : Entry로 찾은 모듈 하나로 묶은 결과물을 반환하기 위한 위치를 설정합니다.
webpack build 결과를 보기 위해선 RefreshWebpackPlug()를 빼면됩니다.
실행
- package.json
- 과거에 webpack-dev-server를 실행하는 명령어
webpack-dev-server가 웹팩5 버전에서는webpack serve로 변경되었습니다.
파일구조
node_modules
src
ㄴindex.jsx
ㄴApp.jsx
index.html
package.json
webpack.config.js사용하면서
- 당연히 CRA로 만들었을 때보다 용량과 패키지 수가 훨씬 줄었습니다. 이후에 작은 페이지를 만들었음에도 절반이 안나가는걸 볼 수 있었습니다.
- 프로젝트를 하는 중 Compile 속도가 굉장히 빨랐습니다.
- webpack과 babel이 어떻게 사용되는지 알게되었고, 아직은 작은 기능을 만들어서 CSS-loader까지만 사용해보았지만 다른 필요한 기능이 필요할 때 어떻게 해야할 지 알게되었습니다.
- babel도 브라우저의 사용량, 버전 등을 제한해서 호환되는 범위를 지정할 수 있는데 생각보다 재밌는 기능들이 많이 있는 것 같습니다.
fe