TIL #6 | 23.10.20

JS로 모달창 구현하기

• position:fixed 속성을 사용하여 모달창을 절대적인 위치로 지정한다.

• 모달창의 백그라운드를 불투명으로 처리하고 position:absolute 속성을 줘서 전체화면이 되도록 한다.

  button {
    all: unset;
    cursor: pointer;
  }
  
  // 모달 컨테이너
  .modal {
    position:fixed; // 보이는 화면에 대한 고정 위치
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
  }
  
  // 뒷배경
  .modal_background {
    position: absolute; // 부모요소 안에서의 절대적 위치 (여기선 body)
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
  }
  
  // 모달창
  .modal_content {
    text-align: center;
    position: relative;
    background-color: white;
    width: 200px;
    height: 200px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    padding: 10px
  
  }
  
  .hidden {
    display: none;
  }

• hidden 클래스를 사용하여 토글할 때 모달창을 여닫을 수 있도록 한다.

1. hidden 클래스 추가

   <button>open</button>
   <div class="modal hidden">
     <div class="modal_background" >
       <div class="modal_content">
         <h2>modal</h2>
         <button>close</button>
       </div>
     </div>
   
   </div>

2. addEventListener를 사용하여 버튼을 클릭할 경우 클래스 "hidden"을 토글할 수 있도록 한다.

   const openButton = document.querySelector("button");
   const modal = document.querySelector(".modal");
   const closeButton = modal.querySelector("button");

function displayModal(){
modal.classList.toggle("hidden"); // 클릭할 때마다 hidden 클래스 토글
}

openButton.addEventListener("click", displayModal);
closeButton.addEventListener("click", displayModal)

## JS에서 검색 기능 구현

1. 대소문자를 구분하지 않고 검색
- toUpperCase() 또는 toLowerCase()를 사용하여 비교할 두 값의 대소문자를 맞춰준다.
```js
// toUpperCase()를 사용하여 대소문자 상관없이 비교
let val = search.value.toUpperCase(); // 검색값
let title = movie.title.toUpperCase(); // 영화 제목

2. 키워드를 포함하여 검색

• .includes()를 사용하여 값이 포함될 경우를 지정한다.

  // input 값이 들어올 때
  if (val) {
    return title.includes(val); // 키워드를 포함한 movie.title 반환
  } else {
    return movie; // input 값이 들어오지 않을 때 (초기 상태) 전체 movie 데이터 반환

JS에서 엔터키로 입력하는 방법

1. <form /> 태그를 사용한다.
   form 태그를 사용하여 newForm.addEventListener("submit", function() {}) 를 구현하면 자동으로 form 태그안의 input값에 엔터를 사용했을 때와, 버튼을 사용했을 때 함수가 실행된다.

2. keyup 이벤트 발생 시 event.code의 값이 "Enter"일 경우 실행

   search.addEventListener("keyup", function (e) {
         if (e.code === "Enter") {
           onSearchButtonClick();
         }
   });

---

자주 사용하는 DOM 제어 속성

요소 추가 및 선택
document.createElement() : 새로운 HTML 요소 생성
document.getElementById() : id 속성을 기준으로 요소 선택
document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택한다.
document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택한다.

요소의 값 변경
element.innerHTML : 해당 요소 내부의 HTML 코드를 변경한다.
element.textContent : 해당 요소 내부의 텍스트를 변경한다.
element.style.property : 해당 요소의 스타일 값을 변경한다.

하위 요소 추가 및 삭제
element.appendChild(child) : 해당 요소의 하위 요소로 child 추가
element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제

요소의 클래스 추가, 제거, 토글
element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가
element.classList.remove(class) : 해당 요소의 클래스 중 특정 클래스 제거
element.classList.toggle(class) : 해당 요소의 클래스 중 특정 클래서 추가 또는 제거

이벤트 처리
element.addEventListener(type, listener) : 해당 요소에서 이벤트 발생 시(type) 호출할 함수(listener) 등록
element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수 제거
element.preventDefault() : 이벤트가 발생했을 때 기본 동작 취소 (보통 새로고침 막기 위해 지정한다.)
event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지한다.

window 요소
window.location.href : 현재 페이지의 URL을 가져온다.
window.alert(message) : 경고 메시지 출력
window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값 반환

---

회고

오늘은 JS로 프로젝트를 진행하면서 모달창을 구현하는 방법과, 검색 기능을 구현할 때 대소문자를 구분하지 않고 키워드를 포함할 경우 결과를 출력하는 방법, 엔터키를 사용할 경우 함수가 실행되도록 하는 방법을 실습해보았다. 다음에 JS 기반으로 진행할 프로젝트에서도 유용하게 사용할 수 있을 것 같다.