[Javascript] 시나브로 자바스크립트 1주차 이모저모

2025년 2월 14일

#Javascript#Inflearn#Sinabro

서론

  • 인프런의 시나브로 자바스크립트 강의를 들으면서 정리했던 내용을 공유하려 한다.
  • 시나브로 자바스크립트에서 팀원들이 정리한 내용들을 볼 수 있습니다.

Element.matches()와 closest()의 차이 이해하기

matches() 메서드에 대한 소개가 간략하게 나오면서 문득 closest()와 어떤 점이 다를까 생각했다.

무언가 매칭되거나 가장 가까운 무언가를 찾는거 같은데 확실하게 어떤 차이가 있을까 하는 생각에 간단하게 정리해 보았다.

DOM API를 다루다 보면 특정 요소가 선택자와 일치하는지 확인하거나, 상위 요소 중에서 특정 선택자와 일치하는 요소를 찾아야 할 때가 있다.

다음은 이러한 작업에 사용되는 matches()와 closest() 메서드의 차이점을 간단한 예제와 함께 알아보자.

matches() 메서드란?

matches() 메서드는 해당 요소가 주어진 CSS 선택자와 일치하는지를 확인하여 boolean 값을 반환한다.

즉, 현재 요소가 특정 선택자와 매칭되는지 확인할 때 사용한다.

<div class="container">
  <button class="btn active" type="button">클릭</button>
</div>

const button = document.querySelector("button");

console.log(button.matches(".btn")); // true
console.log(button.matches(".active")); // true
console.log(button.matches(".container")); // false

closest() 메서드란?

closest() 메서드는 현재 요소부터 시작해서 DOM 트리를 탐색하며, 주어진 CSS 선택자와 일치하는 가장 가까운 조상 요소를 반환한다.

만약 일치하는 요소가 없다면 null을 반환한다.

<div class="parent">
  <div class="container">
    <button class="btn active" type="button">클릭</button>
  </div>
</div>

const button = document.querySelector("button");

console.log(button.closest(".btn")); // <button> 요소
console.log(button.closest(".container")); // <div class="container"> 요소
console.log(button.closest(".parent")); // <div class="parent"> 요소
console.log(button.closest(".not-exist")); // null

주요 차이점

  1. 검색 범위

    • matches(): 현재 요소만 검사
    • closest(): 현재 요소를 포함해 상위 요소들을 모두 검사

  2. 반환 값

    • matches(): boolean 값 반환
    • closest(): Element 객체 또는 null 반환

간단한 예제

이벤트 위임(Event Delegation) 패턴에서 특히 유용하게 사용된다

document.addEventListener("click", (e) => {
  // matches()로 클릭된 요소 확인
  if (e.target.matches(".btn")) {
    // 버튼 클릭 처리
  }

  // closest()로 특정 컨테이너 내부 클릭 확인
  const container = e.target.closest(".container");
  if (container) {
    // 컨테이너 관련 처리
  }
});

간단한 React 에제

closest()는 드롭다운이나 모달과 같은 UI 컴포넌트를 구현에서 활용할 수 있다.

다음은 React에서 드롭다운을 구현할 때의 예시다

trigger의 역할을 하는 button과 옵션들을 보여주는 ul을 제외한 영역에 대해서 이벤트를 제한하는 로직이다.

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = useCallback((e) => {
    // closest()로 클릭된 요소가 드롭다운 내부인지 확인
    const isDropdownClick = e.target.closest(".dropdown");
    // closest()로 클릭된 요소가 트리거 버튼인지 확인
    const isTriggerClick = e.target.closest(".dropdown-trigger");

    if (!isDropdownClick && !isTriggerClick) {
      // 드롭다운 외부 클릭 시 닫기
      setIsOpen(false);
    } else if (isTriggerClick) {
      // 트리거 버튼 클릭 시 토글
      setIsOpen((prev) => !prev);
    }
  }, []);

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, [handleClick]);

  return (
    <div className="dropdown">
      <button className="dropdown-trigger">메뉴</button>
      {isOpen && (
        <ul className="dropdown-list">
          <li>항목 1</li>
          <li>항목 2</li>
        </ul>
      )}
    </div>
  );
}

자바스크립트의 console의 여러 메소드들

디버깅에 관련된 파트를 보다가 여러 메소드들을 예시들을 한 번 보여주면 좋겠다 생각했다.

Web API에는 console 객체가 있고 우리가 흔히 쓰는 log 메서드 이외에 다양한 메소드들이 있다.

어떤 것들이 있는지 알아보자

1. console.log() - 기본적인 로깅

우리가 흔히 사용하는 console.log() 이다.

매개변수에 담긴 값을 콘솔에 출력한다.

console.log("Hello World");
console-log

console-log

2. console.error() - 에러 메시지 출력

매개변수 담긴 값이 웹 콘솔에 에러 메세지로 출력이 된다.

당연한 얘기지만 에러로써 확실하게 표시를 해야할 때 사용한다.

try-catch 구문에서 catch에 걸리는 값들을 디버깅하고 싶을 떄 쓸 수 있다.

console.error("에러가 발생했습니다!");
console-error

console-error

3. console.warn() - 경고 메시지 출력

매개변수 담긴 값이 웹 콘솔에 경고 메세지로 출력이 된다.

console.warn("주의가 필요합니다!");
console-warn

console-warn

4. console.info() - 정보성 메시지 출력

console.log와 동일한 역할을 수행한다.

개발 상에서 로그의 성격을 구분하여 관리하고자 쓰는게 아니라면 잘 쓰지는 않는 것 같다.

console.info("정보성 메시지입니다.");
console-info

console-info

5. console.dir() - 객체의 모든 속성을 계층구조로 표시

객체의 속성 계층적인 목록을 표시한다.

const person = { name: "김철수", age: 25, hobby: ["게임", "독서"] };
console.dir(person);
console-dir

console-dir

게층구조로 보여준다는게 어떤 말인지 헷갈릴 수 있는데 아래의 사진을 보면 확 차이가 느껴질 것이다.

console.log일 때

console.log일 때

console.dir일 때

console.dir일 때

6. console.time() & console.timeEnd() - 코드 실행 시간 측정

작업한는데 시간이 얼마나 소요되는 지 측정할 수 있는 메서드이다.

time와 timeEnd는 동일한 이름을 사용해야 측정이 가능하다.

React 공식문서 -useMemo / 비싼 연산인지 어떻게 알 수 있나요? 에서도 연산에 소요되는 시간을 측정하기 위해 해당 메서드를 사용하는 것을 확인할 수 있다.

console.time("반복문 시간");
for (let i = 0; i < 1000000; i++) {
  // 작업 수행
}
console.timeEnd("반복문 시간");
console-time

console-time

7. console.group() & console.groupEnd() - 로그 그룹화

콘솔 메세지들읗 그룹화하여 보여준다.

들여쓰기가 되어 있으며, 복잡한 객체나 데이터들을 더 깔끔하게 표시할 수 있다.

또한 디버버깅 시에 관련된 로그들을 그룹화하여 더 파악하기 쉽게 만들 수 있다.

console.group("사용자 정보");
console.log("이름: 김철수");
console.log("나이: 25");
console.groupEnd();
console-group

console-group

8. console.count() - 함수 호출 횟수 카운트

특정 함수가 호출된 횟수를 콘솔로 출력해 준다.

function doSomething() {
  console.count("함수 호출");
}
doSomething();
doSomething();
console-count

console-count

9. CSS 스타일 적용

%c 문자열을 사용하여 CSS 스타일을 적용할 수 있다.

쳣번쨰 매개변수에 스타일 적용을 위한 텍스트를 %c와 함께 작성하고 이후의 매개변수에는 %c를 입력한 횟수 만큼 인덱스 +1 만큼 매핑한다 생각하고 css string을 넣어주면 된다.

console.log(
  "%c 스타일 적용된 %c텍스트",
  "color: blue; font-size: 20px; font-weight: bold;",
  "color: red; font-size: 20px; font-weight: bold;"
);
console-css

console-css

10. console.table() - 데이터를 테이블 형태로 출력

  1. 배열의 객체를 테이블로 표시
const students = [
  { name: "김철수", age: 20, grade: "A" },
  { name: "이영희", age: 22, grade: "B" },
  { name: "박민수", age: 21, grade: "A" },
];
console-table

console-table

  1. 특정 컬럼만 선택해서 표시
console-table

console-table

  1. 2차원 배열도 테이블로 표시 가능
const scores = [
  [90, 85, 92],
  [88, 95, 89],
  [72, 78, 85],
];
console-table

console-table