JavaScript λͺ¨λ μμ€ν
μ ν리μΌμ΄μ μ κ·λͺ¨κ° 컀μ§λ©΄μ νμΌμ μ¬λ¬κ°λ‘ λΆλ¦¬νκ² λλλ° μ΄λ° νλνλμ νμΌμ “λͺ¨λ”μ΄λΌκ³ νλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</head>
<body></body>
</html>→ μμ κ°μ΄ μμ±νλ©΄ μ μ μ€μ½νλ₯Ό 곡μ νκ² λλ λ¬Έμ λ°μ(νλμ νμΌμμ μλ μ½λμ²λΌ λμ)
λͺ¨λμ΄λ?
κ°λ°νλ μ ν리μΌμ΄μ μ κ·λͺ¨κ° 컀μ§λ©΄ νμΌμ μ¬λ¬κ°λ‘ λΆλ¦¬ν΄μΌ νλ μμ μ΄ μκΈ΄λ€. μ΄λ λΆλ¦¬λ νλμ νμΌμ λͺ¨λμ΄λΌκ³ λΆλ₯΄λλ°, _λͺ¨λμ λκ° ν΄λμ€ νλ νΉμ νΉμ ν λͺ©μ μ κ°μ§ μ¬λ¬κ°μ ν¨μλ₯Ό ν¬ν¨νλ λΌμ΄λΈλ¬λ¦¬_λ‘ κ΅¬μ±λμ΄ μλ€.
μ₯μ
- μ μ§λ³΄μ μ©μ΄ → κΈ°λ₯λ€μ΄ λͺ¨λνλ κ²½μ° μμ‘΄μ±μ μ€μΌ μ μμ΄ κΈ°λ₯ κ°μ μ΄λ μμ μ΄ μ©μ΄
- λ€μμ€νμ΄μ€ν → μ½λ μμ΄ λ§μμ§μλ‘ μ μμ€μ½νμ μ‘΄μ¬νλ λ³μλͺ μ΄ κ²ΉμΉλ κ²½μ°κ° μ‘΄μ¬νλ€. μ΄λ λͺ¨λλ‘ λΆλ¦¬νλ©΄ λͺ¨λλ§μ λ€μμ€νμ΄μ€λ₯Ό κ°κΈ° λλ¬Έμ κ·Έ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ€.
- μ¬μ¬μ©μ± → κ°μ μ½λλ₯Ό λ°λ³΅νμ§ μκ³ λͺ¨λλ‘ λΆλ¦¬μμΌμ νμν λλ§λ€ μ¬μ¬μ©ν μ μλ€.
λͺ¨λμ λΆλ¬μ€λ λ°©λ²μ λͺ¨λ μμ€ν
μ΄λΌκ³ νλ©°, λͺ¨λ μμ€ν
μ λ€μκ³Ό κ°μ λ°©λ²μ΄ μλ€.
λͺ¨λ μμ€ν μ’ λ₯
AMD- κ°μ₯ μ€λλ λͺ¨λ μμ€ν μ€ νλ, require.js λΌλ λΌμ΄λΈλ¬λ¦¬λ₯Ό ν΅ν΄ μ²μ κ°λ°λμλ€.CommonJS- NodeJS νκ²½μ μν΄ λ§λ€μ΄μ§ λͺ¨λ μμ€ν UMD- AMDμ CommonJSμ κ°μ λ€μν λͺ¨λ μμ€ν μ ν¨κ» μ¬μ©νκΈ° μν΄ λ§λ€μ΄μ‘λ€.ES Module- ES6(ES2015)μ λμ λ μλ°μ€ν¬λ¦½νΈ λͺ¨λ μμ€ν μ΄λ€.
ES Module λ°©μ
ES6(ES2015)μ λμ
λ μλ°μ€ν¬λ¦½νΈ λͺ¨λ μμ€ν
μ΄λ€. <script> νκ·Έμ type=”module” μμ±μ μΆκ°νλ©΄ μ΄ νμΌμ λͺ¨λλ‘μ λμνλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<script type="module" src="module/index.js"></script>
</head>
<body></body>
</html>λͺ¨λμ μΈλΆμμ μ¬μ©ν μ μλλ‘ λ΄λ³΄λΌ λ export export defaultν€μλλ₯Ό μ¬μ©νλ©° μΈλΆμμ λͺ¨λμ λΆλ¬μ¬λλ importλ₯Ό μ¬μ©νλ€.
export defaultν€μλλ₯Ό μ¬μ©νμ¬ νλ κΈ°λ³Έ ν¨μλ₯Ό λ΄λ³΄λΌ μ μλ€.(λͺ¨λ λΉ νλλ§ κ°λ₯)
CommonJS λ°©μ
λͺ¨λμ μΈλΆμμ μ¬μ©ν μ μλλ‘ λ΄λ³΄λΌ λλ exports, module.exports μ κ°μ ν€μλλ₯Ό μ¬μ©νλ©°, μΈλΆμμ λͺ¨λμ λΆλ¬μ¬λλ require λ₯Ό μ¬μ©νμ¬ λͺ¨λμ λΆλ¬μ¬ μ μλ€.
module.exportsλ₯Ό μ¬μ©νμ¬ νλμ κ°μ²΄λ‘ λ¬Άμ΄μ λ΄λ³΄λΌ μ μλ€.
ES Module for NodeJS
CommonJS λͺ¨λ μμ€ν μ μ±ννλ NodeJS νκ²½μμ ES Module μ μ¬μ©νλ €λ©΄ Babelκ³Ό κ°μ νΈλμ€νμΌλ¬(transpiler)λ₯Ό μ¬μ©ν΄μΌ νλλ°
NodeJS λ²μ 13.2λΆν° ES Module μμ€ν μ λν μ μ μ§μμ΄ μμλ¨μ λ°λΌ λ€λ₯Έ λꡬ μμ΄ NodeJSμμ μμ½κ² ES Moduleμ μ¬μ©ν μ μκ² λμλ€.
NodeJSμμ ES Module μ¬μ©λ²
package.json→type=”module”μ μΈ
μΈνλ° νλ‘ νΈμλ κΈ°λ³Έ μ§μ κ°μλ₯Ό μκ°νλ©° μ 리ν λ΄μ©μ λλ€.
'Web > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] this (0) | 2022.08.13 |
|---|---|
| [JavaScript] λ³μ νΈμ΄μ€ν (0) | 2022.07.29 |
| [JavaScript] HTML νμΌμμ JavaScript νμΌ ν¨κ³Όμ μΌλ‘ λ‘λνκΈ° (0) | 2022.07.29 |
| [JavaScript] μλ°μ€ν¬λ¦½νΈ λ³μμ μ€μ½ν (0) | 2022.07.18 |
