๐โ๏ธJavaScript alert ์ด์ฉํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ์์ ์๋์ ๋ฐ์ํ๋ ๊ฒ ์ค์
๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฐ๋ก alert์ด๋ค.
<script>
alert("์๋๋ฐ์");
</script>
alert์ผ๋ก ์๋์ ๋ฐ์์ํค๋ฉด ํด๋น ์น์ ๋ค์ด๊ฐ๋ฉด ๋ฐ๋ก ์๋์ ํ์ธํ ์ ์๋ค.
ํ์ง๋ง alert์ ๋ฌธ์ ์ ๊ฒฝ์ฐ๋ ํด๋น ํญ์ ํฌ์ปค์ฑ์ด ๋์ด์์ ๋๋ ์ ๋ณผ ์ ์์ง๋ง
ํด๋น ํญ์ ํฌ์ปค์ฑ์ด ์๋์ด์์ ๊ฒฝ์ฐ ํด๋น ์๋์ฐฝ์ด ๋จ๋์ง๋ฅผ ์ ์๊ฐ ์๋ค.
๐คHTML5 Web Notification API
HTML์์๋ ์นํ์ด์ง์์ ์๋์ ํ์ํ๋ฉด ํ์ด์ง ์ธ๋ถ์์ ํ์๊ฐ ๋๋ Notification API๋ฅผ ์ ๊ณตํ๋ค.
ํด๋น ์นํ์ด์ง๊ฐ ๋ฐฑ๊ทธ๋ผ์ด๋๋ก ๋๊ณ ์์ด๋ ๋ด๊ฐ ์ฐ๋๊ธฐ๊ธฐ์์ ์๋์ ๋ณผ ์ ์๋ ๊ธฐ๋ฅ์ด๋ค.
๐Web Notification ์ฌ์ฉ ์กฐ๊ฑด
ํด๋น ๊ธฐ๋ฅ์ ์ด์ฉํ๋ ค๋ฉด ํ์ง๋ง ์กฐ๊ฑด์ด ์๋ค.
๋ฐ๋ก HTML5๋ก ๋ณด๋ด๋ Notification์๋์ ๋ฐ์ ๊ถํ์ ์ฒดํฌํด์
ํ์ฉํ ์ฌ๋๋ค์๊ฒ๋ง ์๋์ ์ค ์๊ฐ ์๋ค.
Web Notification ์๋ ํ์ฉ ํ์ ์ฐฝ ๋์ฐ๊ธฐ
Notification.requestPermission().then(function(result) {
console.log(result);
});
์ ์ฝ๋๋ฅผ ์ด์ฉํ๋ฉด ์๋ ๊ถํ์ ํ์ฉํ์ง ์์ ์ดํ๋ฆฌ์ผ์ด์ ์ด๋ผ๋ฉด ํ์ฉ ์์ฒญ ์ฐฝ์ ๋์ธ ์๊ฐ ์๋ค.
Web Notification ๊ถํ ํ์ธํ๊ธฐ
let permissionCheck = Notification.permission;
์ ์ฝ๋๋ฅผ ํ์ธํ๋ฉด ํ์ฌ ์ฌ์ดํธ์ Notification์ ํ์ฉํ๋์ง ์๋์ง๋ฅผ ์ฒดํฌํ ์ ์๋ค.
- default : ์ฌ์ฉ์์๊ฒ ์์ง ๊ถํ ์๊ตฌ๋ฅผ ํ๊ธฐ ์ , ์๋ ํ์๋์ง ์์
- granted: ์ฌ์ฉ์์๊ฒ ์๋ ํ์๋ฅผ ์๊ตฌํ์ผ๋ฉฐ, ์ฌ์ฉ์๊ฐ ํ์ฉํ ์ํ
- denied : ์ฌ์ฉ์์๊ฒ ์๋ ํ์๋ฅผ ์๊ตฌํ์ผ๋, ์ฌ์ฉ์๊ฐ ๊ฑฐ๋ถํ ์ํ
๐์ค์ Web Notification ์ฌ์ฉํด๋ณด๊ธฐ
์์์ฝ๋
<script>
function helloWorld(){
let date = new Date().toLocaleString();
let notification;
let notificationPermission = Notification.permission;
if (notificationPermission === "granted") {
//Notification์ ์ด๋ฏธ ํ์ฉํ ์ฌ๋๋ค์๊ฒ ๋ณด์ฌ์ฃผ๋ ์๋์ฐฝ
notification = new Notification(`Hello,World!!๐`, {
body: `์ฌ๋ฐฉ๋ฌธ์ผ์: ${date}`,
icon: 'hello.png',
});
} else if (notificationPermission !== 'denied') {
//Notification์ ๊ฑฐ๋ถํ์ ๊ฒฝ์ฐ ์ฌ ํ์ฉ ์ฐฝ ๋์ฐ๊ธฐ
Notification.requestPermission(function (permission) {
if (permission === "granted") {
notification = new Notification(`Hello,World!!๐`, {
body: `์ฒซ๋ฐฉ๋ฌธ์ผ์: ${date}`,
icon: 'hello.png',
});
}else {
alert("์๋ ํ์ฉ์ด ๊ฑฐ๋ถ๋์์ต๋๋ค.")
}
});
}
}
helloWorld();
</script>
์ ์ฝ๋๋ฅผ ์คํํ ๋ค ํ์ฉ์ ๋๋ฅด๋ฉด ์์คํ ์๋์ด ๋จ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
๐new Notification ์์ฑ
body๋ title ๋ฐ์ ๋จ๋ ํ ์คํธ๋ฅผ ์ ๋ ฅํ ์ ์๊ณ ,
icon์ ์ ๋ ฅํ๋ฉด ์์ ์ด๋ฏธ์ง๋ก ํ์๋ ๊ฒฝ๋ก๋ฅผ ์ ๋ ฅํ๋ฉด ์ด๋ฏธ์ง๋ ํจ๊ป ๋จ๊ฒ ๋๋ค.
์์ธํ ์ต์ ๋ค์ ์๋ URL์ ํ์ธํด๋ณด์!
https://developer.mozilla.org/ko/docs/Web/API/notification
Notification - Web API | MDN
Notifications API์ Notification ์ธํฐํ์ด์ค๋ ์ฌ์ฉ์์๊ฒ ๋ฐ์คํฌํฑ ์๋ฆผ์ ์ค์ ํ๊ณ ๋ณด์ฌ์ฃผ๋๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
developer.mozilla.org