Today I Learned 2023.02.09.

문제

나는 프론트엔드를 희망하는 개발자이다.
뭐 특이점이라하면 특이점이겠지만,
항상 나는 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 함수에 전달된다는 뜻이다.
프라미스라는 개념과 연동되는 듯한다.

• Promise 개념 알아보기

1. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
   → API가 실행되면 서버에다가 데이터 전송 요청을 보내는데, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것처럼 화면에 데이터를 표시하면 오류가 발생.
   이와 같은 문제점을 해결하기 위한 방법이 프로미스이다.

2. 프로미스에는 3가지 상태가 있는데 Pending(대기), Fulfilled(이행/완료), Rejected(실패)이다.
   - pending : new Promise() 메서드를 호출하면 대기(Pending) 상태이다.
   - fulfilled : 이행 상태가 되면 then()을 이용하여 처리 결과 값을 받을 수 있습니다.
   - rejected : new Promise()로 프로미스 객체를 생성시, 함수 인자로 resolve와 reject가 생성. 여기서 reject를 호출하면 실패(Rejected) 상태가 됨. 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.
   
   

결과물 :