6주차

6주차/suhyun/6주차.md

@@ -0,0 +1,243 @@
+# 아이템 53: 열거형 (enum)
+
+## 특징
+
+- 숫자 열거형은 0부터 시작하는 것이 좋음 (이유는 추후 확인 필요)
+- 상수 열거형(const enum)은 런타임에 완전히 제거됨. 단, preserveConstEnums가 true로 설정되면 정보가 저장됨.
+- 문자형 열거형은 명목적 타이핑을 사용함
+- tsconfig.json에서 preserveConstEnums를 설정할 수 없고, --preserveConstEnums 플래그를 사용해야 함.
+
+## 1. 상수 열거형 (const enum)
+
+상수 열거형은 런타임에 제거됨. preserveConstEnums를 적용하면 제거되지 않음.
+
+```typescript
+// 상수 열거형
+const enum Flavor {
+  VANILLA,
+  CHOCOLATE,
+  STRAWBERRY,
+}
+
+let flavor = Flavor.CHOCOLATE;
+```
+
+## 2. 문자형 열거형과 명목적 타이핑
+
+enum은 구조적 타이핑이 아닌 명목적 타이핑을 따르므로 "CHOCOLATE"와 같은 값을 Flavor.CHOCOLATE로 교체해야 함.
+
+```typescript
+type Flavor = 'VANILLA' | 'CHOCOLATE' | 'STRAWBERRY';
+
+const func = (flavor: Flavor) => flavor;
+func('CHOCOLATE');
+```
+
+## 3. 매개변수 속성
+
+매개변수 속성은 코드가 늘어나고 혼란을 줄 수 있음. 일반 속성과 함께 사용할 때는 신중해야 함.
+
+```typescript
+class Person {
+  constructor(public name: string) {}
+}
+```
+
+## 4. 네임스페이스와 트리플 슬래시 임포트
+
+타입스크립트의 모듈 시스템과 ES6 모듈 시스템이 호환되므로, `import`와 `export`를 사용해야 함.
+
+## 5. 데코레이터
+
+타입스크립트의 데코레이터는 아직 표준화되지 않았음. 표준화되기 전에 사용하지 않는 것이 좋음.
+
+---
+
+# 아이템 54: 객체를 순회하는 노하우
+
+## 객체 순회
+
+객체의 키와 값을 순회할 때, Object.keys(), Object.values(), Object.entries()를 사용하는 것이 좋음.
+
+```typescript
+const obj = { name: 'Alice', age: 30 };
+
+for (const [key, value] of Object.entries(obj)) {
+  console.log(key, value);
+}
+```
+
+## 객체 순회 시 타입 추론
+
+for-in 문을 사용할 때 객체에 없는 키를 참조하려고 하면 오류가 발생할 수 있음. 이런 문제는 Object.entries()를 사용하면 해결할 수 있음.
+
+## 1. 구조적 타이핑을 통한 오류 해결
+
+`for-in`을 사용할 때 키와 값의 타입이 잘못 추론될 수 있음. `keyof`를 사용하여 타입을 명시적으로 정의하면 타입 오류를 방지할 수 있음.
+
+```typescript
+const func = (person: Person) => {
+  let key: keyof typeof person;
+  for (key in person) {
+    console.log(person[key]);
+  }
+};
+```
+
+## 2. Object.entries() 활용
+
+배열이나 객체를 순회할 때 Object.entries()를 사용하면 타입을 자동으로 추론할 수 있어 더 안전하고 간결하게 순회할 수 있음.
+
+```typescript
+const func2 = (person: Person) => {
+  for (const [key, value] of Object.entries(person)) {
+    console.log(key, value);
+  }
+};
+```
+
+---
+
+# 아이템 55: DOM 계층 구조 이해하기
+
+## DOM 계층
+
+DOM에는 EventTarget, Node, Element, HTMLElement 등의 다양한 계층이 존재함. 각 계층은 상속 관계로 연결되어 있으며, 타입스크립트에서는 이를 잘 이해하고 사용해야 함.
+
+- EventTarget: window, XMLHttpRequest
+- Node: document, Text, Comment
+- Element: HTMLElement, SVGElement
+- HTMLElement: `<i>`, `<b>`
+- HTML\*Element: `<button>`, `<div>`
+
+## 이벤트 타입
+
+- UIEvent: 사용자 인터페이스 이벤트
+- MouseEvent: 마우스 이벤트
+- TouchEvent: 모바일 터치 이벤트
+- KeyboardEvent: 키보드 이벤트
+
+## DOM 엘리먼트 타입
+
+타입스크립트에서 DOM 요소의 타입을 명확히 지정하는 것이 중요함. document.querySelector()와 같은 메서드를 사용할 때는 타입 단언을 사용해야 함.
+
+## 타입 단언 예시
+
+document.getElementById()와 같은 메서드는 타입이 명확하지 않기 때문에 타입 단언을 사용해 정확한 타입을 지정할 수 있음.
+
+```typescript
+const element = document.getElementById('my-div') as HTMLDivElement;
+```
+
+---
+
+# 아이템 56: 정보를 감추는 목적으로 private 사용하지 않기
+
+## 접근 제어자
+
+- `public`, `protected`, `private`는 컴파일 후 제거됨. 런타임에서는 효과 없음.
+- `private`를 사용하여 정보를 감추는 것은 권장되지 않음. 대신 클로저나 비공개 필드를 사용해야 함.
+
+## 비공개 필드
+
+`#` 접두사를 사용하여 클래스의 비공개 필드를 정의할 수 있음. 이를 통해 외부에서 접근할 수 없는 필드를 만들 수 있음.
+
+```typescript
+class PasswordChecker {
+  #passwordHash: number;
+
+  constructor(passwordHash: number) {
+    this.#passwordHash = passwordHash;
+  }
+
+  checkPassword(password: string) {
+    return hash(password) === this.#passwordHash;
+  }
+}
+```
+
+---
+
+# 아이템 57: 소스맵을 사용하여 타입스크립트 디버깅하기
+
+## 소스맵
+
+소스맵은 원본 코드와 변환된 자바스크립트 코드를 매핑하는 데 사용됨. tsconfig.json에서 "sourceMap": true를 설정하면 소스맵을 생성할 수 있음. 디버깅 시 변환된 코드를 추적할 때 유용함.
+
+## 결론
+
+변환된 코드가 아닌 원본 코드에서 디버깅을 진행하자. 소스맵을 사용하여 디버깅을 쉽게 하자.
+
+---
+
+# 아이템 58: 모던 자바스크립트로 작성하기
+
+## ES 모듈로 전환
+
+ES2015부터 도입된 ES 모듈 시스템을 사용하면 코드가 모듈화되고, 이를 통해 타입스크립트로 점진적인 마이그레이션을 할 수 있음.
+
+```typescript
+// ES 모듈
+import * as b from './b';
+console.log(b.name);
+
+export const name = 'Module B';
+```
+
+## 프로토타입 대신 클래스 사용하기
+
+프로토타입을 사용하던 방식 대신 ES6 클래스 문법을 사용하여 코드를 더 간결하고 직관적으로 작성할 수 있음.
+
+```typescript
+class Person {
+  constructor(public first: string, public last: string) {}
+
+  getName() {
+    return `${this.first} ${this.last}`;
+  }
+}
+```
+
+## var 대신 let과 const 사용하기
+
+`var`는 호이스팅 문제를 일으킬 수 있기 때문에 `let`과 `const`를 사용하는 것이 좋음.
+
+## `for-in` 대신 `for-of` 사용하기
+
+배열 순회 시 `for-of`를 사용하면 코드가 짧고 명확해짐. 인덱스가 필요하면 `forEach`를 사용함.
+
+---
+
+# 아이템 59: 타입스크립트 도입 전에 @ts-check와 JSDoc으로 시험해보기
+
+## @ts-check
+
+`@ts-check`를 사용하면 자바스크립트 코드에서도 타입체크가 동작함. 미리 타입 문제를 발견할 수 있음.
+
+## JSDoc
+
+JSDoc을 사용하면 자바스크립트 코드에서도 타입 추론과 단언을 할 수 있음.
+
+---
+
+# 아이템 60: allowJs로 타입스크립트와 자바스크립트 같이 사용하기
+
+## allowJs 옵션
+
+`allowJs` 옵션을 사용하면 자바스크립트와 타입스크립트를 동시에 사용할 수 있음. 이를 통해 점진적으로 타입스크립트로 마이그레이션할 수 있음.
+
+---
+
+# 아이템 61: 의존성 관계에 따라 모듈 단위로 전환하기
+
+## 의존성 관계
+
+마이그레이션을 할 때는 의존성 관계를 고려해야 함. 서드파티 라이브러리의 타입 정보를 먼저 해결하고, 그 후 의존성 최상단에 있는 모듈을 전환함.
+
+---
+
+# 아이템 62: 마이그레이션의 완성을 위해 noImplicitAny 설정하기
+
+## noImplicitAny
+
+`noImplicitAny` 옵션을 설정하면 타입이 명확하지 않은 부분을 찾아낼 수 있음. 점진적인 마이그레이션을 할 때 유용함.