From 7aab26f79a3bec037b8f53b67ee244fd1f1ec3d5 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Tue, 19 Aug 2025 09:33:29 +0900 Subject: [PATCH 1/2] docs: add missing sidebar entries for webpack setting template and library bundling --- fundamentals/bundling/.vitepress/config.mts | 416 +++++++++++--------- 1 file changed, 222 insertions(+), 194 deletions(-) diff --git a/fundamentals/bundling/.vitepress/config.mts b/fundamentals/bundling/.vitepress/config.mts index baadb51c..a10b2fdf 100644 --- a/fundamentals/bundling/.vitepress/config.mts +++ b/fundamentals/bundling/.vitepress/config.mts @@ -1,200 +1,228 @@ -import { defineConfig } from 'vitepress' -import footnote from "markdown-it-footnote"; -import path from "node:path"; import { createRequire } from "node:module"; -import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs' -import { shared } from './shared.mjs'; +import path from "node:path"; +import footnote from "markdown-it-footnote"; +import { defineConfig } from "vitepress"; +import { tabsMarkdownPlugin } from "vitepress-plugin-tabs"; +import { shared } from "./shared.mjs"; const require = createRequire(import.meta.url); // https://vitepress.dev/reference/site-config export default defineConfig({ - ...shared, - title: "Bundling Fundamentals", - description: "프론트엔드 번들링의 모든 것", - ignoreDeadLinks: false, - base: "/bundling/", - locales: { - // temporary - en: { - label: "English", - lang: "en", - themeConfig: { nav: [{ text: "Home", link: "/en/" }] } - }, - ja: { - label: "日本語", - lang: "ja", - themeConfig: { nav: [{ text: "ホーム", link: "/ja" }] } - }, - "zh-hans": { - label: "简体中文", - lang: "zh-hans", - themeConfig: { nav: [{ text: "首页", link: "/zh-hans" }] } - }, - root: { - label: "한국어", - lang: "ko", themeConfig: { - // https://vitepress.dev/reference/default-theme-config - ...shared.themeConfig, - nav: [{ text: "홈", link: "/" }], - sidebar: [ - { - text: "소개", - items: [ - { - text: "시작하기", - link: "/get-started", - }, - { - text: "번들링이란", - link: "/overview", - }, - { - text: "번들러란", - link: "/bundler", - }, - ] - }, - { - text: "튜토리얼", - items: [ - { - text: "웹팩으로 배우는 번들링", - items: [ - { - text: "1. 소개", - link: "/webpack-tutorial/intro", - }, - { - text: "2. 웹팩 도입하고 첫 번들 만들기", - link: "/webpack-tutorial/make-first-bundle", - }, - { - text: "3. 모듈로 코드 구조화하기", - link: "/webpack-tutorial/module-system", - }, - { - text: "4. TypeScript 적용하기", - link: "/webpack-tutorial/typescript", - }, - { - text: "5. React 적용하기", - link: "/webpack-tutorial/react", - }, - { - text: "6. 스타일 관리하기", - link: "/webpack-tutorial/style", - }, - { - text: "7. 이미지 등 정적 자원 다루기", - link: "/webpack-tutorial/assets", - }, - { - text: "8. 플러그인으로 빌드 확장하기", - link: "/webpack-tutorial/plugin", - }, - { - text: "9. 개발 서버로 생산성 높이기", - link: "/webpack-tutorial/dev-server", - }, - ] - }, - { - text: "롤업으로 배우는 라이브러리 번들링", - items: [ - { - text: "🚧 준비중", - link: "/rollup-tutorial/intro", - }, - ] - } - ], - }, - { - text: "심화 학습", - items: [ - { - text: "소개", - link: "/deep-dive/overview", - }, - { - text: "번들링 동작 이해하기", - collapsed: true, - items: [ - { text: "번들링, 꼭 필요할까요?", link: "/deep-dive/bundling-process/overview" }, - { text: "진입점", link: "/deep-dive/bundling-process/entry" }, - { text: "경로 탐색", link: "/deep-dive/bundling-process/resolution" }, - { text: "로더", link: "/deep-dive/bundling-process/loader" }, - { text: "플러그인", link: "/deep-dive/bundling-process/plugin" }, - { text: "출력", link: "/deep-dive/bundling-process/output" }, - ], - }, - { - text: "개발 환경", - collapsed: true, - items: [ - { text: "개발 서버", link: "/deep-dive/dev/dev-server" }, - { text: "HMR", link: "/deep-dive/dev/hmr" }, - { text: "소스맵", link: "/deep-dive/dev/source-map" }, - ], - }, - { - text: "번들 최적화", - collapsed: true, - items: [ - { text: "코드 스플리팅", link: "/deep-dive/optimization/code-splitting" }, - { text: "트리 셰이킹", link: "/deep-dive/optimization/tree-shaking" }, - { text: "번들 분석", link: "/deep-dive/optimization/bundle-analyzer" }, - ], - }, - ], - }, - ], - editLink: { - pattern: "https://github.com/toss/frontend-fundamentals/edit/main/fundamentals/bundling/:path", - text: "GitHub에서 수정하기" - }, - outline: { - label: "페이지 내용" - }, - docFooter: { - prev: "이전 페이지", - next: "다음 페이지" - }, - lastUpdated: {text:'마지막 업데이트'}, - }, - } - }, - markdown: { - config: (md) => { - md.use(footnote); - md.use(tabsMarkdownPlugin); - }, - }, - vite: { - resolve: { - alias: [ - { - find: /^vue$/, - replacement: path.dirname( - require.resolve("vue/package.json", { - paths: [require.resolve("vitepress")] - }) - ) - }, - { - find: /^vue\/server-renderer$/g, - replacement: path.dirname( - require.resolve("vue/server-renderer", { - paths: [require.resolve("vitepress")] - }) - ) - }, - { - find: /^@shared/, - replacement: path.resolve(__dirname, '../../shared'), - } - ] - } - }, -}) \ No newline at end of file + ...shared, + title: "Bundling Fundamentals", + description: "프론트엔드 번들링의 모든 것", + ignoreDeadLinks: false, + base: "/bundling/", + locales: { + // temporary + en: { + label: "English", + lang: "en", + themeConfig: { nav: [{ text: "Home", link: "/en/" }] }, + }, + ja: { + label: "日本語", + lang: "ja", + themeConfig: { nav: [{ text: "ホーム", link: "/ja" }] }, + }, + "zh-hans": { + label: "简体中文", + lang: "zh-hans", + themeConfig: { nav: [{ text: "首页", link: "/zh-hans" }] }, + }, + root: { + label: "한국어", + lang: "ko", + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + ...shared.themeConfig, + nav: [{ text: "홈", link: "/" }], + sidebar: [ + { + text: "소개", + items: [ + { + text: "시작하기", + link: "/get-started", + }, + { + text: "번들링이란", + link: "/overview", + }, + { + text: "번들러란", + link: "/bundler", + }, + { + text: "상황별 웹팩 설정 템플릿", + link: "/setting-template", + }, + { + text: "라이브러리 번들링하기", + link: "/library", + }, + ], + }, + { + text: "튜토리얼", + items: [ + { + text: "웹팩으로 배우는 번들링", + items: [ + { + text: "1. 소개", + link: "/webpack-tutorial/intro", + }, + { + text: "2. 웹팩 도입하고 첫 번들 만들기", + link: "/webpack-tutorial/make-first-bundle", + }, + { + text: "3. 모듈로 코드 구조화하기", + link: "/webpack-tutorial/module-system", + }, + { + text: "4. TypeScript 적용하기", + link: "/webpack-tutorial/typescript", + }, + { + text: "5. React 적용하기", + link: "/webpack-tutorial/react", + }, + { + text: "6. 스타일 관리하기", + link: "/webpack-tutorial/style", + }, + { + text: "7. 이미지 등 정적 자원 다루기", + link: "/webpack-tutorial/assets", + }, + { + text: "8. 플러그인으로 빌드 확장하기", + link: "/webpack-tutorial/plugin", + }, + { + text: "9. 개발 서버로 생산성 높이기", + link: "/webpack-tutorial/dev-server", + }, + ], + }, + { + text: "롤업으로 배우는 라이브러리 번들링", + items: [ + { + text: "🚧 준비중", + link: "/rollup-tutorial/intro", + }, + ], + }, + ], + }, + { + text: "심화 학습", + items: [ + { + text: "소개", + link: "/deep-dive/overview", + }, + { + text: "번들링 동작 이해하기", + collapsed: true, + items: [ + { + text: "번들링, 꼭 필요할까요?", + link: "/deep-dive/bundling-process/overview", + }, + { text: "진입점", link: "/deep-dive/bundling-process/entry" }, + { + text: "경로 탐색", + link: "/deep-dive/bundling-process/resolution", + }, + { text: "로더", link: "/deep-dive/bundling-process/loader" }, + { + text: "플러그인", + link: "/deep-dive/bundling-process/plugin", + }, + { text: "출력", link: "/deep-dive/bundling-process/output" }, + ], + }, + { + text: "개발 환경", + collapsed: true, + items: [ + { text: "개발 서버", link: "/deep-dive/dev/dev-server" }, + { text: "HMR", link: "/deep-dive/dev/hmr" }, + { text: "소스맵", link: "/deep-dive/dev/source-map" }, + ], + }, + { + text: "번들 최적화", + collapsed: true, + items: [ + { + text: "코드 스플리팅", + link: "/deep-dive/optimization/code-splitting", + }, + { + text: "트리 셰이킹", + link: "/deep-dive/optimization/tree-shaking", + }, + { + text: "번들 분석", + link: "/deep-dive/optimization/bundle-analyzer", + }, + ], + }, + ], + }, + ], + editLink: { + pattern: + "https://github.com/toss/frontend-fundamentals/edit/main/fundamentals/bundling/:path", + text: "GitHub에서 수정하기", + }, + outline: { + label: "페이지 내용", + }, + docFooter: { + prev: "이전 페이지", + next: "다음 페이지", + }, + lastUpdated: { text: "마지막 업데이트" }, + }, + }, + }, + markdown: { + config: (md) => { + md.use(footnote); + md.use(tabsMarkdownPlugin); + }, + }, + vite: { + resolve: { + alias: [ + { + find: /^vue$/, + replacement: path.dirname( + require.resolve("vue/package.json", { + paths: [require.resolve("vitepress")], + }), + ), + }, + { + find: /^vue\/server-renderer$/g, + replacement: path.dirname( + require.resolve("vue/server-renderer", { + paths: [require.resolve("vitepress")], + }), + ), + }, + { + find: /^@shared/, + replacement: path.resolve(__dirname, "../../shared"), + }, + ], + }, + }, +}); From e76b857c729814484953e87ef2932df9d9a9f031 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 8 Sep 2025 21:23:23 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EB=A0=88=EA=B1=B0=EC=8B=9C=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=84=B0=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fundamentals/bundling/.vitepress/config.mts | 424 ++++++++++---------- fundamentals/bundling/library.md | 174 -------- fundamentals/bundling/setting-template.md | 139 ------- 3 files changed, 208 insertions(+), 529 deletions(-) delete mode 100644 fundamentals/bundling/library.md delete mode 100644 fundamentals/bundling/setting-template.md diff --git a/fundamentals/bundling/.vitepress/config.mts b/fundamentals/bundling/.vitepress/config.mts index a10b2fdf..0f87892a 100644 --- a/fundamentals/bundling/.vitepress/config.mts +++ b/fundamentals/bundling/.vitepress/config.mts @@ -9,220 +9,212 @@ const require = createRequire(import.meta.url); // https://vitepress.dev/reference/site-config export default defineConfig({ - ...shared, - title: "Bundling Fundamentals", - description: "프론트엔드 번들링의 모든 것", - ignoreDeadLinks: false, - base: "/bundling/", - locales: { - // temporary - en: { - label: "English", - lang: "en", - themeConfig: { nav: [{ text: "Home", link: "/en/" }] }, - }, - ja: { - label: "日本語", - lang: "ja", - themeConfig: { nav: [{ text: "ホーム", link: "/ja" }] }, - }, - "zh-hans": { - label: "简体中文", - lang: "zh-hans", - themeConfig: { nav: [{ text: "首页", link: "/zh-hans" }] }, - }, - root: { - label: "한국어", - lang: "ko", - themeConfig: { - // https://vitepress.dev/reference/default-theme-config - ...shared.themeConfig, - nav: [{ text: "홈", link: "/" }], - sidebar: [ - { - text: "소개", - items: [ - { - text: "시작하기", - link: "/get-started", - }, - { - text: "번들링이란", - link: "/overview", - }, - { - text: "번들러란", - link: "/bundler", - }, - { - text: "상황별 웹팩 설정 템플릿", - link: "/setting-template", - }, - { - text: "라이브러리 번들링하기", - link: "/library", - }, - ], - }, - { - text: "튜토리얼", - items: [ - { - text: "웹팩으로 배우는 번들링", - items: [ - { - text: "1. 소개", - link: "/webpack-tutorial/intro", - }, - { - text: "2. 웹팩 도입하고 첫 번들 만들기", - link: "/webpack-tutorial/make-first-bundle", - }, - { - text: "3. 모듈로 코드 구조화하기", - link: "/webpack-tutorial/module-system", - }, - { - text: "4. TypeScript 적용하기", - link: "/webpack-tutorial/typescript", - }, - { - text: "5. React 적용하기", - link: "/webpack-tutorial/react", - }, - { - text: "6. 스타일 관리하기", - link: "/webpack-tutorial/style", - }, - { - text: "7. 이미지 등 정적 자원 다루기", - link: "/webpack-tutorial/assets", - }, - { - text: "8. 플러그인으로 빌드 확장하기", - link: "/webpack-tutorial/plugin", - }, - { - text: "9. 개발 서버로 생산성 높이기", - link: "/webpack-tutorial/dev-server", - }, - ], - }, - { - text: "롤업으로 배우는 라이브러리 번들링", - items: [ - { - text: "🚧 준비중", - link: "/rollup-tutorial/intro", - }, - ], - }, - ], - }, - { - text: "심화 학습", - items: [ - { - text: "소개", - link: "/deep-dive/overview", - }, - { - text: "번들링 동작 이해하기", - collapsed: true, - items: [ - { - text: "번들링, 꼭 필요할까요?", - link: "/deep-dive/bundling-process/overview", - }, - { text: "진입점", link: "/deep-dive/bundling-process/entry" }, - { - text: "경로 탐색", - link: "/deep-dive/bundling-process/resolution", - }, - { text: "로더", link: "/deep-dive/bundling-process/loader" }, - { - text: "플러그인", - link: "/deep-dive/bundling-process/plugin", - }, - { text: "출력", link: "/deep-dive/bundling-process/output" }, - ], - }, - { - text: "개발 환경", - collapsed: true, - items: [ - { text: "개발 서버", link: "/deep-dive/dev/dev-server" }, - { text: "HMR", link: "/deep-dive/dev/hmr" }, - { text: "소스맵", link: "/deep-dive/dev/source-map" }, - ], - }, - { - text: "번들 최적화", - collapsed: true, - items: [ - { - text: "코드 스플리팅", - link: "/deep-dive/optimization/code-splitting", - }, - { - text: "트리 셰이킹", - link: "/deep-dive/optimization/tree-shaking", - }, - { - text: "번들 분석", - link: "/deep-dive/optimization/bundle-analyzer", - }, - ], - }, - ], - }, - ], - editLink: { - pattern: - "https://github.com/toss/frontend-fundamentals/edit/main/fundamentals/bundling/:path", - text: "GitHub에서 수정하기", - }, - outline: { - label: "페이지 내용", - }, - docFooter: { - prev: "이전 페이지", - next: "다음 페이지", - }, - lastUpdated: { text: "마지막 업데이트" }, - }, - }, - }, - markdown: { - config: (md) => { - md.use(footnote); - md.use(tabsMarkdownPlugin); - }, - }, - vite: { - resolve: { - alias: [ - { - find: /^vue$/, - replacement: path.dirname( - require.resolve("vue/package.json", { - paths: [require.resolve("vitepress")], - }), - ), - }, - { - find: /^vue\/server-renderer$/g, - replacement: path.dirname( - require.resolve("vue/server-renderer", { - paths: [require.resolve("vitepress")], - }), - ), - }, - { - find: /^@shared/, - replacement: path.resolve(__dirname, "../../shared"), - }, - ], - }, - }, + ...shared, + title: "Bundling Fundamentals", + description: "프론트엔드 번들링의 모든 것", + ignoreDeadLinks: false, + base: "/bundling/", + locales: { + // temporary + en: { + label: "English", + lang: "en", + themeConfig: { nav: [{ text: "Home", link: "/en/" }] } + }, + ja: { + label: "日本語", + lang: "ja", + themeConfig: { nav: [{ text: "ホーム", link: "/ja" }] } + }, + "zh-hans": { + label: "简体中文", + lang: "zh-hans", + themeConfig: { nav: [{ text: "首页", link: "/zh-hans" }] } + }, + root: { + label: "한국어", + lang: "ko", + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + ...shared.themeConfig, + nav: [{ text: "홈", link: "/" }], + sidebar: [ + { + text: "소개", + items: [ + { + text: "시작하기", + link: "/get-started" + }, + { + text: "번들링이란", + link: "/overview" + }, + { + text: "번들러란", + link: "/bundler" + } + ] + }, + { + text: "튜토리얼", + items: [ + { + text: "웹팩으로 배우는 번들링", + items: [ + { + text: "1. 소개", + link: "/webpack-tutorial/intro" + }, + { + text: "2. 웹팩 도입하고 첫 번들 만들기", + link: "/webpack-tutorial/make-first-bundle" + }, + { + text: "3. 모듈로 코드 구조화하기", + link: "/webpack-tutorial/module-system" + }, + { + text: "4. TypeScript 적용하기", + link: "/webpack-tutorial/typescript" + }, + { + text: "5. React 적용하기", + link: "/webpack-tutorial/react" + }, + { + text: "6. 스타일 관리하기", + link: "/webpack-tutorial/style" + }, + { + text: "7. 이미지 등 정적 자원 다루기", + link: "/webpack-tutorial/assets" + }, + { + text: "8. 플러그인으로 빌드 확장하기", + link: "/webpack-tutorial/plugin" + }, + { + text: "9. 개발 서버로 생산성 높이기", + link: "/webpack-tutorial/dev-server" + } + ] + }, + { + text: "롤업으로 배우는 라이브러리 번들링", + items: [ + { + text: "🚧 준비중", + link: "/rollup-tutorial/intro" + } + ] + } + ] + }, + { + text: "심화 학습", + items: [ + { + text: "소개", + link: "/deep-dive/overview" + }, + { + text: "번들링 동작 이해하기", + collapsed: true, + items: [ + { + text: "번들링, 꼭 필요할까요?", + link: "/deep-dive/bundling-process/overview" + }, + { text: "진입점", link: "/deep-dive/bundling-process/entry" }, + { + text: "경로 탐색", + link: "/deep-dive/bundling-process/resolution" + }, + { text: "로더", link: "/deep-dive/bundling-process/loader" }, + { + text: "플러그인", + link: "/deep-dive/bundling-process/plugin" + }, + { text: "출력", link: "/deep-dive/bundling-process/output" } + ] + }, + { + text: "개발 환경", + collapsed: true, + items: [ + { text: "개발 서버", link: "/deep-dive/dev/dev-server" }, + { text: "HMR", link: "/deep-dive/dev/hmr" }, + { text: "소스맵", link: "/deep-dive/dev/source-map" } + ] + }, + { + text: "번들 최적화", + collapsed: true, + items: [ + { + text: "코드 스플리팅", + link: "/deep-dive/optimization/code-splitting" + }, + { + text: "트리 셰이킹", + link: "/deep-dive/optimization/tree-shaking" + }, + { + text: "번들 분석", + link: "/deep-dive/optimization/bundle-analyzer" + } + ] + } + ] + } + ], + editLink: { + pattern: + "https://github.com/toss/frontend-fundamentals/edit/main/fundamentals/bundling/:path", + text: "GitHub에서 수정하기" + }, + outline: { + label: "페이지 내용" + }, + docFooter: { + prev: "이전 페이지", + next: "다음 페이지" + }, + lastUpdated: { text: "마지막 업데이트" } + } + } + }, + markdown: { + config: (md) => { + md.use(footnote); + md.use(tabsMarkdownPlugin); + } + }, + vite: { + resolve: { + alias: [ + { + find: /^vue$/, + replacement: path.dirname( + require.resolve("vue/package.json", { + paths: [require.resolve("vitepress")] + }) + ) + }, + { + find: /^vue\/server-renderer$/g, + replacement: path.dirname( + require.resolve("vue/server-renderer", { + paths: [require.resolve("vitepress")] + }) + ) + }, + { + find: /^@shared/, + replacement: path.resolve(__dirname, "../../shared") + } + ] + } + } }); diff --git a/fundamentals/bundling/library.md b/fundamentals/bundling/library.md deleted file mode 100644 index e02b2e66..00000000 --- a/fundamentals/bundling/library.md +++ /dev/null @@ -1,174 +0,0 @@ -# 라이브러리 번들링하기 - -라이브러리를 만들 때는 번들링 설정을 어떻게 해야 할지 막막할 때가 많아요. 이번에는 간단한 JavaScript Math 유틸리티 라이브러리를 예제로 사용해서 번들링 과정을 단계별로 배워볼게요. -이 글에서는 웹팩을 활용해 라이브러리를 번들링하고, 결과물을 Node.js 환경과 브라우저 환경에서 사용하는 방법까지 모두 다뤄요. - -## 1. 프로젝트 초기화 - -먼저 프로젝트를 위한 새 폴더를 만들고, 웹팩과 같은 번들링 도구를 설치해서 기본 환경을 준비해요. - -```bash -mkdir math-utils -cd math-utils -npm init -y -``` - -[`npm init`](https://docs.npmjs.com/cli/v8/commands/npm-init) 명령어를 실행하면 `package.json` 파일이 생성돼요. `package.json`은 프로젝트의 설정과 의존성을 관리해줘요. - -![](/images/project-reset.png) - -여기서는 번들링 도구로 웹팩을 설치해요. - -```bash -npm install webpack webpack-cli --save-dev -``` - -`webpack-cli`는 웹팩을 터미널에서 명령어로 쉽게 사용할 수 있게 해주는 도구예요. - -## 2. 예제 파일의 src 옮겨오기 - -[JavaScript Math 유틸리티 라이브러리 예제](https://github.com/toss/frontend-fundamentals/blob/main/public/files/bundling-example.zip)를 다운로드하고 압축을 풀어주세요. - -`math-utils` 디렉토리 안에 `src` 폴더를 만든 다음, 압축을 푼 예제에서 `index.js`, `clamp.js`, `inRange.js` 등의 JavaScript 파일을 `src` 폴더로 옮겨주세요. - -결과적으로 다음과 같은 구조가 만들어지면 돼요. - -```plaintext -math-utils/ -├── src/ -│ └── index.js -│ └── clamp.js -│ └── inRange.js -│ └── ... -├── package.json -``` - -![](/images/code-insert.png) - -`index.js`는 라이브러리의 진입점(entry) 역할을 하는 파일이고, `clamp.js`, `inRange.js` 같은 파일에는 각각 유틸리티 함수가 들어 있어요. - -## 3. 웹팩 설정하기 - -웹팩을 사용하려면 설정 파일이 필요해요. 프로젝트 루트에 다음과 같이 `webpack.config.js` 파일을 만들어 주세요. - -```javascript -const path = require("path"); - -module.exports = { - entry: "./src/index.js", // 번들링 시작 파일 - output: { - path: path.resolve(__dirname, "dist"), // 번들 결과물이 저장될 경로 - filename: "bundle.js", // 번들 결과물 파일 이름 - library: "MathUtils", // 전역에서 접근할 라이브러리 이름 - libraryTarget: "umd", // UMD 형식으로 번들링 - globalObject: "this", // Node.js 환경과 브라우저 환경에서 모두 동작하도록 설정 - }, - mode: "production", // 웹팩 최적화 기능 활성화 -}; -``` - -- `libraryTarget`: `"umd"`를 사용하면 Node.js, 브라우저 등 환경에 관계없이 라이브러리를 사용할 수 있어요. -- `globalObject`: `"this"` 설정을 추가하면 브라우저에서는 `window`, Node.js 환경에서는 `global`을 사용해요. - -웹팩 설정에 사용할 수 있는 옵션의 역할과 사용법에 대한 자세한 내용은 [웹팩 공식 문서](https://webpack.kr/configuration/)에서 확인해 보세요. - -## 4. 빌드하고 사용해보기 - -이제 다음 커맨드로 웹팩을 실행해서 코드를 번들링해 볼 거예요. - -```bash -npx webpack -``` - -빌드를 실행하면 `dist` 폴더가 생성되고 그 안에 `bundle.js` 파일이 만들어져요. 이 파일은 우리가 만든 여러 개의 유틸리티 함수들을 하나로 묶은 결과물이에요. -다음 이미지를 클릭해보면, 원래 여러 파일로 나뉘어 있던 코드가 하나의 파일로 합쳐져 있는 것을 확인할 수 있어요. - -![](/images/build-result.png) - -이제 우리가 번들링한 `MathUtils`의 유틸 함수들을 Node.js 환경과 브라우저 환경에서 사용할 수 있는지 확인해 볼게요. - -n부터 m까지의 랜덤한 정수를 리턴하는 `randomInt(n, m)`, 배열의 전체 수의 합을 구하는 `sum([n, m, ...])`, 배열의 수 중 중간값을 구하는 `median([n, m, ...])`을 사용해 볼게요. - -### Node.js 환경에서 사용할 때 - -번들 파일을 `require`로 불러와 사용합니다. - -```javascript -const { randomInt, sum, median } = require("./dist/bundle.js"); -// 혹은 아래처럼 전체 utils 함수들을 `MathUtils`라는 이름으로 불러올 수 있어요 -// const MathUtils = require("./dist/bundle.js"); - -console.log(randomInt(0, 10)); // 3 (0부터 10까지 정수 중 랜덤한 정수를 리턴해요) -console.log(sum([1, 2, 3, 4, 5])); // 15 (배열의 전체 수의 합을 구해요) -console.log(median([1, 2, 3, 4])); // 2.5 (배열의 수 중 중간값을 구해요) -``` - -### 브라우저에서 사용할 때 - -HTML 파일에서 ` - -``` - -## 5. 번들 파일 최적화하기 - -이번에는 번들 파일을 더 효율적으로 만들어 볼게요. - -번들 파일의 크기가 커지면 로딩 속도가 느려지기 때문에, 불필요한 코드를 제거하고 압축하는 등 번들 파일 크기를 최적화하는 것이 중요해요. - -이러한 최적화의 대표적인 방법으로 트리 셰이킹과 코드 스플리팅이 있어요. - - -### `webpack.config.js`의 `mode` 설정하기 - -앞에서 설정했던 `webpack.config.js` 파일이에요. 여기서는 `production` 값을 넣어서 최적화 해볼게요. - -```javascript -const path = require("path"); - -module.exports = { - // ... webpack.config.js 설정들 - - mode: "production", // 웹팩 최적화 기능 활성화 -}; -``` - -`mode` 옵션을 기본값인 `production`으로 설정하면 최소화, 코드 스플리팅, 트리셰이킹 등 웹팩에서 기본적으로 제공하는 최적화 기능을 사용할 수 있어요. `mode`를 `development`나 `none`으로 설정하면 최적화 기능을 사용하지 않아요. - -다음 섹션에서 결과를 함께 확인해 볼게요. - -### `development`와 `production` 비교하기 - -mode를 `development`로 설정하고 빌드한 결과를 `production` 설정일 때와 비교해볼게요. - -```javascript -const path = require("path"); - -module.exports = { - // ... webpack.config.js 설정들 - - mode: "development", // 웹팩 최적화 기능 비활성화 -}; -``` - -#### 1. 번들 결과 비교하기 - -![](/images/mode-compare1.png) - -`development`로 번들링한 `bundle-development.js` 파일은 코드가 난독화나 최소화 되지 않아 **읽을 수 있는 형태이고 주석이 남아있어요.** - -`production`으로 번들링한 `bundle-production.js` 파일은 읽기 힘들게 코드가 **난독화 및 최소화 되어있어요.** - -#### 2. 번들 파일 크기 비교하기 - -![](/images/mode-compare2.png) - -`bundle-development.js` 파일은 26KB, `bundle-production.js` 파일은 2KB로 크기가 **열 배 이상** 차이나는 걸 확인할 수 있어요. - -`math-util`은 최적화하기 전에도 굉장히 작은 사이즈라 로딩 속도에서 큰 차이를 느끼지 못할 수도 있지만, 만약 React 기반의 프로젝트나 [es-toolkit](https://github.com/toss/es-toolkit)같은 거대한 사이즈의 라이브러리의 번들 파일을 최적화를 하지 않는다면 로딩이 길어지는 문제가 발생할 수 있어요. diff --git a/fundamentals/bundling/setting-template.md b/fundamentals/bundling/setting-template.md deleted file mode 100644 index 688896d7..00000000 --- a/fundamentals/bundling/setting-template.md +++ /dev/null @@ -1,139 +0,0 @@ -# 상황별 웹팩 설정 템플릿 - -웹팩 설정은 프로젝트의 요구 사항에 따라 다르게 구성할 수 있어요. -아래는 자주 사용하는 5가지 설정 템플릿이에요. - -## 1. 기본 번들링 설정 - -이 설정은 기본적인 번들링을 수행할 때 사용해요. - -파일을 `dist/bundle.js`로 출력하며, UMD(Universal Module Definition) 형식으로 라이브러리를 내보내요. - -```javascript -const path = require("path"); - -module.exports = { - entry: "./src/index.js", // 번들링 시작 파일 - output: { - path: path.resolve(\_\_dirname, "dist"), // 결과물 저장 경로 - filename: "bundle.js", // 번들 파일 이름 - library: "ArithmeticLibrary", // 라이브러리 이름 - libraryTarget: "umd" // UMD 형식으로 번들링 - }, - mode: "production" // 최적화 적용 -}; -``` - -## 2. 코드 압축(최적화) 설정 - -이 설정은 번들 파일 크기를 줄이고 성능을 최적화할 때 사용해요. - -`TerserPlugin`을 추가해 코드를 압축하고, 불필요한 내용을 제거해요. - -```javascript -const path = require("path"); -const TerserPlugin = require("terser-webpack-plugin"); - -module.exports = { - entry: "./src/index.js", - output: { - path: path.resolve(__dirname, "dist"), - filename: "bundle.js", - library: "ArithmeticLibrary", - libraryTarget: "umd", - }, - mode: "production", - optimization: { - minimize: true, // 코드 압축 활성화 - minimizer: [new TerserPlugin()], // TerserPlugin 사용 - }, -}; -``` - -## 3. 개발 환경 설정 (핫 리로드 포함) - -이 설정은 개발할 때 편리한 환경을 구성해요. - -파일 변경 시 자동으로 새로고침되도록 `webpack-dev-server`를 사용해요. - -```javascript -const path = require("path"); - -module.exports = { -entry: "./src/index.js", - output: { - path: path.resolve(\_\_dirname, "dist"), - filename: "bundle.js" - }, - mode: "development", - devServer: { - static: "./dist", // 정적 파일 제공 - hot: true, // 핫 리로드 활성화 - port: 3000 // 개발 서버 포트 지정 - }, -}; - -``` - -## 4. CSS 및 SASS 번들링 설정 - -이 설정은 CSS 및 SASS(Scss) 파일을 번들링할 때 사용해요. - -`style-loader`와 `css-loader`, `sass-loader`를 추가해서 스타일 파일도 번들링할 수 있어요. - -```javascript -const path = require("path"); - -module.exports = { - entry: "./src/index.js", - output: { - path: path.resolve(__dirname, "dist"), - filename: "bundle.js", - }, - mode: "production", - module: { - rules: [ - { - test: /\.scss$/, // .scss 파일을 처리 - use: ["style-loader", "css-loader", "sass-loader"], // SASS 변환 및 스타일 적용 - }, - ], - }, -}; -``` - -## 5. React 프로젝트 설정 (Babel 사용) - -이 설정은 React 프로젝트에서 JSX 문법을 사용할 때 필요해요. - -`babel-loader`를 추가해서 JSX 및 최신 JavaScript 문법을 변환할 수 있어요. - -```javascript -const path = require("path"); - -module.exports = { - entry: "./src/index.js", - output: { - path: path.resolve(__dirname, "dist"), - filename: "bundle.js", - }, - mode: "production", - module: { - rules: [ - { - test: /\.(js|jsx)$/, // .js 또는 .jsx 파일을 처리 - exclude: /node_modules/, // node_modules 제외 - use: { - loader: "babel-loader", // Babel로 변환 - options: { - presets: ["@babel/preset-react"], // React 지원 - }, - }, - }, - ], - }, - resolve: { - extensions: [".js", ".jsx"], // import할 때 확장자 생략 가능 - }, -}; -```