cra, vite 없이 리액트 프로젝트 생성하기

리액트를 배우러 온 만큼, 리액트를 더 잘 이해하기 위해 리액트 프로젝트 생성에 관한 강의를 들은 것을 정리하려고 한다.

 

먼저 내가 가장 먼저 리액트 프로젝트 생성에 대해 배운 것은 cra로 생성하는 방식이었다. 하지만 cra로 리액트 프로젝트를 생성하는 것은 시간이 오래 걸리기 때문에(+프로젝트 설정을 건드리기 힘들다) vite가 권장된다고 한다.

 

과연 vite는 프로젝트 생성 속도가 빨라서 여태껏 리액트를 다룰 때는 이 방법을 사용했다.

// npm과 yarn이 설치되어 있어야 함
yarn create vite [프로젝트 이름] --template react
cd [프로젝트 이름]
yarn
//-----여기까지가 프로젝트 기본 세팅----이후로 리액트 라이브러리

// 스타일드 컴포넌트, 리덕스, 리덕스 툴킷, 리액트 라우터 돔, supabase
yarn add styled-components
yarn add redux react-redux
yarn add @reduxjs/tollkit
yarn add react-router-com
yarn add @supabase/supabase-js


// 작업물을 브라우저에서 확인
yarn dev

 

 

---

그리고 이번에 이러한 방법이 아닌 좀 더 수동적인 방법, Babel과 Webpack을 통해 리액트 프로젝트를 구성해보았다. 

 

과정이 많기 때문에 설명은 일부 축약하겠다. 

 

index.html 생성

CDN에서 스크립트 가져오기(react,react-dom)

 

여기까지 하면 이런 코드로 html을 구성할 수 있다. 

 <script>
  const App = () => {
    return React.createElement("h1", null, "Hello, World!");
  };
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(React.createElement(App));
</script>

하지만 너무 불편한 방식이기 때문에 개선이 필요하다.

 

 

때문에 babel을 이용하여 좀더 간단하게 코드를 작성한 것을 이러한 형태로 변환할 수 있도록 한다. 

다시 CDN에서 스크립트 가져오기(babel standalone)

 <script type="text/babel">
    const App = () => {
      return <h1>Hello, World!</h1>;
    };
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<App />);
</script>

이렇게 babel이라는 트랜스파일러를 사용하면 간단하게 작성한 코드로 html을 작성할 수 있다. 

하지만 이렇게 직접적으로 브라우저에 babel로 변환한 파일을 보내는 것은 좋지 못한 선택이다. 때문에 노드 패키지를 이용하여 babel을 사용할 것이다. 

 

 

<-----노드 패키지로 babel 사용----->

초기화 이후 패키지 설치

npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-react

 

.babelrc 파일 생성

{
  "presets": ["@babel/preset-react"]
}

삽입

 

pakage.json에

"scripts": {
    "build": "babel src -d dist"
 },

삽입

 

src 폴더 내에 js파일 생성

npm run build

dist 폴더 생성+dist 폴더 내에 babel로 변환한 js파일 생성

dist 폴더 내의 js 파일을 html 파일에 연결

 

이렇게 하면 간단한 리액트 문법으로 코드를 짜고 ====> babel로 파일을 변환(npm run build)하고 ====> dist폴더의 js파일을 html에 연결

하는 식으로 코드를 리액트를 사용할 수 있다. 

 

<-----babel로 변환한 파일 하나로 합치기----->

다만 이러한 구조는 js 파일이 여러 개일 때 페이지의 로딩을 늦출 수 있기에 파일을 하나로 합칠 수도 있다. 

 

노드 패키지 설치

npm install --save-dev webpack webpack-cli babel-loader

 

webpack.config.js 파일 생성, 삽입

const path = require("path");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      //.css .js 등 서로 다른 확장자를 가진 파일을 처리할 때 어떤 규칙을 적용할지 정의
      {
        test: /\.js$/, // 어떤 파일을 대상으로 할지 정규표현식으로 작성
        exclude: /node_modules/, // node_modules 폴더는 제외
        use: {
          loader: "babel-loader", // babel-loader를 사용
        },
      },
    ],
  },
  mode: "development", // 없으면 warning 이 남
};

src 파일에 있는 js를 dist 폴더를 생성하여 바벨로 변환한 js파일들을 bundle.js로 합친다. 이후 html에 연결

development와 production

webpack.config.js 파일의 mode에 따라 최적화의 bundle파일의 형식, 빌드 속도가 차이남. 이런 면모에서는 production모드가 빠르다.

단, production모드에서는 오류 수정 등의 코드 관리가 어렵기 때문에  개발자 입장에서는 development를 쓰는 게 좋다. 

 

 

pakage.js 파일에

"scripts": {
    "build": "webpack"
},

삽입

 

간단한 리액트 문법으로 코드를 짜고 ====> (npm run build) babel로 파일을 변환하고 webpack으로 하나로 합침 ====> dist폴더의 bundle.js파일을 html에 연결

 

<-----이제 자동화를 할 시간----->

이제 구조는 알았으니 이러한 구조를 plugin을 통해 자동화해주도록 한다. 

 

// src파일 수정하면 dist에 수정사항이 반영된 파일 생성

webpack.config.js 에

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js'
}

삽입

 

// 수정된 dist폴더의 bundle.js파일이 자동으로 html에 연결됨

npm install --save-dev html-webpack-plugin

webpack.config.js 에 아래 삽입

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

plugins: [
    new HtmlWebpackPlugin({
	      template: "index.html",
        filename: 'index.html',
    })
]

과정 하나 줄임

간단한 리액트 문법으로 코드를 짜고 ====> (npm run build) babel로 파일을 변환하고 webpack으로 하나로 합침

 

//필요 없어진 파일 삭제

npm install --save-dev clean-webpack-plugin

webpack.config.js 에 아래 삽입

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

 plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
    }),
  ],

 

 

//자동 저장

npm install --save-dev webpack-dev-server

webpack.config.js 에 아래 삽입

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
    open: true,
    hot: true,
  },

 

pakage.js에 아래 삽입

 "scripts": {
    "build": "webpack",
    "start": "webpack serve"
 },

간단한 리액트 문법으로 코드를 짜고

====> (npm start) babel로 파일을 변환 + webpack으로 하나로 합침 + 저장한 거 자동 반영(핫 리로드)

 

<-----환경변수 관리----->

<-----개발 환경 변경----->

.env.development 파일 생성

.env.production 파일 생성

npm install --save-dev dotenv-webpack

 

webpack.config.js 에 아래 삽입

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DotenvWebpack = require("dotenv-webpack");

const mode = process.env.NODE_ENV || "development";

module.exports = {
	mode,
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
    }),
    new DotenvWebpack({
      path: `./.env.${process.env.NODE_ENV || "development"}`,
    }),
  ],
};

pakage.js에 아래 삽입

  "scripts": {
    "build": "webpack",
    "start": "NODE_ENV=production webpack serve"
  },

pakage.js의 env가

production일 때는 .env.production  의 환경변수를 가져가고,

development일 때는 .env.development 의 환경변수를 가져갈 수 있다. 

 

<-----개발환경 일관화(혹은 오류 줄이기)----->

npm install --save-dev cross-env

pakage.js에 아래 삽입

"start": "cross-env NODE_ENV=development webpack serve"

 

---

정리하자면 react 프로젝트를 생성하기 위해서는 babel로 리액트 문법을 변환하고, webpack으로 파일을 최적화하고, plugin으로 개발환경을 최적화해야한다.