[javascript] Parcel에서 웹 웹사이트 알림을 사용하는 방법은?

22 Nov 2023

javascript

먼저, Parcel 프로젝트를 설정하고 필요한 종속성을 설치합니다. 다음 명령을 사용하여 새 프로젝트를 만들고 Parcel을 설치합니다:

mkdir my-project
cd my-project
npm init -y
npm install parcel-bundler

그리고 Parcel을 설정하기 위해 프로젝트 루트에 index.html 파일을 만듭니다:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Parcel 알림 예제</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Parcel 알림 예제</h1>
  <button id="notificationButton">알림 보내기</button>
  
  <script src="index.js"></script>
</body>
</html>

그리고 필요한 스타일을 정의하기 위해 style.css 파일도 만듭니다:

body {
  text-align: center;
}
h1 {
  color: blue;
}

그런 다음 index.js 파일을 생성하고 notificationButton을 클릭할 때마다 알림을 보내는 JavaScript 코드를 작성합니다:

document.getElementById('notificationButton').addEventListener('click', function() {
  if(Notification.permission !== 'granted') {
    Notification.requestPermission();
  }
  
  if(Notification.permission === 'granted') {
    new Notification('Parcel 알림', {
      body: '알림을 받으셨습니다!'
    });
  }
});

이제 Parcel 개발 서버를 실행하여 애플리케이션을 실행할 수 있습니다. 프로젝트 루트에서 다음 명령을 실행합니다:

npx parcel index.html

Parcel은 애플리케이션을 빌드하고 브라우저에서 실행하는 개발 서버를 시작합니다. 브라우저에서 http://localhost:1234을 열고 “알림 보내기” 버튼을 클릭하면 알림을 수신할 수 있습니다.

더 많은 알림 기능을 사용하고 싶다면 MDN 웹 알림 API 문서를 참조하십시오.

이제 Parcel을 사용하여 웹사이트에 알림을 추가하는 방법을 알게 되었습니다. Parcel은 간편한 설정과 개발 서버를 제공하여 개발 과정을 쉽게 만들어 줍니다.