Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별

arr.includes(valueToFind[, fromIndex])

//valueToFind
//탐색할 요소.> 참고: 문자나 문자열을 비교할 때, includes()는 대소문자를 구분

//fromIndex (Optional)
//이 배열에서 searchElement 검색을 시작할 위치입니다. 
//음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. 
//기본값은 0입니다.

let arr = [a,b,c,d]

arr.includes(a) // true
arr.includes(b) // true
arr.includes(z) // false
arr.includes(a,5) // false

calc()

calc() css 함수를 사용하면 CSS 속성의 값으로 계산식을 지정

//ex

width: calc(100% - 80px);

// <length>, <frequency>, <angle>, <time>, 
// <percentage>, <number>, 또는 <integer>를 받는 속성의 값으로 사용

//ex
width: calc(100% / 6);
//폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지

//ex
width: calc(100% - 80px);
left: 40px;
// 좌우 모서리와 간격이 40픽셀인 배너를 생성

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다.

표현식은 단순 계산식은 무엇이든 가능

Document.hasFocus()

Document.hasFocus() 메소드는 문서 또는 문서 내의 요소(element) 중 어느 하나라도 포커스(focus)를 갖고 있으면 true, 그렇지 않으면 false 인 Boolean 값을 반환

focused = document.hasFocus();

Focus()를 리액트에서 사용 할 시 useRef()를 사용해야 한다.
외에도 text selection, media playback,애니메이션 적용 등등이 있다.

//React 에서 사용시
import { useEffect, useRef } from 'react';

const inputEl = useRef(null);

  useEffect(() => {
    if (isEditMode) {
      inputEl.current.focus();
    }
  }, [isEditMode]);
  
<InputEdit
          type='text'
          value={newValue}
          ref={inputEl}
          // TODO : 포커스를 잃으면 Edit가 불가능한 상태로 변경되는 메소드가 실행되어야 합니다.
          onBlur={handleBlur}
          // TODO : 변경 사항이 감지되면 저장된 value를 업데이트 되는 메소드가 실행되어야 합니다.
          onChange={handleInputChange}
        />

onblur

blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생

focusout 이벤트와의 다른점-> focusout 은 이벤트 버블링이 발생

const form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";
}, true);
form.addEventListener("blur", function( event ) {
  event.target.style.background = "";
}, true);

String.prototype.startsWith()

startsWith() 메서드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환

const str = "To be, or not to be, that is the question.";

console.log(str.startsWith("To be")); // true
console.log(str.startsWith("not to be")); // false
console.log(str.startsWith("not to be", 10)); // true