[영화검색 웹 페이지 - 트러블슈팅]
작업을 진행하던중 영화정보의 상세페이지를 모달이나 새창으로 연결되도록 구현하라는 부분이 있었다.
흐음..모달이 뭐고, 어떻게 진행해야하지? 고민하는중에 튜터님의 힌트로 작업을 진행했다!
모달 창이란?
모달 창은 웹에서 사용자가 특정 작업을 완료하거나 확인할 때 중요한 정보나 입력을 요구하는 대화 상자다. 일반적으로 웹 페이지 상에서 팝업처럼 나타나며, 사용자가 해당 모달을 닫기 전까지 다른 작업을 할 수 없도록 만들 수 있다.. 라고한다.
팝업과는 뭐가 다른걸까? 일단 진행!
⁉️ 너의 역할은 배경이라면서..?
과제 내용중에 모달창을 닫을 때, 닫기버튼이나 모달 밖의 반투명한 영역(배경)을 클릭해도 모달창은 사라져야 한다.
1. 문제 발생
근데 내 모달창은 X를 눌러야만 창이 사라진다.
배경을 클릭하면 창은 그대로 있고 오류메시지가 표출되었다.
문제가 막 발생했을 시점에 미처 캡쳐를 해두지 못해서 정확한 오류 메시지가 무었이었는지 기억이 나지 않지만 배경을 클릭해도 다른 동작이 수행되고, x 버튼을 눌러야만 모달이 닫힌다.
- 해결방법의 반대로 진행하여 비슷한 상황을 만든후 화면.
- 당시의 오류와는 다른 오류가 뜬 상황이다
2. 원인 추론
- 배경이 제대로 선택이 되지 않았거나 다른 부분이 선택되었거나
그렇다면 배경이 제대로 선택될 수 있게 만들어주면 되는 것인데...
모달 구현도 처음이라 어떻게 해결해야 하나..생각하던중 그래픽툴 레이어가 생각났다.
기존 배경과 모달 창 사이에 레이어처럼 하나의 div를 추가해 주는 방식으로 구현해 서 다른 부분이 선택되지 않게 막을 하나 더 만들어주자!
3. 해결 방안
🪄 레이어처럼 [div]를 하나더 추가
- 모달 창을 띄울 때: 기본 모달을 띄운 뒤, 추가로 새로운
div요소를 생성, 모달 창과 기존 배경 사이에 레이어처럼 배치.
기존 모달 배경과 동일한 css처리. - 배경 클릭 이벤트 처리: 새로운
div클릭 이벤트를 설정하여, 배경을 클릭하면 모달 창이 닫히도록 처리. - 닫기 버튼 클릭 이벤트 처리:
x버튼을 클릭하면 모달이 닫히도록 처리.
🪄 트러블슈팅 이후 확인한 사항
문제 발생에 첨부된 이미지는 기록을 위해서 일부러 만든 에러인데, 저 에러에는 closeModal함수 내에서 classList가 null이라고 나온다.
그래서 내 코드를 다시한번 살펴 보았다.
[JS]
const closeModal = function (e) { if ( e.target.classList.contains("modalBackground") || e.target.closest("span").classList.contains("close") ) { movieModal.style.display = "none"; } };[html]
<!-- modal --> <div id="movieModal"> <!-- 모달 밖을 선택하면 모달창을 닫을 수 있게 하기 위한 장치 modalBackground 추가, 없으면 리스트 목록들이 계속 선택됨 --> <div class="modalBackground"></div> <div class="modalContent"> <!-- modal detail --> </div> </div>
내가 만든 에러에서는 당연한 결과였다.
기존 배경역할을 하는 movieModal은 id명으로 만들어놓고,JS에서는 classList에서 찾으라고 했으니 못찾지!!
그래서 movieModal을 class로 변경한 후에 찾으라고 해보니 잘 찾고, 잘 작동한다.
4. 결과
원하는 대로 배경을 선택해도, x 버튼을 클릭해도 모달이 잘 닫힌다.
여태 작업하다가 내 생각보다 단순하게 해결할 수 있는 문제들을 어렵게 해결한 경우가 많아서 일단 시도해 보자! 였는데.. 좋은 시도였다!!
원래도 이렇게 하는 건지는 모르겠으나 수월하게 해결되어 행복~!!!
to. 나에게
당시에는 구동이 되야 하니 문제를 해결했기 때문에 넘어갔는데, 기록을 하면서 다시 생각하니 반투명한div가 2개나 있어야 할 이유가 있을까? 하면서 코드를 다시 확인하길 잘했다!
개발 초보인 나에겐 좋은코드를 많이 접하고 만들어보면 좋겠지만 내가 뭐가 문제였는지도 확인을 해야 하기 때문에 이 프로젝트가 끝났다고 방치하지말고 복습하고 다시보자!
