나는 프론트엔드를 희망하는 개발자이다.
뭐 특이점이라하면 특이점이겠지만,
항상 나는 alert() 이 창의 디자인이 정말 짜증났다.
누구든 그럴만한게, 너무 불친절하며, 싸가지없게 생겼다.
이번 토이프로젝트를 하면서, 이 alert창을 어떻게든 꾸미고 싶은게 내 목표중에 하나가 되었다.
사실 예쁘고 세련되고 이런 걸 떠나서, 그냥 저 싹퉁머리 없는 alert창을 넘어서고 싶었다.
사실 구현자체는 어렵지 않게 되었다.
sweetalert2라는 프로그램을 이용해서 지정한 syntax를 이용해서 뚝딱뚝딱 만들면 되었는데,
문제는 window.location.reload() 이 부분이었다.
alert를 한 후에, 화면을 새로고침을 해야해서
sweetalert 함수 코드 밑에 바로 window.location.reload()를 붙였더니..
마치 무슨 누가 옆에서 타자연습하듯이 파-박 새로고침이 되는 것이었다.
function successBoard(seq){
Swal.fire({
position: 'center',
icon: 'success',
title: '회원님, 한 세트 더 하셔야죠?',
showConfirmButton: true,
confirmButtonColor:'#3085d6',
confirmButtonText: '한 세트 더 하러 가기'
}
window.location.reload()
function successBoard(seq){
Swal.fire({
position: 'center',
icon: 'success',
title: '회원님, 한 세트 더 하셔야죠?',
showConfirmButton: true,
confirmButtonColor:'#3085d6',
confirmButtonText: '한 세트 더 하러 가기'
}).then((result) => {
if (result.value) {
window.location.reload()
}
})
}
.then 함수에 대해 알게 되었는데,
앞서 리턴한 값을 다음 then 함수에서 인자로 받는다고 한다. 즉, then 에서 resolved 될 때 다음 then 함수가 호출되며 resolve에 전달 된 값이 다음 then 함수에 전달된다는 뜻이다.
프라미스라는 개념과 연동되는 듯한다.
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
→ API가 실행되면 서버에다가 데이터 전송 요청을 보내는데, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것처럼 화면에 데이터를 표시하면 오류가 발생.
이와 같은 문제점을 해결하기 위한 방법이 프로미스이다.
프로미스에는 3가지 상태가 있는데 Pending(대기), Fulfilled(이행/완료), Rejected(실패)이다.
- pending : new Promise() 메서드를 호출하면 대기(Pending) 상태이다.
- fulfilled : 이행 상태가 되면 then()을 이용하여 처리 결과 값을 받을 수 있습니다.
- rejected : new Promise()로 프로미스 객체를 생성시, 함수 인자로 resolve와 reject가 생성. 여기서 reject를 호출하면 실패(Rejected) 상태가 됨. 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.
결과물 :