.png)
안녕하세요. 김용성입니다.
react 프로젝트를 시작하실 때 어떻게 실행하시나요?
보통 react에서 제공해주는 create-react-app 명령어를 사용해서 많이들 시작하실텐데요.
오늘은 이 명령어를 사용하지 않고 webpack을 사용하여 하나하나 react 개발환경을 설정하는 방법에 대해 포스팅하고자 합니다.
구조 설정
빈 디렉토리 하나를 만들어주고 vscode를 통해 열어줄게요.
우선은 npm이 필요하니 다음 명령어를 입력해줍니다.
$ npm init
package.json이 생긴 것을 확인하실 수 있을텐데요.
이렇게 node package가 형성이 되었다면 이제 기본적인 dependency들을 설치해주어야합니다.
기본적으로 react/react-dom 정도를 설치해주면 될 것 같습니다.
$ npm install react react-dom
node_modules 디렉토리가 생기고, package.json에도 dependency들이 추가되었음을 확인하실 수 있습니다.
//package.json
{
"name": "jun19",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
이제 프로젝트의 모든 구성요소가 들어가게 될 디렉토리를 하나 생성해주도록 하겠습니다.
생성된 app 디렉토리 내부에 html파일과 JavaScript 파일을 하나 추가해주도록 할텐데요. CSR SPA의 경우 html 파일은 텅텅 비어있고, 그와 연결된 JavaScript파일에 의해 동작된다고 했었죠? 그러한 역할을 하는 파일을 생성해주는 작업입니다.
이렇게 생성된 index.html과 Main.js 파일에 다음과 같은 내용을 넣어주도록 하겠습니다.
<!--index.html-->
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="/bundled.js"></script>
</body>
</html>
//Main.js
import React from "react"
import ReactDom from "react-dom"
function RootComponent() {
return (
<div>
<h1>create-react-app 사용하지 않고 react 프로젝트 시작하기</h1>
<p>with Yongseong</p>
</div>
)
}
ReactDom.render(<RootComponent />, document.querySelector("#app"))
늘 CRA 명령어를 사용하셨다면 Main.js를 직접 만드는 작업이 조금 생소하실 수 있어요.
ReactDom.render(A,B)라는 메소드에 대해 설명하자면 Virtual DOM에서 HTML을 생성하기 위한 메소드이고, 첫번째 인자로 들어가는 것은 렌더링할 React element이고, 두번째 인자로 들어가는 것은 렌더링이 일어나게 될 DOM element입니다.
Webpack 설정
이제 webpack 설정을 해주어야 합니다.
프로젝트 내에 다음 명령어로 webpack을 추가해줍니다.
$ npm install webpack webpack-cli webpack-dev-server
webpack에 대해 조금 더 알고싶으시다면 제가 이전에 webpack에 대해 포스팅한 내용들을 참고하시면 좋을 것이라 생각합니다.
루트 디렉토리에 webpack.config.js 파일을 생성해줍니다. 이 때 파일 이름은 반드시 webpack.config.js여야 합니다. ⭐️
webpack.config.js에 들어갈 내용은 다음과 같습니다.
const path = require("path")
module.exports = {
entry: "./app/Main.js",
output: {
publicPath: "/",
path: path.resolve(__dirname, "app"),
filename: "bundled.js"
},
mode: "development",
devtool: "source-map",
devServer: {
port: 3000,
contentBase: path.join(__dirname, "app"),
hot: true,
historyApiFallback: { index: "index.html" }
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
}
}
}
]
}
}react는 기본적으로 jsx 문법과 es6 이상의 문법을 요하므로 호환성을 위해 babel이 반드시 들어가야 합니다. webpack에서 babel-loader를 사용해 주기 위해 다음과 같이 명령어를 입력합니다.
$ npm install @babel/core @babel/preset-env @babel/preset-react babel-loader
명령어 설정
CRA를 사용하였을 때에는 기본적으로 yarn start 명령어를 사용해서 react 서버를 실행시켰는데요. 이렇게 직접 세팅해주게 될 경우에는 명령어를 커스텀해주어야 합니다.
package.json 파일로 가서 scripts 내부에 다음 항목을 추가시켜 줍니다.
//package.json
"scripts": {
"dev": "webpack serve", // 추가된 부분
"test": "echo \"Error: no test specified\" && exit 1"
},프로젝트 시작하기
이제 준비가 다 끝났습니다.
다음 명령어를 입력해주도록 하겠습니다.
$ npm run dev
우리가 지정해준 3000번 포트에서 react-app이 잘 동작하는 것을 보실 수 있습니다.
보너스
현재 프로젝트 내부의 소스코드가 변경될 경우에 페이지가 그때마다 refresh 되는 것을 확인하실 수 있는데요. 이 경우에는 module.hot을 사용해서 refresh 없이 변경된 내용을 적용시켜줄 수 있습니다.
Main.js 내부 최하단에 다음과 같이 코드를 추가시켜주겠습니다.
if (module.hot) {
module.hot.accept()
}코드를 추가하고 난 뒤에는 refresh가 일어나지 않고 변경내용이 반영되는 것을 확인하실 수 있을겁니다. :)
마무리
이전에 한창 webpack 시리즈를 진행할 때 꼭 하고싶었던 주제인데요. 이제라도 하게되어서 후련하네요. ㅎㅎ
여러분들도 더이상 CRA 명령어에 의존하지 말고 webpack을 사용하여 가볍게 프로젝트를 만들어보는 것은 어떨까요?
읽어주셔서 감사합니다.
좋은 글 감사합니다! 처음 개발을 시작했을 땐 막연하게 이해하고서 대충 넘기고 있다가 웹팩을 다시 까보게 되고 있는데 좋은 참고가 될 것 같습니다 :)