웹 프론트엔드 JS 튜토리얼 AI를 통해 며칠 만에 Node.js 배우기 - 6일차

AI를 통해 며칠 만에 Node.js 배우기 - 6일차

Aug 30, 2024 pm 07:06 PM

Learning Node.js in Days with AI - Day 6

오늘은 Node.js 학습 모험의 6일차였으며 EventEmitter 클래스의 매혹적인 세계를 탐구했습니다. 제가 이 과정을 탐색한 방법과 그 과정에서 배운 내용은 다음과 같습니다.

이론 요약

EventEmitter 클래스는 Node.js의 이벤트 관리를 위한 초석입니다. 이벤트를 생성, 방출 및 처리하는 강력한 방법을 제공하므로 이벤트 기반 아키텍처에 의존하는 애플리케이션을 구축하는 데 필수적입니다.

EventEmitter의 주요 메소드:

  1. on(eventName, Listener): 특정 이벤트에 대한 리스너를 등록합니다.
  2. emit(eventName, [...args]): 이벤트를 내보내고 선택적 인수를 리스너에게 전달합니다.
  3. removeListener(eventName, Listener): 이벤트에 대한 특정 리스너를 제거합니다.
  4. once(eventName, Listener): 한 번만 트리거되는 리스너를 추가합니다.

실무적인 업무

작업: 맞춤 이벤트 및 핸들러를 만듭니다.

저는 EventEmitter를 확장하고 사용자 정의 이벤트 핸들러를 추가하는 클래스를 만드는 것부터 시작했습니다. 제가 한 일에 대한 단계별 설명은 다음과 같습니다.

  1. 사용자 정의 클래스 정의:

EventEmitter를 확장하는 DataProcessor라는 클래스를 만들었습니다. 이 클래스에는 데이터 처리를 시뮬레이션하기 위한 processData 메소드가 있습니다.

   const EventEmitter = require('events');

   class DataProcessor extends EventEmitter {
     processData(data) {
       this.emit('start');

       // Simulate data processing
       setTimeout(() => {
         this.emit('data', data);
         this.emit('end');
       }, 1000);
     }
   }
  1. 이벤트 핸들러 설정:

그런 다음 DataProcessor 클래스를 초기화하고 'start', 'data' 및 'end'라는 세 가지 이벤트에 대한 핸들러를 정의했습니다.

   // Initialization
   const processor = new DataProcessor();

   // Event handlers
   processor.on('start', () => console.log('Processing started...'));
   processor.on('data', (data) => console.log(`Processing data: ${data}`));
   processor.on('end', () => console.log('Processing completed.'));
  1. 발생된 이벤트:

마지막으로 processData 메서드를 호출하여 이벤트가 어떻게 작동하는지 확인했습니다.

   processor.processData('Some data');

사건의 순서를 지켜보는 것은 깨달음을 얻었습니다. 콘솔 출력에는 프로세스 시작부터 데이터 처리 및 완료까지의 흐름이 표시되었습니다.

독립적인 작업

과제: 이벤트를 활용한 알림 시스템을 개발합니다.

독립적인 작업을 위해 Notifier 클래스를 디자인했습니다. 제가 접근한 방법은 다음과 같습니다.

  1. 알림자 클래스 생성:
   const EventEmitter = require('events');

   class Notifier extends EventEmitter {
     constructor() {
       super();
       this.notifications = [];
     }

     addNotification(notification) {
       if (typeof notification !== 'string') {
         this.emit('error', 'Notification must be a string');
         return;
       }

       this.notifications.push(notification);
       this.emit('notify', notification);

       if (this.notifications.length > 0) {
         this.emit('complete');
       }
     }
   }
  1. 정의된 이벤트 핸들러:

'알림', '오류', '완료'에 대한 핸들러를 설정합니다.

   const notifier = new Notifier();

   notifier.on('notify', (message) => console.log(`New notification: ${message}`));
   notifier.on('error', (err) => console.error(`Error: ${err}`));
   notifier.on('complete', () => console.log('All notifications processed.'));
  1. 시스템 테스트:

알림을 추가하고 잠재적인 오류를 처리하면서 시스템을 테스트했습니다.

   notifier.addNotification('This is your first notification.');
   notifier.addNotification('This is your second notification.');
   notifier.addNotification(123); // This should trigger an error

알림 처리, 오류 보고, 완료 이벤트가 발생하는 모습을 보니 만족스러웠습니다.

결론

오늘 EventEmitter를 탐색하면서 Node.js의 이벤트 중심 프로그래밍에 대한 이해가 상당히 깊어졌습니다. 사용자 정의 이벤트 및 핸들러를 구현하는 것은 이벤트 흐름 방식과 이를 효과적으로 관리할 수 있는 방법을 확인할 수 있는 좋은 방법이었습니다. 독립적인 작업을 통해 이러한 개념이 더욱 강화되었고 알림 시스템 구축에 대한 실무 경험을 얻을 수 있었습니다.

이 여행을 계속하고 다음 날에는 어떤 일이 벌어질지 기대됩니다!

자원

ChatGPT에서 만든 모든 강의는 https://king-tri-ton.github.io/learn-nodejs에서 확인할 수 있습니다

위 내용은 AI를 통해 며칠 만에 Node.js 배우기 - 6일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Stock Market GPT

Stock Market GPT

더 현명한 결정을 위한 AI 기반 투자 연구

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vercel Spa 라우팅 및 리소스 로딩 : 심층 액세스 문제 해결 Vercel Spa 라우팅 및 리소스 로딩 : 심층 액세스 문제 해결 Aug 13, 2025 am 10:18 AM

이 기사는 Vercel에서 단일 페이지 응용 프로그램 (SPA)을 배포 할 때 페이지 리소스로드 오류를 일으키는 Deep URL 새로 고침 또는 직접 액세스 문제를 해결하는 것을 목표로합니다. 핵심은 Vercel의 라우팅 재 작성 메커니즘과 브라우저 구문 분석 상대 경로의 차이점을 이해하는 것입니다. vercel.json을 구성하여 모든 경로를 index.html로 리디렉션하고 HTML에서 정적 자원의 참조 메소드를 수정하고 상대 경로를 절대 경로로 변경하여 응용 프로그램이 모든 URL에 모든 리소스를 올바르게로드 할 수 있는지 확인하십시오.

Vercel 단일 페이지 응용 프로그램 (SPA) 배포 안내서 : 심층 자산로드 문제 해결 Vercel 단일 페이지 응용 프로그램 (SPA) 배포 안내서 : 심층 자산로드 문제 해결 Aug 13, 2025 pm 01:03 PM

이 튜토리얼은 Vercel에서 단일 페이지 응용 프로그램 (SPA)을 배포 할 때 다단계 URL (예 : /Project /Home)에 액세스 할 때 자산을로드하는 문제 (CSS, JS, 이미지 등) 문제를 해결하는 것을 목표로합니다. 핵심은 HTML의 Vercel의 라우팅 재 작성 메커니즘과 상대/절대 경로의 차이를 이해하는 데 있습니다. Vercel.json을 올바르게 구성함으로써 모든 비 File 요청이 index.html로 리디렉션되고 HTML에서 자산 참조를 절대 경로로 바로 잡아 모든 심도 URL에서 SPA의 안정적인 작동을 달성해야합니다.

QWIK : 인스턴트로드 웹 앱을위한 재개 가능한 프레임 워크 QWIK : 인스턴트로드 웹 앱을위한 재개 가능한 프레임 워크 Aug 15, 2025 am 08:25 AM

qwikachievesinstantloadbydefaultroughrshoughrestroughrsoughrowsility : 1) theserverrendershtmlwithestateandpre-mappedeventlisteners; 2) norehydrationised, enablingimmediatectucture;

JS 배열 시작에 요소를 추가합니다 JS 배열 시작에 요소를 추가합니다 Aug 14, 2025 am 11:51 AM

JavaScript에서 배열의 시작 부분에 요소를 추가하는 가장 일반적인 방법은 Unshift () 메소드를 사용하는 것입니다. 1. Unshift ()를 사용하여 원래 배열을 직접 수정하면 하나 이상의 요소를 추가하여 추가 된 배열의 새 길이를 반환 할 수 있습니다. 2. 원래 배열을 수정하지 않으려면 확장 연산자 (예 : [Newlement, ... ARR])를 사용하여 새 배열을 만드는 것이 좋습니다. 3. Concat () 메소드를 사용하여 새 요소 배열을 원래 번호와 결합하고 원래 배열을 변경하지 않고 새 배열을 반환 할 수 있습니다. 요약하면 원래 배열을 수정할 때 Unshift ()를 사용하고 원래 배열을 변경하지 않으면 확장 연산자를 권장하십시오.

JavaScript로 Load Load 이미지를 게으르는 방법 JavaScript로 Load Load 이미지를 게으르는 방법 Aug 14, 2025 pm 06:43 PM

usetheloading = "Lazy"AttributeFornativelazyLoadingInModernBrowserswithoutjavaScript.2. FormoreControlorolderBrowserSupport, exectionsectionObserverapibysettingdata-srcfortheaCteaCtualAgeUllaceLaceinsrc.3.Bobse

JavaScript의 DOM을 사용하여 HTML 요소에 액세스하고 수정하는 방법 JavaScript의 DOM을 사용하여 HTML 요소에 액세스하고 수정하는 방법 Aug 16, 2025 am 11:25 AM

toaccessandmodifyhtmlelementsUsingJavaScript, firstEctTheElementUsingMethodSlikEdocument.getElementById, QueperSelector, ordocument.querySelectorAll, thenAlteritsContent, 속성, OrStyles, usexample.TextContentForextUpdates, e

JavaScript XSS 방어 기능에 대한 일반적인 취약성 및 개선 전략에 대한 심층 분석 JavaScript XSS 방어 기능에 대한 일반적인 취약성 및 개선 전략에 대한 심층 분석 Aug 14, 2025 pm 10:06 PM

이 기사는 사용자 정의 JavaScript XSS 방어 기능, 특히 불완전한 캐릭터 탈출 및 키워드 기반 필터링에 대한 쉬운 우회의 심층 보안 취약점을 살펴 봅니다. 예제 함수를 분석함으로써 인용 및 백 크게와 같은 처리되지 않은 키워드 문자의 위험과 코드 난독 화 기술이 간단한 키워드 감지를 우회하는 방법을 보여줍니다. 이 기사는 상황에 민감한 탈출의 중요성을 강조하고보다 강력한 보안 보호를 구축하기 위해 성숙한 라이브러리 및 다층 방어 전략의 채택을 권장합니다.

jQuery 팝업 창에서 동적 외부 링크 점프의 이벤트 처리 최적화 jQuery 팝업 창에서 동적 외부 링크 점프의 이벤트 처리 최적화 Sep 01, 2025 am 11:48 AM

이 기사는 JQuery 팝업 창에서 외부 링크 리디렉션 버튼을 리디렉션하는 문제를 해결하는 것을 목표로합니다. 사용자가 여러 외부 링크를 연속적으로 클릭하면 팝업의 점프 버튼이 항상 첫 번째 클릭 링크를 가리킬 수 있습니다. 핵심 솔루션은 OFF ( 'Click') 메소드를 사용하여 새 이벤트의 각 바인딩 전에 이전 이벤트 핸들러를 취소하여 점프 동작이 항상 최신 대상 URL을 가리키므로 정확하고 제어 가능한 링크 리디렉션을 달성하는 것입니다.

See all articles