웹 앱의 맞춤 Javascript 알림 시스템 구축

웹 앱에 대한 사용자 정의 JavaScript 알림 시스템 구축

이 웹 사이트는 귀하가 웹 사이트를 탐색하는 동안 귀하의 경험을 향상시키기 위해 쿠키를 사용합니다. 이 쿠키들 중에서 필요에 따라 분류 된 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한이 웹 사이트의 사용 방식을 분석하고 이해하는 데 도움이되는 제 3 자 쿠키를 사용합니다. 이 쿠키는 귀하의 동의하에 만 브라우저에 저장됩니다. 이러한 쿠키 중 일부를 선택 해제하면 검색 환경에 영향을 미칠 수 있습니다. 이러한 쿠키 중 일부를 선택 해제하면 검색 환경에 영향을 미칠 수 있습니다.

알림 시스템의 핵심 아키텍처 이해

더 큰 응용 프로그램에서, 당신은 pub-sub 패턴 또는 상태 관리 라이브러리와 통합 할 수 있지만, 대부분의 웹 앱은 DOM 조작과 결합 된 스트레이트로워드 기능 기반 접근을 완벽하게 작동합니다. 자바 스크립트 API 및 방법은 기초를 만들 수 있습니다. 급속한 ‐ 화재 이벤트 동안 여러 알림을 할당하는 것과 같은 고급 사용 사례를 위해, 당신은 배열 기반 큐와 디자인을 확장 할 수 있습니다.

Step‐by‐Step 가이드를 통해 시스템 구축

1. 알림 용기 준비

컨테이너는 모든 알림이 살아있는 고정 위치 요소입니다. 그것은 레이아웃을 방해하는 주요 콘텐츠 흐름 밖에 배치되어야한다. 자바 스크립트를 통해 동적으로 추가하면 HTML을 깨끗하게 유지합니다.

이 스크립트를 사용하여 컨테이너를 만들고 몸에 붙이십시오.

const container = document.createElement('div');
container.id = 'notification-container';
Object.assign(container.style, {
 position: 'fixed',
 top: '20px',
 right: '20px',
 zIndex: '9999',
 display: 'flex',
 flexDirection: 'column',
 gap: '10px',
 pointerEvents: 'none'
});
document.body.appendChild(container);

공지 -컨테이너를 통과할 수 있습니다. 개별 알림 요소는 대화식 (예를 들어, 닫는 버튼)이 필요할 때이 속성을 무시합니다.

2. 알림 생성 기능 작성

코어 함수는 를 생성하고 클래스와 콘텐츠를 적용하고, 컨테이너에 추가하고, 지정된 기간 후에 자동 제거를 합니다. 선택적으로, 사용자 정의 닫기 버튼을 지원할 수 있습니다.

function showNotification({
 message,
 type = 'info',
 duration = 3000,
 closable = false,
 icon = ''
} = {}) {
 const notification = document.createElement('div');
 notification.className = `notification ${type}`;
 notification.setAttribute('role', 'alert');
 notification.setAttribute('aria-live', 'assertive');

 const messageSpan = document.createElement('span');
 messageSpan.textContent = icon + ' ' + message;
 notification.appendChild(messageSpan);

 if (closable) {
 const closeBtn = document.createElement('button');
 closeBtn.textContent = '×';
 closeBtn.className = 'notification-close';
 closeBtn.addEventListener('click', () => notification.remove());
 notification.appendChild(closeBtn);
 notification.style.pointerEvents = 'auto';
 }

 container.appendChild(notification);

 // Remove after duration, unless the user already dismissed it
 const timeoutId = setTimeout(() => {
 if (notification.parentNode) notification.remove();
 }, duration);

 // Clear timeout if user closes manually
 notification.addEventListener('remove', () => clearTimeout(timeoutId));

 // Animate in
 requestAnimationFrame(() => notification.classList.add('show'));
}

이 버전은 옵션 객체를 허용하고, 확장 할 수 있습니다. ]과 ] 속성은 스크린 레더 지원 - 중요한 접근성 구성 요소를 보장합니다.

3. 진보된 특징: Queuing와 Grouping

많은 알림이 빠른 성공에 불을 붙일 때, 당신은 queue 또는 그룹을하고 사용자의 압도적인 피하기 위해 할 수 있습니다. 간단한 큐를 구현하십시오:

const notificationQueue = [];
let isProcessing = false;

function processQueue() {
 if (isProcessing || notificationQueue.length === 0) return;
 isProcessing = true;
 const next = notificationQueue.shift();
 showNotification(next);
 // Wait for the current notification to disappear before processing next
 setTimeout(() => {
 isProcessing = false;
 processQueue();
 }, next.duration || 3000);
}

function enqueueNotification(options) {
 notificationQueue.push(options);
 processQueue();
}

그룹화의 경우, 새로운 것을 만들기 대신 중복 알림을 업데이트하십시오. 예를 들어, 두 개의 "교육" 메시지가 500ms 내에서 나타나면 기존의 콘텐츠를 업데이트하고 타이머를 재설정하십시오.

4. 스타일링 및 수정 알림

CSS는 시각적으로 호소를줍니다. 슬라이드 인 및 페이드 아웃 효과에 대한 [FLT : 9]]를 사용하십시오. 다른 유형 (info, success, error, warning)은 명백한 배경 색상과 아이콘을해야합니다.

.notification {
 padding: 12px 20px;
 border-radius: 6px;
 color: #fff;
 font-family: system-ui, sans-serif;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 transform: translateX(120%);
 transition: transform 0.4s ease, opacity 0.4s ease;
 min-width: 280px;
 max-width: 450px;
}

.notification.show {
 transform: translateX(0);
}

.notification.info { background: #2196F3; }
.notification.success { background: #4CAF50; }
.notification.error { background: #f44336; }
.notification.warning { background: #FF9800; }

.notification-close {
 background: none;
 border: none;
 color: inherit;
 font-size: 1.4rem;
 cursor: pointer;
 margin-left: 16px;
 line-height: 1;
}

/* Fade out before removal (triggered by class removal) */
.notification.hiding {
 transform: translateX(120%);
 opacity: 0;
}

요소 제거하기 전에 "숨겨진"클래스를 추가 할 수 있습니다. 부드러운 출구 애니메이션을 만들려면 :

// In the showNotification function, replace the direct removal:
notification.addEventListener('animationend', () => notification.remove());
notification.classList.add('hiding'); // after timeout triggers fade‑out

5. 웹 앱과 통합

이제 호출 어떤 이벤트 핸들러에서. 일반적인 사용 사례는 다음과 같습니다:

Form submits – 성공 또는 오류 피드백을 보여줍니다.
API 호출 - 표시 로딩 상태 또는 오류 메시지.
User action – 삭제 또는 데이터 동기화를 확인합니다.
Real‐time event – 수신 채팅 메시지 또는 서버 알림(WebSockets를 통해).

// Example: Handling a fetch response
fetch('/api/save', { method: 'POST', body: formData })
 .then(response => {
 if (!response.ok) throw new Error('Save failed');
 showNotification({ message: 'Data saved!', type: 'success' });
 })
 .catch(err => {
 showNotification({ message: err.message, type: 'error', duration: 5000 });
 });

접근성 고려 사항

알림은 모든 사용자가 지원 기술을 사용하여 해당 사용자에게 perceivable이어야합니다. 이러한 지침을 따르십시오.

과 ]를 각 알림에 사용하여 화면 리더는 새로운 콘텐츠를 즉시 발표합니다.
마지막 버튼을 제공하거나 Escape 키를 통해 해체를 허용한다.
색상 대비 비율은 WCAG AA 표준 (예 : 배경 색상의 흰색 텍스트)을 충족합니다.
색상에 의존하지 마십시오. 아이콘이나 "Success", "Error"와 같은 텍스트를 포함하십시오.

실제 화면 리더 (NVDA, VoiceOver)를 테스트하고 ]ARIA 라이브 영역 문서를 확인하십시오.

성능 및 Edge 케이스

높은 주파수 알림 시나리오 (웹소켓 스트림과 같은), DOM 과부하를 방지하기 위해 스로틀링 또는 배치를 고려. 이전에 기술 된 큐 접근법은 도움이되지만, 최대의 볼 알림 (예를 들어, 마지막 다섯과 나머지를 쌓아 볼 수 있습니다).

또 다른 가장자리 케이스: 사용자가 여러 탭이 열릴 때, 비활성 탭의 알림은 초점이 훔쳐서는 안됩니다. 페이지 Visibility API을 탭이 활성화 될 때까지 디폴트 디스플레이를 갖는다.

document.addEventListener('visibilitychange', () => {
 if (document.hidden) {
 // optionally store pending notifications and show them when user returns
 }
});

도서관을 고려할 때

사용자 정의 시스템은 엄격한 설계 제어 또는 최소 의존성가 필요할 때 이상적입니다. 그러나 이미 React, Vue, Angular와 같은 UI 프레임 워크를 사용하는 경우 ]React Toastify] 또는 ]Vue Sonner와 같은 라이브러리를 선호할 수 있습니다. Pure vanilla JS 프로젝트의 경우 사용자 정의 접근 방식은 경량적이고 완전 사용자 정의할 수 있습니다. Vue Sonner는 브라우저에서 이전 브라우저에서 사용할 수 있습니다.