diff --git a/fundamentals/bundling/tutorial/basic.md b/fundamentals/bundling/tutorial/basic.md
deleted file mode 100644
index 976abe0e..00000000
--- a/fundamentals/bundling/tutorial/basic.md
+++ /dev/null
@@ -1,166 +0,0 @@
-# 번들링 시작하기
-
-## 1. 새 프로젝트 폴더 만들고 npm 초기화하기
-
-먼저 웹팩 설정을 실습할 새 폴더를 만들어 주세요. Node.js 버전은 [가이드](https://nodejs.org/ko/download)를 참고해서 `22.14.0` 버전으로 설치해 주세요.
-
-```bash
-mkdir webpack-tutorial
-```
-
-프로젝트 폴더로 이동한 뒤 터미널에 다음 명령어를 입력해 npm을 초기화해요
-
-```bash
-cd webpack-tutorial
-npm init -y
-```
-`npm init -y` 명령어는 기본 설정으로 `package.json` 파일을 자동으로 만들어줘요. `package.json` 파일은 프로젝트의 정보와 사용 중인 패키지를 기록하는 역할을 해요.
-
-## 2. 웹팩과 웹팩 CLI 설치하기
-
-웹팩을 실행하려면 두 가지 패키지를 설치해야 해요.
-
-- `webpack`: 웹팩의 핵심 기능을 제공해요.
-- `webpack-cli`: 터미널에서 `webpack` 명령어를 사용할 수 있도록 해줘요.
-
-```bash
-npm install webpack webpack-cli --save-dev
-```
-
-`--save-dev` 옵션은 이 도구들이 앱 코드가 아니라 **개발 도구**라는 의미로 설치해요. 설치가 끝나면 `node_modules` 폴더와 `package-lock.json` 파일이 생겨요. 
-
-::: details 개발 도구로 설치하는 것의 의미
-
-라이브러리를 `--save-dev` 옵션으로 개발 도구로 설치하면, 실제 운영 환경이나 라이브러리 코드로 사용될 때 설치를 건너뜀으로써 설치 시간과 공간을 아낄 수 있어요.
-
-- `npm install` 명령어를 `--production` 옵션과 함께 실행하거나, `NODE_ENV` 환경 변수가 `"production"` 으로 설정되었을 때, devDependencies 에 명시된 패키지들은 설치되지 않아요.
-- 내가 만든 패키지를 다른 프로젝트에서 다운로드 하더라도, devDependencies에 명시된 패키지들은 함께 설치되지 않아요.
-
-:::
-
-## 3. 기본 폴더 구조 만들기
-
-아래와 같이 간단한 4개 파일을 만들어 보세요.
-
-```javascript
-// src/utils/add.js
-export function add(a, b) {
-  return a + b;
-}
-```
-
-```javascript
-// src/utils/subtract.js
-export function subtract(a, b) {
-  return a - b;
-}
-```
-
-```javascript
-// src/utils/index.js
-export { add } from './add.js';
-export { subtract } from './subtract.js';
-```
-
-```javascript
-// src/index.js
-import { add } from './utils/index.js';
-
-console.log(add(1, 2));
-```
-
-이때 파일 구조는 다음과 같아요.
-
-```
-webpack-tutorial/
-├── src/
-│   ├── index.js
-│   └── utils/
-│       ├── add.js
-│       ├── index.js
-│       └── subtract.js
-├── webpack.config.js
-├── package.json
-└── node_modules/
-```
-
-## 4. 웹팩 설정 파일 만들기
-
-웹팩을 사용하려면 [어떤 파일부터 읽고](../deep-dive/bundling-process/entry.md), [결과를 어디에 저장할지](../deep-dive/bundling-process/output.md) 알려줘야 해요. 이걸 설정하는 파일이 `webpack.config.js`예요.
-
-프로젝트 루트에 다음처럼 작성해요.
-
-```javascript{6,9-12}
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  // 웹팩이 시작할 파일 경로예요.
-  entry: './src/index.js',
-
-  // 번들된 결과 파일을 저장할 위치와 파일 이름이에요.
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-
-  // 배포용 설정이에요. 코드 압축이나 최적화를 수행해요.
-  mode: 'production',
-};
-```
-
-여기서 중요한 설정 두 가지는 `entry`와 `output`이에요. 각 설정에 대한 더 자세한 내용은 링크에서 학습할 수 있어요.
-
-- [`entry`](../deep-dive/bundling-process/entry.md): 웹팩이 처음으로 불러올 파일이에요. 이 파일에서부터 필요한 모든 모듈을 찾아요.
-- [`output`](../deep-dive/bundling-process/output.md): 번들 파일을 어느 위치에 어떤 이름으로 저장할지 정해요.
-
-### 5. `npm run build` 명령어 등록하기
-
-이제 `webpack` 명령어를 쉽게 실행할 수 있도록 `package.json`에 다음과 같은 스크립트를 추가해요.
-
-```json
-{
-  "scripts": {
-    "build": "webpack"
-  }
-}
-```
-
-이제 터미널에서 아래처럼 간단하게 실행할 수 있어요.
-
-```bash
-npm run build
-```
-
-이 명령어는 웹팩을 실행해서 `src/index.js`부터 시작해 모든 의존 파일을 분석하고, `dist/bundle.js`로 하나로 묶어요.
-
-### 6. 웹팩으로 빌드하기
-
-이제 아래 명령어로 실제 번들링을 실행해요.
-
-```bash
-npm run build
-```
-
-그러면 `dist` 폴더에 `bundle.js` 파일이 생겨요. 이 파일은 4개 파일의 내용을 합쳐서 최적화된 형태로 만든 거예요.
-원래 소스 코드와 동작은 같지만, 훨씬 최적화되었어요. 불필요한 공백이 없고, 사용하지 않는 코드들은 모두 삭제되었어요.
-
-```javascript
-(()=>{"use strict";console.log(3)})();
-```
-
-이제 폴더 구조는 다음과 같을 거예요.
-
-```{4}
-webpack-tutorial/
-├── dist/
-│   └── bundle.js       # 웹팩이 만든 번들 파일
-├── src/
-│   ├── index.js
-│   └── message.js
-├── package.json
-├── webpack.config.js
-└── node_modules/
-```
-
-🎉 축하해요! 웹팩 설정을 성공적으로 마쳤어요. 이제 다음 단계로 넘어가 볼까요?
diff --git a/fundamentals/bundling/tutorial/css.md b/fundamentals/bundling/tutorial/css.md
deleted file mode 100644
index 6365e7e8..00000000
--- a/fundamentals/bundling/tutorial/css.md
+++ /dev/null
@@ -1,282 +0,0 @@
-# CSS 파일 번들링하기
-
-이번에는 CSS 파일을 웹팩으로 어떻게 처리하는지 배워볼게요.
-
-웹팩의 강력한 기능 중 하나는 JavaScript뿐 아니라 CSS, 이미지, 폰트 등 다양한 자원도 하나의 JavaScript 모듈처럼 다룰 수 있다는 점이에요. 
-
-## CSS를 JavaScript 모듈처럼 다루기
-
-CSS 파일을 JavaScript 모듈처럼 다룰 수 있다는 것은 JavaScript 코드 안에서 import 문을 사용해 특정 컴포넌트나 모듈에 필요한 스타일만 가져올 수 있다는 뜻이에요. 이렇게 하면 스타일 충돌을 방지하고, 유지 보수가 쉬운 구조로 만들 수 있어요.
-
-CSS 클래스 이름을 겹치지 않게 컴포넌트 단위로 사용할 수 있도록 도와주는 [CSS Modules](https://css-tricks.com/css-modules-part-1-need/)를 사용하는 React 앱을 살펴볼게요.
-
-`Component.js` 파일에서 `Component.module.css`를 import하고 있어요. 
-
-```javascript 2,6
-// src/Component.js
-import css from './Component.module.css';
-
-export function Component() {
-  return (
-    <h1 className={css.title}>
-      Hello, world!
-    </h1>
-  )
-}
-```
-
-```css 2-4
-/* src/Component.module.css */
-.title {
-  color: red;
-}
-```
-
-그런데 이렇게 JavaScript에서 CSS를 import하면 어떤 일이 일어날까요? JavaScript는 CSS를 직접 해석하거나 적용할 수 없기 때문에, 단순히 import한다고 해서 스타일이 자동으로 적용되지는 않아요.
-
-이 문제를 해결하기 위해 **번들러는 [로더](../deep-dive/bundling-process/loader.md)를 사용해 CSS 파일을 자바스크립트가 사용할 수 있는 모듈 형태로 변환해줘요.** 대표적인 예로 CSS 로더(css-loader)는 CSS 파일을 객체 형태로 바꿔주는데, 특히 CSS Modules와 함께 사용하면 원본 클래스 이름은 객체의 프로퍼티로, 중복을 방지하기 위해 변환된 클래스 이름은 프로퍼티 값으로 저장돼요.
-
-```javascript
-// 변환된 Component.module.css
-export default {
-  title: '_styles__title_309571057',
-};
-```
-
-## CSS 파일 웹팩에서 다루기
-
-### 1. 새 프로젝트 폴더 만들고 npm 초기화하기
-
-CSS 설정을 실습할 새 프로젝트를 만들어 볼게요. 프로젝트를 만들고 React와 관련된 라이브러리를 설치해요.
-
-```bash
-npm init -y
-npm install react react-dom
-```
-
-프로젝트에서 웹팩과 TypeScript도 사용하기 위해 설치해 주세요.
-
-```bash
-npm install webpack webpack-cli typescript --save-dev
-```
-
-`react`와 `react-dom`의 타입 정보를 불러오기 위해 타입 패키지도 설치해 주세요.
-
-```bash
-npm install @types/react @types/react-dom
-```
-
-[React 프로젝트를 웹팩에서 사용](./with-react.md)하기 위한 패키지도 설치해 주세요.
-
-```bash
-npm install babel-loader @babel/core @babel/preset-react @babel/preset-typescript html-webpack-plugin --save-dev
-```
-
-다음과 같이 `tsconfig.json`을 작성해 주세요.
-
-```json
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "strict": true,
-    "jsx": "react"
-  },
-  "include": ["src/**/*"],             
-  "exclude": ["node_modules", "dist"]  
-}
-```
-
-### 2. CSS 파일 만들고 import하기
-
-`src/Component.tsx`에 간단한 React 컴포넌트를 작성해요. 이 React 컴포넌트에서는 CSS Modules로 작성된 CSS 파일을 import해요.
-
-```typescript 3
-// src/Component.tsx
-import React from 'react';
-import css from './Component.module.css';
-
-export function Component() {
-  return (
-    <h1 className={css.title}>
-      Hello, world!
-    </h1>
-  )
-}
-```
-
-`src/Component.module.css`에 사용할 CSS 파일을 만들어 주세요.
-
-```css
-/* src/Component.module.css */
-.title {
-  color: red;
-}
-```
-
-`src/index.tsx` 파일을 만들고 위에서 만든 `Component` 컴포넌트를 브라우저에 렌더링하는 코드를 작성해 주세요.
-
-```typescript
-// src/index.tsx
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const container = document.getElementById('root')!;
-const root = createRoot(container);
-root.render(<App />);
-```
-
-마지막으로 React 서비스를 실행하는 데에 사용할 HTML 파일을 만들어 주세요.
-
-```html
-<!-- src/template.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
-<body>
-  <div id="root"></div>
-</body>
-</html>
-```
-
-이때 파일 구조는 다음과 같아요.
-
-```
-webpack-tutorial/
-├── src/
-│   ├── Component.tsx
-│   ├── Component.module.css
-│   ├── index.tsx
-│   └── template.html
-├── tsconfig.json
-├── package.json
-└── node_modules/
-```
-
-### 3. CSS 로더 설치하기
-
-웹팩이 CSS 파일을 해석하고 JavaScript로 변환할 수 있도록 하기 위해 [로더](../deep-dive/bundling-process/loader.md)를 활용해 볼게요.
-다음 2가지 로더를 설치할 거예요.
-
-```bash
-npm install style-loader css-loader --save-dev
-```
-
-각 로더의 역할은 아래와 같아요.
-
-- [`css-loader`](../deep-dive/bundling-process/loader.md#css-loader): `.css` 파일의 내용을 읽고, JavaScript에서 사용할 수 있는 형식으로 바꿔줘요.
-- [`style-loader`](../deep-dive/bundling-process/loader.md#style-loader): JavaScript로 바뀐 CSS를 웹페이지에 `<style>` 태그로 삽입해서 실제로 스타일이 적용되도록 해줘요.
-
-### 4. 웹팩 설정에 로더 추가하기
-
-이제 `webpack.config.js` 파일을 열고 CSS를 처리할 수 있도록 `module.rules` 옵션을 추가해요.
-
-```javascript{16-30}
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.tsx',
-
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-
-  mode: 'production',
-
-  module: {
-    rules: [
-      // CSS를 사용하기 위한 웹팩 설정이에요
-      {
-        // .css 확장자를 가진 파일에만 이 규칙을 적용해요
-        test: /\.css$/,           
-        // 오른쪽 또는 아래부터 순서대로 적용돼요
-        use: [
-          'style-loader', 
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true
-            }
-          }  
-        ],  
-      },
-
-      // React를 사용하기 위한 웹팩 설정이에요
-      {
-        test: /\.(ts|tsx)$/,  
-        use: [
-          { 
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react', '@babel/preset-typescript'],
-            },
-          },
-        ],
-      },
-    ],
-  },
-
-  // 빌드할 때마다 HTML 파일을 만들기 위한 설정이에요
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './src/template.html' 
-    })
-  ],
-
-  // .ts, .tsx 확장자를 생략해도 올바르게 파일을 찾을 수 있게 해주는 설정이에요
-  resolve: {
-    extensions: ['.js', '.ts', '.tsx']
-  },
-};
-```
-
-::: info 알아두세요
-
-`use` 배열은 오른쪽(아래)에서 왼쪽(위) 순서로 작동해요. 먼저 `css-loader`가 CSS를 JavaScript로 바꾸고, 그다음 `style-loader`가 그걸 HTML에 삽입해요.
-
-:::
-
-이제 React 프로젝트에서 CSS 파일을 사용할 수 있는 준비가 끝났어요.
-
-### 5. 다시 빌드하기
-
-`webpack` 명령어를 쉽게 실행할 수 있도록 `package.json`에 다음과 같은 스크립트를 추가해요.
-
-```json 3
-{
-  "scripts": {
-    "build": "webpack"
-  }
-}
-```
-
-이제 다시 웹팩으로 번들링을 실행해요.
-
-```bash
-npm run build
-```
-
-그다음 `dist/index.html`을 브라우저에서 열어보면, 우리가 기대했던 것처럼 CSS 규칙이 적용되어 `Hello, world!` 글자가 빨간색으로 보이는 것을 볼 수 있어요.
-
-## CSS가 처리되는 과정
-
-한 번 정리해 볼게요. 웹팩이 CSS 파일을 어떻게 처리하는지 단계별로 설명하면 이래요.
-
-1. `import css from './style.css'`를 만나면 웹팩이 CSS 파일을 로딩해야 한다고 판단해요.
-2. `css-loader`가 CSS 코드를 JavaScript 모듈로 바꿔줘요.
-3. `style-loader`가 이 문자열을 `<style>` 태그로 만들어서 HTML 문서에 동적으로 삽입해요.
-
-즉, CSS 파일이 JavaScript 코드의 일부처럼 동작하게 되는 거예요.
-
-이제 CSS 파일도 JavaScript처럼 `import`해서 사용할 수 있게 됐어요. 코드가 더 깔끔하고, 스타일도 모듈처럼 관리할 수 있어서 유지보수도 쉬워져요.
-
-이제 이미지와 폰트 같은 정적 자원도 웹팩에서 처리해 볼게요.
diff --git a/fundamentals/bundling/tutorial/dev-server.md b/fundamentals/bundling/tutorial/dev-server.md
deleted file mode 100644
index f49dc082..00000000
--- a/fundamentals/bundling/tutorial/dev-server.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# 개발 서버로 생산성 높이기
-
-지금까지는 코드를 수정할 때마다 `npm run build`를 실행하고, `dist/index.html` 파일을 브라우저에서 새로 열어야 했어요. 이런 방식은 반복 작업이 많고 개발 속도도 느려져요.
-
-[웹팩 개발 서버(`webpack-dev-server`)](../deep-dive/dev/dev-server.html)를 사용하면 이러한 번거로운 과정을 자동화해서 개발 속도를 크게 높일 수 있어요. 
-소스 코드가 변경되면 브라우저가 자동으로 새로고침돼서, 결과를 바로 확인할 수 있어요.
-
-## 1. 개발 서버 설치하기
-
-먼저 웹팩 개발 서버를 설치해요.
-
-```bash
-npm install webpack-dev-server --save-dev
-```
-
-이 도구는 개발 중에만 사용하는 도구이기 때문에 `--save-dev` 옵션으로 설치해요.
-
-## 2. 웹팩 설정에 개발 서버 추가하기
-
-이제 `webpack.config.js` 파일을 열고 개발 서버 설정을 추가해요.
-
-```javascript{15-23}
-// webpack.config.js
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-    assetModuleFilename: 'assets/[hash][ext][query]',
-    clean: true,  // 빌드할 때 dist 폴더를 자동으로 정리해요
-  },
-  mode: 'development',
-
-  // 개발 서버 설정
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),  // 정적 파일 경로
-    },
-    open: true,   // 서버 시작 시 브라우저 자동 열기
-    port: 9000,   // 사용할 포트 번호
-    hot: true,    // 핫 모듈 교체(HMR) 활성화
-  },
-
-  // 소스맵 설정
-  devtool: 'eval-source-map',  // 빠른 빌드를 위한 개발용 소스맵
-
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
-        type: 'asset/resource',
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource',
-      },
-    ],
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: '웹팩 튜토리얼',
-    }),
-  ],
-};
-```
-
-- `static.directory`: HTML과 에셋 파일이 위치한 폴더를 지정해요.
-- `open`: 개발 서버를 실행할 때 브라우저를 자동으로 열어요.
-- `port`: 서버가 실행될 포트를 지정해요. (예: `http://localhost:9000`)
-- `hot`: HMR을 설정해서 변경된 부분만 즉시 반영해요.
-- `devtool`: 소스맵을 설정해서 브라우저 개발자 도구에서 원본 코드를 확인할 수 있어요.
-
-## 3. 개발 서버 실행 스크립트 추가하기
-
-이제 `package.json`에 개발 서버를 실행하는 스크립트를 추가해요.
-
-```json
-{
-  "scripts": {
-    "build": "webpack",
-    "start": "webpack serve"
-  }
-}
-```
-
-## 4. 개발 서버 실행하기
-
-이제 다음 명령어로 개발 서버를 실행할 수 있어요.
-
-```bash
-npm start
-```
-
-브라우저가 자동으로 열리고, `http://localhost:9000`에서 애플리케이션이 실행돼요. 코드를 수정하면 브라우저가 자동으로 새로고침돼서 결과를 바로 볼 수 있어요.
-
-## 5. HMR(Hot Module Reload)로 더 빠르게 개발하기
-
-[HMR](../deep-dive/dev/hmr.md)은 전체 페이지를 새로고침하지 않고, 수정된 모듈만 빠르게 교체해주는 기능이에요. CSS는 자동으로 HMR이 적용되지만, JavaScript 파일은 별도의 설정이 필요해요.
-
-예를 들어, `src/index.js` 파일에 다음과 같이 HMR 설정을 추가할 수 있어요.
-
-```javascript{27-35}
-// src/index.js
-import { getMessage } from './message';
-import './style.css';
-import LogoImage from './images/logo.png';
-
-function component() {
-  const element = document.createElement('div');
-  element.textContent = getMessage();
-  element.classList.add('message');
-
-  const logo = new Image();
-  logo.src = LogoImage;
-  logo.alt = 'Logo';
-  logo.width = 200;
-
-  const container = document.createElement('div');
-  container.appendChild(logo);
-  container.appendChild(element);
-
-  return container;
-}
-
-// 초기 렌더링
-let element = component();
-document.body.appendChild(element);
-
-// HMR 활성화 설정
-if (module.hot) {
-  module.hot.accept('./message', () => {
-    console.log('message.js 업데이트됨!');
-    document.body.removeChild(element);
-    element = component();
-    document.body.appendChild(element);
-  });
-}
-```
-
-이제 `message.js` 파일을 수정하면 페이지 전체가 새로고침되지 않고, **변경된 메시지만 빠르게 반영돼요.** 이 기능은 개발할 때 매우 편리해요. 덕분에 입력 폼 상태나 스크롤 위치가 초기화되지 않아 개발할 때 더욱 편리해요.
-
-웹팩 개발 서버와 HMR 기능을 함께 사용하면, 매번 빌드하고 브라우저를 열 필요 없이 저장하는 즉시 변경 사항을 바로 확인할 수 있어서 생산성이 크게 높아져요. 더 자세한 설명은 [개발 서버](../deep-dive/dev/dev-server.md)에서 확인할 수 있어요.
-
diff --git a/fundamentals/bundling/tutorial/image-and-font.md b/fundamentals/bundling/tutorial/image-and-font.md
deleted file mode 100644
index 3dc86967..00000000
--- a/fundamentals/bundling/tutorial/image-and-font.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# 이미지와 폰트 다루기
-
-웹사이트에서는 JavaScript와 CSS뿐 아니라 이미지, 폰트 같은 정적 자원도 많이 사용해요. 이런 파일들도 로더를 이용해 모듈처럼 불러와서 사용할 수 있어요.
-
-## 이미지와 폰트를 웹팩에서 다루는 방법
-
-이미지, 폰트같은 정적 자원도 [CSS 파일을 로드하는 예시](./css.md)처럼 JavaScript에서 import해서 사용할 수 있어요.
-
-```typescript
-import LogoImage from './images/LogoImage.png';
-
-export function Image() {
-  return <img src={LogoImage} alt="로고" />
-}
-```
-
-이미지같이 정적 파일을 import했을 때 일어날 동작은 웹팩의 [Asset Modules](https://webpack.js.org/guides/asset-modules/) 로더로 정의할 수 있어요.
-
-Asset Modules를 사용하면, 웹팩은 정적 자원을 자원이 있는 위치를 가리키는 JavaScript 문자열로 변환해요. 
-그래서 `<img />` 태그의 `src` 값을 그대로 제공해도 되죠.
-
-```typescript
-export default `{로고 이미지가 있는 위치}`;
-```
-
-## 1. 웹팩 설정에 애셋 처리 규칙 추가하기
-
-이제 `webpack.config.js` 파일에 이미지와 폰트 파일을 처리하는 규칙을 추가해 볼게요.
-
-`type: 'asset/resource'`는 해당 파일을 번들에 포함하지 않고, 복사만 한 뒤 [파일 경로(URL)](../deep-dive/bundling-process/resolution.html#파일시스템-경로)를 반환해 줘요. JavaScript나 CSS에서 이 경로를 사용할 수 있어요.
-
-```javascript{18-25}
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-    assetModuleFilename: 'assets/[hash][ext][query]', // 에셋 파일의 출력 경로 형식
-  },
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,  // 이미지 확장자
-        type: 'asset/resource',              // 파일 복사 + 경로 반환
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i, // 폰트 확장자
-        type: 'asset/resource',
-      },
-    ],
-  },
-};
-```
-
-## 2. 이미지 파일 사용하기
-
-먼저 `src/images` 폴더를 만들고 `logo.png` 같은 이미지를 넣어요. 이제 JavaScript 파일에서 이 이미지를 `import` 구문으로 불러올 수 있어요.
-
-`LogoImage`에는 웹팩이 생성한 실제 이미지 파일 경로가 들어 있어요. 브라우저에서 직접 접근 가능한 경로예요.
-
-```javascript{4}
-// src/index.js
-import { getMessage } from './message';
-import './style.css';
-import LogoImage from './images/logo.png';  // 이미지 파일을 불러와요
-
-function component() {
-  const element = document.createElement('div');
-  element.textContent = getMessage();
-  element.classList.add('message');
-
-  const logo = new Image();
-  logo.src = LogoImage;    // 불러온 이미지 경로를 src로 설정해요
-  logo.alt = 'Logo';
-  logo.width = 200;
-
-  const container = document.createElement('div');
-  container.appendChild(logo);
-  container.appendChild(element);
-
-  return container;
-}
-
-document.body.appendChild(component());
-```
-
-## 3. CSS에서 이미지와 폰트 사용하기
-
-CSS에서도 이미지와 폰트를 바로 사용할 수 있어요. 웹팩은 CSS 파일 안에 있는 `url()` 경로도 분석해서 자동으로 처리해 줘요.
-
-`src/style.css` 파일을 아래처럼 수정해 볼게요.
-
-```css
-/* src/style.css */
-@font-face {
-  font-family: 'MyCustomFont';
-  src: url('./fonts/custom-font.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-}
-
-body {
-  font-family: 'MyCustomFont', 'Arial', sans-serif;
-  background-color: #f5f5f5;
-}
-
-.message {
-  padding: 20px;
-  background-color: #e9f7fe;
-  border: 1px solid #b3e5fc;
-  border-radius: 4px;
-  color: #0288d1;
-  margin: 20px;
-
-  background-image: url('./images/icon.png');
-  background-repeat: no-repeat;
-  background-position: 10px center;
-  padding-left: 40px;
-}
-```
-
-폰트를 사용하려면 `src/fonts` 폴더를 만들고 `custom-font.woff2` 파일을 직접 넣어야 해요.
-
-## 4. 빌드하고 결과 확인하기
-
-이제 웹팩으로 다시 번들링해 볼게요.
-
-```bash
-npm run build
-```
-
-빌드가 완료되면 `dist/assets/` 폴더에 이미지와 폰트 파일이 복사되어 있고, JavaScript와 CSS에서는 이 파일들을 올바른 경로로 사용할 수 있어요.
-
-브라우저에서 `dist/index.html` 파일을 열면, 이미지가 화면에 나타나고 폰트도 적용된 걸 볼 수 있어요.
-
-이렇게 하면 **JavaScript, CSS 이미지, 폰트까지 모두 웹팩에서 자동으로 관리할 수 있는 개발 환경**이 완성된 거예요 🎉
-
-::: info 웹팩 5부터는 Asset Modules를 사용해요
-
-이전 웹팩 버전에서는 이미지나 폰트를 불러오기 위해 `file-loader`, `url-loader` 같은 로더를 설치해야 했어요. 하지만 **웹팩 5부터는 별도 로더 없이 내장 기능인 Asset Modules를 사용할 수 있어요.**
-
-Asset Modules는 정적 파일을 자동으로 분석해서 적절하게 처리해 줘요. 파일을 복사해서 결과 폴더에 넣고, 파일 경로(URL)를 JavaScript 코드에서 사용할 수 있도록 해줘요.
-
-:::
\ No newline at end of file
diff --git a/fundamentals/bundling/tutorial/optimization.md b/fundamentals/bundling/tutorial/optimization.md
deleted file mode 100644
index c8d90f5a..00000000
--- a/fundamentals/bundling/tutorial/optimization.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# 최적화하기
-
-개발할 땐 빠르게 빌드하고 바로 결과를 확인하는 게 중요하지만, 운영 환경에서는 성능과 최적화가 훨씬 더 중요해요. 그래서 운영용 빌드에서는 다음과 같은 작업이 필요해요.
-
-- JavaScript와 CSS 압축
-- 코드 분할 (필요한 코드만 불러오기)
-- 캐시를 위한 파일 이름 해시
-- 사용하지 않는 코드 제거 (Tree shaking)
-
-이런 작업을 효율적으로 관리하려면 웹팩 설정을 개발 환경과 운영 환경으로 나눠서 관리하는 것이 가장 좋아요.
-
-## 1. 웹팩 설정 분리하기
-
-설정을 목적에 따라 나누면 관리가 편해지고 실수를 줄일 수 있어요. 보통 다음과 같이 3개의 설정 파일로 나눠요.
-
-| 파일 이름 | 설명 |
-|-----------|------|
-| `webpack.common.js` | 공통 설정 (입력, 출력, 로더 등) |
-| `webpack.dev.js`    | 개발 환경 전용 설정 (소스맵, devServer 등) |
-| `webpack.prod.js`   | 운영 환경 전용 설정 (압축, 분할, 해시 등) |
-
-### 공통 설정: `webpack.common.js`
-
-이 파일에는 개발과 운영 환경에서 **공통으로 사용되는 설정**을 담아요. 진입점, 출력 경로, 로더 설정, HTML 템플릿 등이 여기에 포함돼요.
-
-```js{4,5,6,13,18,27}
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    filename: '[name].[contenthash].js',  // 파일 이름에 해시를 붙여 캐싱 문제 방지
-    path: path.resolve(__dirname, 'dist'),
-    assetModuleFilename: 'assets/[hash][ext][query]', // 이미지 등 에셋 파일 이름 설정
-    clean: true,  // 빌드할 때 dist 폴더를 먼저 비워요
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,       // JavaScript와 JSX 파일 처리
-        exclude: /node_modules/,
-        use: 'babel-loader',
-      },
-      {
-        test: /\.css$/,            // CSS 처리
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,  // 이미지 처리
-        type: 'asset/resource',
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i, // 폰트 파일 처리
-        type: 'asset/resource',
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'], // 확장자 생략 가능
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: 'React + 웹팩',
-      template: './src/template.html',
-    }),
-  ],
-};
-```
-
-### 개발 전용 설정: `webpack.dev.js`
-
-개발할 때는 빠른 빌드와 디버깅을 위해 소스맵과 개발 서버 설정이 필요해요.
-
-```js{4,8,12,17}
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devtool: 'eval-source-map',  // 빠른 빌드를 위한 소스맵
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),
-    },
-    open: true,  // 서버 시작 시 브라우저 자동 열기
-    port: 9000,
-    hot: true,   // HMR(핫 모듈 교체) 활성화
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development'),
-      'process.env.API_URL': JSON.stringify('http://localhost:3000/api'),
-    }),
-  ],
-});
-```
-
-`DefinePlugin`은 코드 안에서 `process.env.NODE_ENV` 같은 변수를 사용할 수 있게 만들어줘요.
-
-### 운영 전용 설정: `webpack.prod.js`
-
-운영 환경에서는 성능을 높이기 위해 **압축, 코드 분할, 캐시 최적화** 등이 필요해요.
-
-```js{11,12,18,22,30,36}
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const webpack = require('webpack');
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: 'source-map',  // 운영용 디버깅을 위한 소스맵 (크기 작음)
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],  // CSS를 별도 파일로 추출
-      },
-    ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'styles/[name].[contenthash].css', // 캐싱을 위한 해시 포함
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.API_URL': JSON.stringify('https://api.example.com'),
-    }),
-  ],
-  optimization: {
-    minimize: true,  // 코드 압축
-    minimizer: [
-      new TerserPlugin(),         // JavaScript 압축
-      new CssMinimizerPlugin(),   // CSS 압축
-    ],
-    splitChunks: {
-      chunks: 'all',              // 코드 분할
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/, // 외부 라이브러리 분리
-          name: 'vendors',
-          chunks: 'all',
-        },
-      },
-    },
-  },
-});
-```
-
-## 2. 스크립트 등록
-
-이제 개발과 운영 빌드를 따로 실행할 수 있도록 `package.json`의 `scripts` 항목을 수정해요.
-
-```json{3,4}
-{
-  "scripts": {
-    "start": "webpack serve --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js"
-  }
-}
-```
-
-- `npm start`: 개발 서버를 실행해요.
-- `npm run build`: 운영용으로 최적화된 빌드를 실행해요.
-
-## 3. 환경 변수 관리: dotenv-webpack 사용
-
-환경 변수를 `.env` 파일에서 관리하면 코드가 깔끔해지고 보안도 높아져요. `dotenv-webpack` 플러그인을 사용하면 웹팩 설정에서 `.env` 파일 내용을 불러와 코드에서 쉽게 활용할 수 있어요.
-
-먼저 플러그인을 설치해요.
-
-```bash
-npm install dotenv-webpack --save-dev
-```
-
-`.env.development`, `.env.production` 파일은 각각 다음과 같아요.
-
-```bash
-# .env.development
-API_URL=http://localhost:3000/api
-```
-
-```bash
-# .env.production
-API_URL=https://api.example.com
-```
-
-웹팩 설정에는 다음과 같은 설정을 추가해요.
-
-```js{4,9}
-const Dotenv = require('dotenv-webpack');
-
-module.exports = merge(common, {
-  mode: 'development', // 또는 production
-  plugins: [
-    new Dotenv({
-      path: './.env.development',  // 또는 .env.production
-    }),
-  ],
-});
-```
-
-코드에서 환경 변수를 사용할 때는 다음과 같이 간단하게 접근할 수 있어요.
-
-```js{3}
-const API_URL = process.env.API_URL;
-
-fetch(`${API_URL}/data`);
-```
-
-이렇게 웹팩 설정을 개발 환경과 운영 환경으로 나누면 관리가 훨씬 더 쉬워져요. 
-코드 압축, 불필요한 코드 제거, 파일 분할 및 캐시 관리가 자동으로 이뤄지기 때문에 성능도 좋아지고 빌드 실수도 방지할 수 있어요.
-
diff --git a/fundamentals/bundling/tutorial/plugin.md b/fundamentals/bundling/tutorial/plugin.md
deleted file mode 100644
index 12b8fdeb..00000000
--- a/fundamentals/bundling/tutorial/plugin.md
+++ /dev/null
@@ -1,178 +0,0 @@
-# 플러그인 추가하기
-
-앞서 웹팩이 로더로 다양한 파일을 처리하는 과정을 살펴봤어요. 하지만 로더가 개별 파일을 처리하는 반면, 프로젝트 전체의 빌드 과정과 결과물을 제어하거나 자동화하는 작업은 [플러그인](../deep-dive/bundling-process/plugin.md)이 담당해요.
-
-플러그인은 HTML 파일을 자동으로 만들어 주거나, CSS 파일을 별도로 추출하거나, 빌드 결과를 정리하고, 코드를 압축하고 최적화하는 등 **애플리케이션 빌드 전반에 걸쳐 영향을 주는 작업**을 수행해요.
-
-이번에는 웹팩에서 자주 사용하는 대표적인 플러그인들을 직접 사용해 볼게요.
-
-## 1. [`HtmlWebpackPlugin`](../deep-dive/bundling-process/plugin.md#htmlwebpackplugin) – HTML 파일 자동 생성하기
-
-기본적으로 웹팩은 JavaScript만 처리할 수 있어서, HTML 파일은 직접 만들어야 했어요. 하지만 `HtmlWebpackPlugin`을 사용하면 HTML 파일 생성도 자동화할 수 있어요. 이 플러그인은 **번들된 JavaScript 파일을 HTML에 자동으로 삽입**해 줘서 훨씬 편리해요.
-다음 커맨드로 `HtmlWebpackPlugin`을 설치해요.
-
-```bash
-npm install html-webpack-plugin --save-dev
-```
-
-웹팩 설정 파일(`webpack.config.js`)에서 설치한 플러그인을 불러와서 등록해요.
-
-```javascript
-// webpack.config.js
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: '웹팩 튜토리얼',  // <title> 태그 내용
-      template: './src/template.html', // 선택: HTML 템플릿 지정
-    }),
-  ],
-};
-```
-
-이렇게 설정하면 웹팩은 지정된 템플릿을 기반으로 `dist/index.html` 파일을 자동으로 생성해요. 번들링된 JavaScript 파일도 `<script>` 태그로 자동으로 추가돼요.
-
-### 템플릿 예시
-
-`src/template.html` 파일을 아래처럼 작성할 수 있어요.
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
-</head>
-<body>
-  <div id="app"></div>
-</body>
-</html>
-```
-
-빌드하면 `dist/index.html` 파일이 자동 생성되고, 번들된 JavaScript 파일도 자동으로 포함돼요. 템플릿에는 EJS 문법을 사용할 수 있어서 `title` 같은 값을 동적으로 넣을 수도 있어요.
-
-## 2. [`MiniCssExtractPlugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/) – CSS 파일 분리하기
-
-기본적으로 웹팩은 CSS 파일을 JavaScript 코드 내부에 포함시켜 실행 시 `<style>` 태그로 주입해요. 하지만 **운영 환경에서는 CSS를 별도의 `.css` 파일로 분리하는 것이 성능과 유지보수 측면에서 더 좋아요.**
-
-이때 사용하는 것이 `MiniCssExtractPlugin`이에요. 이 플러그인은 **CSS를 별도 파일로 추출하고, HTML에서 자동으로 `<link>` 태그로 연결**해 줘요.
-
-다음 명령어로 `MiniCssExtractPlugin`를 설치할 수 있어요.
-
-```bash
-npm install mini-css-extract-plugin --save-dev
-```
-
-추가됐다면, `style-loader` 대신 `MiniCssExtractPlugin.loader`를 사용하고, 플러그인을 등록해요.
-
-```javascript{2,9-12}
-// webpack.config.js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,  // 스타일을 <style>이 아닌 CSS 파일로 추출
-          'css-loader',
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({ title: '웹팩 튜토리얼' }),
-    new MiniCssExtractPlugin({
-      filename: 'styles/[name].css', // 추출될 CSS 파일 경로
-    }),
-  ],
-};
-```
-
-이제 빌드를 실행하면 CSS 파일이 `dist/styles/main.css` 와 같은 경로에 생성되고, HTML에도 자동으로 `<link rel="stylesheet" ...>` 태그가 추가돼요. 이렇게하면 CSS 파일이 별도로 다운로드되기 때문에 브라우저 캐시 활용도 좋아지고, 로딩 성능도 향상돼요.
-
-## 3. [`CleanWebpackPlugin`](https://github.com/johnagan/clean-webpack-plugin) – 빌드 결과 정리하기
-
-웹팩은 기본적으로 매번 `dist` 폴더를 덮어쓰지만 때때로 예전 파일이 남아 있을 수도 있어요.
-그래서 **빌드 전에 기존 결과를 깨끗하게 정리하고 시작하는 게 더 안전해요.**
-
-이를 위해 사용하는 플러그인이 바로 `CleanWebpackPlugin`이에요. 다음 명령어로 설치할 수 있어요.
-
-```bash
-npm install clean-webpack-plugin --save-dev
-```
-
-웹팩 설정에 플러그인을 추가해요.
-
-```javascript{2,8}
-// webpack.config.js
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
-module.exports = {
-  plugins: [
-    new HtmlWebpackPlugin({ title: '웹팩 튜토리얼' }),
-    new MiniCssExtractPlugin({ filename: 'styles/[name].css' }),
-    new CleanWebpackPlugin(),  // 빌드 전에 dist 폴더를 자동으로 정리해요
-  ],
-};
-```
-
-::: info 웹팩 5에서는 `output.clean: true`도 가능해요
-
-웹팩 5부터는 플러그인 없이도 간단한 정리를 할 수 있어요.
-
-```javascript
-output: {
-  path: path.resolve(__dirname, 'dist'),
-  clean: true, // CleanWebpackPlugin 없이도 정리 가능
-},
-```
-
-다만, 여러 폴더를 정리하거나 더 정교한 동작을 원한다면 여전히 `CleanWebpackPlugin`이 더 유용해요.
-:::
-
-## 4. [`DefinePlugin`](../deep-dive/bundling-process/plugin.md#defineplugin) – 환경 변수 설정하기
-
-개발 환경과 운영 환경에서 애플리케이션이 다르게 동작해야 하는 경우가 있어요. 이때 **환경 변수를 사용해 코드 안에서 조건부로 동작을 제어할 수 있어요.**
-
-웹팩 기본 플러그인인 `DefinePlugin`을 사용하면 빌드 시점에 전역 상수처럼 사용할 수 있어요. 웹팩 설정에 다음과 같이 추가해요.
-
-```javascript{6-8}
-// webpack.config.js
-const webpack = require('webpack');
-
-module.exports = {
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-    }),
-  ],
-};
-```
-코드 내에서 아래와 같이 환경 변수에 따라 다르게 동작하도록 만들 수 있어요.
-
-```javascript
-if (process.env.NODE_ENV === 'development') {
-  console.log('개발 중입니다!');
-}
-```
-
-위 코드는 `NODE_ENV` 값이 'development'일 때만 실행돼요. 이런 방식으로 로그를 숨기거나, 테스트 코드를 조건부로 실행할 수 있어요.
-
----
-
-플러그인은 웹팩을 더 강력하고 편리하게 만들어주는 도구예요. 아래는 자주 쓰이는 플러그인들의 사용 목적을 간략히 정리한 거예요.
-
-| 목적 | 플러그인 |
-|------|----------|
-| HTML 파일 자동 생성 | `HtmlWebpackPlugin` |
-| CSS 파일 분리 | `MiniCssExtractPlugin` |
-| dist 폴더 정리 | `CleanWebpackPlugin` 또는 `output.clean: true` |
-| 환경 변수 설정 | `DefinePlugin` 또는 `dotenv-webpack` |
-| 코드 압축 | `TerserWebpackPlugin`, `CssMinimizerPlugin` 등 |
-
-웹팩 플러그인을 사용하면 번들링 결과를 더 효율적으로 만들 수 있어요. 코드 최적화, 파일 정리, 환경 설정, 자동화 등 다양한 작업을 설정 한 번으로 처리할 수 있어서 개발 속도와 유지보수 품질을 동시에 높일 수 있어요.
-
-다음 단계에서는 React 프로젝트에서 웹팩을 설정하는 방법을 배워볼게요.
\ No newline at end of file
diff --git a/fundamentals/bundling/tutorial/typescript.md b/fundamentals/bundling/tutorial/typescript.md
deleted file mode 100644
index 99552d7a..00000000
--- a/fundamentals/bundling/tutorial/typescript.md
+++ /dev/null
@@ -1,163 +0,0 @@
-# TypeScript 코드 번들링하기
-
-현대 웹 개발은 JavaScript만 사용하지 않고, TypeScript도 사용해요.
-
-그런데 브라우저에서는 JavaScript만을 지원하기 때문에 TypeScript 코드는 실행할 수 없어요. 웹팩을 활용하면 TypeScript로 작성된 프로젝트도 브라우저에서 실행할 수 있도록 번들링할 수 있어요.
-
-## TypeScript 프로젝트 설정하기
-
-실제로 TypeScript 프로젝트를 만들어 볼게요. [앞서서 숫자를 계산한 튜토리얼 코드](./basic.md#3-기본-폴더-구조-만들기)를 다음과 같이 TypeScript로 변환해 주세요.
-
-```javascript
-// src/utils/add.ts
-export function add(a, b) {
-  return a + b;
-}
-```
-
-```javascript
-// src/utils/subtract.ts
-export function subtract(a, b) {
-  return a + b;
-}
-```
-
-```javascript
-// src/utils/index.ts
-export { add } from './add.ts';
-export { subtract } from './subtract.ts';
-```
-
-```javascript
-// src/index.ts
-import { add } from './utils/index.ts';
-
-console.log(add(1, 2));
-```
-
-프로젝트에서 TypeScript를 사용하기 위해 설치해 주세요.
-
-```npm
-npm install typescript --save-dev
-```
-
-다음과 같이 추천 TypeScript 설정을 `tsconfig.json`에 작성해 주세요.
-
-```json
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "strict": true
-  },
-  "include": ["src/**/*"],             
-  "exclude": ["node_modules", "dist"]  
-}
-```
-
-이때 파일 구조는 다음과 같아요.
-
-```
-webpack-tutorial/
-├── src/
-│   ├── index.ts
-│   └── utils/
-│       ├── add.ts
-│       ├── index.ts
-│       └── subtract.ts
-├── webpack.config.js
-├── tsconfig.json
-├── package.json
-└── node_modules/
-```
-
-## 로더 설정하기
-
-웹팩도 기본적으로 JavaScript 코드만 처리할 수 있어요. TypeScript 같이 JavaScript가 아닌 파일을 웹팩에서 사용하려면 [로더](../deep-dive/bundling-process/loader.md)라는 도구가 필요해요. 로더는 웹팩에게 "이런 종류의 파일을 어떻게 JavaScript로 변환해서 다뤄야 하는지"를 알려줘요.
-
-### 필요한 패키지 설치하기
-
-웹팩으로 TypeScript 파일을 불러오기 위해 `babel-loader`, `@babel/core`, `@babel/preset-typescript` 패키지를 설치해 주세요.
-
-```bash
-npm install babel-loader @babel/core @babel/preset-typescript --save-dev
-```
-
-### Babel
-
-[Babel](https://babeljs.io)은 TypeScript 같은 문법을 JavaScript로 변환해주는 컴파일러예요. 예를 들어, 다음과 같은 TypeScript 코드를 일반 JavaScript 코드로 변환해 주죠.
-
-```typescript
-// input.ts (TypeScript 코드)
-const one: number = 1;
-const two: number = 2;
-
-function add(x: number, y: number): number {
-  return x + y;
-}
-```
-
-```javascript
-// output.js (JavaScript 코드)
-const one = 1;
-const two = 2;
-
-function add(x, y) {
-  return x + y;
-}
-```
-
-Babel의 핵심 로직은 `@babel/core` 패키지에 포함되어 있고, Babel이 TypeScript를 이해하고 변환하기 위해서는 `@babel/preset-typescript` 패키지가 필요해요. 
-
-### 웹팩 설정에 로더 추가하기
-
-이제 `webpack.config.js` 파일을 열고 TypeScript를 처리할 수 있도록 `module.rules`를 추가해요. 
-
-```js 11-26
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.ts',
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,  // .ts 확장자를 가진 파일에만 이 규칙을 적용해요
-        use: [
-          // Babel로 TypeScript 파일을 JavaScript로 변환해요
-          { 
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-typescript'],
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-```
-
-## 다시 빌드하기 ​
-
-이제 다시 웹팩으로 번들링을 실행해요.
-
-```bash
-npm run build
-```
-
-다시 `dist/bundle.js` 파일을 열어보면, TypeScript 코드가 JavaScript로 변환된 것을 확인할 수 있어요. 기존과 동일하게 하나의 JavaScript 파일로 묶여서 최적화되었어요.
-
-```javascript
-(()=>{"use strict";console.log(3)})();
-```
-
-🎉 축하해요! 웹팩으로 TypeScript 설정을 잘 완료했어요. 
\ No newline at end of file
diff --git a/fundamentals/bundling/tutorial/with-react.md b/fundamentals/bundling/tutorial/with-react.md
deleted file mode 100644
index c51e1cb0..00000000
--- a/fundamentals/bundling/tutorial/with-react.md
+++ /dev/null
@@ -1,251 +0,0 @@
-# React와 함께 웹팩 사용하기
-
-지금까지는 순수 JavaScript 프로젝트를 위한 웹팩 설정을 살펴봤어요. 이번에는 실제 프론트엔드 프로젝트에서 React를 사용할 때 웹팩을 어떻게 사용할 수 있는지 배워볼게요.
-
-[React](https://react.dev)는 사용자 인터페이스(UI)를 구성하기 위한 JavaScript 라이브러리예요. `JSX`라는 문법을 사용하는데, 이는 JavaScript 안에서 HTML처럼 코드를 작성할 수 있도록 도와줘요. 
-
-```tsx 2
-export function Component() {
-  return <div>Hello, world!</div>;
-}
-```
-
-하지만 브라우저는 JSX를 바로 이해할 수 없기 때문에, JSX를 일반 JavaScript로 변환하는 작업이 필요해요. 
-
-## 1. React 프로젝트 만들기
-
-먼저 React 프로젝트를 만들어 볼게요. 프로젝트를 만들고 React와 관련된 라이브러리를 설치해요.
-
-```bash
-npm init -y
-npm install react react-dom
-```
-
-프로젝트에서 웹팩과 TypeScript도 사용하기 위해 설치해 주세요.
-
-```bash
-npm install webpack webpack-cli typescript --save-dev
-```
-
-`react`와 `react-dom`의 타입 정보를 불러오기 위해 타입 패키지도 설치해 주세요.
-
-```bash
-npm install @types/react @types/react-dom
-```
-
-다음과 같이 추천 TypeScript 설정을 `tsconfig.json`에 작성해 주세요.
-
-```json
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "strict": true,
-    "jsx": "react"
-  },
-  "include": ["src/**/*"],             
-  "exclude": ["node_modules", "dist"]  
-}
-```
-
-## 2. React 컴포넌트 만들기
-
-`src/App.tsx` 파일을 만들고 간단한 React 컴포넌트를 작성해요.
-
-```typescript
-// src/App.tsx
-import React, { useState } from 'react';
-
-export default function App() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="app-container">
-      <h1>React + 웹팩</h1>
-      <div className="counter">
-        <p>카운터: {count}</p>
-        <button onClick={() => setCount(count + 1)}>증가</button>
-        <button onClick={() => setCount(count - 1)}>감소</button>
-      </div>
-    </div>
-  );
-};
-```
-
-`src/index.tsx` 파일을 만들고 위에서 만든 `App` 컴포넌트를 브라우저에 렌더링하는 코드를 작성해 주세요.
-
-```typescript
-// src/index.tsx
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const container = document.getElementById('root')!;
-const root = createRoot(container);
-root.render(<App />);
-```
-
-이때 파일 구조는 다음과 같아요.
-
-```
-webpack-tutorial/
-├── src/
-│   ├── index.ts
-│   └── App.tsx
-├── tsconfig.json
-├── package.json
-└── node_modules/
-```
-
-## 3. 웹팩 설정하기
-
-웹팩이 React의 JSX 코드를 처리할 수 있도록 하기 위해 [로더](../deep-dive/bundling-process/loader.md)를 활용해 볼게요. 로더를 사용하면 웹팩에게 JSX 같은 JavaScript 코드가 아닌 문법을 어떻게 다뤄야 하는지 알려줄 수 있어요.
-
-[TypeScript 프로젝트를 만들 때](./typescript.md)와 같이, JSX 코드도 [Babel](./typescript.md#babel)을 활용해서 변환할 수 있어요.
-
-### 필요한 패키지 설치하기
-
-웹팩으로 JSX 및 TypeScript 코드를 불러오기 위해 `babel-loader`, `@babel/core`, `@babel/preset-react`, `@babel/preset-typescript` 패키지를 설치해 주세요.
-
-```bash
-npm install babel-loader @babel/core @babel/preset-react @babel/preset-typescript --save-dev
-```
-
-### Babel 설정하기
-
-이제 `webpack.config.js` 파일을 열고, TypeScript와 JSX 코드를 처리할 수 있도록 `module.rules` 를 설정해 주세요.
-
-```js 15-31
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  // ./src/index.tsx 부터 시작해요.
-  entry: './src/index.tsx',
-
-  // 번들된 결과물은 ./dist/bundle.js에 저장해요.
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-
-  mode: 'production',
-
-  module: {
-    rules: [
-      {
-        test: /\.(ts|tsx)$/,  // .ts 또는 .tsx 확장자를 가진 파일에만 이 규칙을 적용해요
-        use: [
-          // Babel로 JSX 및 TypeScript 문법을 JavaScript로 변환해요
-          { 
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react', '@babel/preset-typescript'],
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-```
-
-### 경로 탐색 규칙 설정하기
-
-`import` 문에서 `.js`와 더불어 `.ts` 또는 `.tsx` 확장자를 생략하더라도 올바르게 파일을 찾을 수 있도록, 기본 확장자를 [`resolve.extensions`](/deep-dive/bundling-process/resolution.md#확장자를-찾는-우선순위-설정하기-extensions)에 지정해 주세요.
-
-```javascript 3
-{
-  resolve: {
-    extensions: ['.js', '.ts', '.tsx']
-  },
-}
-```
-
-`import App from './App'`처럼 쓸 때, 실제 파일 이름이 `App.tsx`라도 `.tsx` 확장자를 생략해도 되게 해줘요.
-
-### HTML 문서 만들기
-
-React는 JavaScript로 사용자 인터페이스를 만들어서 HTML 문서 안에 끼워 넣는 방식으로 동작해요. 그래서 만들었던 React 프로젝트를 실행하기 위해서는 HTML 파일을 하나 만들고, `<App />` 컴포넌트를 렌더링할 루트 엘리먼트를 정의해야 해요.
-
-다음과 같이 `src/template.html`에 React 서비스를 실행하는 데에 사용할 HTML 파일의 템플릿을 정의해 주세요.
-
-```html
-<!-- src/template.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
-<body>
-  <div id="root"></div>
-</body>
-</html>
-```
-
-`<div id="root"></div>`은 React 앱이 실제로 렌더링될 공간이에요. `src/index.tsx`에서 `ReactDOM.createRoot(document.getElementById('root'))` 코드가 여기서 동작해요.
-
-### `HtmlWebpackPlugin` 정의하기
-
-웹팩 빌드가 될 때마다 번들된 결과물을 참조하는 HTML 파일이 생성되도록 하기 위해서는 [플러그인](../deep-dive/bundling-process/plugin.md#htmlwebpackplugin) 설정이 필요해요. 먼저 `html-webpack-plugin` 패키지를 설치해 주세요.
-
-```bash
-npm install html-webpack-plugin --save-dev
-```
-
-그리고 `webpack.config.js`에 `HtmlWebpackPlugin`을 정의하세요.
-
-```javascript 10-12
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-/* ... */
-
-// webpack.config.js
-module.exports = {
-  /* ... */ 
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './src/template.html'  // 사용할 HTML 템플릿 파일 경로
-    })
-  ],
-}
-
-```
-
-이렇게 템플릿을 지정하면 우리가 만든 HTML 구조를 유지하면서, 웹팩이 자동으로 번들된 JavaScript 파일을 가리키는 `<script src="...">`를 추가해줘요.
-
-템플릿 파일에는 반드시 `<div id="root"></div>`가 있어야 React 앱이 그 안에 렌더링될 수 있어요.
-
-이제 JSX가 잘 변환되고, React 앱이 HTML 안에 잘 삽입되도록 준비가 끝났어요.
-
-## 4. 웹팩으로 빌드하기
-
-이제 필요한 모든 웹팩 설정이 끝났어요! `webpack` 명령어를 쉽게 실행할 수 있도록 `package.json`에 다음과 같은 스크립트를 추가해요.
-
-```json 3
-{
-  "scripts": {
-    "build": "webpack"
-  }
-}
-```
-
-다음 명령어로 실제 번들링을 실행해요.
-
-```bash
-npm run build
-```
-
-그러면 `dist` 폴더에 `bundle.js`와 `index.html`이 생겨요. 
-JavaScript 파일에는 우리가 만든 React 서비스가 번들링되어 있고, HTML 파일은 그 JavaScript 파일을 로드하죠.
-
-브라우저에서 실행할 수 없는 JSX와 TypeScript 문법도 JavaScript 파일로 변환되어, 문제없이 실행이 가능해요.
-
-`index.html` 파일을 열면 브라우저에서 카운터가 표시되나요? 버튼을 눌렀을 때 숫자가 증가/감소하나요?
-
-모두 잘 작동한다면, **React + 웹팩 개발 환경 구축에 성공한 거예요! 🎉**
\ No newline at end of file