alert/confirm/prompt와 상호작용하기

언어는 사용하지 않으면 녹슨다. 컴퓨터 언어도 마찬가지인데, 사용하지 않으면 아주 기본적인거라도 가끔 멈칫할 때가 있다. 오늘의 나에게는 바로 alert/comfirm/prompt의 상호작용이 그러했다. 어떻게 그럴 수가 있냐고 하면 할 말이 없다... 핑계를 대자면 컴포넌트를 만들어서 사용하느라 기본 기능을 사용 할 일이 없었다 정말!

---

alert

단순 메세지를 보여주는 기능을 하는 알럿 띄우는 방법은 정말 간단하다.

alert('알럿띄우기');

 

 

문제는 알럿을 띄운 후, 액션 처리에 있었다. 확인을 누를 때, 무슨 코드가 필요했더라..

결론은 딱히 "필요없다"이다. alert이 띄워졌을 시, 모든 작업의 진행을 멈추게 된다. 이후 확인을 클릭하게 된다면 멈춰있던 작업을 순서대로 진행한다. 즉, 다음과 같은 코드를 작성하면 끝난다.

alert('알럿띄우기');
// 확인 클릭 이후, 진행할 로직

 

confirm

컨펌은 알럿과 다르게 사용자에게 확인/취소의 선택지를 준다.

코드는 역시나 심플하지만 alert과는 조금 다르다. 확인/취소를 받은 결과의 값을 저장하는 변수가 추가로 필요하기 때문이다.

const result = confirm('컨펌띄우기');

confirm창에서 확인 클릭 시 true를, 취소 클릭 시 false를 반환하여 result에 저장해준다.

const result = confirm('컨펌띄우기');

if (result) {
	// 확인 클릭 시, 실행 할 로직
} else {
	// 취소 클릭 시, 실행 할 로직
}

 

prompt

const result = prompt('프롬프트띄우기');

confirm과 같이 결과값을 반환하는 prompt는 다음과 같은 모습을 보여준다.

result에는 입력창에 입력 된 값이 반환되어 저장되며, 취소를 눌렀을 시 null값을 반환한다. 하단과 같은 코드로 입력받은 값을 활용할 수 있다.

const result = prompt('프롬프트띄우기');
console.log('입력 문구 : ', result);

참고로 IE를 제외한 브라우저에서는 상단 코드와 같이 안내문구 하나만 인자로 넘겨주어도 문제가 없지만 IE에서는 기본값을 반드시 지정해주어야한다.

const result = prompt('프롬프트띄우기', '');

그렇지 않으면 IE는 'undefined'를 입력창에 노출시키게 된다.

---

alert/confirm/prompt의 공통적 특징은 다음과 같이 정리할 수 있다.

1. 모두 모달창을 띄워준다.
2. 모달창이 떠 있을 때, 스크립트의 실행을 중단시킨다. (창을 닫기 전까지 어떠한 상호작용도 불가함)
3. 브라우저 중앙에 위치한다.
4. 따로 커스텀을 할 수 없으며, 브라우저마다 모양이 조금씩 다르다.