[WIP] feat(apps/frontend/tech): 이펙티브 타입스크립트 내용 정리.

apps/frontend/tech/docs/이펙티브타입스크립트/이펙티트-타입스크립트-들어가며.md

@@ -8,12 +8,6 @@ tags: [typescript]
 
 [인트로] 이펙티브 타입스크립트를 읽으며
 
-:::warning
-
-작성 중
-
-:::
-
 > 독서 기간: 2025-02-25 ~ 03.30
 
 <!-- truncate -->

apps/frontend/tech/docs/이펙티브타입스크립트/타입스크립트-알아보기.mdx

@@ -9,12 +9,6 @@ date: 2025-02-25
 
 1장 타입스크립트 알아보기
 
-:::warning
-
-작성 중
-
-:::
-
 <!-- truncate -->
 
 ## 아이템 1: 타입스크립트와 자바스크립트의 관계 이해하기
@@ -81,21 +75,88 @@ const x: number = null;
 
 ## 아이템 3: 코드 생성과 타입이 관계없음을 이해하기
 
-> 작성일: 2025-
+> 작성일: 2025-04-23
 
 타입스크립트 컴파일러의 역할
 
 - 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전 자바스크립트로 트랜스파일([Transpile](https://en.wikipedia.org/wiki/Source-to-source_compiler)).
 - 코드의 타입 오류를 체크.
+- 타입스크립트 타입은 **런타임**에 사용할 수 없다.
 
 ## 아이템 4: 구조적 타이핑에 익숙해지기
 
-> 작성일: 2025-
+> 작성일: 2025-04-23
+
+- 자바스크립트는 본질적으로 **덕 타이핑(duck typing)**기반이다. 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용.
+
+
+```typescript
+interface Vector2D {
+  x: number;
+  y: number;
+}
+
+interface NamedVector2D {
+  name: string;
+  x: number;
+  y: number;
+}
+
+function calculateLength(v: Vector2D) {
+  return Math.sqrt(v.x * v.x + v.y * v.y);
+}
+
+const v: NamedVector2D = {x: 3, y: 4, name: "Zee"};
+calculateLength(v); // 정상, 결과 5
+```
+
+NamedVector2D가 Vector2D와 호환되기 때문에 calculateLength 호출이 가능.
+
+```typescript
+interface Vector3D {
+  x: number;
+  y: number;
+  z: number;
+}
+
+function norm(v: Vector3D) {
+  const length = calculateLength(v);
+  return {
+    x: v.x / length,
+    y: v.y / length,
+    z: v.z / length,
+  }
+}
+
+norm({
+  x: 3,
+  y: 4,
+  z: 5
+}); // { x: 0.6, y: 0.8, z: 1}
+```
+
+타입스크립트는 오류를 잡아내지 못합니다. Vector3D는 Vector2D와 호환되기 때문에 calculateLength함수에서 문제를 잡아내지 못합니다.
+타입스크립 타입 시스템은 타입 확장에 열린(open) 타입입니다. Vector2D와 Vector3D의 예시에서는 Vector3D는 Vector2D의 확장으로 열린 타입에 의하여 호환이 됩니다.
+
 
 ## 아이템 5: any 타입 지양하기
 
-> 작성일: 2025-
+> 작성일: 2025-04-23
+
+### any는 함수 시그니처를 무시합니다.
+
+```typescript
+
+function calcAge(date: Date): number {
+  // ...
+}
+
+let birthDate: any = '1999-03-09';
+calcAge(birthDate); // 정상
+```
+
+### any 타입은 IDE의 자동완성 기능에 적용되지 않습니다.
 
 ---
 
-> 최종 수정일: 2025-02-25T23:55
+> 최종 수정일: 2025-04-23

apps/frontend/tech/docs/이펙티브타입스크립트/타입스크립트의-타입시스템.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_position: 3
+slug: 이펙티브-타입스크립트-타입스크립트의-타입시스템
+title: '[2 장] 타입스크립트의 타입 시스템'
+authors: [99mini]
+tags: [typescript]
+date: 2025-04-23
+---
+
+2 장 타입스크립트의 타입 시스템
+
+<!-- truncate -->
+
+## 아이템 6: 편집기를 사용하여 타입 시스템 탐색하기
+
+편집기를 이용하여 'Go to Definition' 옵션을 이용하면 타입이 선언된 파일(*.d.ts)로 이동할 수 있다.
+
+> 작성일: 2025-04-23
+
+## 아이템 7: 타입이 값들의 집합이라고 생각하기
+
+---
+
+> 최종 수정일: 2025-04-23