νλ + λ©μλ
κ°μ²΄ = νλ + λ©μλ (νλ‘νΌν° μ§ν©)
μλ°μ€ν¬λ¦½νΈμμ κ°μ²΄λ νλ(λ°μ΄ν°)μ λ©μλ(λμ)λ₯Ό ν¬ν¨ν νλ‘νΌν°λ€μ μ§ν©μΌλ‘ μ μλλ€.
- HTML (DOM) κ°μ²΄: μμ(Element = κ°μ²΄) = μμ±(Attribute = νλ‘νΌν°) + Content
- μμ: `<head></head>`
- μμ±: `<div class="example">`
λ©μλ ννλ²: Default & Shorten
μλ°μ€ν¬λ¦½νΈμμ κ°μ²΄μ λ©μλλ λ κ°μ§ λ°©μμΌλ‘ μ μν μ μλ€.
1. Default(κΈ°λ³Έ) ννλ²
var person = {
name: "CheonSang",
sayName: function() }
console.log(this.name);
}
};- `sayName` λ©μλλ `function` ν€μλλ₯Ό μ¬μ©νμ¬ μ μλλ€.
2. Shorten(κ°λ΅) ννλ² (ES6+)
var person = {
name: "CheonSang",
sayName() {
console.log(this.name);
}
};- ES6μμλ `function` ν€μλλ₯Ό μλ΅ν κ°λ΅ ννμ μ¬μ©ν μ μλ€.
μλ°μ€ν¬λ¦½νΈ κ°μ²΄ μμ± λ°©λ²
κ°μ²΄λ μλ°μ€ν¬λ¦½νΈμμ λ€μν λ°©λ²μΌλ‘ μμ±ν μ μλ€. μΌλ°μ μΈ λκ°μ§ λ°©λ²μ κ°μ²΄ 리ν°λ΄κ³Ό ν΄λμ€μ΄λ€.
κ°μ²΄ 리ν°λ΄ (Object Literal) μ, JSON(JavaScript Object Notation)
μΌλ°μ μΌλ‘ λ©μλλ₯Ό ν¬ν¨νμ§μμ JSONμΌλ‘ λ°μ΄ν° μ μ‘ μ μ μ©νκ² μ¬μ©νλ€ - Javaμμμ DTOμ μ μ¬νλ€.
var person = {
name: "CheonSang",
age: 28
};
ν΄λμ€ (ES6+)
μ‘°κΈμ΄λλ§ SOLIDλ λμμΈ ν¨ν΄ κ°μ κ°μ²΄μ§ν₯μ μμΈμΌλ‘ μ½λ μ¬μ¬μ©μ±μ μ¦λμν€κΈ° μν΄μ ν΄λμ€λ₯Ό μ¬μ©νλ€.
- ν΄λμ€λ₯Ό μ μ¬μ©νλκ°? → Encapsulation: λ¨μν κ°μΆ€μ΄ μλ λ
립λ μμ€ν
ꡬμΆ
- κ°μ²΄μ§ν₯ νλ‘κ·Έλλ°(OOP)μ μΌλ§λ μνλκ° ? = μΌλ§λ ν΄λμ€(λ 립λ μμ€ν ꡬμΆ)μ μ λ§λλκ°
class User {
// νλ
first_name;
last_name;
// μμ±μ
constructor(first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
}
// λ©μλ
fullname() {
return `${this.first_name} ${this.last_name}`;
}
}
const user = new User('Cheon', 'Sang');
console.log(user.first_name); // 'Cheon'
console.log(user.last_name); // 'Sang'
console.log(user.fullname()); // 'Cheon Sang'
ν΄λμ€μ Private νλμ Getter / Setter
ν΄λμ€μμ νλλ₯Ό PrivateμΌλ‘ μ€μ νλ €λ©΄ νλλͺ μμ `#`μ λΆμΈλ€. λν, `getter`μ `setter`λ©μλλ₯Ό ν΅ν΄ νλλ₯Ό μμ νκ² κ΄λ¦¬ ν μ μλ€.
class User {
#firstname = "Cheon";
#lastname = "Sang";
get fullname() {
return `${this.#firstname} ${this.#lastname}`;
}
set fullname(value) {
[this.#firstname, this.#lastname] = value.split(" ");
}
}
var user = new User();
user.fullname = "Cheon Ha"; // setterλ‘ κ° μ€μ
console.log(user.firstname)
console.log(user.lastname)
console.log(user.fullname)
Object.getOwnPropertySymbols(user)- Private νλλ μΈλΆμμ μ§μ μ κ·Όν μ μκ³ , `getter`μ `setter`λ₯Ό ν΅ν΄μλ§ κ°μ λ³κ²½νκ±°λ μ½μ μ μλ€.
μλ°μ€ν¬λ¦½νΈ λͺ¨λ μμ€ν : ES Modules(ESM)μ import / export ννλ²
μλ°μ€ν¬λ¦½νΈλ λͺ¨λνλ μ½λλ₯Ό ν΅ν΄μ μ½λλ₯Ό μ¬μ¬μ©νκ³ μμ‘΄μ±μ κ΄λ¦¬νλ€.
ES6 μ΄νλ‘ ES Modules (ESM)κ° νμ€νλμμΌλ©°, νλ‘ νΈμλμμ λ리 μ°μΈλ€.
κ³Όκ±°μ λͺ¨λ μμ€ν : `<script>` νκ·Έ
κ³Όκ±°μλ HTML νμΌμμ μ¬λ¬ κ°μ `<script>`νκ·Έλ₯Ό μ¬μ©νμ¬ μΈλΆ μ€ν¬λ¦½νΈλ₯Ό λΆλ¬μλ€. νμ§λ§ μλ§μ λ¬Έμ μ μ΄ μλ€.
1. μ±λ₯ λ¬Έμ : λͺ¨λ μ€ν¬λ¦½νΈκ° λμμ λ‘λλκ³ μ€νλλ©°, μ΄λ νμ΄μ§ λ‘λ© μλμ μ μν₯μ λΌμΉλ€.
2. μμ‘΄μ± κ΄λ¦¬μ μ΄λ €μ: μ€ν¬λ¦½νΈμ λ‘λ μμλ₯Ό 보μ₯νκΈ° μ΄λ ΅λ€.
3. μ μ μ€μ½ν λ¬Έμ : λͺ¨λ μ€ν¬λ¦½νΈκ° μ μ μ€μ½νμμ λμν΄ λ³μ μΆ©λμ΄ λ°μν μ μλ€.
4. μ½λ μ¬μ¬μ©μ μ΄λ €μ: λͺ¨λ νμ΄μ§μμ λμΌν μ€ν¬λ¦½νΈλ₯Ό μ¬μ© μ μ½λμ μ¬μ¬μ©μ΄ μ΄λ ΅λ€.
ESM (ECMAScript Modules): `import` / `export`
ES Modulesλ λͺ¨λνλ μ½λλ₯Ό μ 곡νλ©°, λͺ¨λ κ°μ μμ‘΄μ±μ κ΄λ¦¬νκ³ μ½λλ₯Ό μ¬μ¬μ© ν μ μκ²νλ€.
1. λͺ¨λν: κ° νμΌμ λ 립λ λͺ¨λλ‘ λμνλ©°, λ€λ₯Έ νμΌλ‘λΆν° λ°μ΄ν°λ₯Ό κ°μ Έμ€κ±°λ λ΄λ³΄λΌ μ μλ€. μ΄λ₯Ό ν΅ν΄ μ½λλ₯Ό μ¬μ¬μ©νκ³ μ μ§λ³΄μμ±μ λμΌ μ μλ€.
2. μμ‘΄μ± κ΄λ¦¬: λͺ¨λ κ°μ κ΄κ³λ₯Ό λͺ νν μ μνκ³ , νμν λͺ¨λλ§ λΆλ¬μμ μ¬μ©ν μ μμ΄ μμ‘΄μ± κ΄λ¦¬κ° μ©μ΄νλ€.
3. λΉλκΈ° λ‘λ:
- `import`λ λμ€ν¬ λλ λ€νΈμν¬μμ λ°μ΄ν°λ₯Ό λΉλκΈ°λ‘ μ½μ΄μ¨λ€.
- λ°μ΄ν°κ° λ‘λλλ©΄ νμ±μ΄ λ¨Όμ μ΄λ£¨μ΄μ§κ³ κ·Έ νμ μ€ν¬λ¦½νΈκ° μ€νλλ€.
- μ΄λ¬ν λμ λ°©μ λλΆμ μ½λ μ€ν μ μ λ¬Έμ κ° λ°μνλμ§ λ―Έλ¦¬ νμΈν μ μμΌλ©°, 보μμ± μΈ‘λ©΄μμλ μ 리νλ€. μ μ± μ€ν¬λ¦½νΈκ° μ€νλκΈ° μ μ νμ± κ³Όμ μμ μ€λ₯κ° κ°μ§λλ©΄, μ€νμ μ€λ¨ν μ μκΈ° λλ¬Έμ΄λ€.
Named Export(μ¬λ¬ κ°μ λͺ¨λμ λ΄λ³΄λΌ λ)
export const sum = (x, y) => x + y;
export const minus = (x, y) => x - y;
// λ€λ₯Έ νμΌμμ κ°μ Έμ€κΈ°
import { sum, minus } from './utils.mjs';
console.log(sum(2, 4)); // 6
Default Export(ν λͺ¨λλ§ λ΄λ³΄λΌ λ)
export default (x, y) => x + y;
import ssam from './utils.mjs'
console.log(ssam(2, 4));const sum = (x, y) => x + y
export default sum
import ssam from './utils.mjs'
console.log(ssam(2, 4));CommonJS (CJS) : `require` / `module.exports`
CommonJSλ μ£Όλ‘ Node.js νκ²½μμ μ¬μ©λλ λͺ¨λ μμ€ν μΌλ‘, νμΌ λ¨μλ‘ λͺ¨λμ κ΄λ¦¬νλ€.
module.exports = {
sum: (x, y) => x + y,
minus: (x, y) => x - y,
};
// λ€λ₯Έ νμΌμμ κ°μ Έμ€κΈ°
const { sum, minus } = require('./utils');
console.log(sum(2, 4));
λͺ¨λ μμ€ν μ ν
- ESM : νλ‘ νΈμλμμ λΈλΌμ°μ κ° ESMPμ μ§μνλ©°, Tree-shakingμ μ§μνλ μ₯μ μ΄ μλ€.
- CJS: μλ²(Node.js)μμλ μ¬μ ν CommonJSκ° μ£Όλ‘ μ¬μ©λλ©°, λκΈ°μ μΌλ‘ λͺ¨λμ λ‘λνλ€.
βΉοΈμ°Έκ³
[ASAC 6κΈ° κ°μμλ£]
'π»DEV-STUDY > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| JavaScript CallBack ν¨μμ λΉλκΈ° μ²λ¦¬ Promise (0) | 2024.09.09 |
|---|---|
| JavaScript ν¨μ λ΄ thisμ λ©μλ λ΄ this μ°¨μ΄ (1) | 2024.09.09 |
| JavaScript ν¨μ μμ± λ°©λ² (1) | 2024.09.08 |
| μλ°μ€ν¬λ¦½νΈ μμ§μ μν λ°©μ = ν¨μ μ€ν μ리 (0) | 2024.09.05 |
| JavaScript λ³μ, ν¨μ μ μ λ° μ¬μ© (0) | 2024.09.05 |
