[아이템55] DOM 계층 구조 이해하기
| 타입 | 예시 |
|---|---|
| EventTarget | window, XMLHttpRequest |
| Node | document, Text, Comment |
| Element | HTMLElement, SVGElement 포함 |
| HTMLElement | <i>, <b> |
| HTMLButtonElement | <button> |
-
EventTarget은 DOM 타입 중 가장 추상화된 타입이다. 이벤트 리스너를 추가하거나 제거하고, 이벤트를 보내는 것밖에 할 수 없다.
-
<html>은 HTMLElement,<svg>는 SvgElement
일반적으로 타입 단언문은 지양해야 하지만 DOM 관련해서는 타입스크립트보다 우리가 더 정확히 알고 있는 경우이므로 단언문을 사용해도 좋다.
[아이템56] 정보를 감추는 목적으로 private 사용하지 않기
❗ public, protected, private 같은 접근 제어자는 타입스크립트 키워드이기 때문에 컴파일 후에는 제거된다. 따라서 타입스크립트의 접근 제어자들은 단지 컴파일 시점에만 오류를 표시해 줄 뿐이며, _(언더스코어) 관례와 마찬가지로 런타임에는 아무런 효력이 없다. 즉, 정보를 감추기 위해 private을 사용하면 안된다.
👉 확실히 데이터를 감추고 싶다면 클로저를 사용하자
[아이템57] 소스맵을 사용하여 타입스크립트 디버깅하기
// tsconfig.json
{
"compilerOptions": {
"sourceMap": true
}
}이렇게 설정하고 컴파일을 실행하면 각 .ts 파일에 대해서 .js와 .js.map 두 개의 파일을 생성하는데 .js.map파일이 소스맵이다. 소스맵이 .js 파일과 같이 있으면, 브라우저의 디버거에서 새로운 index.ts파일이 나타난다. 이제 원하는 대로 breakpoint를 설정할 수 있고 변수를 조사할 수 있다.
[아이템58] 모던 자바스크립트로 작성하기
- ECMAScript 모듈 사용하기
- 프로토타입 대신 클래스 사용하기
- var 대신 let/const 사용하기
- for(;;) 대신 for-of 또는 배열 메서드 사용하기
- 함수 표현식보다 화살표 함수 사용하기
- 단축 객체 표현과 구조 분해 할당 사용하기
- 함수 매개변수 기본값 사용하기
- 프로미스나 콜백 대신 async/await 사용하기
- 연관 배열에 객체 대신 Map과 Set 사용하기
- 타입스크립트에 use strict 넣지 않기
Frontend 개발자입니다 😎