WEB/react

[react/공부] CRA, Vite 없이 React 개발 환경 구축하기

ijooha 2025. 2. 4. 09:26

babel과 webpack, plugin 알아보기

맨 밑에 한눈에 보기 정리 있다!

 

 

CRA(Create React App), Vite를 사용하지 않고 애플리케이션을 구성하는 방법을 정리해 보려 한다.

위 두가지는 간편하게 자동으로 모든 것을 설정해주지만 커스터마이징에 제약이 많아 실무에 한계가 있다고 함

 

       초기 설정 

01 파일 만들기

먼저 프로젝트 폴더를 만든 후, 몇가지 파일을 세팅해준다.

index.html

src > App.js

src라는 폴더 안에 App.js 파일

 

 

02 react dom 세팅

html 파일 안에 root div를 넣어준 후

CDN을 통해 react와 reactDOM을 로드한다. (설치 없이 React를 사용할 수 있다.)

<head>
	//...html 기본 코드 작성
	//react와 reactDOM을 사용하기 위한 세팅
	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
	<div id="root"></div>
</body>

 

 

       Transpiler 

프로그래밍 언어의 코드를 다른 프로그래밍 혹은 다른 버전이나 형식으로 변환하는 도구

위와 같이 세팅을 해준 후, script 안에 react 문법으로 작성해줘도 동작은 하나, 꽤나 번거롭다.

그래서 사용하는 것이트랜스파일러!

 

01 바벨 설치하기

먼저 html script 모음들 아래 babel standalone을 추가해준다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

그리고 아래와 같이 리액트 문법대로 써주면 되는데! 이러면 오류가 뜬다.

그래서 오류를 없애기 위한 패키지들을 설치해줘야 한다.

 

 

02 패키지 설치하기

먼저 npm을 초기화해준 후 패키지를 설치한다.

npm init -y //모두 yes 하라는 뜻

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

babel-cli @babel/core: 빌드 타임에 바벨을 실행시키기 위한 CLI 명령어 도구

@babel/preset-react: React용 바벨 문법 변환 패키지

 

 

03 바벨 설정 파일 만들기

.babelrc 파일을 생성한 후 아래와 같은 코드를 작성한다.

rc를 뒤에 붙이면 패키지 설정 관련한 문서라는 뜻

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

 

 

04 package.json 파일 수정

package.json 파일이 옆에 만들어져있을 건데, 그 파일 안에 들어가서 scripts를 찾아 아래 추가해주면 된다.

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

 

그리고 터미널을 열어 아래 명령어를 입력하면, dist 폴더에 App.js가 생긴다.

npm run build

 

 

       Bundler 

위처럼 트랜스파일을 해준 후, html에 스크립트로 그 파일을 연결해주면 정상적으로 작동이 된다.

하지만 이 경우 dist에 파일이 늘어날 때마다 로딩 시간이 길어질 거다.

이때 사용하는 게 번들러인데,

여러 개의 파일로 구성된 코드나 리소스를 최소한의 파일로 묶어주는 역할을 한다.

 

 

01 패키지 설치

터미널에 아래 명령어를 입력해 패키지를 설치한다.

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

webpack webpack-cli: 빌드타임에 웹팩을 실행시키기 위한 CLI 명령어 도구

babel-loader: 베발과 통합하기 위한 바벨 로더

 

 

02 Webpack 설정 파일 생성

프로젝트 루트에 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", //개발모드를 설정해줄 수 있음.
};

 

 

03 프로젝트 빌드 및 실행

package.json, script 항목에 아래 명령어 추가

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

 

터미널에 다시 npm run build를 입력해주면 dist 폴더에 하나의 통합 파일이 만들어진다.

 

 

       Plugins 

01 해시값 추가

먼저 빌드된 파일 이름에 해시값을 추가하여, 변경사항이 생길때 새로운 파일 이름이 생성하도록 해 불필요한 캐시를 막는다.

webpack.config.js

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

 

 

02 html-webpack-plugin

해시값을 html에 자동으로 참조시키는 플러그인

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

 

터미널로 설치한 후, webpack.config.js 파일에 플러그인을 추가해준다.

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 파일 상단 path 아래 기입

...

module: {...
} //모듈 다음에 아래 플러그를 추가
plugins: [
    new HtmlWebpackPlugin({
	      template: "index.html",
        filename: 'index.html',
    })
]

 

 

03 clean webpack plugin

불필요한 파일을 자동으로 삭제

npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

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

 

 

04 webpack-dev-server

코드 변경 사항 실시간으로 반영

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

 

플러그인을 설치한 후, webpack.config.js 파일에서 plugin 아래 추가해준다.

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000, //개발 서버가 실행될 포트 번호
    open: true, //서버가 실행되면 자동으로 브라우저 열기
    hot: true, //코드 변경사항 실시간 반영
  },

 

package.json

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

 

이제 명령어 npm start를 하면 변경 사항을 실시간으로 확인할 수 있다 !

 

 

       환경 변수 관리 

정말 마지막이다.

실제 프로젝트에서는 프로덕트 환경에 따라 다른 설정을 적용해야 한다.

개발 환경에서만 필요하고 배포할 땐 필요하지 않은 무거운 파일 등을 따로 관리하는 것

 

01 환경 변수 파일 생성

.env.환경 파일을 생성한 후 각 환경에 필요한 변수를 설정한다.

 

.env.development

APP_API_URL=https://api.example.com

 

 

02 dotenv-webpack

npm install --save-dev dotenv-webpack
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"}`, //추가
    }),
  ],
};
  "scripts": {
    "build": "webpack",
    "start": "NODE_ENV=production webpack serve"
  },

 

 

       한 눈에 요약 

01 파일 생성

index.html

.babelrc

.env.development

.webpack.config.js

 

 

02 터미널에서 패키지 install

npm init -y

npm install --save-dev @babel/core @babel/cli @babel/preset-react webpack webpack-cli babel-loader html-webpack-plugin clean-webpack-plugin webpack-dev-server dotenv-webpack cross-env

 

 

03 파일 수정

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="root"></div> //body 안에

index.html

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "cross-env NODE_ENV=development webpack serve",
  },

package.json

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

module.exports = {
  entry: "./src/App.js", //번들링의 시작점(엔트리)입니다. 여기서는 src/index.js를 엔트리로 지정합니다.
  output: { //번들링 결과물의 출력 위치와 파일명을 지정합니다. dist/bundle.js로 설정됩니다.
    path: path.resolve(__dirname, "dist"), //너가 번들링한 파일을 어디에 둘거야?
    filename: 'bundle.[contenthash].js',
  },
  module: {
    rules: [
      //.css .js 등 서로 다른 확장자를 가진 파일을 처리할 때 어떤 규칙을 적용할지 정의
      //Babel을 사용해 JavaScript 파일을 트랜스파일링하기 위해 babel-loader를 설정합니다.
      {
        test: /\.js$/, // 어떤 파일을 대상으로 할지 정규표현식으로 작성
        exclude: /node_modules/, // node_modules 폴더는 제외
        use: {
          loader: "babel-loader", // babel-loader를 사용
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
	      template: "index.html",
        filename: 'index.html',
    }),
    new DotenvWebpack({
        path: `./.env.${process.env.NODE_ENV || "development"}`,
      }),
    ],
    devServer: {
        static: {
          directory: path.join(__dirname, "dist"), //어떤 서버 참조할거야? //어떤 걸로 build 하니?
        },
        port: 9000, //네트워크의 열린 문, 실행될 포트 번호
        open: true, //실행되면 자동으로 브라우저 염
        hot: true, // 변경사항 실시간 반영 HMR Hot Module Reload 내가 저장하면 바로 반영해주는 기능 / hot 만 있어도 바로 반영 된다는 뜻
      },
  mode: "development", // 없으면 warning 이 남 //개발모드를 설정해줄 수 있음.
};

webpack.config.js

 

 

더보기
더보기

패키지 설치를 왕창 하면서, 이 패키지들을 개발한 사람들이 존경스럽고 경이로웠음

열심히 해야뒤..

'WEB > react' 카테고리의 다른 글

[react/공부] useRef  (0) 2025.02.06
[react/공부] styled-componenet  (1) 2025.02.05
[react/공부] useState로 컴포넌트 상속 알아보기  (0) 2025.02.03
[react/공부] Hook이 뭐야?  (0) 2025.01.31
[react/공부] 리액트 시작하기  (2) 2025.01.27

'WEB/react'의 다른글

  • 현재글[react/공부] CRA, Vite 없이 React 개발 환경 구축하기

관련글

티스토리툴바