알림창의 마법: alert, confirm, prompt 제대로 활용하기 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 웹 개발의 기초 중에서도 아주 중요한 window 객체와 그 안에서 자주 사용되는 메서드인 alert, confirm에 대해 알아보겠습니다. 마치 웹 브라우저와 개발자가 소통하는 창구 같은 역할을 하는 이 window 객체는 초보 개발자에게도 꼭 필요한 개념이랍니다. 그럼 바로 시작해볼까요? 😊

---

🌟 window 객체란 무엇인가요?

window 객체는 브라우저에서 제공하는 전역 객체로, 웹 페이지를 담고 있는 "창" 자체라고 생각하시면 돼요.
마치 집에서 창문을 열고 세상을 바라보는 것처럼, window 객체는 브라우저와 웹 페이지 간의 소통을 가능하게 합니다.
그리고 자바스크립트를 실행할 때 전역에서 선언된 모든 변수와 함수는 window 객체의 속성이 됩니다!

예제 코드:

console.log(window); // 브라우저의 창 정보와 메서드를 출력
console.log(window.document); // 현재 페이지의 DOM(Document Object Model)을 출력

Tip: window 객체는 생략 가능합니다.
예를 들어, window.alert()는 alert()로 사용해도 동일하게 작동합니다.

---

📢 alert() 메서드

alert()란?

alert() 메서드는 단순한 알림 창을 띄워 사용자의 주의를 끌 때 사용됩니다.
사용자가 확인 버튼을 누르기 전에는 다른 작업을 할 수 없게 하죠. 마치 중요한 소식을 알려주는 강제 알림과 비슷해요.

예제:

alert("안녕하세요! 오늘도 즐거운 코딩 되세요 😊");

실행 결과:

• 팝업 창에 "안녕하세요! 오늘도 즐거운 코딩 되세요 😊"가 표시되고, 확인 버튼이 나타납니다.

장점: 간단히 알림을 띄울 때 유용합니다.
단점: 사용자 경험을 방해할 수 있으니 너무 남발하면 안 돼요!

---

❓ confirm() 메서드

confirm()이란?

confirm() 메서드는 사용자에게 "확인" 또는 "취소"를 선택하게 하는 창을 제공합니다.
마치 누군가에게 "정말로 할 거야?"라고 묻는 것처럼 중요한 결정을 확인받을 때 사용됩니다.

예제:

let isConfirmed = confirm("정말로 이 페이지를 떠나시겠습니까?");
if (isConfirmed) {
    console.log("사용자가 확인을 눌렀습니다.");
} else {
    console.log("사용자가 취소를 눌렀습니다.");
}

실행 결과:

• "정말로 이 페이지를 떠나시겠습니까?"라는 메시지와 함께 확인 및 취소 버튼이 표시됩니다.
• 확인을 누르면 true, 취소를 누르면 false를 반환합니다.

실용적인 활용: 중요한 작업(예: 삭제, 페이지 이동 등)에 대한 사용자 확인을 받을 때 사용합니다.

---

🌐 일상생활에 비유해 보기

• alert(): 부모님이 "밥 먹으러 와라!"라고 외치시는 장면을 떠올려보세요. 선택의 여지 없이 반드시 확인해야 하는 상황입니다.
• confirm(): 친구가 "이 영화 정말 볼 거야?"라고 묻는 것과 비슷합니다. 선택권은 당신에게!

---

📌 window 객체와 함께 알아두면 좋은 메서드들

메서드	설명	예제
prompt()	사용자 입력 값을 받는 창을 띄움	prompt("이름을 입력하세요:");
open()	새 브라우저 창이나 탭을 엶	window.open("https://example.com");
close()	현재 열린 창을 닫음	window.close();
setTimeout()	일정 시간 후에 코드를 실행함	setTimeout(() => alert("타이머 끝!"), 2000);
setInterval()	일정 간격으로 코드를 반복 실행함	setInterval(() => console.log("1초마다 실행"), 1000);

---

😊 초보 개발자를 위한 응원

"개발의 시작은 한 줄의 코드와 하나의 개념에서 시작됩니다."
window 객체와 메서드들은 아주 간단해 보이지만, 웹 개발에서 없어선 안 될 친구들이에요.
작은 개념 하나하나를 이해하며 자신감을 쌓아가는 여러분을 응원합니다! 🚀

---

😊 마무리하며..

오늘은 브라우저의 window 객체와 주요 메서드인 alert()와 confirm()을 살펴봤습니다.
이제 여러분도 이 메서드들을 자유롭게 활용할 수 있겠죠?
다음에는 prompt()와 더 복잡한 window 객체 활용법으로 찾아올게요!
궁금한 점이 있다면 언제든 댓글로 남겨주세요 😊