MacOS 에서만 가능 (WinOS 에서는 그래픽 가속 꺼도 WebGL 기능 사용 가능) WebGL 1.0 렌더링 컨텍스트 만족시키는지 확인하는 코드function isWebGLSupported() { try { const canvas = document.createElement("canvas"); // window.WebGL2RenderingContext 를 아래에서 똑같이 사용하면 WebGL 2.0 확인 가능 return !!( window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) ); } catch (err) { retu..

📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..

📍예시 - 아래처럼 객체로 이루어진 배열이 있다. name필드의 모든 value를 union type으로 받으려면 어떻게 해야할까? // 뽑아내고 싶은 타입 // "javascript" | "typescript" | "react" | "vue" | "svelte" | "nextjs" | "nestjs" | "nodejs" | "java" | "spring" | "go" // 데이터 const SKILL_LIST = [ { name: "JavaScript", value: "javascript", }, { name: "TypeScript", value: "typescript", }, { name: "React", value: "react", }, { name: "Vue.js", value: "vue", },..

📍ES2023 - 2023년 6월 말에 최종 확정될 것으로 보이는 ECMAScript의 새로운 spec이 발표됨 - 브라우저 벤더들이 추가가 확실시되는 spec을 미리 추가하기 때문에 미리 사용해볼 수 있다 (크롬에서는 미리 적용되어 사용할 수 있음) 📍Array.prototpye.findLast() & findLastIndex() ✅배열의 원소 중에서 조건을 만족하는 가장 마지막 원소 혹은 그 인덱스를 반한다 - 이미 존재하던 Array.prototype.find() 와 findIndex() 가 조건을 만족하는 맨 앞 원소를 찾던 것과 완벽히 반대되는 기능 const isEven = (number) => number % 2 === 0; const numbers = [1, 2, 3, 4]; console..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅필수가 아닌 의존성을 분리할 때는 구조적 타이핑을 사용하면 됩니다 ✅공개한 라이브러리를 사용하는 자바스크립트 사용자가 @types 의존성을 갖지 않게 해야 합니다. 그리고 Node.js를 사용하지 않는 개발자(TypeScript 사용자)가 Node.js 관련된 의존성을 갖지 않게 해야 합니다. 📍CSV 파일을 파싱하는 라이브러리를 만들고 있다고 가정하면.. 로컬 시스템의 csv 파일을 읽기 위해 Buffer 타입이 필요하다 Buffet 타입은 @types/node 에 정의되어 있으므로 해당 타입 선언을 라이브러리에 포함하게 된다 // @types/node 설치 필요 function parseCSV(contents: string | Buffe..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅오버로딩 타입보다 조건부 타입을 사용하는 것이 좋습니다. 조건부 타입은 추가적인 오버로딩없이 유니온 타입을 지원할 수 있습니다. 📍오버로딩 타입 // 함수 시그니처 function double(x: number | string): number | string; // 유니온 타입 // 함수 오버로딩 function double(x: any) { return x + x; } // 매개변수가 number인데, string 이 반환되는 경우도 있을 수 있다! const num = double(12); // string | number const str = double('x'); // string | number 매개변수가 number인데, stri..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅콜백에서 this를 사용해야 한다면, this 바인딩을 확인해야 한다. 확인하려면 2가지 방법이 있다. - 생성자에서.. - 화살표 함수를 사용.. 📍JavaScript this 복습 C class를 만들고 logSquares 메서드를 정의한다 C의 인스턴스 c를 정의하고 메서드를 실행 => 정상 (this = c) c의 메서드를 새로운 변수에 저장하고 그것을 호출 => 에러 (this = undefined) call 메서드를 활용해 this에 c 바인딩 => 정상 class C { vals = [1, 2, 3]; logSquares() { for (const val of this.vals) { console.log(val * val); }..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅JSDoc / TSDoc 형태의 주석을 작성하면 에디터에서 주석 정보를 제공해준다 ✅@params, @returns 구문과 문서 서식을 위해 마크다운을 사용할 수 있다 ✅주석에 타입 정보를 포함하면 안된다 => 코드를 봐야할지, 주석을 봐야할지 혼란 초래 📍JSDoc / TSDoc 의 장점 ✅대부분의 에디터에서 함수에 붙은 JSDoc 스타일의 주석을 툴팁으로 표시해 준다 - 함수 설명을 툴팁으로 표시 /** Generate a greeting. Result is formatted for display. */ function greetJSDoc(name: string, title: string) { return `Hello ${title} $..