자바스크립트의 alert() 메서드는 Window.alert()라고도 불리며, 사용자에게 경고 대화상자(alert dialog box)를 표시하는 기능을 합니다. 선택적으로 메시지 인자를 전달할 수 있으며, 확인(OK) 버튼과 함께 원하는 메시지를 화면에 보여줍니다. alert()는 주로 작업이 성공적으로 완료되었음을 알리거나, 오류 메시지를 표시하는 용도로 많이 사용됩니다.
또한 alert()는 개발 과정에서 유용한 디버깅 도구로도 활용됩니다. 예를 들어 폼(form) 제출을 처리하는 함수 내부에 alert()를 배치하면 코드 흐름을 손쉽게 확인할 수 있습니다. 이때 일반적으로 alert()는 event.preventDefault()가 호출된 이후에 위치시킵니다.
event.preventDefault()는 제출 버튼 클릭 시 페이지가 새로고침되거나 이동하는 기본 동작을 취소하는 역할을 합니다. 관련 내용이 궁금하다면 event.preventDefault()에 대한 별도 튜토리얼을 참고해 보세요.
자바스크립트 alert()란 무엇인가?
자바스크립트 alert()는 팝업 대화상자를 띄우는 메서드입니다. 문자열 형태의 메시지를 인자로 전달하면 해당 내용이 대화상자에 표시됩니다. 주의할 점은 alert()는 단순히 확인 버튼을 눌러야 하는 메시지를 표시하는 용도로만 사용해야 한다는 것입니다. 사용자에게 추가적인 조치를 요구하는 메시지라면 alert()를 사용하는 것이 적절하지 않습니다.
alert() 대화상자는 다양하게 활용할 수 있습니다. 예를 들어 fetch() 요청 과정에서 성공 또는 오류 여부를 알려주는 용도로 쓸 수 있고, 함수 안에 alert()를 넣어 프로그램이 의도한 대로 흘러가고 있는지 점검하는 용도로도 활용할 수 있습니다.
alert() 자바스크립트 문법
alert()의 문법은 매우 간결하고 직관적입니다. 문자열 형태의 메시지와 함께 호출하기만 하면 됩니다.
alert('message')
위 코드를 실행하면 'message'라는 문구가 담긴 대화상자가 나타납니다. 표시하고 싶은 사용자 지정 메시지를 문자열로 넣어주면 됩니다.
메시지는 선택 사항입니다. 메시지 없이 호출하면 확인 버튼만 있는 빈 대화상자가 표시됩니다.
alert()
자바스크립트 alert() 실전 예제
앞서 개발자와 사용자 관점에서 alert()를 활용하는 시나리오를 살펴봤습니다. 이제 각각이 실제로 어떻게 구현되는지 코드로 확인해 보겠습니다. 먼저 개발자 측면부터 시작하겠습니다. 폼 제출을 처리하는 함수 안에 alert()를 넣어보겠습니다.
먼저 아이디와 비밀번호를 입력받는 기본적인 로그인 폼입니다.
<form> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="password"> <button type="submit"> Log In </button> </form>
위 코드는 다음과 같이 렌더링됩니다.
이제 폼의 onSubmit 속성에 전달할 함수를 만들어 보겠습니다.
const handleOnSubmit = (event) => {
event.preventDefault();
alert("Logged In")
}
그다음 이 함수를 폼의 onSubmit 속성에 연결합니다.
<form onSubmit="handleOnSubmit(event)"> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="password"> <button type="submit"> Log In </button> </form>
이제 로그인 버튼을 클릭해서 함수가 폼에 제대로 연결되었는지 확인할 수 있습니다. 버튼을 누르면 아래와 같은 대화상자가 나타납니다.
정상적으로 동작합니다! 정의한 함수가 폼과 올바르게 통신하고 있다는 것을 확인했습니다. 자바스크립트 alert()는 이처럼 프로그램의 흐름을 간단하게 검증할 수 있는 방법을 제공합니다.
다음 예제에서는 fetch() 요청에서 성공 및 오류 메시지를 노출하는 방법을 살펴보겠습니다.
fetch('/current-cart/', {
credentials: 'include',
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(resp => resp.json())
.then(cart => {
if(cart.error){
alert(cart.error)
}
이 예제는 이커머스 앱에서 장바구니 데이터를 가져오는 fetch 요청입니다. 현재 저장된 장바구니가 있는지 서버에 요청을 보내고, 요청 처리 마지막 단계에서 오류가 있을 경우 이를 표시하는 alert()가 실행됩니다.
활성화된 장바구니가 없기 때문에 아래와 같은 오류가 표시됩니다.
이 예제는 프로덕션 환경보다는 개발 단계에서 더 유용하지만, 같은 원리를 폼 유효성 검사 등에도 응용할 수 있습니다.
return fetch('/login', {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(creds)
})
.then(resp => resp.json())
.then(response => {
if (response.error) {
alert(response.error)
}
여기서 alert()는 로그인 폼과 관련된 오류 메시지를 표시합니다. 사용자가 폼을 채우지 않은 상태로 로그인을 시도하면 아래와 같은 오류가 나타납니다.
이것이 alert()를 활용해 유효성 검사 결과를 사용자에게 전달함으로써 사용자 경험을 안내하는 사례입니다.
지금까지 alert()가 개발자 측면과 사용자 측면(클라이언트가 보는 화면) 양쪽에서 어떻게 활용될 수 있는지 살펴봤습니다. 학습한 내용을 정리해 보겠습니다.
마무리
자바스크립트 alert()는 다양한 용도로 활용할 수 있는 간단한 메서드입니다. 문자열 타입의 메시지를 선택적 인자로 받으며, 해당 메시지와 확인 버튼이 포함된 대화상자를 화면에 표시합니다. alert()는 오직 메시지를 표시하는 용도일 뿐 그 외의 동작을 수행할 수 없다는 점을 기억하세요.
예제를 통해 alert()를 개발 단계에서 함수와 폼 간의 통신을 추적하는 데 활용하는 방법을 확인했습니다. 이어서 fetch 요청의 개발 과정에서 오류 메시지를 노출하는 방법도 살펴봤습니다. 마지막 예제에서는 폼의 유효성 검사 오류를 사용자에게 전달하는 용도로 alert()를 사용하는 방법을 확인했습니다.
이제 alert()의 일반적인 활용법을 충분히 이해했을 것입니다. 다음 자바스크립트 프로젝트에서 다양한 기능을 테스트하는 도구로 직접 활용해 보세요.