최종 프로젝트 23일 차 @드롭다운=>모달창, 모달 창 제작(+ 오류 수정...)

오늘은 드롭다운 모바일 형태 전용 모달창 제작과 그냥 모달 창 제작을 했다. 

 

이게 무슨 소리인고 하니...

 

드롭다운 모바일 형태 전용 모달창이란 반응형을 위해서 전용 모달창을 새로 가져다 만들어서 썼다는 것이고,

 

그냥 모달 창을 제작했다는 것은 오늘 기어코 라이브러리 없이 모달창 자체를 만들어 썼다는 것이다. 

 

전자는 기존의 드롭다운을 활용하는 방식으로는 모바일 형태에서 요구하는 ui를 구성할 수 없었기 때문에 한 일이고, 

 

후자는 모달 라이브러리에 문제가 생긴 것 같아서 일부의 모달을 재구성하여 사용한 것이다. 

 

전자는 지금까지 한 작업의 재탕이었으나, 후자는 성대한 삽질이었는데, 애초에 내가 모달 창에 오류가 생겼다고 생각한 게 내가 라이브러리를 잘못 활용해서 생긴 error console을 다른 이유로 생긴 것으로 착각한 것이었다. 

 

 

모달 창 제작(+ 오류 수정...)

원래 내가 생각한 오류의 원인은 반응형을 하면서 일부 모달 창의 구조를 바꾼 것이었다. 반응형 구현을 위해서는 모달 창을 화면 하단에 고정시켜야 했는데, 기존의 모달은 포탈이 body 태그 밖에 열리기 때문에 body 태그를 relative 요소 삼아서 화면 구성을 할 수가 없었다. js를 활용하여 수동으로 조절하는 것도 생각해봤지만, 기기마다 적용되는 게 있고 안 되는 게 있을 것 같았기 때문에 반드시 bottom-0과 같은 css 요소로 모달 창을 조정해야 했다. 

 

이를 위해서 모달 창 구조를 바꾸어서 body 태그 안에 포탈이 열리도록 했다. 이 이후로 error console을 발견했고, 이 때문에 일어난 문제일 것이라고 생각을 한 것이다. 나는 내가 라이브러리를 잘못 사용하고 있다고 생각했고, 이쯤 모달 창을 만지작 거리고 있으니 그냥 라이브러리 없이 모달 창을 만들어버리는 것이 가장 좋을 것 같다는 생각에 모달 창을 만들어내었다. 

 

그렇게 하단 고정해야 하는 모달 창 2개에 내가 만든 모달 창을 적용시켰는데, 나중에 되어서야 이 에러 콘솔이 모달창 구조를 바꾼 곳에서만 나는 것이 아니라는 것을 깨달았다. 그 깨달음을 기반으로 모달창 오류를 추적해보니 내가 모달 라이브러리의 onautoFocus 꺼 놓으려고 적용한 요소가 오류의 원인이었다는 것을 깨달았다. 

 

모달 창을 아예 만들어보는 것은 성취감이 있는 일이었지만 발표가 이틀 남은 지금, 시간을 이렇게 날려버린 것은 뼈아픈 실수였다. 다음부터는 일을 벌이기 전에 먼저 더 많은 근거와 자료를 수집하고 생각을 해보아야겠다.