React 공식 문서에서도 프레임워크와 함께 사용하는 것을 권장하고 있지만, 실제로는 여전히 Next.js와 같은 프레임워크 없이 React만 사용하는 개발 사례가 많다. 이 경우 Vite를 비롯해 Rollup, Parcel, Webpack, 그리고 CRA(Create React App)와 같은 도구를 사용해 개발하는 경우가 이에 해당한다.  따라서, 프레임워크가 제공하는 번들링 환경에만 의존하기보다는 번들링 도구에 대한 이해가 여전히 중요하다. 특히, 풍부한 자료와 널리 사용되는 Webpack을 중심으로 번들링에 대해 정리하려고 한다.  더불어 Next.js에서도 Turbopack이라는 새로운 번들러가 도입되었지만, 현재 개발 환경에서만 사용되며, 여전히 Webpack을 주요 번들러로 사용하고 있다. ..

Webpack을 사용할 때 css-loader를 적용해서 css 파일을 처리하는게 일반적이다. 그런데, css의 url 을 사용했을 때 해당 파일이 file-loader를 타는 것이 아닌 css-loader 내에서 처리되는 문제가 발생했다. background-image: url("./assets/images/hero-img.png"); 이런 경우 당황하지 말고 css-loader의 url 옵션을 false로 변경해주면 된다. const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: process.env.NODE_ENV, devtool: "sourc..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..

들어가며 이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 필요 패키지 다운로드 npm install --save-dev typescript @babel/preset-typescript 필요한 패키지는 타입스크립트를 사용하기 위한 typescript와 babel에서 읽기 위한 @babel/preset-typescript이다. 초기 설정 먼저 프로젝트에서 사용할 tsconfig를 추가한다. ./node_modules/typescript/bin/tsc --init 몇가지 옵션을 적어보자면, target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정 es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. module 옵션 : 자..

0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 ..

1. Webpack? 우선 웹팩이 무엇일까? 위 이미지에서 보이는 것처럼 여러가지 얽힌 복잡한 파일들을 간단하게 만들어주고 있다. 그래서 Webpack을 모듈 번들러라고 한다. 즉, 여러 개로 나뉘어진 파일들을 묶어서 하나의 파일로 만들어준다. 근데 이런 과정이 왜? 필요할까? 웹 페이지는 다양한 html, js, css, png, ... 등 파일로 구성되어 있다. 그말은 웹페이지가 구성되려면 많은 파일들을 요청해야 한다는 것이다. http/2 커넥션이라면 동시에 여러 파일을 요청할 수 있지만, 현재 많이 사용되고 있는 http/1.1에서는 한번의 요청에 하나의 파일만 받을 수 있다. 즉, 요청 해야하는 파일이 많아지면 그만큼 오래 기다려야해서 비효율적이다. 이러한 요청을 줄이기 위한 방법이 번들러이다...

Express 환경에서 webpack을 적용할 때 app.use(express.static(path.resolve(__dirname, "public"))); 이렇게 설정 해주었다. 그리고 views는 app.set("views", path.join(__dirname, "views")); app.set("view engine", "ejs"); 같이 설정했다. 그다음에 프로젝트를 실행하고 localhost:3000으로 접속하니 /views 폴더에 있는 index.ejs가 실행되는 것이 아닌 /public에 있는 index.html이 실행되는 것이였다. 왜그런지 고민해봤는데, app.use(express.static(path.resolve(__dirname, "public"))); 설정에 경로가 해당 이름의 ..

1. 나무 흔들기 나무 흔들기(tree shaking)는 불필요한 코드를 제거해 주는 기능이다. 웹팩은 기본적으로 나무 흔들기 기능을 제공한다. 단, 웹팩에서 제대로 동작하지 않는 경우가 있다. 나무 흔들기를 잘 이해하고 있어야 번들 크기를 최소로 유지할 수 있다. npm install webpack webpack-cli // src/util_esm.js export const func1 = () => { console.log("func1_esm"); }; export const func2 = () => { console.log("func2_esm"); }; ESM(ECMAScript Modules) 문법을 사용하는 코드다. ESM에서는 import, export 등의 키워드를 사용한다. // src/u..