JavaScript 예외와 비표준 속성(221213) - TIL11

Pablaw·2022년 12월 13일
0

TIL

목록 보기
11/20
post-thumbnail

코드의 규모가 크지 않은 실습 등에서는 예외처리의 필요성을 느끼지 못할 수 있지만 실무 개발에서는 코드가 복잡해지기 때문에 예상치 못한 오류에 대비해 예외 처리 준비가 필요하다.

1. 오류의 종류

  • 프로그램 실행 전 발생하는 오류
    구문오류(Sytax Error)인 경우에 해당한다.
    작성한 코드의 괄호의 짝이 맞지 않는다던지 문자열을 열었는데 닫지 않는 등의 경우가 해당한다.

콘솔 메소드를 사용할 때 괄호의 짝을 맞추지 않았기 때문에 구문오류 발생 => 프로그램 실행 자체가 안됨.

  • 프로그램 실행 중에 발생하는 오류
    예외(Exception) 또는 런타임 오류(Runtime Error)인 경우에 해당한다.
    자바스크립트에서는 구문오류를 제외한 모든 오류는 예외로 분류된다.
    (Type Error, Reference Error, Range Error 등)

자바스크립트 프로그램을 실행할 수 있는 콘솔창에서 첫번째줄은 실행됐지만 두번째 줄에서 프로그램 실행 중 오류 발생

  • 오류 캐치하기 (catch 이벤트 속성 사용)


2. 비표준 속성

HTML 태그에서 id나, class 같은 표준 속성 외에 비표준 속성을 이용해서 스타일을 변경하거나 선택자로 활용하는 등 다양하게 사용할 수 있다.

<body>
    <h3>자바스트립트 비표준 속성</h3>
    <button class="btn" status="대기중">대기중</button>
    <button class="btn" status="진행중">진행중</button>
    <button class="btn" status="완료">완료</button>
</body>
<style>
  .btn {
    color: #ffffff;
  }
  [status="대기중"] {
    background-color: #ff6767;
  }

  [status="진행중"] {
    background-color: #5f62ff;
  }

  [status="완료"] {
    background-color: #07c456;
  }
</style>

자바스크립트에서 선택자나 css스타일을 적용할 때 대괄호로 감싸서 지정한 비표준 속성을 입력해서 사용할 수 있다.

<script>
  const test = document.querySelector("[status=진행중]");
  console.log(test);
</script>

  • data 속성 사용하기 (dataset 객체에 저장해서 사용하기)

HTML5 이후부터는 dataset 객체를 지원한다.

비표준 속성이 향후 표준 속성으로 등록된다면 예기치 않은 문제가 발생할 수 있다.
이를 방지하고자 비표준 속성을 사용할 때는 dataset 객체에 저장해서 사용하는 약속된 방식이 존재한다.

data-로 시작하는 모두 속성은 dataset 객체에 저장되는데 data-status라고 저장한다면
이렇게 저장된 속성은 element.dataset.status로 속성에 접근할 수 있다.

<body>
    <h3>자바스트립트 비표준 속성</h3>
    <button class="btn" data-status="대기중">대기중</button>
    <button class="btn" data-status="진행중">진행중</button>
    <button class="btn" data-status="완료">완료</button>
</body>
<script>
  const test = document.querySelector("[data-status=진행중]");
  console.log(test.dataset);
</script>

앞서 제시된 코드 속성 앞에 data-를 붙여서 비표준 속성을 사용하면 보다 안전하게 사용할 수 있다.

데이터 속성은 html 코드를 커스터마이징해서 사용하기 때문에 직관적일 수 있고 쓰임새가 다양하다.

단점은 검색엔진에 크롤링 되지 않고 민감한 데이터 등을 속성 값으로 지정하게 되면 노출의 위험이 있다.
JS 데이터 저장소와 비교 시 데이터 속성의 읽기 성능이 저조하다.

profile
반갑습니다, 프론트엔드 개발자를 꿈꾸고 있습니다 ! https://pablaw.github.io/profileLink/

0개의 댓글