JavaScript λͺ¨λ μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ κ°λ ₯ν μ΄λ²€νΈ μλ¦Όμ ꡬννλ λ°©λ²μ μ΄ν΄λ΄ λλ€. Publish-subscribe, μ¬μ©μ μ μ μ΄λ²€νΈ λ° λΉλκΈ° μμ μ²λ¦¬μ λν λͺ¨λ² μ¬λ‘λ₯Ό λ°°μλλ€.
JavaScript λͺ¨λ μ΅μ λ² ν¨ν΄: μ΅μ μ ν리μΌμ΄μ μ μν μ΄λ²€νΈ μλ¦Ό
μ΅μ JavaScript κ°λ°, νΉν λͺ¨λμ μν€ν μ²μμ μ ν리μΌμ΄μ μ μλ‘ λ€λ₯Έ λΆλΆ κ°μ ν¨μ¨μ μΈ ν΅μ μ λ§€μ° μ€μν©λλ€. Publish-SubscribeλΌκ³ λ νλ μ΅μ λ² ν¨ν΄μ μ΄λ¬ν λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν κ°λ ₯νκ³ μ°μν μ루μ μ μ 곡ν©λλ€. μ΄ ν¨ν΄μ μ¬μ©νλ©΄ λͺ¨λμ΄ λ€λ₯Έ λͺ¨λμμ λ΄λ³΄λΈ μ΄λ²€νΈλ₯Ό ꡬλ νμ¬ λμ¨ν κ²°ν©μ κ°λ₯νκ² νκ³ μ μ§ κ΄λ¦¬ κ°λ₯μ±κ³Ό νμ₯μ±μ λμΌ μ μμ΅λλ€. μ΄ κ°μ΄λμμλ JavaScript λͺ¨λμμ μ΅μ λ² ν¨ν΄μ ν΅μ¬ κ°λ , ꡬν μ λ΅ λ° μ€μ μ μ©μ μ΄ν΄λ΄ λλ€.
μ΅μ λ² ν¨ν΄ μ΄ν΄
μ΅μ λ² ν¨ν΄μ κ°μ²΄ κ°μ μΌλλ€ μ’ μμ±μ μ μνλ νλ λμμΈ ν¨ν΄μ λλ€. νλμ κ°μ²΄(주체)μ μνκ° λ³κ²½λλ©΄ λͺ¨λ μ’ μ κ°μ²΄(μ΅μ λ²)μ μλμΌλ‘ μλ¦Όμ΄ μ μ‘λκ³ μ λ°μ΄νΈλ©λλ€. μ΄ ν¨ν΄μ 주체λ₯Ό μ΅μ λ²μ λΆλ¦¬νμ¬ λ 립μ μΌλ‘ λ³κ²½ν μ μλλ‘ ν©λλ€. JavaScript λͺ¨λμ 컨ν μ€νΈμμ μ΄λ λͺ¨λμ΄ μλ‘μ νΉμ ꡬνμ μ νμ μμ΄ ν΅μ ν μ μμμ μλ―Έν©λλ€.
μ£Όμ κ΅¬μ± μμ
- 주체(κ²μμ): μ΅μ λ² λͺ©λ‘μ μ μ§ κ΄λ¦¬νκ³ μν λ³κ²½μ μ리λ κ°μ²΄μ λλ€. λͺ¨λ 컨ν μ€νΈμμ μ΄λ μ¬μ©μ μ μ μ΄λ²€νΈλ₯Ό λ΄λ³΄λ΄κ±°λ λ©μμ§λ₯Ό ꡬλ μμκ² κ²μνλ λͺ¨λμΌ μ μμ΅λλ€.
- μ΅μ λ²(ꡬλ μ): 주체λ₯Ό ꡬλ νκ³ μ£Όμ²΄μ μνκ° λ³κ²½λ λ μλ¦Όμ λ°λ κ°μ²΄μ λλ€. λͺ¨λμμ μ΄λ¬ν κ°μ²΄λ λ€λ₯Έ λͺ¨λμ μ΄λ²€νΈ λλ λ°μ΄ν° λ³κ²½μ λ°μν΄μΌ νλ λͺ¨λμΈ κ²½μ°κ° λ§μ΅λλ€.
- μ΄λ²€νΈ: μλ¦Όμ νΈλ¦¬κ±°νλ νΉμ λ°μμ λλ€. μ΄λ λ°μ΄ν° μ λ°μ΄νΈμμ μ¬μ©μ μνΈ μμ©μ μ΄λ₯΄κΈ°κΉμ§ λͺ¨λ κ²μ΄ λ μ μμ΅λλ€.
JavaScript λͺ¨λμμ μ΅μ λ² ν¨ν΄ ꡬν
JavaScript λͺ¨λμμ μ΅μ λ² ν¨ν΄μ ꡬννλ λ°©λ²μλ μ¬λ¬ κ°μ§κ° μμ΅λλ€. λͺ κ°μ§ μΌλ°μ μΈ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
1. μ¬μ©μ μ μ μ΄λ²€νΈλ₯Ό μ¬μ©ν κΈ°λ³Έ ꡬν
μ΄ μ κ·Ό λ°©μμ ꡬλ μ κ΄λ¦¬νκ³ μ΄λ²€νΈλ₯Ό λμ€ν¨μΉνλ κ°λ¨ν μ΄λ²€νΈ μ΄λ―Έν° ν΄λμ€λ₯Ό λ§λλ κ²μ ν¬ν¨ν©λλ€. μ΄κ²μ νΉμ λͺ¨λ μꡬ μ¬νμ λ§κ² μ‘°μ ν μ μλ κΈ°λ³Έμ μΈ μ κ·Ό λ°©μμ λλ€.
// Event Emitter Class
class EventEmitter {
constructor() {
this.listeners = {};
}
on(event, listener) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(listener);
}
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach(listener => listener(data));
}
}
off(event, listenerToRemove) {
if (!this.listeners[event]) {
return;
}
const filterListeners = (listener) => listener !== listenerToRemove;
this.listeners[event] = this.listeners[event].filter(filterListeners);
}
}
// Example Module (Subject)
const myModule = new EventEmitter();
// Example Module (Observer)
const observer = (data) => {
console.log('Event received with data:', data);
};
// Subscribe to an event
myModule.on('dataUpdated', observer);
// Emit an event
myModule.emit('dataUpdated', { message: 'Data has been updated!' });
// Unsubscribe from an event
myModule.off('dataUpdated', observer);
myModule.emit('dataUpdated', { message: 'Data has been updated after unsubscribe!' }); //Will not be caught by the observer
μ€λͺ :
EventEmitterν΄λμ€λ λ€λ₯Έ μ΄λ²€νΈμ λν 리μ€λ λͺ©λ‘μ κ΄λ¦¬ν©λλ€.onλ©μλλ₯Ό μ¬μ©νλ©΄ λͺ¨λμ΄ λ¦¬μ€λ ν¨μλ₯Ό μ 곡νμ¬ μ΄λ²€νΈλ₯Ό ꡬλ ν μ μμ΅λλ€.emitλ©μλλ μ΄λ²€νΈλ₯Ό νΈλ¦¬κ±°νμ¬ μ 곡λ λ°μ΄ν°λ‘ λ±λ‘λ λͺ¨λ 리μ€λλ₯Ό νΈμΆν©λλ€.offλ©μλλ₯Ό μ¬μ©νλ©΄ λͺ¨λμ΄ μ΄λ²€νΈ ꡬλ μ μ·¨μν μ μμ΅λλ€.
2. μ€μ μ§μ€μ μ΄λ²€νΈ λ²μ€ μ¬μ©
λ 볡μ‘ν μ ν리μΌμ΄μ μ κ²½μ° μ€μ μ§μ€μ μ΄λ²€νΈ λ²μ€λ μ΄λ²€νΈ λ° κ΅¬λ μ κ΄λ¦¬νλ λ³΄λ€ κ΅¬μ‘°νλ λ°©λ²μ μ 곡ν μ μμ΅λλ€. μ΄ μ κ·Ό λ°©μμ λͺ¨λμ΄ μ ν리μΌμ΄μ μ μ¬λ¬ λΆλΆμμ ν΅μ ν΄μΌ ν λ νΉν μ μ©ν©λλ€.
// Event Bus (Singleton)
const eventBus = {
listeners: {},
on(event, listener) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(listener);
},
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach(listener => listener(data));
}
},
off(event, listenerToRemove) {
if (!this.listeners[event]) {
return;
}
const filterListeners = (listener) => listener !== listenerToRemove;
this.listeners[event] = this.listeners[event].filter(filterListeners);
}
};
// Module A (Publisher)
const moduleA = {
publishData(data) {
eventBus.emit('dataPublished', data);
}
};
// Module B (Subscriber)
const moduleB = {
subscribeToData() {
eventBus.on('dataPublished', (data) => {
console.log('Module B received data:', data);
});
}
};
// Module C (Subscriber)
const moduleC = {
subscribeToData() {
eventBus.on('dataPublished', (data) => {
console.log('Module C received data:', data);
});
}
};
// Usage
moduleB.subscribeToData();
moduleC.subscribeToData();
moduleA.publishData({ message: 'Hello from Module A!' });
μ€λͺ :
eventBusκ°μ²΄λ λͺ¨λ μ΄λ²€νΈμ μ€μ νλΈ μν μ ν©λλ€.- λͺ¨λμ
eventBus.onμ μ¬μ©νμ¬ μ΄λ²€νΈλ₯Ό ꡬλ νκ³eventBus.emitμ μ¬μ©νμ¬ μ΄λ²€νΈλ₯Ό κ²μν μ μμ΅λλ€. - μ΄ μ κ·Ό λ°©μμ λͺ¨λ κ°μ ν΅μ μ λ¨μννκ³ μ’ μμ±μ μ€μ λλ€.
3. λΌμ΄λΈλ¬λ¦¬ λ° νλ μμν¬ νμ©
λ§μ JavaScript λΌμ΄λΈλ¬λ¦¬ λ° νλ μμν¬λ μ΅μ λ² ν¨ν΄ λλ μ μ¬ν μ΄λ²€νΈ κ΄λ¦¬ λ©μ»€λμ¦μ λν κΈ°λ³Έ μ 곡 μ§μμ μ 곡ν©λλ€. μλ₯Ό λ€λ©΄ λ€μκ³Ό κ°μ΅λλ€.
- React: μ»΄ν¬λνΈ ν΅μ μ props λ° μ½λ°±μ μ¬μ©νλ©°, μ΄λ μ΅μ λ² ν¨ν΄μ ν ννλ‘ λ³Ό μ μμ΅λλ€.
- Vue.js: μ»΄ν¬λνΈ ν΅μ μ μν κΈ°λ³Έ μ 곡 μ΄λ²€νΈ λ²μ€(
$emit,$on,$off)λ₯Ό μ 곡ν©λλ€. - Angular: λΉλκΈ° λ°μ΄ν° μ€νΈλ¦Ό λ° μ΄λ²€νΈλ₯Ό μ²λ¦¬νκΈ° μν΄ RxJS Observablesλ₯Ό μ¬μ©ν©λλ€.
μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ©΄ ꡬνμ λ¨μννκ³ μ€λ₯ μ²λ¦¬, νν°λ§ λ° λ³νκ³Ό κ°μ κ³ κΈ κΈ°λ₯μ μ 곡ν μ μμ΅λλ€.
4. κ³ κΈ: RxJS Observables μ¬μ©
RxJS(Reactive Extensions for JavaScript)λ Observablesλ₯Ό μ¬μ©νμ¬ λΉλκΈ° λ°μ΄ν° μ€νΈλ¦Ό λ° μ΄λ²€νΈλ₯Ό κ΄λ¦¬νλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. Observablesλ μ΅μ λ² ν¨ν΄μ μΌλ°νμ΄λ©° μ΄λ²€νΈλ₯Ό λ³ν, νν°λ§ λ° κ²°ν©νκΈ° μν λ€μν μ°μ°μλ₯Ό μ 곡ν©λλ€.
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
// Create a Subject (Publisher)
const dataStream = new Subject();
// Subscriber 1
dataStream.pipe(
filter(data => data.type === 'user'),
map(data => data.payload)
).subscribe(data => {
console.log('User data received:', data);
});
// Subscriber 2
dataStream.pipe(
filter(data => data.type === 'product'),
map(data => data.payload)
).subscribe(data => {
console.log('Product data received:', data);
});
// Publishing events
dataStream.next({ type: 'user', payload: { name: 'John', age: 30 } });
dataStream.next({ type: 'product', payload: { id: 123, name: 'Laptop' } });
dataStream.next({ type: 'user', payload: { name: 'Jane', age: 25 } });
μ€λͺ :
Subjectλ κ°μ μλμΌλ‘ λ΄λ³΄λΌ μ μλ Observable μ νμ λλ€.pipeλfilterλ°mapκ³Ό κ°μ μ°μ°μλ₯Ό μ°κ²°νμ¬ λ°μ΄ν° μ€νΈλ¦Όμ λ³ννλ λ° μ¬μ©λ©λλ€.subscribeλ μ²λ¦¬λ λ°μ΄ν°λ₯Ό μμ ν 리μ€λλ₯Ό λ±λ‘νλ λ° μ¬μ©λ©λλ€.- RxJSλ 볡μ‘ν μ΄λ²€νΈ μ²λ¦¬ μλ리μ€λ₯Ό μν λ λ§μ μ°μ°μλ₯Ό μ 곡ν©λλ€.
μ΅μ λ² ν¨ν΄ μ¬μ©μ λν λͺ¨λ² μ¬λ‘
JavaScript λͺ¨λμμ μ΅μ λ² ν¨ν΄μ ν¨κ³Όμ μΌλ‘ μ¬μ©νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμμμ€.
1. λΆλ¦¬
주체μ μ΅μ λ²κ° λμ¨νκ² κ²°ν©λλλ‘ ν©λλ€. 주체λ μ΅μ λ²μ νΉμ ꡬν μΈλΆ μ¬νμ μ νμκ° μμ΅λλ€. μ΄λ κ² νλ©΄ λͺ¨λμ±κ³Ό μ μ§ κ΄λ¦¬μ±μ΄ ν₯μλ©λλ€. μλ₯Ό λ€μ΄, μ μΈκ³ μμ²μλ₯Ό λμμΌλ‘ νλ μΉ μ¬μ΄νΈλ₯Ό λ§λ€ λ λΆλ¦¬λ₯Ό ν΅ν΄ ν΅μ¬ μ½ν μΈ μ λ¬(주체)μ λ³κ²½νμ§ μκ³ λ μΈμ΄ κΈ°λ³Έ μ€μ (μ΅μ λ²)μ μ λ°μ΄νΈν μ μμ΅λλ€.
2. μ€λ₯ μ²λ¦¬
νλμ μ΅μ λ²μ μ€λ₯κ° λ€λ₯Έ μ΅μ λ²λ 주체μ μν₯μ λ―ΈμΉμ§ μλλ‘ μ μ ν μ€λ₯ μ²λ¦¬λ₯Ό ꡬνν©λλ€. try-catch λΈλ‘ λλ μ€λ₯ κ²½κ³ μ»΄ν¬λνΈλ₯Ό μ¬μ©νμ¬ μμΈλ₯Ό catchνκ³ μ μμ μΌλ‘ μ²λ¦¬ν©λλ€.
3. λ©λͺ¨λ¦¬ κ΄λ¦¬
νΉν μ€λ μ§μλλ ꡬλ μ μ²λ¦¬ν λ λ©λͺ¨λ¦¬ λμμ μ μνμμμ€. μ΅μ λ²κ° λ μ΄μ νμνμ§ μμΌλ©΄ νμ μ΄λ²€νΈ ꡬλ μ μ·¨μνμμμ€. λλΆλΆμ μ΄λ²€νΈ λ΄λ³΄λ΄κΈ° λΌμ΄λΈλ¬λ¦¬λ ꡬλ μ·¨μ λ©μ»€λμ¦μ μ 곡ν©λλ€.
4. μ΄λ²€νΈ λͺ λͺ κ·μΉ
μ½λ κ°λ
μ± λ° μ μ§ κ΄λ¦¬μ±μ ν₯μμν€κΈ° μν΄ μ΄λ²€νΈμ λν λͺ
ννκ³ μΌκ΄λ λͺ
λͺ
κ·μΉμ μ€μ ν©λλ€. μλ₯Ό λ€μ΄ dataUpdated, userLoggedIn λλ orderCreatedμ κ°μ μ€λͺ
μ μΈ μ΄λ¦μ μ¬μ©ν©λλ€. μ΄λ²€νΈλ₯Ό λ΄λ³΄λ΄λ λͺ¨λ λλ μ»΄ν¬λνΈλ₯Ό λνλ΄κΈ° μν΄ μ λμ¬λ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμμμ€(μ: userModule:loggedIn). κ΅μ νλ μ ν리μΌμ΄μ
μμλ μΈμ΄μ ꡬμ λ°μ§ μλ μ λμ¬ λλ λ€μμ€νμ΄μ€λ₯Ό μ¬μ©νμμμ€.
5. λΉλκΈ° μμ
λΉλκΈ° μμ μ μ²λ¦¬ν λ Promises λλ async/awaitμ κ°μ κΈ°μ μ μ¬μ©νμ¬ μ΄λ²€νΈ λ° μλ¦Όμ μ μ νκ² μ²λ¦¬ν©λλ€. RxJS Observablesλ 볡μ‘ν λΉλκΈ° μ΄λ²€νΈ μ€νΈλ¦Όμ κ΄λ¦¬νλ λ° νΉν μ ν©ν©λλ€. λ€λ₯Έ μκ°λμ λ°μ΄ν°λ‘ μμ ν λ μ μ ν λ μ§ λ° μκ° λΌμ΄λΈλ¬λ¦¬ λ° λ³νμ μ¬μ©νμ¬ μκ°μ λ―Όκ°ν μ΄λ²€νΈκ° μ¬λ°λ₯΄κ² μ²λ¦¬λλμ§ νμΈνμμμ€.
6. 보μ κ³ λ € μ¬ν
μ΄λ²€νΈ μμ€ν μ΄ μ€μν λ°μ΄ν°μ μ¬μ©λλ κ²½μ° νΉμ μ΄λ²€νΈλ₯Ό λ΄λ³΄λ΄κ³ ꡬλ ν μ μλ μ¬μ©μμ μ£Όμνμμμ€. μ μ ν μΈμ¦ λ° κΆν λΆμ¬ μ‘°μΉλ₯Ό μ¬μ©νμμμ€.
7. κ³Όλν μλ¦Ό λ°©μ§
μ£Όμ²΄κ° κ΄λ ¨ μν λ³κ²½μ΄ λ°μν λλ§ μ΅μ λ²μκ² μ리λλ‘ ν©λλ€. κ³Όλν μλ¦Όμ μ±λ₯ λ¬Έμ μ λΆνμν μ²λ¦¬λ‘ μ΄μ΄μ§ μ μμ΅λλ€. μλ¦Όμ΄ νμν κ²½μ°μλ§ μ μ‘λλλ‘ κ²μ¬λ₯Ό ꡬνν©λλ€.
μ€μ μμ λ° μ¬μ© μ¬λ‘
μ΅μ λ² ν¨ν΄μ JavaScript κ°λ°μ κ΄λ²μν μλ리μ€μ μ μ©ν μ μμ΅λλ€. λͺ κ°μ§ μλ λ€μκ³Ό κ°μ΅λλ€.
1. UI μ λ°μ΄νΈ
λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA)μμ μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ λ°μ΄ν°κ° λ³κ²½λ λ UI μ»΄ν¬λνΈλ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€. μλ₯Ό λ€μ΄ λ°μ΄ν° μλΉμ€ λͺ¨λμ APIμμ μ λ°μ΄ν°λ₯Ό κ°μ Έμ¬ λ μ΄λ²€νΈλ₯Ό λ΄λ³΄λΌ μ μμΌλ©° UI μ»΄ν¬λνΈλ μ΄ μ΄λ²€νΈλ₯Ό ꡬλ νμ¬ λμ€νλ μ΄λ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€. μ°¨νΈ, ν μ΄λΈ λ° μμ½ λ©νΈλ¦μ μ λ°μ΄ν°κ° μ 곡λ λλ§λ€ μ λ°μ΄νΈν΄μΌ νλ λμ보λ μ ν리μΌμ΄μ μ κ³ λ €νμμμ€. μ΅μ λ² ν¨ν΄μ λͺ¨λ κ΄λ ¨ μ»΄ν¬λνΈμ μλ¦Όμ΄ μ μ‘λκ³ ν¨μ¨μ μΌλ‘ μ λ°μ΄νΈλλλ‘ ν©λλ€.
2. μ»΄ν¬λνΈ κ° ν΅μ
React, Vue.js λλ Angularμ κ°μ μ»΄ν¬λνΈ κΈ°λ° νλ μμν¬μμ μ΅μ λ² ν¨ν΄μ μ§μ μ μΌλ‘ κ΄λ ¨μ΄ μλ μ»΄ν¬λνΈ κ°μ ν΅μ μ μ©μ΄νκ² ν μ μμ΅λλ€. μ€μ μ΄λ²€νΈ λ²μ€λ₯Ό μ¬μ©νμ¬ μ ν리μΌμ΄μ μ 체μμ μ΄λ²€νΈλ₯Ό κ²μνκ³ κ΅¬λ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ μΈμ΄ μ ν μ»΄ν¬λνΈλ μΈμ΄κ° λ³κ²½λ λ μ΄λ²€νΈλ₯Ό λ΄λ³΄λΌ μ μμΌλ©° λ€λ₯Έ μ»΄ν¬λνΈλ μ΄ μ΄λ²€νΈλ₯Ό ꡬλ νμ¬ ν μ€νΈ μ½ν μΈ λ₯Ό μ μ νκ² μ λ°μ΄νΈν μ μμ΅λλ€. μ΄λ λ€λ₯Έ μ»΄ν¬λνΈκ° λ‘μΊ λ³κ²½μ λ°μν΄μΌ νλ λ€κ΅μ΄ μ ν리μΌμ΄μ μ νΉν μ μ©ν©λλ€.
3. λ‘κΉ λ° κ°μ¬
μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ μ΄λ²€νΈλ₯Ό κΈ°λ‘νκ³ μ¬μ©μ μμ
μ κ°μ¬ν μ μμ΅λλ€. λͺ¨λμ userLoggedIn λλ orderCreatedμ κ°μ μ΄λ²€νΈλ₯Ό ꡬλ
νκ³ κ΄λ ¨ μ 보λ₯Ό λ°μ΄ν°λ² μ΄μ€ λλ νμΌμ κΈ°λ‘ν μ μμ΅λλ€. μ΄λ 보μ λͺ¨λν°λ§ λ° κ·μ μ€μ λͺ©μ μΌλ‘ μ μ©ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ κΈμ΅ μ ν리μΌμ΄μ
μμ λͺ¨λ νΈλμμ
μ κΈ°λ‘νμ¬ κ·μ μꡬ μ¬νμ μ€μν μ μμ΅λλ€.
4. μ€μκ° μ λ°μ΄νΈ
μ±ν μ ν리μΌμ΄μ λλ λΌμ΄λΈ λμ보λμ κ°μ μ€μκ° μ ν리μΌμ΄μ μμ μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ μλ²μμ λ°μνλ μ¦μ ν΄λΌμ΄μΈνΈμ μ λ°μ΄νΈλ₯Ό νΈμν μ μμ΅λλ€. WebSockets λλ Server-Sent Events(SSE)λ₯Ό μ¬μ©νμ¬ μλ²μμ ν΄λΌμ΄μΈνΈλ‘ μ΄λ²€νΈλ₯Ό μ μ‘ν μ μμΌλ©° ν΄λΌμ΄μΈνΈ μΈ‘ μ½λμμ μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ UI μ»΄ν¬λνΈμ μ λ°μ΄νΈλ₯Ό μ릴 μ μμ΅λλ€.
5. λΉλκΈ° μμ κ΄λ¦¬
λΉλκΈ° μμ μ κ΄λ¦¬ν λ μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ μμ μ΄ μλ£λκ±°λ μ€ν¨ν λ λͺ¨λμ μ릴 μ μμ΅λλ€. μλ₯Ό λ€μ΄ νμΌ μ²λ¦¬ λͺ¨λμ νμΌμ΄ μ±κ³΅μ μΌλ‘ μ²λ¦¬λλ©΄ μ΄λ²€νΈλ₯Ό λ΄λ³΄λΌ μ μμΌλ©° λ€λ₯Έ λͺ¨λμ μ΄ μ΄λ²€νΈλ₯Ό ꡬλ νμ¬ νμ μμ μ μνν μ μμ΅λλ€. μ΄λ μ€ν¨λ₯Ό μ μμ μΌλ‘ μ²λ¦¬ν μ μλ κ°λ ₯νκ³ λ³΅μλ ₯μ΄ μλ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ μ©ν μ μμ΅λλ€.
κΈλ‘λ² κ³ λ € μ¬ν
μ μΈκ³ μμ²μλ₯Ό μν΄ μ€κ³λ μ ν리μΌμ΄μ μμ μ΅μ λ² ν¨ν΄μ ꡬνν λλ λ€μ μ¬νμ κ³ λ €νμμμ€.
1. μ§μν
μ΄λ²€νΈμ μλ¦Όμ΄ μ μ νκ² μ§μνλμλμ§ νμΈνμμμ€. κ΅μ ν(i18n) λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ΄λ²€νΈ λ©μμ§ λ° λ°μ΄ν°λ₯Ό μ¬λ¬ μΈμ΄λ‘ λ²μν©λλ€. μλ₯Ό λ€μ΄ orderCreatedμ κ°μ μ΄λ²€νΈλ λ
μΌμ΄λ‘ BestellungErstelltλ‘ λ²μλ μ μμ΅λλ€.
2. μκ°λ
μκ°μ λ―Όκ°ν μ΄λ²€νΈλ₯Ό μ²λ¦¬ν λ μκ°λμ μ μνμμμ€. μ μ ν λ μ§ λ° μκ° λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μκ°μ μ¬μ©μμ νμ§ μκ°λλ‘ λ³νν©λλ€. μλ₯Ό λ€μ΄ UTC μ€μ 10μμ λ°μνλ μ΄λ²€νΈλ λ΄μ μ¬μ©μμ κ²½μ° EST μ€μ 6μλ‘ νμλμ΄μΌ ν©λλ€. Moment.js λλ Luxonκ³Ό κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μκ°λ λ³νμ ν¨κ³Όμ μΌλ‘ μ²λ¦¬νλ κ²μ κ³ λ €νμμμ€.
3. ν΅ν
μ ν리μΌμ΄μ μ΄ κΈμ΅ κ±°λλ₯Ό μ²λ¦¬νλ κ²½μ° ν΅ν κ°μ΄ μ¬μ©μμ νμ§ ν΅νλ‘ νμλλμ§ νμΈνμμμ€. ν΅ν μμ μ§μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ¬λ°λ₯Έ κΈ°νΈμ μμ κ΅¬λΆ κΈ°νΈλ‘ κΈμ‘μ νμν©λλ€. μλ₯Ό λ€μ΄ $100.00 USD κΈμ‘μ μ λ½ μ¬μ©μμ κ²½μ° β¬90.00 EURλ‘ νμλμ΄μΌ ν©λλ€. κ΅μ ν API(Intl)μ κ°μ APIλ₯Ό μ¬μ©νμ¬ μ¬μ©μμ λ‘μΊμ κΈ°λ°μΌλ‘ ν΅ν μμμ μ§μ ν©λλ€.
4. λ¬Ένμ κ°μμ±
μ΄λ²€νΈ λ° μλ¦Όμ μ€κ³ν λ λ¬Ένμ μ°¨μ΄λ₯Ό μΈμνμμμ€. νΉμ λ¬ΈνκΆμμ λΆμΎνκ±°λ λΆμ μ ν μ μλ μ΄λ―Έμ§ λλ λ©μμ§λ₯Ό μ¬μ©νμ§ λ§μμμ€. μλ₯Ό λ€μ΄ νΉμ μμμ΄λ κΈ°νΈλ λ€λ₯Έ λ¬ΈνκΆμμ λ€λ₯Έ μλ―Έλ₯Ό κ°μ§ μ μμ΅λλ€. μ ν리μΌμ΄μ μ΄ λ¬Ένμ μΌλ‘ λ―Όκ°νκ³ ν¬κ΄μ μΈμ§ νμΈνκΈ° μν΄ μ² μ ν μ‘°μ¬λ₯Ό μννμμμ€.
5. μ κ·Όμ±
μ΄λ²€νΈμ μλ¦Όμ΄ μ₯μ κ° μλ μ¬μ©μκ° μ‘μΈμ€ν μ μλμ§ νμΈνμμμ€. ARIA μμ±μ μ¬μ©νμ¬ λ³΄μ‘° κΈ°μ μ μλ―Έλ‘ μ μ 보λ₯Ό μ 곡ν©λλ€. μλ₯Ό λ€μ΄ aria-liveλ₯Ό μ¬μ©νμ¬ νλ©΄ νλ
κΈ°μ μ
λ°μ΄νΈλ₯Ό μ립λλ€. μ΄λ―Έμ§μ λν λ체 ν
μ€νΈλ₯Ό μ 곡νκ³ μλ¦Όμμ λͺ
ννκ³ κ°κ²°ν μΈμ΄λ₯Ό μ¬μ©νμμμ€.
κ²°λ‘
μ΅μ λ² ν¨ν΄μ λͺ¨λμμ΄κ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° νμ₯ κ°λ₯ν JavaScript μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ μ©ν λꡬμ λλ€. ν΅μ¬ κ°λ κ³Ό λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ κ°λ°μλ μ΄ ν¨ν΄μ ν¨κ³Όμ μΌλ‘ μ¬μ©νμ¬ λͺ¨λ κ°μ ν΅μ μ μ©μ΄νκ² νκ³ λΉλκΈ° μμ μ κ΄λ¦¬νλ©° λμ μ΄κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λ§λ€ μ μμ΅λλ€. μ μΈκ³ μμ²μλ₯Ό μν΄ μ ν리μΌμ΄μ μ μ€κ³ν λλ μ§μν, μκ°λ, ν΅ν, λ¬Ένμ κ°μμ± λ° μ κ·Όμ±μ κ³ λ €νμ¬ μ ν리μΌμ΄μ μ΄ μμΉλ λ°°κ²½μ κ΄κ³μμ΄ λͺ¨λ μ¬μ©μμκ² ν¬κ΄μ μ΄κ³ μ¬μ©μ μΉνμ μΈμ§ νμΈνλ κ²μ΄ νμμ μ λλ€. μ΅μ λ² ν¨ν΄μ λ§μ€ν°νλ©΄ μμ¬ν μ¬μ§ μμ΄ νλ μΉ κ°λ°μ μꡬ μ¬νμ μΆ©μ‘±νλ λ³΄λ€ κ°λ ₯νκ³ μ μλ ₯μ΄ λ°μ΄λ JavaScript μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.