[React] 빌드 (번들링 Bundling, 트랜스파일링 Transpiling, 타입스크립트 컴파일)

 

빌드 과정 (next build 실행)

1. TypeScript → JavaScript 변환 (트랜스파일링)
   • SWC(기본) 또는 Babel이 TypeScript를 JavaScript로 변환
   • Type Checking은 tsc가 아니라 Next.js 자체 체크 (next lint)
     
     
2. 모듈 번들링 (Webpack)
   • Webpack이 모든 JS, CSS, 이미지 등을 하나로 묶음
   • 트리 쉐이킹(Tree Shaking)으로 불필요한 코드 제거
     
     
3. 최적화 및 압축
   • CSS 및 JS 파일을 최소화 (Minification)
   • 코드 스플리팅(Code Splitting)으로 필요한 부분만 로드 가능하게 만듦

 

트랜스파일링 (Transpiling)

 : 최신 문법(ES6+, TypeScript 등)을 브라우저가 이해할 수 있는 코드(ES5 등)로 변환하는 과정

(Babel, SWC, TypeScript Compiler)

 

.ts => .js

const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet("World"));

 

var greet = function (name) {
  return "Hello, " + name + "!";
};
console.log(greet("World"));

 

 

번들링 (Bundling)

: 여러 개의 파일을 하나로 합쳐 최적화된 단일 파일로 만드는 과정

( Webpack, Rollup, Vite 등의 번들러 )

 

app.js

import { greet } from './greet';
console.log(greet("World"));

 

greet.js

export const greet = (name) => {
  return `Hello, ${name}!`;
};

 

webpack.config.js

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

 

webpack 명령어를 실행하면 app.js와 greet.js가 결합된 bundle.js가 생성됩니다.

 

dist/bundle.js

(()=>{var e,t;console.log((t="World")=>{return `Hello, ${t}!`})()})();