React 보일러 플레이트 만들기 시작

고기호·2024년 5월 29일

리액트 보일러 플레이트 만들기

목록 보기

1/4

1. React 보일러 플레이트를 만들게 된 이유

코드잇 스프린트가 끝나고 취업 준비가 시작됐다. 이전에 했던 것을 정리하고 내가 하지 못했던 것을 배우는 겸해서 사이드 프로젝트를 진행하려고 했다.
여러가지 생각을 하던 중 초기 설정 - 개발 - 배포까지 나 스스로의 힘으로 모두 해보면 좋겠다고 생각을 했다. 그래서 일단 초기 설정을 먼저 해보자! 해서 나만의 React 보일러 플레이트를 만들게 됐다.

2. 목표

화면에 컴포넌트를 띄워보자

3. 과정

프로젝트 폴더 만들기

각자 짓고 싶은 이름으로 폴더를 만들자

npm 초기화

npm init -y

-y 옵션은 npm init 시 물어보는 질문들을 모두 yes처리한다.
하나하나 설정하고 싶으면 그냥 npm init해서 하면 됨

React, React-dom 설치하기

npm install react react-dom

react : UI를 구축하기 위한 라이브러리
react-dom : react app을 웹브라우저에서 렌더링, 업데이트 하는데 사용

Webpack 설치

npm install --save-dev webpack webpack-cli

webpack-cli : 웹팩에 관련된 명령어를 사용할 수 있게 해준다.
webpack의 경우 배포 이후에 UI 렌더링에 관련된 라이브러리가 아니기 때문에 -D옵션을 붙여서 설치한다.

npm install -D babel-loader @babel/preset-env @babel/preset-react

웹팩은 기본적으로 자바스크립트만 번들링 할 수 있기 때문에 다른 자원들을 또한 가능하게 loader를 설치해줘야한다.
JSX 문법을 변환하기 위해서 babel과 몇가지 preset(바벨의 플러그인의 집합)이 필요하다.
babel-loader : Webpack이 자바스크립트 파일을 처리할 때 최신 자바스크립트 코드를 구형 브라우저에서도 호환이 되게 트랜스파일링 해준다.
@babel/preset-env : 최신 JavaScript 기능들을 구형 브라우저에서도 사용할 수 있도록 트랜스파일링 시켜줌
@babel/preset-react : JSX 문법과 React 컴포넌트를 ES5 코드로 트랜스파일링 시켜줌

src/index.js 작성

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client"; 
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement); 

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/app.js 작성

// src/App.js
export default function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

index.html 작성

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

루트 경로에 생성해주자

Webpack 설정하기

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: [/\.js$/, /\.jsx$/],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }]],
        },
      },
    ],
  },
};

npx webpack

웹팩을 실행 시키면 dist/bundle.js가 생성된다.
이후 index.html을 라이브 서버로 실행시켜보면 잘 동작한다!

HtmlWebPackPlugin 사용하기

HtmlWebPackPlugin을 사용하면 template으로 사용할 html파일을 주입해서, output으로 설정된 폴더에 html파일을 추가해준다. 그리고 번들링된 자바스크립트 파일과 추가된 html을 연결시켜준다.

npm install -D html-loader html-webpack-plugin

html-loader : 웹팩이 html 번들링 할 수 있게 한다.
html-webpack-plugin : 번들링된 자바스크립트 파일을 html파일에 연결한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

아까 만든 index.html의 script를 삭제해주자

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: [/\.js$/, /\.jsx$/],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }]],
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],
};

설치한 로더와 플러그인을 넣어주자

npx webpack

실행하면 dist 폴더에 html파일도 생성되는 것을 볼 수 있다.
또한 라이브 서버로 열어보면 컴포넌트가 잘 렌더링 되는 것을 볼 수 있다.

webpack-dev-server

현재 컴포넌트가 렌더링 되는지 보려면 웹팩으로 번들링하고 만들어진 index.html파일을 라이브 서버로 돌려봐야한다. 이런 경우 개발할 때 매우 불편해지는데 webpack-dev-server를 사용하면 entry의 수정이 발생할 때마다 자동으로 웹에 적용시켜준다.

webpack-dev-server를 설치해준다

npm install -D webpack-dev-server

webpack.config.js파일에 넣어준다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  devServer: {
    port: 9000, // 서버를 열 포트 번호이다.
    open: true, // 서버를 열면 자동으로 브라우저창을 열고, 해당 웹 앱을 보여준다.
  },
};

실행시켜보자

npx webpack-dev-server

script 설정

개발 서버를 실행할 때 마다 매번 npx webpack-dev-server를 실행하면 귀찮기 때문에 package.json의 script를 설정해보자.

package.json

{
  "name": "real_react_boilerplate",
  ...
  "scripts": {
    "dev": "webpack-dev-server"
  },
  ...
  }
}

script로 실행하기

npm run dev

새로운 브라우저 창이 열리면서 웹 앱이 렌더링되면 성공이다.

4. reference

https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1
https://goo-gy.github.io/2021-12-31-webpack-react
https://joshua1988.github.io/webpack-guide/

고기호

웹 개발자 고기호입니다.

다음 포스트