항상 느끼는 거지만, 외부 라이브러리를 붙일 때 TypeScript 적용이 힘들다. 그래서 TypeScript 적용을 미뤄 JavaScript 로만 작성했는데, 어느날인가 문득 도전의식이 샘솟은 것이 아닌가. 그 결과, 삽질하는 과정 - 시이작. ✔️ 내 코드의 구조는 대략 이렇다. Canvas 안에서 Bottles 라는 컴포넌트를 호출하고, Bottles는 Bottle이라는 컴포넌트에 렌더될 3D 모델의 node의 키 값을 Prop으로 전달한다. Bottle이 3D 모델에서 전달받은 glas와 cap이 사용된 node의 키를 geometry로 렌더한다. = 이것은 하나의 3D 모델 안에 여러개의 node가 존재할 때, 동적 렌더링을 할 수 있는 완벽한 계획 .js 파일을 .tsx 파일로 바꾸고 나니, ..

TypeScript는 발표된지 10년동안 꾸준한 사랑을 받고 있으며, JavaScript 개발 환경에서는 빠지면 안되는 보조 도구가 되었다. 하지만, 모든 언어가 그렇듯 장점만 존재하지도 단점만 존재하지도 않는다. 장점 1. 정적 타입 TS 사용의 가장 큰 이유이며, 런타임 에러를 예방한다. // JS const user = { name: "Daniel", age: 26, }; user.location; // returns undefined // TS const user = { name: "Daniel", age: 26, }; user.location; !Property 'location' does not exist on type '{ name: string; age: number; }'. 2.프로퍼티,..

1) 개념 TypeScript(이하 TS)는 C#의 창시자인 엔지니어가 개발을 주도하여 2012년 Micrsoft에서 발표한 오픈소스이다. 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 SuperSet으로 자바스크립트 문법을 그대로 사용할 수 있다. 자바스크립트에 존재하지 않는 정적 타입을 지원한다. 그렇다면, 코드를 TS로 작성할 경우, 브라우저 혹은 엔진에서 TS 파일 자체를 읽는 것일까? 그 안에서는 어떤 동작이 이루어지고 있을까, 원리를 알아보자. 2) 원리 1. TS 컴파일러(TSC) 에서 하는 일 (컴파일) TS 코드 -> AST 코드 -> 타입 체크 -> JS 코드 2. JS 엔진에서 하는 일 (런타임) JS 코드 -> AST 코드 -> 바이트 코드 자바스크립트만 사용할 때는 1번..