프론트엔드 개발의 핵심 도구: Babel 과 Webpack
1. 바벨(Babel)이란?
1.1 바벨의 역할 쉽게 이해하기
바벨은 최신 자바스크립트 코드를 구버전의 코드로 변환해주는 도구입니다.
마치 번역기처럼 최신 자바스크립트를 구버전 브라우저도 이해할 수 있게 번역해줍니다.
예를 들어:
// 우리가 작성한 최신 코드
const message = `안녕하세요 ${name}님!`;
const numbers = [...[1, 2, 3]];
// 바벨이 변환한 코드 (IE에서도 동작하는 버전)
var message = "안녕하세요 " + name + "님!";
var numbers = [].concat([1, 2, 3]);1.2 바벨이 필요한 이유
-
브라우저 호환성
- 모든 브라우저가 최신 자바스크립트 기능을 지원하지는 않음
- IE나 구버전 브라우저에서도 최신 코드가 동작하게 해줌
-
리액트 코드 변환
// 우리가 작성한 JSX 코드
function Welcome() {
return (
<div>
<h1>안녕하세요!</h1>
</div>
);
}
// 바벨이 변환한 일반 자바스크립트 코드
function Welcome() {
return React.createElement(
"div",
null,
React.createElement("h1", null, "안녕하세요!")
);
}쉽게 이해하기
바벨은 마치 외국어 번역기와 같습니다:
- 우리(개발자)는 최신 문법으로 편하게 코드를 작성
- 바벨이 이를 구버전 브라우저가 이해할 수 있는 언어로 번역
- 덕분에 우리는 최신 문법을 걱정 없이 사용할 수 있음
2. 웹팩(Webpack)이란?
2.1 웹팩의 역할 쉽게 이해하기
웹팩은 모듈 번들러입니다. 쉽게 말해 여러 개의 파일을 하나로 합쳐주는 도구입니다. 마치 여러 개의 레고 블록을 하나로 조립하는 것과 같습니다.
모듈이란?
모듈은 쉽게 말해 하나의 독립된 파일입니다. 예를 들면:
- 버튼을 담당하는 파일 (button.js)
- 메뉴를 담당하는 파일 (menu.js)
- 로그인을 담당하는 파일 (login.js)
이렇게 기능별로 파일을 나누면:
- 코드 관리가 쉬워짐
- 다른 프로젝트에서 재사용하기 쉬움
- 팀원들과 협업하기 좋음
예를 들어:
// button.js (버튼 모듈)
export function Button() {
return "멋진 버튼";
}
// menu.js (메뉴 모듈)
export function Menu() {
return "메뉴 목록";
}
// app.js (메인 파일)
import { Button } from "./button";
import { Menu } from "./menu";
// 웹팩이 이 파일들을 하나의 bundle.js로 합쳐줍니다
// 브라우저는 bundle.js 파일 하나만 다운받으면 됩니다쉽게 이해하기
웹팩은 마치 도서 편집자와 같습니다:
- 여러 작가가 쓴 원고(모듈들)를 받아서
- 하나의 책(bundle.js)으로 만들어줌
- 덕분에 독자(브라우저)는 한 권의 책만 읽으면 됨
2.2 웹팩이 필요한 이유
-
파일 관리가 쉬워집니다
- 여러 개의 작은 파일로 나눠서 개발
- 웹팩이 알아서 하나로 합쳐줌
-
성능이 좋아집니다
- 여러 파일을 한 번에 다운로드
- 필요한 코드만 불러올 수 있음
-
모듈 시스템을 사용할 수 있습니다
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// app.js
import { add } from "./math"; // add 함수만 가져와서 사용
console.log(add(2, 3)); // 52.3 웹팩의 주요 기능
-
파일 합치기
- 여러 자바스크립트 파일을 하나로 합침
- CSS, 이미지 등도 관리 가능
-
자동 새로고침
// 개발 중에 코드를 수정하면
function Button() {
return <button>클릭!</button>;
}
// 코드를 수정했을 때
function Button() {
return <button style={{ color: "blue" }}>클릭!</button>;
}
// 페이지가 자동으로 새로고침 됨- 코드 최적화
// 큰 컴포넌트는 필요할 때만 불러오기
const BigComponent = React.lazy(() => import("./BigComponent"));
function App() {
return (
<Suspense fallback={<Loading />}>
<BigComponent /> {/* 이 컴포넌트는 필요할 때만 다운로드 됨 */}
</Suspense>
);
}쉽게 이해하기
코드 최적화는 마치 책을 여러 권으로 나누는 것과 같습니다:
- 처음에는 목차와 첫 장만 받아옴
- 다른 장들은 필요할 때 받아옴
- 덕분에 처음 시작할 때 모든 내용을 한번에 받지 않아도 됨
3. 실무에서 자주 사용하는 방법
3.1 웹팩 직접 설정하기
- 기본 설정 파일 만들기
// webpack.config.js
const path = require("path");
module.exports = {
// 시작점: 웹팩이 파일을 읽기 시작하는 위치
entry: "./src/index.js",
// 결과물: 하나로 합쳐진 파일이 저장되는 위치
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
// 규칙: 파일 종류별로 어떻게 처리할지 설정
module: {
rules: [
{
// .js로 끝나는 파일은
test: /\.js$/,
exclude: /node_modules/, // 이 폴더 제외
use: {
loader: "babel-loader", // 바벨로 처리
},
},
{
// .css로 끝나는 파일은
test: /\.css$/,
use: ["style-loader", "css-loader"], // CSS 처리
},
],
},
};- 필요한 패키지 설치하기
# 웹팩 관련 패키지
npm install webpack webpack-cli --save-dev
# 로더 패키지들
npm install babel-loader css-loader style-loader --save-dev- package.json에 명령어 추가
{
"scripts": {
"build": "webpack --mode production",
"start": "webpack serve --mode development"
}
}쉽게 이해하기
웹팩 설정은 마치 공장 설비를 설정하는 것과 같습니다:
- entry: 원료가 들어오는 입구
- output: 완성품이 나가는 출구
- rules: 원료를 어떻게 가공할지 정하는 규칙
- loaders: 각각의 가공 기계
3.2 Create React App 사용하기
Create React App을 사용하면 바벨과 웹팩이 자동으로 설정됩니다.
# 프로젝트 생성
npx create-react-app my-app
# 개발 서버 시작
npm start
# 배포용 파일 만들기
npm run build3.3 Next.js 사용하기
Next.js도 바벨과 웹팩이 미리 설정되어 있습니다.
# 프로젝트 생성
npx create-next-app my-app
# 개발 서버 시작
npm run dev
# 배포용 파일 만들기
npm run build
화이팅!