μΌ | μ | ν | μ | λͺ© | κΈ | ν |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- fetch API
- history api
- useEffect
- μλ°μ€ν¬λ¦½νΈ
- μκ³ λ¦¬μ¦
- float
- Flex
- Props
- μ½λ©ν μ€νΈ
- λ°λΈμ½μ€3κΈ°
- νλ‘ νΈμλ
- REACT
- CSS
- Gatsby
- position
- λΈλ‘κ·Έ
- νλ‘κ·Έλλ¨Έμ€
- useRef
- λ°λΈμ½μ€
- Today
- Total
Daehyunii's Dev-blog
48μ₯ λͺ¨λ λ³Έλ¬Έ
48μ₯ λͺ¨λ
Daehyunii 2022. 7. 31. 16:3248.1 λͺ¨λμ μΌλ°μ μλ―Έ
λͺ¨λμ΄λ μ ν리μΌμ΄μ
μ ꡬμ±νλ κ°λ³μ μμλ‘μ μ¬μ¬μ© κ°λ₯ν μ½λ μ‘°κ°μ λ§νλ€. μΌλ°μ μΌλ‘ λͺ¨λμ κΈ°λ₯μ κΈ°μ€μΌλ‘ νμΌ λ¨μλ‘ λΆλ¦¬νλ€. μ΄λ λͺ¨λμ΄ μ±λ¦½νλ €λ©΄ λͺ¨λμ μμ λ§μ νμΌ μ€μ½ν(λͺ¨λ μ€μ½ν)λ₯Ό κ°μ§ μ μμ΄μΌ νλ€.
μμ λ§μ νμΌ μ€μ½νλ₯Ό κ°λ λͺ¨λμ μμ°μ κΈ°λ³Έμ μΌλ‘ λΉκ³΅κ° μνλ€. μμ λ§μ νμΌ μ€μ½νλ₯Ό κ°λ λͺ¨λμ λͺ¨λ μμ°μ μΊ‘μνλμ΄ λ€λ₯Έ λͺ¨λμμ μ κ·Όν μ μλ€. μ¦, λͺ¨λμ κ°λ³μ μ‘΄μ¬λ‘μ μ ν리μΌμ΄μ
κ³Ό λΆλ¦¬λμ΄ μ‘΄μ¬νλ€.
νμ§λ§ μ ν리μΌμ΄μ
κ³Ό μμ ν λΆλ¦¬λμ΄ κ°λ³μ μΌλ‘ μ‘΄μ¬νλ λͺ¨λμ μ¬μ¬μ©μ΄ λΆκ°λ₯νλ―λ‘ μ‘΄μ¬μ μλ―Έκ° μλ€. λ°λΌμ λͺ¨λμ 곡κ°κ° νμν μμ°μ νμ νμ¬ λͺ
μμ μΌλ‘ μ νμ 곡κ°κ° κ°λ₯νλ€. μ΄λ₯Ό exportλΌ νλ€.
곡κ°λ λͺ¨λμ μμ°μ λ€λ₯Έ λͺ¨λμμ μ¬μ¬μ©ν μ μλ€. λͺ¨λ μ¬μ©μλ λͺ¨λμ΄ κ³΅κ°ν μμ° μ€ μΌλΆ λλ μ 체λ₯Ό μ νν΄ μμ μ μ€μ½ν λ΄λ‘ λΆλ¬λ€μ¬ μ¬μ¬μ©ν μ μλ€. μ΄λ₯Ό importλΌ νλ€. μ΄μ²λΌ λͺ¨λμ μ ν리μΌμ΄μ
κ³Ό λΆλ¦¬λμ΄ κ°λ³μ μΌλ‘ μ‘΄μ¬νλ€κ° νμμ λ°λΌ λ€λ₯Έ λͺ¨λμ μν΄ μ¬μ¬μ©λλ€. λͺ¨λμ κΈ°λ₯λ³λ‘ λΆλ¦¬λμ΄ κ°λ³μ μΈ νμΌλ‘ μμ±λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ° ν¨μ¨μ±κ³Ό μ μ§λ³΄μμ±μ λμΌ μ μλ€.
48.2 μλ°μ€ν¬λ¦½νΈμ λͺ¨λ
μμ½κ²λ μλ°μ€ν¬λ¦½νΈλ λͺ¨λ μμ€ν
μ μ§μνμ§ μλλ€. μ¦, λͺ¨λ μλ°μ€ν¬λ¦½νΈ νμΌμ νλμ μ μμ 곡μ νλ€. λ°λΌμ λΆλ¦¬λ μλ°μ€ν¬λ¦½νΈ νμΌλ€μ μ μ λ³μκ° μ€λ³΅λλ λ±μ λ¬Έμ κ° λ°μν μ μλ€. μ΄κ²μΌλ‘λ λͺ¨λμ ꡬνν μ μλ€. μ΄λ¬ν λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄ μ μλ κ²μ΄ CommonJSμ AMDλ€. μ΄λ‘μ¨ μλ°μ€ν¬λ¦½νΈμ λͺ¨λ μμ€ν
μ ν¬κ² CommonJSμ AMD μ§μμΌλ‘ λλκ² λμκ³ λΈλΌμ°μ νκ²½μμ λͺ¨λμ μ¬μ©νκΈ° μν΄μλ CommonJSμ AMDλ₯Ό ꡬνν λͺ¨λ λ‘λ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©ν΄μΌ νλ μν©μ΄ λμλ€.
48.3 ES6 λͺ¨λ(ESM)
μμ κ°μ μν©μμ ES6μμλ ν΄λΌμ΄μΈνΈ μ¬μ΄λ μλ°μ€ν¬λ¦½νΈμμλ λμνλ λͺ¨λ κΈ°λ₯μ μΆκ°νλ€. ES6 λͺ¨λ μ¦, ESMμ μ¬μ©λ°©λ²μ script νκ·Έμ type="module" μ΄νΈλ¦¬λ·°νΈλ₯Ό μΆκ°νλ©΄ λ‘λλ μλ°μ€ν¬λ¦½νΈ νμΌμ λͺ¨λλ‘ λμνλ€. μΌλ°μ μΈ μλ°μ€ν¬λ¦½νΈ νμΌμ΄ μλ ESMμμ λͺ
νννκΈ° μν΄ ESMμ νμΌ νμ₯μλ mjsλ₯Ό μΌλ°μ μΌλ‘ μ¬μ©νλ€.
<script type="module" src="app.mjs"></script>
48.3.1 λͺ¨λ μ€μ½ν
ESMμ λ
μμ μΈ λͺ¨λ μ€μ½νλ₯Ό κ°λλ€. ESMμ΄ μλ μΌλ°μ μΈ μλ°μ€ν¬λ¦½νΈ νμΌμ script νκ·Έλ‘ λΆλ¦¬ν΄μ λ‘λν΄λ λ
μμ μΈ λͺ¨λ μ€μ½νλ₯Ό κ°μ§ μλλ€. μλ₯Όλ€λ©΄, ESMμ νμΌ μ체μ λ
μμ μΈ λͺ¨λ μ€μ½νλ₯Ό μ 곡νκΈ° λλ¬Έμ λͺ¨λ λ΄μμ var ν€μλλ‘ μ μΈν λ³μλ λλ μ μ λ³μκ° μλλ©° windowκ°μ²΄μ νλ‘νΌν°λ μλλ€. λν λͺ¨λ λ΄μμ μ μΈν μλ³μλ λͺ¨λ μΈλΆμμ μ°Έμ‘°ν μ μλ€. λͺ¨λ μ€μ½νκ° λ€λ₯΄κΈ° λλ¬Έμ΄λ€.
48.3.2 export ν€μλ
λͺ¨λμ λ
μμ μΈ λͺ¨λ μ€μ½νλ₯Ό κ°λλ€. λ°λΌμ λͺ¨λ λ΄λΆμμ μ μΈν λͺ¨λ μλ³μλ κΈ°λ³Έμ μΌλ‘ ν΄λΉ λͺ¨λ λ΄λΆμμλ§ μ°Έμ‘°ν μ μλ€. λͺ¨λ λ΄λΆμμ μ μΈν μλ³μλ₯Ό μΈλΆμ 곡κ°νμ¬ λ€λ₯Έ λͺ¨λλ€μ΄ μ¬μ¬μ©ν μ μκ² νλ €λ©΄ export ν€μλλ₯Ό μ¬μ©νλ€. export ν€μλλ μ μΈλ¬Έ μμ μ¬μ©νλ€. λ³μ, ν¨μ, ν΄λμ€ λ± λͺ¨λ μλ³μλ₯Ό exportν μ μλ€.
export const pi = 3.14;
export function add(x, y){
return x + y;
}
export class Person {
constructor(name){
this.name = name;
}
}
exportν λμμ νλμ κ°μ²΄λ‘ ꡬμ±νμ¬ ν λ²μ exportν μλ μλ€.
const pi = 3.14;
function add(x, y){
return x + y;
}
class Person {
constructor(name){
this.name = name;
}
}
export { pi, add, Person };
48.3.3 import ν€μλ
λ€λ₯Έ λͺ¨λμμ 곡κ°ν μλ³μλ₯Ό μμ μ λͺ¨λ μ€μ½ν λ΄λΆλ‘ λ‘λνλ €λ©΄ import ν€μλλ₯Ό μ¬μ©νλ€. λ€λ₯Έ λͺ¨λμ΄ exportν μλ³μ μ΄λ¦μΌλ‘ importν΄μΌ νλ©° ESMμ κ²½μ° νμΌ νμ₯μλ₯Ό μλ΅ν μ μλ€.
import { pi, add, Person} from './lib.mjs';
λͺ¨λμ΄ exportν μλ³μ μ΄λ¦μ μΌμΌμ΄ μ§μ νμ§ μκ³ νλμ μ΄λ¦μΌλ‘ ν λ²μ importν μλ μλ€. μ΄λ importλλ μλ³μλ as λ€μ μ§μ ν μ΄λ¦μ κ°μ²΄μ νλ‘νΌν°λ‘ ν λΉλλ€.
import * as lib from './lib.mjs';
λͺ¨λμ΄ exportν μλ³μ μ΄λ¦μ λ³κ²½νμ¬ importν μλ μλ€.
import { pi as PI, add as Add, Person as people} from './lib.mjs';
'π Language & CS knowledge > JavaScript (λͺ¨λμλ°μ€ν¬λ¦½νΈ Deep Dive)' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
var/let/const ν€μλ (0) | 2022.12.02 |
---|---|
47μ₯ μλ¬ μ²λ¦¬ (0) | 2022.07.30 |
46μ₯ μ λλ μ΄ν°μ async/await(β»λ¨μ κ°λ λ§ μ 리) (0) | 2022.07.30 |
45μ₯ νλ‘λ―Έμ€(β»λ¨μ κ°λ λ§ μ 리) (0) | 2022.07.30 |
44μ₯ REST API(β»λ¨μ κ°λ λ§ μ 리) (0) | 2022.07.29 |