이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입 단언문은 일반적으로 타입을 위험하게 만들지만, 상황에 따라 필요할 때도 있다. 불가피하게 사용해야 한다면, 정확한 정의를 갖는 함수 안으로 숨겨야 한다 📍함수를 만들 때, 타입 정보를 힘들게 구성하지 않아도 된다 함수의 타입 정의만 보면, 간단해 보이지만, 내부 로직에 모두 안전한 타입을 붙이는 것은 힘든 작업이다 - 불필요한 예외 상황을 전부 걸러낼 필요는 없다. 타입 정의에서는 any를 쓰면 안되지만.. // 타입 정의 type cacheLast = (fn: T) => T 실제 구현체에서는 any 또는 타입 단언문을 사용해도 된다! - 타입 정의에는 any가 없기 때문에, cacheLast를 호출하는 쪽에서는 any가 쓰였는지 모른..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅any보다 더 정확한 모델링을 위해,any[]{[key: string]: any}() => any 처럼 구체적인 형태를 사용해야 한다 📍any✅자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입- 원시 값- 정규식- 클래스- DOM 엘리먼트 등을 포함 ✅any 타입의 값을 그대로 정규식이나 함수에 넣으면 안됨- 아래 코드에서 any 대신 any[] 를 사용하여 배열이 아닌 경우를 걸러낼 수 있다 function getLengthBad(array: any) { // Don't do this! return array.length;}function getLength(array: any[]) { // 차라리 이렇게 ret..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리더보기5장 any 다루기#38 any 타입은 가능한 좁은 범위에서만 사용하기 📍요약✅any 의 사용 범위를 최소한으로 좁혀야 한다✅함수의 반환 타입이 any이면 절대 안된다 -> 다른 코드에 악영향을 미침✅강제로 타입 에러를 제거하려면 any 대신 @ts-ignore가 낫다 📍함수의 매개변수로 any 사용할 때- 함수의 매개변수로 any를 사용해야 할 때는매개변수 as any 형태로 사용하여 다른 코드에 영향이 없도록 하는 것이 좋다 interface Foo { foo: string; }interface Bar { bar: string; }declare function expressionReturningFoo(): Foo;function proce..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅구조적 타이핑 때문에 값의 타입을 세밀하게 구분하지 못할 때가 있다 이 때 상표를 붙이는 것을 고려할 수 있다 ✅상표 기법은 타입 시스템에서만 동작하지만, 런타임에서 상표를 검사하는 것과 동일한 효과를 얻을 수 있다 📍상표(brand) 붙이기 아래 코드에서는 구조적 타이핑으로 calculateNorm의 매개변수 자리에 Vector2D가 아닌 3D 타입도 에러없이 가능하게 된다 interface Vector2D { x: number; y: number; } function calculateNorm(p: Vector2D) { return Math.sqrt(p.x * p.x + p.y * p.y); } calculateNorm({x: 3, y: ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅가독성을 높이고, 추상화 수준을 올리기 위해서 해당 분야의 전문 용어를 사용해야 한다 ✅같은 의미에 다른 이름을 붙이면 안된다 (예측이 어려움) 📍동물 정보 DB를 구성하기 위한 인터페이스 - 코드만 보고서는 제대로 이해할 수 없음 interface Animal { name: string; endangered: boolean; habitat: string; } const leopard: Animal = { name: 'Snow Leopard', endangered: false, habitat: 'tundra', }; - 매우 구체적으로 바꿈 interface Animal { commonName: string; genus: string; sp..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅코드의 구석구석까지 정확한 타입 안전성을 얻기 위해 API 또는 데이터 형식에 대한 타입 생성을 고려해야 한다 ✅데이터에 드러나지 않는 예외적인 경우들이 문제가 될 수 있기 때문에, 데이터보다는 명세로부터 타입스크립트 코드를 생성하는 것이 좋다

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입 안전성에서 불쾌한 골짜기(uncanny valley)는 피하는 것이 좋다 타입이 없는 것보다 잘못된게 더 나쁘다 - 불쾌한 골짜기 : 어설프게 완벽을 추구하다가 역효과가 나는 것 - 로봇공학, 인공지능 분야에서 어설프게 완벽을 추구하는 로봇, 인공지능에서 느껴지는 불쾌함에서 유래 ✅타입 정보를 구체적으로 만들 수록 언어 서비스(오류 메시지와 자동 완성)도 신경써야 함 언어 서비스는 개발 경험에 중요 📍추상적인 타입을 구체화하기 - 경도 (column), 위도 (row) 정보를 타입 모델링 - 좌표를 number[] 대신 구체적으로 튜플 [number, number] 로 표현했다 type GeoPosition = [number, numb..

📍참고 링크 https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. developer.mozilla.org 📍intersection observer API 이란? ✅특정 element가 다른 element(거의 viewport로 생각하면 됨) 와 일정 부분 겹칠 때를 감지하고, 이벤트 핸들러를 등록 가능 1. observe할 element 선택 2. 이 elemen..