TIL 21.09.29 Javascript

👷 모달 구현해보기

📆 21.09.29

✔️ Facts

이번 시간에는 창을 띄우고 끄는 기능을 구현해보았다.

팝업창이 기존 브라우저에서 새 창을 띄우는 것이라면, 

모달 창은 기존 브라우저 위에 레이어를 올리는 것을 일컫는다.

새로운 브라우저 창이 뜨지 않고 보기를 원하지 않는다면 한 페

이지에서 조작이 가능해 상대적으로 끄는 것이 쉽다.

🙃 내용

1. html tag에 이벤트 장착하기

특정 버튼 클릭 시 이벤트가 발생하게 javascript 함수를 html code에 이식하였다.

<li class="bookmark is-hoverable panel-block" onclick="popUp('${ssid}')">

html code 내부에 아래의 코드가 삽입되어 있다. 창과 카드를 동시에 띄어주는 역할의 코드이다. 
해당 태그 가장 바깥 tag는 현재 css에서 display: none;으로 되어 있어 브라우저에서 표시가
되지 않는 상태에 머물러 있다. 위의 태그를 눌러주게 될 경우 바깥 태그의 클래스에 새로운 클래스
'show'를 추가함으로써 display: block;으로 바꾸는 방식으로 창을 띄어줄 것이다.

<!-- html code-->

<div class="low-modal">
    <div class="low-modal-body"></div>
</div>

/*css code*/

.low-modal {                                            .low-modal.show {
    position: absolute;           ---------->               display: block;  
    top: 0;                                             };
    left: 0;

    width: 100%;
    height: 100%;

    display: none;

    background-color: rgba(0, 0, 0, 0.4);
}

아래는 html 특정 코드 클릭시 호출되는 함수이다. 위의 특정 태그 클릭 시 html 내 모달 창을 만들어 
주는 역할을 하는 태그를 사용하기 위해 'lowModal'을 지정하고 특정 버튼 클릭시 해당 버튼의 html 
tag 를 가져오기 위해 'likeBtn'으로 태그를 지정해 주었다.

특정 버튼의 html code가 필요한 이유는 해당 태그 클릭시 해당 태그가 클릭되어졌다는 효과를 적용시
키기 위함이다.

function popUp(ssid) {
  // 모달창에 해당하는 html element 'lowModal'에 지정 
  let lowModal = document.querySelector('.low-modal');
  
  // 특정 버튼 클릭시 모달창을 띄우게 하는 특정 버튼의 html element 'likeBtn'에 지정
  let likeBtn = event.currentTarget;
  
  /* lowModal class에 show라는 이름이 없고 특정 버튼 클래스에 'paint-white' 없으면 
     전자에는 'show'추가 후자에는 'paint-white'추가 */
  if (!(lowModal.classList.value.includes('show')) && !
    	(likeBtn.classList.value.includes('paint-white'))) {
    	lowModal.classList.add('show');
    	likeBtn.classList.add('paint-white');
    
  /* lowModal class에 show라는 이름이 있고 특정 버튼 클래스에 'paint-white' 있으면 
     전자에는 'show'제거 후자에는 'paint-white'제거 */
  } else if(lowModal.classList.value.includes('show') && 
      	likeBtn.classList.value.includes('paint-white')) {
      	lowModal.classList.remove('show');
      	likeBtn.classList.remove('paint-white');
    };
}

코드를 살펴보면 논리자체는 그렇게 어렵지 않게 짜여져 있다. 클래스 이름의 추가가 각각 동시에
발생하게 하는 이유는 모달 창이 켜지고 꺼지는 이벤트가 즐겨찾기 탭 모두에 적용되기 때문이다.

만일 창이 켜지고 꺼지는 것과 즐겨찾기 탭의 색이 변하는 것을 함께 묶어 놓지 않는다면 1번 즐겨
찾기 메뉴를 눌렀을 때 1번 즐겨찾기 관련창이 켜지고 메뉴의 색이 변한 상황에서 2번 즐겨찾기 메뉴
를 누른다면 창은 닫혀지고 1번 즐겨찾기 메뉴의 색은 그대로인 상황에서 2번 즐겨찾기 메뉴에 불이 
들어오게 된다.

🔎 Findings

창 바깥의 영역을 눌렀을 때 모달창이 없어지는 방식으로 구현하는 것이 정석이나 카드를 눌렀을 때에도
같이 꺼지는 현상이 발생하여 자구책으로 위와 같이 구현하게 되었다. 위의 개념은 캡처링과 연관이 있
는 개념인데 아직 이해하지 못하여서 일단 기능적으로 구현해 놓기 위해 해당 상황에서 머물게 되었다.

위의 과제를 수행하면서 event.target과 event.currentTarget 버블링 캡처링 개념에 대해서 접할 수
있었는데 해당 내용은 다음에 다루어 볼 생각이다.

😃 Future

모달 창 바깥을 눌렀을 때에 창이 꺼짐과 동시에 즐겨찾기 메뉴 탭의 불이 꺼지게끔 구현해보기로 하자.

event.target, event.currentTarget, 버블링, 캡처링 개념에 대해서 이해한다.

카드 영역 안에 채워지는 내용이 ajax를 통해 api로 받은 값을 넣는 것인데 서버쪽에서는 해당 데이터를 
어떻게 보내주는지 생각해보자.