포트폴리오 사이트를 만들기 위해 리액트 개발환경을 CRA 없이 셋팅해보려고한다.
그전에 리액트 개발환경에 필수적인 바벨과 웹팩에 대하여 공부를 했었다. 간단하게 공부를 했었는데 이것을 이번엔 좀 더 프로젝트답게(?) 적용해보려고 한다.
리액트에서 바벨과 웹팩이 필수적인 이유는 다음과 같다.
- babel : 리액트는 ES5/ES6 + jsx로 작성한다. 이것을 브라우저가 이해할 수 있도록 바벨이 ES6 -> ES5, jsx -> js로 트랜스 파일링을 해준다. (@babel/preset-env ,@babel/preset-react)
- webpack : 리액트는 최종으로 번들된 js 파일이 연결된 html 파일을 로드하기 때문에 번들링이 필요하다.
그럼 저번에 만들었던 github pages 프로젝트에서 리액트 개발환경을 셋팅해보겠다.
먼저 npm init을 해주고 react와 react-dom을 설치하여준다.
$ npm install react react-dom
그리고 public 폴더를 만들어주고 index.html을 다음과 같이 수정해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hyunsung</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
프로젝트 루트에 src 폴더를 만들고, src에 components 폴더를 만들어준다. 그리고 src에 index.js와 components에 App.js를 다음과 같이 만들어 준다.
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.querySelector("#root"));// components/App.js
import React from "react";
function App() {
return <div>portfolio test</div>;
}
export default App;
babel 설정에 필요한 모듈들을 설치한다.
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
그리고 babel.config.js 를 만들어 babel 설정을 해준다.
module.exports = function(api) {
api.cache(true);
const presets = [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: {
version: 2
}
}
],
"@babel/preset-react"
];
const plugins = [];
return {
presets,
plugins
};
};
api.cache는 babel 공식문서에 따르면 다음과 같이 나와있다.
JS configs are great because they can compute a config on the fly, but the downside there is that it makes caching harder. Babel wants to avoid re-executing the config function every time a file is compiled, because then it would also need to re-execute any plugin and preset functions referenced in that config.
매번 컴파일을 할때마다 config function을 실행시키고, 참조된 플러그인이나 프리셋 함수를 다시 실행시키는 것을 피하기 위해서 사용한다. 즉, build process를 최적화하는 것이다.
api.cache(true)는 api.cache.forever()와 같은 기능이고 이 기능은 다음의 기능을 한다.
Permacache the computed config and never call the function again.
그다음 webpack에 필요한 모듈들을 설치한다.
$ npm install --save-dev webpack webpack-cli html-webpack-plugin html-loader
그리고 webpack.config.js에 다음과 같이 설정해준다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development", // development mode
entry: "./src/index.js", // entry 는 src의 index.js
output: {
path: path.resolve(__dirname, "./"), // 번들링된 파일 루트에 생성
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader", // 로더를 이용해 바벨을 적용
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: "html-loader", // 로더를 이용해 html 적용
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: `./public/index.html`,
filename: path.join(__dirname, "./index.html")
}),
],
optimization: {
minimize: true
}
};
package.json에 scripts에 다음과 같이 추가시켜준다.
"scripts": {
"build": "webpack"
},
일단 여기까지 한 후, 웹팩을 실행시켜 빌드 후에 push해서 github page에서 잘 뜨는지 테스트를 해보았다.
github page에 접속하니 잘 나오는 것을 알 수 있다.
이제 해줄 것은 css loader추가와 webpack-dev-server 추가다.
먼저 css를 적용하기위해 필요한 모듈을 설치하여준다.
$ npm install --save-dev css-loader mini-css-extract-plugin
src에 style.css를 다음과 같이 추가해주고, App.js에 import해준다.
body {
background-color: red;
}
그리고 webpack.config.js를 다음과 같이 수정하여준다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development", // development mode
entry: "./src/index.js", // entry 는 src의 index.js
output: {
path: path.resolve(__dirname, "./"), // 번들링된 파일 루트에 생성
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader", // 로더를 이용해 바벨을 적용
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: "html-loader", // 로더를 이용해 html 적용
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"] // 로더를 이용해 css 적용,MiniCssExtractPlugin 이용하여 css 파일 추출
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: `./public/index.html`,
filename: path.join(__dirname, "./index.html")
}),
new MiniCssExtractPlugin({ // MiniCssExtractPlugin css파일 추출
filename: "style.css"
})
],
optimization: {
minimize: true
}
};
이렇게 하고 다시 웹팩을 실행시킨 후, push 하여 css가 잘 적용되는지 확인해보았다.
css도 잘 적용되고 있다. 이제는 매번 수정사항이 있을 때마다 빌드하는 것은 비효율적이기 때문에 webpack-dev-server를 적용할 것이다.
필요한 모듈을 설치한다.
$ npm install --save-dev webpack-dev-server
webpack.config.js에 다음과 같은 설정을 추가한다.
devServer: {
contentBase: path.join(__dirname, "./"), // 이 경로에 있는 파일이 다시 컴파일 될때마다
compress: true,
port: 3002
}
package.json에 scripts도 추가시켜준다.
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
그 다음 srcipts를 실행시키고, App.js의 컴포넌트의 내용을 다음과 같이 바꿔보고 저장을 해보았다.
import React from "react";
import "../style.css";
function App() {
return <div>portfolio test!!!!!!!!!!!!!!</div>;
}
export default App;
결과는 다음 화면과 같다.
바로바로 반영되는 것을 알 수 있다!!
기본적인 깃허브 페이지 리액트 개발환경을 설정해보았다. 아주 기본적인 셋팅을 한 것이고 이외에도 clean-webpack-plugin이나 빌드모드를 나누는 등의 아직도 바벨이나 웹팩에 대해서 모르는 옵션도 많고, 최적화도 그럭저럭 잘 된건지는 모르겠다.
그래도 CRA를 하지않고 리액트 개발환경을 직접 셋팅해볼수 있어서 만족스럽다.
앞으로 코드를 만들어가면서 바벨이나 웹팩을 통해 좀 더 공부하여 바벨과 웹팩을 잘 쓸 수 있도록 해야겠다.
그리고 이제 본격적으로 포폴사이트를 만들어볼 시간이다!
아래는 참고한 레퍼런스 입니다
https://leehwarang.github.io/2019/08/20/react_setting.html
https://steemit.com/javascript/@noreco/webpack
http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
http://guswnsxodlf.github.io/generating-html-using-webpack
https://beomi.github.io/2017/11/29/JS-TreeShaking-with-Webpack/
'React' 카테고리의 다른 글
| React - Life Cycle (0) | 2020.03.24 |
|---|---|
| React - HOC (0) | 2020.03.10 |
댓글