#47 Public API에 등장하는 모든 타입을 export하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅퍼블릭 API에 코드가 노출되면 타입을 추출하는 방법은 무궁무진하다 - 따라서 사용 편의성을 위해 가능한 모든 타입을 export 해주는 것이 좋다 📍라이브러리 사용자가 타입 정보를 직접 작성해야 한다면 ✅일반적으로 모든 타입 정보가 잘 export 되어야 하지만, 그렇지 않다면, 명시적으로 작성해야 한다 ✅타입 정보를 추출할 도구가 많기 때문에 의도적으로 타입 정보를 숨기는 것은 불가능하다 예시) ReturnType, Parameters 제네릭 타입을 활용해 타입 정보를 추출 // export하지 않은 인터페이스 interface SecretName { first: string; last: string; } interface SecretS..
#46 타입 선언과 관련된 세 가지 버전 이해하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅@types 의존성 관련 3가지 버전 - 개별 라이브러리 버전 - 그 라이브러리들의 @types 버전 - typescript 라이브러리 버전 ✅라이브러리를 업데이트하는 경우, 해당 @types 역시 업데이트해야 함 ✅TS로 작성된 라이브러리 : 타입 선언을 자체적으로 포함 ✅JS로 작성된 라이브러리 : DefinitelyTyped에 타입 선언을 공개하여 커뮤니티 차원에서 유지 보수 📍실제 라이브러리와 타입 모듈의 버전이 다른 경우 예) 타입 선언의 버전이 더 빠른 경우 react@16.8.6 @types/react@16.8.19 => 타입 정보의 버전이 더 빠름 ✅단순히 patch 버전만 다르기 때문에, 타입 선언을 업데이트할 필요는 없지만..
[Web API] 서비스 워커 (service worker)
·
✏️ Study/🧽 JS & TS
📍참고 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API Service Worker API - Web APIs | MDN Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests an developer.mozilla.org 📍서비스 워커? ✅프..
#45 devDependencies에 TypeScript와 @types 추가하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입스크립트를 시스템 레벨로 설치하면 안된다 (npm 전역 설치 금지) - devDependencies 에 포함하여 팀원 모두가 동일한 버전을 사용하도록 해야 한다 ✅@types 의존성도 devDependencies 에 포함해야 한다 📍npm은 의존성을 3가지로 구분한다 1. dependencies- 런타임에 필요한 라이브러리들- 프로젝트가 npm에 공개되면, dependencies의 라이브러리들도 함께 설치됨(전이 의존성, transitive dependencies 이라고 함) 2. devDependencies- 현재 프로젝트를 개발하고 테스트하는데 필요하지만, 런타임에는 필요없는 라이브러리들- 주로 테스트 프레임워크들..- 프로젝트가 n..
#43 몽키 패치보다는 안전한 타입을 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅전역 변수 사용을 지양하고, DOM에 데이터를 저장하면 안된다 (UI와 데이터를 분리) ✅내장 타입에 데이터를 저장해야 하는 경우, 안전한 타입 접근법 중 하나를 사용한다 - 타입 보강 - 확장하는 인터페이스를 만들고 단언 ✅보강의 모듈 영역 문제를 이해해야 한다 📍몽키 패치 (Monkey Patch) ✅런타임에 기존 코드를 동적으로 변경하는 것 예시 // 전역 객체에 임의의 프로퍼티 추가 document.monkey = 'Tamarin'; window.monkey = "Howler"; console.log(document.monkey); // 'Tamarin' console.log(window.monkey); // "Howler" // 내..
JavaScript 실행시간 측정 : performance.now()
·
✏️ Study/🧽 JS & TS
📍참고 https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now() - Web APIs | MDN The performance.now() method returns a high resolution timestamp in milliseconds. It represents the time elapsed since Performance.timeOrigin (the time when navigation has started in window contexts, or the time when the worker is run in Worker and Service developer.mozilla.org 📍performance.no..
#42 모르는 타입의 값에는 any 대신 unknown을 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅unknown은 any 대신 사용할 수 있는 안전한 타입이다- 어떤 값이 있을 때, 그 타입을 알지 못하는 경우라면 unknown을 사용하면 된다 ✅사용자가 타입 단언문이나 타입 체크를 사용하도록 강제하려면 unknown을 사용하면 된다✅{}, object, unknown의 차이점을 이해해야 한다 📍함수의 반환값과 관련된 unknown✅함수의 반환값으로 any 대신 unknown을 사용해야 한다 any를 사용하는 경우function parseYAML(yaml: string): any { // ...}interface Book { name: string; author: string;}const book = parseYAML(` name..
#41 any의 진화를 이해하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅암시적 any와 any[] 타입은 진화할 수 있다- 명시적 any : 진화 없이 계속 any- any 타입의 진화 : 중간에 값이 할당되거나, 배열에 원소가 추가되면 타입이 변경되는 것 ✅any 진화는 타입 안정성에 좋지는 않다- 중간에 실수로 타입이 오염될 수 있음- 명시적 타입 구문이 바람직하다 📍변수의 타입이 any인 경우, 다른 타입으로 확장될 수 있다일반적으로 변수의 타입이 선언 시에 결정된다. 그리고 한번 정해지면 새로운 값이 추가되지 않는다- 그러나 any의 경우, 예외가 존재한다 예시) 일정 범위의 숫자를 배열에 담아 리턴하는 함수- out 의 타입이 변경된다 (any -> number[])function range(start..