JavaScript λͺ¨λ μ»΄νμΌμ νμ νμ©νμΈμ. μμ€ λ³ν, λ²λ€λ¬, νΈλμ€νμΌλ¬λ₯Ό λ°°μ°κ³ λ€μν κΈλ‘λ² νκ²½ λ° μ±λ₯μ μν΄ μ½λλ₯Ό μ΅μ ννλ λ°©λ²μ μμ보μΈμ.
JavaScript λͺ¨λ μ»΄νμΌ: κΈλ‘λ² λ¬΄λλ₯Ό μν μμ€ μ½λ λ³ν
μΉ κ°λ°μ μλμ μΈ μΈκ³μμ JavaScriptλ ν΄λΌμ΄μΈνΈ μΈ‘ μ€ν¬λ¦½ν μΈμ΄μμ 볡μ‘ν μ ν리μΌμ΄μ μ ꡬλνλ κ°λ ₯ν μμ§μΌλ‘ λ°μ νμ΅λλ€. νλ‘μ νΈμ κ·λͺ¨μ 볡μ‘μ±μ΄ 컀μ§μ λ°λΌ, νΉν κΈλ‘λ² μ¬μ©μλ₯Ό μν μ’ μμ± κ΄λ¦¬ λ° μ λ¬ μ΅μ νκ° λ§€μ° μ€μν΄μ§κ³ μμ΅λλ€. λ°λ‘ μ¬κΈ°μ JavaScript λͺ¨λ μ»΄νμΌ λ° μμ€ λ³νμ΄ μ€μν μν μ ν©λλ€. μ΄ ν¬κ΄μ μΈ κ°μ΄λλ μ΄λ¬ν νλ‘μΈμ€λ₯Ό λͺ νν νκ³ , μ νμμ μΈμ§, κ΄λ ¨ κΈ°μ μ 무μμΈμ§, κ·Έλ¦¬κ³ κ°λ°μκ° ν¨μ¨μ μ΄κ³ νμ₯ κ°λ₯νλ©° 보νΈμ μΌλ‘ νΈνλλ JavaScript μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ΄λ»κ² νμ μ€μ΄μ£Όλμ§ νꡬν©λλ€.
λͺ¨λ μ»΄νμΌμ νμμ± μ΄ν΄
νλ JavaScript κ°λ°μ λͺ¨λμ΄λΌλ κ°λ μ ν¬κ² μμ‘΄ν©λλ€. λͺ¨λμ ν΅ν΄ κ°λ°μλ λκ·λͺ¨ μ½λλ² μ΄μ€λ₯Ό μκ³ μ¬μ¬μ© κ°λ₯νλ©° μ μ§λ³΄μκ° μ©μ΄ν λ¨μλ‘ λλ μ μμ΅λλ€. μ΄λ¬ν λͺ¨λμ μ κ·Ό λ°©μμ μ¬λ¬ κ°μ§ μ΄μ μ μ 곡ν©λλ€:
- μ‘°μ§ν: μ½λκ° λ Όλ¦¬μ μΌλ‘ ꡬ쑰νλμ΄ μ΄ν΄νκ³ νμνκΈ°κ° λ μ½μ΅λλ€.
- μ¬μ¬μ©μ±: ν¨μ, ν΄λμ€ λ° λ³μλ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ΄λ λ€λ₯Έ νλ‘μ νΈμμλ 곡μ λ μ μμ΅λλ€.
- μ μ§λ³΄μμ±: ν λͺ¨λμ λ³κ²½ μ¬νμ΄ λ€λ₯Έ λͺ¨λμ λ―ΈμΉλ μν₯μ΄ μ΅μνλμ΄ λλ²κΉ λ° μ λ°μ΄νΈκ° λ¨μνλ©λλ€.
- λ€μμ€νμ΄μ€ κ΄λ¦¬: λͺ¨λμ μ μ μ€μ½ν μ€μΌμ λ°©μ§νμ¬ μ΄λ¦ μΆ©λ μνμ μ€μ λλ€.
κ·Έλ¬λ JavaScriptλ₯Ό λΈλΌμ°μ μ λ°°ν¬νκ±°λ λ€μν Node.js νκ²½μμ μ€νν λ λͺ¨λ ꡬ문(ES λͺ¨λ λλ CommonJSμ κ°μ)μ μ§μ μ¬μ©νλ κ²μ μ΄λ €μμ μ΄λν μ μμ΅λλ€. λΈλΌμ°μ λ μ΄λ¬ν λͺ¨λ μμ€ν μ λν κΈ°λ³Έ μ§μ μμ€μ΄ λ€μνλ©°, Node.js νκ²½μ μ’ μ’ νΉμ ꡬμ±μ΄ νμν©λλ€. λν, μλ§μ μμ JavaScript νμΌμ μ λ¬νλ κ²μ HTTP μμ² μ¦κ°λ‘ μΈν΄ μ±λ₯ λ¬Έμ λ‘ μ΄μ΄μ§ μ μμ΅λλ€. λ°λ‘ μ΄λ μ»΄νμΌκ³Ό λ³νμ΄ λ±μ₯ν©λλ€.
μμ€ λ³νμ΄λ 무μμΈκ°?
μμ€ λ³νμ μμ€ μ½λλ₯Ό ν ννμμ λ€λ₯Έ ννλ‘ λ³ννλ νλ‘μΈμ€λ₯Ό μλ―Έν©λλ€. μ¬κΈ°μλ μ¬λ¬ μ νμ λ³κ²½μ΄ ν¬ν¨λ μ μμ΅λλ€:
- νΈλμ€νμΌλ§: μ΅μ JavaScript λ²μ (ES6+) λλ μνΌμ μΈμ΄(TypeScript)λ‘ μμ±λ μ½λλ₯Ό μ΄μ μ λ³΄λ€ λ리 μ§μλλ JavaScript λ²μ (ES5)μΌλ‘ λ³νν©λλ€. μ΄λ λ λμ λ²μμ λΈλΌμ°μ λ° νκ²½κ³Όμ νΈνμ±μ 보μ₯ν©λλ€.
- μ΅μν(Minification): 곡백, μ£Όμ λ° μ€ λ°κΏκ³Ό κ°μ΄ μ½λμμ λΆνμν λ¬Έμλ₯Ό μ κ±°νμ¬ νμΌ ν¬κΈ°λ₯Ό μ€μ λλ€.
- λ²λ€λ§: μ¬λ¬ JavaScript νμΌμ λ¨μΌ νμΌ(λλ λͺ κ°μ μ΅μ νλ νμΌ)λ‘ κ²°ν©ν©λλ€. μ΄λ μ ν리μΌμ΄μ μ λ‘λνλ λ° νμν HTTP μμ² μλ₯Ό νκΈ°μ μΌλ‘ μ€μ¬ λ‘λ μκ°μ λ¨μΆν©λλ€.
- μ½λ λΆν (Code Splitting): μ½λλ₯Ό μ¨λ맨λλ‘ λ‘λν μ μλ λ μμ μ²ν¬λ‘ λΆν νλ κ³ κΈ λ²λ€λ§ κΈ°μ λ‘, μ΄κΈ° νμ΄μ§ λ‘λ μ±λ₯μ ν₯μμν΅λλ€.
- νΈλ¦¬ μμ΄νΉ(Tree Shaking): λ²λ€μμ μ¬μ©λμ§ μλ μ½λλ₯Ό μ κ±°νμ¬ ν¬κΈ°λ₯Ό λμ± μ€μ λλ€.
- ν΄λ¦¬νλ§(Polyfilling): μ’ μ’ μ΄μ λΈλΌμ°μ μμ νΈνμ±μ 보μ₯νκΈ° μν΄ λμ νκ²½μμ κΈ°λ³Έμ μΌλ‘ μ§μλμ§ μλ κΈ°λ₯μ μ 곡νλ μ½λλ₯Ό μΆκ°ν©λλ€.
JavaScript λͺ¨λ μ»΄νμΌμ μ£Όμ κΈ°μ
λͺ κ°μ§ κ°λ ₯ν λꡬμ κΈ°μ μ΄ JavaScript λͺ¨λ μ»΄νμΌ λ° μμ€ λ³νμ μ©μ΄νκ² ν©λλ€. κ°λ ₯νκ³ ν¨μ¨μ μΈ μ ν리μΌμ΄μ μ ꡬμΆνλ €λ©΄ κ·Έ μν μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€.
1. νΈλμ€νμΌλ¬ (μ: Babel)
Babelμ JavaScript νΈλμ€νμΌλ§μ μ¬μ€μ νμ€μ λλ€. μ΅μ JavaScript ꡬ문 λ° κΈ°λ₯μ λ°μ μ΄μ μ λ³΄λ€ λ³΄νΈμ μΌλ‘ νΈνλλ λ²μ μΌλ‘ λ³νν©λλ€. μ΄λ λ€μμ μν΄ νμμ μ λλ€:
- μ΅μ κΈ°λ₯ νμ©: κ°λ°μλ λΈλΌμ°μ μ§μμ λν κ±±μ μμ΄ μ΅μ ECMAScript κΈ°λ₯(ES6, ES7 λ±)μ μ¬μ©νμ¬ μ½λλ₯Ό μμ±ν μ μμ΅λλ€. Babelμ΄ λ³νμ μ²λ¦¬νμ¬ μ½λλ₯Ό μ΄μ JavaScript μμ§μμ μ΄ν΄ν μ μλλ‘ ν©λλ€.
- TypeScript μ§μ: Babelμ TypeScript μ½λλ₯Ό μΌλ° JavaScriptλ‘ νΈλμ€νμΌν μλ μμ΅λλ€.
μμ:
μμ€ μ½λ (ES6+):
const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));
νΈλμ€νμΌλ μ½λ (ES5):
var greet = function greet(name) {
return 'Hello, ' + name + '!';
};
console.log(greet('World'));
Babelμ νλ¬κ·ΈμΈ λ° ν리μ μΈνΈλ₯Ό ν΅ν΄ μ΄λ₯Ό λ¬μ±νμ¬ λ§€μ° κ΅¬μ± κ°λ₯ν λ³νμ νμ©ν©λλ€.
2. λͺ¨λ λ²λ€λ¬ (μ: Webpack, Rollup, Parcel)
λͺ¨λ λ²λ€λ¬λ JavaScript λͺ¨λκ³Ό CSS, μ΄λ―Έμ§, κΈκΌ΄κ³Ό κ°μ λ€λ₯Έ μ μ μ μ²λ¦¬νμ¬ λ°°ν¬λ₯Ό μν΄ μ΅μ νλ λ²λ€λ‘ ν¨ν€μ§νλ μν μ ν©λλ€. μ’ μμ±μ ν΄κ²°νκ³ , λ³νμ μννλ©°, λΈλΌμ°μ λλ Node.jsμμ μ¬μ©ν μ μλ νλ μ΄μμ νμΌμ μΆλ ₯ν©λλ€.
a. Webpack
Webpackμ κ°μ₯ μΈκΈ° μκ³ κ°λ ₯ν λͺ¨λ λ²λ€λ¬ μ€ νλμ λλ€. λ§€μ° κ΅¬μ± κ°λ₯νλ©° λ°©λν λ‘λ λ° νλ¬κ·ΈμΈ μνκ³λ₯Ό μ§μνλ―λ‘ λ³΅μ‘ν μ ν리μΌμ΄μ μ μ ν©ν©λλ€. Webpackμ:
- λ€μν μ μ μ ν μ²λ¦¬: JavaScriptλΏλ§ μλλΌ CSS, μ΄λ―Έμ§, κΈκΌ΄ λ±λ λͺ¨λλ‘ μ²λ¦¬ν μ μμ΅λλ€.
- μ½λ λΆν : μ¨λ맨λλ‘ λ‘λν μ μλ μ¬λ¬ λ²λ€μ μμ±νλ κ³ κΈ κΈ°λ₯μ λλ€.
- ν« λͺ¨λ κ΅μ²΄ (HMR): λͺ¨λμ μ 체 μλ‘κ³ μΉ¨ μμ΄ μ€ν μ€μΈ μ ν리μΌμ΄μ μμ μ λ°μ΄νΈν μ μλλ‘ νλ κ°λ° κΈ°λ₯μΌλ‘, κ°λ° νΌλλ°± 루νλ₯Ό ν¬κ² κ°μνν©λλ€.
- λ‘λ λ° νλ¬κ·ΈμΈ: νλΆν λ‘λ(μ: Babel-loader, css-loader) λ° νλ¬κ·ΈμΈ(μ: HtmlWebpackPlugin, TerserPlugin) μνκ³κ° κΈ°λ₯μ νμ₯ν©λλ€.
μ¬μ© μ¬λ‘: λΉλ νλ‘μΈμ€μ λν μΈλ°ν μ μ΄κ° νμν λκ·λͺ¨μ κΈ°λ₯μ΄ νλΆν μ ν리μΌμ΄μ μ μ΄μμ μ λλ€. λ§μ μΈκΈ° μλ νλ‘ νΈμλ νλ μμν¬(Create React Appκ³Ό κ°μ React)λ λ°±κ·ΈλΌμ΄λμμ Webpackμ μ¬μ©ν©λλ€.
b. Rollup
Rollupμ νΉν λΌμ΄λΈλ¬λ¦¬ λ° μκ³ λ μ§μ€λ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ νΈλλ λ λ€λ₯Έ κ°λ ₯ν λͺ¨λ λ²λ€λ¬μ λλ€. Rollupμ λ€μκ³Ό κ°μ λ° νμν©λλ€:
- ES λͺ¨λ μ΅μ ν: ES λͺ¨λμ μ²λ¦¬νκ³ μ¬μ©νμ§ μλ μ½λλ₯Ό μ κ±°νκΈ° μν΄ νΈλ¦¬ μμ΄νΉμ μννλ λ° λ§€μ° ν¨μ¨μ μ΄μ΄μ λΌμ΄λΈλ¬λ¦¬μ λν λ μμ λ²λ€ ν¬κΈ°λ₯Ό μ 곡ν©λλ€.
- λ¨μμ±: μΌλ°μ μΈ μ¬μ© μ¬λ‘μμ Webpackλ³΄λ€ κ΅¬μ±νκΈ°κ° λ κ°λ¨νλ€κ³ κ°μ£Όλλ κ²½μ°κ° λ§μ΅λλ€.
- μ½λ λΆν : λ³΄λ€ μΈλΆνλ λ‘λλ₯Ό μν΄ μ½λ λΆν μ μ§μν©λλ€.
μ¬μ© μ¬λ‘: λ€λ₯Έ νλ‘μ νΈμμ μ¬μ©λ JavaScript λΌμ΄λΈλ¬λ¦¬λ₯Ό λ§λ€κ±°λ μ΅μνμ λ²λ€ ν¬κΈ°κ° μ΅μ°μ μμμΈ λ μμ νλ‘ νΈμλ μ ν리μΌμ΄μ μ νμν©λλ€. λ§μ μ΅μ JavaScript νλ μμν¬ λ° λΌμ΄λΈλ¬λ¦¬κ° λΉλμ Rollupμ νμ©ν©λλ€.
c. Parcel
Parcelμ μ λ‘ κ΅¬μ±(zero-configuration)μ λͺ©νλ‘ νμ¬ μμνκΈ°κ° λ§€μ° μ½μ΅λλ€. μλμ λ¨μμ±μ μν΄ μ€κ³λμ΄ λΉ λ₯Έ νλ‘ν νμ΄ν λ° μ€μ μ€λ²ν€λκ° μ°λ €λλ νλ‘μ νΈμ νλ₯ν μ νμ λλ€.
- μ λ‘ κ΅¬μ±: μ¬μ©λλ νμΌμ μ νμ μλμΌλ‘ κ°μ§νκ³ νμν λ³ν λ° μ΅μ νλ₯Ό μ μ©ν©λλ€.
- λΉ λ¦: λ©ν° μ½μ΄ μ²λ¦¬μ κ°μ κΈ°μ μ νμ©νμ¬ λ§€μ° λΉ λ₯Έ λΉλ μκ°μ μ 곡ν©λλ€.
- λ€μν μ μ μ ν μ§μ: HTML, CSS, JavaScript λ±μ μ¦μ μ²λ¦¬ν©λλ€.
μ¬μ© μ¬λ‘: μκ·λͺ¨ νλ‘μ νΈ, νλ‘ν νμ λλ κ΄λ²μν κ΅¬μ± μμ΄ μ μνκ² μμνλ €λ κ²½μ°μ μλ²½ν©λλ€. μ¬μ© νΈμμ±κ³Ό μλλ₯Ό μ°μ μνλ κ°λ°μμκ² νμμ μΈ μ΅μ μ λλ€.
3. λ―Έλνμ΄μ΄ λ° μ΅ν°λ§μ΄μ (μ: Terser)
μ½λκ° λ²λ€λ§λλ©΄ μ΅μνλ ν¬κΈ°λ₯Ό λμ± μ€μ λλ€. λ―Έλνμ΄μ΄λ κΈ°λ₯μ μν₯μ μ£Όμ§ μκ³ μ½λμμ λΆνμν λ¬Έμλ₯Ό λͺ¨λ μ κ±°ν©λλ€. μ΄λ λ€μ΄λ‘λ μκ°μ κ°μ νλ λ° λ§€μ° μ€μνλ©°, νΉν λλ¦° λ€νΈμν¬λ λͺ¨λ°μΌ μ₯μΉμ μ¬μ©μμκ² λμ± κ·Έλ μ΅λλ€.
- Terser: μΈκΈ° μλ JavaScript νμ, μμΆκΈ° λ° λ·°ν°νμ΄μ΄ λꡬμ λλ€. ES6+ ꡬ문μ ν¬ν¨νμ¬ JavaScriptλ₯Ό μ΅μννλ λ° λ§€μ° ν¨κ³Όμ μ λλ€. Webpack λ° κΈ°ν λ²λ€λ¬λ μ’ μ’ λΉλ νλ‘μΈμ€μ Terser(λλ μ μ¬ν λꡬ)λ₯Ό ν΅ν©ν©λλ€.
- μμΆ(Uglification): μ½λ ν¬κΈ°λ₯Ό λμ± μ€μ΄κΈ° μν΄ λ³μ λ° ν¨μ μ΄λ¦μ μ§§κ² λ§λλ κ²μ ν¬ν¨νμ¬ μ΅μνμ μμ£Ό μ¬μ©λλ κ΄λ ¨ μ©μ΄μ λλ€.
μ΅μνλ μ½λ μμ:
function add(a,b){return a+b}var x=1,y=2;console.log(add(x,y));
μ»΄νμΌ μν¬νλ‘μ°: λ¨κ³λ³ μ΄ν΄λ³΄κΈ°
μΌλ°μ μΈ JavaScript λͺ¨λ μ»΄νμΌ μν¬νλ‘μ°μλ μ’ μ’ λ€μ λ¨κ³κ° ν¬ν¨λ©λλ€:
- κ°λ°: λͺ¨λμ ν¨ν΄(ES λͺ¨λ, CommonJS)κ³Ό μ μ¬μ μΌλ‘ μ΅μ JavaScript κΈ°λ₯ λλ TypeScriptλ₯Ό μ¬μ©νμ¬ μ½λλ₯Ό μμ±ν©λλ€.
- νΈλμ€νμΌλ§: Babelκ³Ό κ°μ νΈλμ€νμΌλ¬κ° μ½λλ₯Ό μ²λ¦¬νμ¬ λμ νκ²½μμ μ΄ν΄ν μ μλ ꡬ문μΌλ‘ λ³νν©λλ€.
- λ²λ€λ§: Webpack, Rollup λλ Parcelκ³Ό κ°μ λ²λ€λ¬κ° λͺ¨λ λͺ¨λ νμΌμ κ°μ Έμ μ’ μμ±μ ν΄κ²°νκ³ νλ μ΄μμ μΆλ ₯ νμΌλ‘ κ²°ν©ν©λλ€. μ΄ λ¨κ³μμ CSS μ²λ¦¬, μ΄λ―Έμ§ μ΅μ ν λ° μ μ κ΄λ¦¬μ κ°μ λ€λ₯Έ λ³νλ λ°μν μ μμ΅λλ€.
- μ΅μν/μ΅μ ν: λ²λ€λ§λ JavaScript νμΌμ Terserμ κ°μ λ―Έλνμ΄μ΄λ₯Ό ν΅κ³Όνμ¬ κ³΅λ°±μ μ κ±°νκ³ λ³μ μ΄λ¦μ μ§§κ² νλ©° μ½λλ₯Ό ν¬κΈ°μ λ§κ² λμ± μ΅μ νν©λλ€.
- μΆλ ₯: μ΅μ’ μ μ΄κ³ μ΅μ νλμμΌλ©° λ³νλ JavaScript νμΌμ΄ μμ±λμ΄ νλ‘λμ μ λ°°ν¬ν μ€λΉκ° λ©λλ€.
ꡬμ±μ΄ ν΅μ¬μ λλ€
Parcelκ³Ό κ°μ λꡬλ μ λ‘ κ΅¬μ±μ μ 곡νμ§λ§, λλΆλΆμ 볡μ‘ν νλ‘μ νΈλ μ΄λ μ λμ ꡬμ±μ΄ νμν©λλ€. μΌλ°μ μΌλ‘ λ€μμ μ μνλ κ΅¬μ± νμΌ(μ: webpack.config.js, rollup.config.js)μ λ§λλ κ²μ΄ ν¬ν¨λ©λλ€:
- μ§μ μ (Entry Points): λ²λ€λ¬κ° μ ν리μΌμ΄μ μ²λ¦¬λ₯Ό μμν΄μΌ νλ μμΉμ λλ€.
- μΆλ ₯(Output): λ²λ€λ§λ νμΌμ΄ μ μ₯λμ΄μΌ νλ μμΉμ λ°©λ²μ λλ€.
- λ‘λ λ° νλ¬κ·ΈμΈ: μ½λ λ° μ μ μ μ μ©ν΄μΌ νλ λ³ν λ° μμ μ λλ€.
- κ°λ° λ νλ‘λμ λͺ¨λ: κ°λ°(μμ€ λ§΅, λλ²κΉ λꡬ ν¬ν¨) λ° νλ‘λμ (μ±λ₯μ μ΅μ ν)μ λν λ€μν ꡬμ±μ λλ€.
κΈλ‘λ² μ¬μ©μ μ΅μ ν
κΈλ‘λ² μ¬μ©μμκ² μ ν리μΌμ΄μ μ λ°°ν¬ν λ μ±λ₯κ³Ό νΈνμ±μ΄ κ°μ₯ μ€μν©λλ€. λͺ¨λ μ»΄νμΌμ μ΄λ¬ν λͺ©νλ₯Ό λ¬μ±νλ λ° μ€μν μν μ ν©λλ€:
1. μ±λ₯ ν₯μ
- HTTP μμ² κ°μ: λ²λ€λ§μ λ§μ μμ νμΌμ λ μ κ³ ν° νμΌλ‘ ν΅ν©νμ¬ μ¬λ¬ λ€νΈμν¬ μ°κ²° μ€μ μ μ€λ²ν€λλ₯Ό ν¬κ² μ€μ λλ€. μ΄λ κ³ μ§μ° λλ λͺ¨λ°μΌ λ€νΈμν¬ μ¬μ©μκ° μ€μν©λλ€.
- νμΌ ν¬κΈ° μΆμ: μ΅μν λ° νΈλ¦¬ μμ΄νΉμ ν΅ν΄ λ μμ JavaScript νμ΄λ‘λλ₯Ό μ 곡νμ¬ λ€μ΄λ‘λ μκ°μ λ¨μΆνκ³ μ€ν μλλ₯Ό λμ λλ€.
- μ½λ λΆν : νμ¬ λ³΄κΈ° λλ μνΈ μμ©μ νμν JavaScriptλ§ λ‘λνλ©΄ μ΄κΈ° λ‘λ μκ°μ΄ ν₯μλκ³ μΈμ§λ μ±λ₯μ΄ ν₯μλ©λλ€. μλ₯Ό λ€μ΄, μ μ μκ±°λ μ¬μ΄νΈμ μ‘μΈμ€νλ μΌλ³Έ μ¬μ©μλ νΉμ νλ‘λͺ¨μ λ°°λμ λν λμΌν JavaScript κΈ°λ₯μ΄ λΈλΌμ§ μ¬μ©μμ κ°μ§ μμ μ μμ΅λλ€.
2. ν₯μλ νΈνμ±
- ν¬λ‘μ€ λΈλΌμ°μ μ§μ: νΈλμ€νμΌλ§μ μ½λκ° μ΅μ JavaScript νμ€μ μ§μνμ§ μμ μ μλ μ΄μ λΈλΌμ°μ μμλ μ¬λ°λ₯΄κ² μ€νλλλ‘ λ³΄μ₯ν©λλ€. μ΄λ λΈλΌμ°μ λ₯Ό μ λ°μ΄νΈνμ§ μμ μ¬μ©μμκ² λλ¬ λ²μλ₯Ό λνλλ€.
- νκ²½ μΌκ΄μ±: λͺ¨λ μ»΄νμΌμ JavaScript μ²λ¦¬ λ°©μμ νμ€ννλ λ° λμμ΄ λμ΄ λ€μν JavaScript λ°νμ(λΈλΌμ°μ , Node.js λ²μ )μμ μΌκ΄λ λμμ 보μ₯ν©λλ€.
3. κ΅μ ν (i18n) λ° νμ§ν (l10n)
λͺ¨λ μ»΄νμΌμ μ§μ μ μΈ λΆλΆμ μλμ§λ§, λΉλ νλ‘μΈμ€λ₯Ό κ΅μ ν λ° νμ§ν λ Έλ ₯μ λ§κ² ꡬμ±ν μ μμ΅λλ€:
- λμ κ°μ Έμ€κΈ°(Dynamic Imports): λ²λ€λ¬λ μ’ μ’ μΈμ΄ ν© λλ λ‘μΊλ³ μ μ μ λμ κ°μ Έμ€κΈ°λ₯Ό κ΄λ¦¬νμ¬ μ¬μ©μμ μ νν μΈμ΄μ νμν 리μμ€λ§ λ‘λλλλ‘ ν μ μμ΅λλ€.
- νκ²½ λ³μ: λΉλ λꡬλ μ ν리μΌμ΄μ μ i18n λ Όλ¦¬μμ μ¬μ©ν μ μλ κΈ°λ³Έ μΈμ΄ λλ μ§μκ³Ό κ°μ νκ²½λ³ λ³μλ₯Ό μ£Όμ ν μ μμ΅λλ€.
κ³ κΈ κΈ°λ² λ° κ³ λ € μ¬ν
νλ‘μ νΈκ° μ±μν¨μ λ°λΌ λ κ³ κΈ λͺ¨λ μ»΄νμΌ μ λ΅μ νμν μ μμ΅λλ€:
- νΈλ¦¬ μμ΄νΉ: μΈκΈνλ―μ΄ μ΄λ μ£½μ μ½λλ₯Ό μ κ±°νλ λ° μ€μν©λλ€. Rollup λ° Webpackκ³Ό κ°μ λ²λ€λ¬λ ES λͺ¨λμ μ¬μ©ν λ μ΄λ₯Ό λ§€μ° μ μνν©λλ€. μ΅λνμ μ΄μ μ μ»μΌλ €λ©΄ νλ‘μ νΈ κ΅¬μ‘°μ κ°μ Έμ€κΈ°κ° νΈλ¦¬ μμ΄νΉκ³Ό νΈνλλμ§ νμΈνμμμ€.
- μ½λ λΆν μ λ΅: κΈ°λ³Έ μ§μ μ λΆν μΈμλ μ¦μ νμνμ§ μμ κ΅¬μ± μμ, κ²½λ‘ λλ λ¬΄κ±°μ΄ λΌμ΄λΈλ¬λ¦¬μ λν λμ κ°μ Έμ€κΈ°λ₯Ό κ³ λ €νμμμ€. μ΄λ μ΄κΈ° λ‘λ μ±λ₯μ ν¬κ² ν₯μμν΅λλ€.
- μ μ§μ μΉ μ± (PWA): μ’ μ’ λΉλ νλ‘μΈμ€ λ΄μμ κ΄λ¦¬λλ μλΉμ€ μ컀λ JavaScript λ²λ€μ ν¬ν¨ν μ μ μ μΊμ±νμ¬ μ€νλΌμΈ κΈ°λ₯ λ° λ°λ³΅ λ°©λ¬Έ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
- μλ² μΈ‘ λ λλ§ (SSR) λ° λ²μ© JavaScript: SSRμ νμ©νλ μ ν리μΌμ΄μ μ κ²½μ° λΉλ νλ‘μΈμ€λ μλ² λ° ν΄λΌμ΄μΈνΈ μ»΄νμΌμ λͺ¨λ μ²λ¦¬νλλ‘ κ΅¬μ±ν΄μΌ νλ©°, μ’ μ’ λ€λ₯Έ κ΅¬μ± λ° Babel ν리μ μ΄ νμν©λλ€.
- WebAssembly (Wasm): WebAssemblyμ λΆμμΌλ‘ λ²λ€λ¬λ JavaScriptμ ν¨κ» Wasm λͺ¨λμ μ»΄νμΌ λ° ν΅ν©μ μ μ λ λ§μ΄ μ§μνκ³ μμ΅λλ€.
μ¬λ°λ₯Έ λꡬ μ ν
λ²λ€λ¬ λ° νΈλμ€νμΌλ¬ μ νμ νλ‘μ νΈμ νΉμ μꡬ μ¬νμ λ°λΌ λ€λ¦ λλ€:
- λΌμ΄λΈλ¬λ¦¬μ κ²½μ°: Rollupμ ES λͺ¨λ μ΄μ κ³Ό ν¨μ¨μ μΈ νΈλ¦¬ μμ΄νΉμΌλ‘ μΈν΄ μ’ μ’ μ νΈλλ μ νμ λλ€.
- λκ·λͺ¨ μ ν리μΌμ΄μ μ κ²½μ°: Webpackμ λΉκ΅ν μ μλ μ μ°μ±κ³Ό λ°©λν μνκ³λ₯Ό μ 곡νμ¬ λ³΅μ‘νκ³ κΈ°λ₯μ΄ νλΆν μ ν리μΌμ΄μ μ μ ν©ν©λλ€.
- λ¨μμ± λ° μλμ κ²½μ°: Parcelμ κ΄λ²μν κ΅¬μ± μμ΄ μ μνκ² μμνλ λ° νλ₯ν μ΅μ μ λλ€.
- νΈλμ€νμΌλ§: Babelμ μ΅μ JavaScript λ° TypeScriptλ₯Ό νΈλμ€νμΌνλ λ° κ±°μ 보νΈμ μΌλ‘ μ¬μ©λ©λλ€.
λν λΉλ λꡬμ νκ²½μ μ§μμ μΌλ‘ λ°μ νκ³ μλ€λ μ μ μ μν΄μΌ ν©λλ€. Vite, esbuild λ° swcμ κ°μ λꡬλ μ’ μ’ Go λλ Rustλ₯Ό μ±λ₯μ μν΄ νμ©νμ¬ λ°μ΄λ μλλ‘ μΈκΈ°λ₯Ό μ»κ³ μμ΅λλ€. μ΄λ¬ν μ΅μ λꡬλ λͺ¨λ μ»΄νμΌ λ° μμ€ λ³νμλ λ§€μ° λ₯μν©λλ€.
κΈλ‘λ² λ°°ν¬λ₯Ό μν λͺ¨λ² μ¬λ‘
JavaScript μ ν리μΌμ΄μ μ΄ μ μΈκ³μ μΌλ‘ μ±λ₯μ΄ λ°μ΄λκ³ μ‘μΈμ€ κ°λ₯νλλ‘ νλ €λ©΄:
- μ±λ₯ μ°μ : νμ κ°λ₯ν κ°μ₯ μμ λ²λ€ ν¬κΈ°μ κ°μ₯ λΉ λ₯Έ λ‘λ μκ°μ λͺ©νλ‘ νμμμ€. μ΅μ ν κΈ°νλ₯Ό μλ³νκΈ° μν΄ λ²λ€μ μ κΈ°μ μΌλ‘ κ°μ¬νμμμ€.
- κ΄λ²μν νΈνμ± λ³΄μ₯: νΈλμ€νμΌλ¬λ₯Ό μ¬μ©νμ¬ κ΄λ²μν λΈλΌμ°μ μ μ΄μ μ₯μΉλ₯Ό μ§μνμμμ€.
- μ½λ λΆν νμ©: μ½λ λΆν μ ꡬννμ¬ μ¬μ©μμκ² νμν μ½λλ§ μ 곡νκ³ μ΄κΈ° λ‘λ μκ°μ κ°μ νμμμ€.
- μ μ μ΅μ ν: CSS λ° μ΄λ―Έμ§μ κ°μ λ€λ₯Έ μ μ λ μ ν리μΌμ΄μ μ μ λ°μ μΈ μ±λ₯μ κΈ°μ¬νλ―λ‘ μ΅μ ννλ κ²μ μμ§ λ§μμμ€.
- μ² μ ν ν μ€νΈ: νΈνμ± λλ μ±λ₯ λ¬Έμ λ₯Ό λ°κ²¬νκΈ° μν΄ λ€μν λΈλΌμ°μ , μ₯μΉ λ° λ€νΈμν¬ μ‘°κ±΄μμ μ ν리μΌμ΄μ μ ν μ€νΈνμμμ€.
- μ΅μ μ 보 μ μ§: μ΅μ μ±λ₯ κ°μ λ° λ³΄μ ν¨μΉλ₯Ό νμ©νλ €λ©΄ λΉλ λꡬ λ° μ’ μμ±μ μ΅μ μνλ‘ μ μ§νμμμ€.
κ²°λ‘
JavaScript λͺ¨λ μ»΄νμΌ λ° μμ€ λ³νμ λ¨μν κΈ°μ νΈμκ° μλλΌ κ°λ°μκ° κΈλ‘λ² μ¬μ©μλ₯Ό μν΄ ν¨μ¨μ μ΄κ³ μ μ§λ³΄μκ° κ°λ₯νλ©° μ±λ₯μ΄ λ°μ΄λ μ ν리μΌμ΄μ μ ꡬμΆν μ μλλ‘ νλ κΈ°λ³Έ νλ‘μΈμ€μ λλ€. Babel, Webpack, Rollup λ° Parcelκ³Ό κ°μ λꡬλ₯Ό νμ©νλ©΄ μμ€ μ½λλ₯Ό λ³ννκ³ , μ λ¬μ μ΅μ ννκ³ , κ΄λ²μν νΈνμ±μ 보μ₯νκ³ , κΆκ·Ήμ μΌλ‘ μ μΈκ³μ μΌλ‘ μ°μν μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€. μ΄λ¬ν κΈ°μ μ μμ©νλ κ²μ μ€λλ μ μνΈ μ°κ²°λ λμ§νΈ νκ²½μμ μ λ¬Έ JavaScript κ°λ°μ νΉμ§μ λλ€.