항상 느끼는 거지만, 외부 라이브러리를 붙일 때 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번..

3D를 공부하기 시작하면서, WebGL과 OpenGL은 빠지지 않고 한 번쯤은 들어보는 단어이다. 그럼 대체 이것들이 무엇이고, 3D가 컴퓨터에서 돌아가기 위해서 어떻게 동작하는지는 기본으로 알아야한다고 생각한다. OpenGL : Open Graphics Library의 줄임말로 무려 1992년 크로노스 그룹에 의해 발표된 2D, 3D API(규격서)이다. 라이브러리와는 기대와는 달리 구현없이 규격에 대한 정의만 있다. OpenGL은 로우레벨 API라 거의 모든 것을 수동으로 설정해야하고, 그마저도 수학적인 지식이 갖춰져야 편하다고 한다. Microsoft에서 개발한 DirectX와 Apple도 한때 애용했지만, 자체적인 Metal 을 만들면서 OpenGL은 점유율을 점점 잃었고, Vulkan을 개발하기..

drei 에는 ScrollControls 라는 기능이 있다. Dom에서 스크롤 이벤트를 통해 Canvas를 조작할 수 있는 기능. 재밌는 것을 위해 사부작대던 중, 버그가 있는 것을 발견하고 이 부분을 심층적으로 파볼까 싶어 글을 작성하게 되었다. Scroll controls create a HTML scroll container in front of the canvas. Everything you drop into the component will be affected. 스크롤 컨트롤은 캔버스 앞에 HTML 스크롤 컨테이너를 만듭니다. 컴포넌트에 놓는 모든 것이 영향을 받습니다. 라고 deepL씨의 도움을 받아 이해하게 됐다. Dom Node을 비교해보면 확연하다. 왼쪽은 ScrollControls가 ..

프론트엔드 개발자가 3D 라이브러리 React Three Fiber 및 Three.js를 다루던 중 문제를 해결하는 과정을 보실 수 있습니다. (이하 삽질) 프로젝트를 하던 중, 아래와 같이 바닥에 texture를 넣었다. 아래와 같은 이미지를 사용했지만, 바닥에 렌더링 된 것은 뭔가 형태가 변한 모습이었다. 예쁘지 않은 모습으로 변했달까.. 성공적인 모습을 위해 삽질을 시작하려 한다. 1. drei를 이용해 useTexture를 사용하는 중인데, 프로퍼티가 친절하지 않으니 Three.js 로 방문한다. 2. https://threejs.org/docs/index.html?q=texture#api/en/textures/Texture 에서 사용할 수 있는 프로퍼티를 살펴보며 인사이트를 얻는다. 3. 'r..