2023-12-08 본캠프 47일차 / 66일차 TIL

주요 진행사항

- 아웃소싱 프로젝트

아웃소싱 프로젝트 - 커스텀 alert/confirm 구현

이번 프로젝트에서는 ux를 고려하여 커스텀 alert와 confirm을 구현하고자 하였다.

사실 alert는 문제가 없었지만 confirm을 만드는데 고려해야할 점이 몇가지 있었다.

confirm은 취소/ 확인 버튼이 있으며, 취소버튼을 눌렀을 때는 아무 동작도 진행되지 않으며, 확인버튼을 클릭했을 때는 다음동작일 실행한다.

즉, confirm은 어떤 동작이 올지 예측되지 않기 때문에 클릭할 때 까지 동작을 기다려야한다는 것이다.

이러한 점 때문에 confirm 모달에 대한 로직은 비동기 처리를 해야만 했다.

1. 비동기 처리의 이해

비동기 처리를 하기 위해서 Promise 함수를 만들었다.

사실 Promise에 대한 이론공부를 했었고, 여러 비동기 함수를 처리해왔지만, promise 함수를 직접 만드는 것은 처음이였다.

완벽히 이해하지는 못했지만 프로미스 함수의 동작이 끝나는 시점은 resolve 함수가 실행되는 시점이라는 것이다.

이를 처리하기 위해 resolve 함수 자체를 전역에서 관리하기로 결정하였다.

(직렬화 문제는 해결하지 못했다.)

전역으로 관리 된 resolve 함수는 커스텀 confirm의 확인 취소 버튼이 클릭 될 때 각각 true/ false 의 값으로 반환된다.

모달을 사용하는 곳에서는 단순하게 false가 반환 될 경우 (취소버튼) 함수를 return하는 형식으로 사용하였다.

이번에 커스텀 confirm을 만들어보면서 Promise 객체에 대한 이해도가 완벽하지는 않지만 더 좋아진 것 같다.

또한 UX/UI 적으로 프로젝트의 완성도를 높힌 것 같다는 생각이 들었다.