5️⃣ 클래스 확장TypeScript의 클래스는 다른 클래스를 확장하거나 하위 클래스를 만드는 JavaScript 개념에 타입 검사를 추가한다. 즉, JavaScript에서의 클래스 + 타입검사가 TypeScript에서의 클래스 확장성에 대한 개념이다. 먼저 당연하게도 기본 클래스에 선언된 모든 메서드나 속성은 파생 클래스라고 불리는 하위 클래스에서 사용할 수 있다. class Teacher{ teach(){ console.log("Teaching"); }}class StudentTeacher extends Teacher{ learn(){ console.log("Learning"); }}const teacher = new StudentTeacher();tea..

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes.1️⃣ Vite환경에서의 Storybook과 Tailwindcss와의 충돌 아래의 환경에서 생긴 충돌입니다.Tailwindcss v.4.0.0Storybook/react-vite v.8.5.2 Vite 환경에서 처음 개발을 하던 도중 아래의 사진과 같은 에러가 나타났습니다.(25.02.26 시점입니다.)tailwindcss가 postcss 기반에서 vite플러그인으로 v.4.0.0부터 바뀌게 되면서 생긴 문제였습니다. 혼자 트러블 슈팅을 해봤지만 잘 안되었는데요. tailwindcss 버전을 다운버저닝 하려던..

🦩진행 환경storybook v8.x 를 사용했습니다.React with Vite 환경에서 진행했습니다.tailwindcss v4.x 을 프로젝트에서 사용합니다.마찬가지로 아래의 링크의 Get Started를 통해 환경 구성을 하였습니다.공식문서를 따라하고 학습한 후 간단하게 개념을 정리한 포스트입니다. Storybook: Frontend workshop for UI developmentStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and ..

🔍서론 ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 명료하고 새로운 문법을 제시하고 있다. 하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다. Typescript가 지원하는 클래스는 ECMAScript 6의 클래스와 상당히 유사하지만 몇 가지 Typescript만의 고유한 확장 기능이 있다. 이 확장기능들을 아래에서 설명하고 있다.1️⃣클래스 메서드TypeScript는 독립함수(standalone function)을 이해하는 것과 동일한 방식으로 메서드를 이해한다.매개변수에 타입이나 기본값을 지정하지 않으면 a..

GitHub - Indigochi1d/IntroduceWith3Dweb: R3F로 구현한 Dancing Scroll Introduce 3D WebR3F로 구현한 Dancing Scroll Introduce 3D Web. Contribute to Indigochi1d/IntroduceWith3Dweb development by creating an account on GitHub.github.com 🔎서론위의 프로젝트를 R3F로 구현하면서 사용했던 Hooks들을 자세히 다뤄보려고 한다.다뤄볼 Hooks들은 아래와 같다.useThreeuseFrameuseGLTFuseAnimationsuseProgressuseScroll1️⃣useThree useThree | React Three FiberReact Thr..

3️⃣ 인터페이스 확장TypeScript는 인터페이스가 다른 인터페이스의 모든 멤버를 복사해서 선언할 수 있는 확장된 인터페이스를 허용한다.interface Book { page : number;}interface Novel extends Book { title : string}let myBook : Novel = { page : 100, title : "hello world"}console.log(myBook.page, myBook.title);3️⃣ - 1. 재정의된 속성파생 인터페이스는 다른 타입으로 속성을 다시 선언해 기본 인터페이스의 속성을 재정의하거나 대체할 수 있다.interface TsPractice{ name : string | null;}interface Ts..

🔍서론인터페이스는 연관된 이름으로 객체 형태를 설명하는 방법이다.인터페이스는 별칭으로 된 객체 타입과 여러면에서 유사하다. 하지만 일반적으로 ① 읽기 쉬운 오류 메시지② 빠른 컴파일러 성능③ 클래스와의 더 나은 상호 운용성3가지의 장점을 가진다.1️⃣타입 별칭 vs 인터페이스타입별칭type Poet = { born: number; name: string;}; 인터페이스interface Poet { born : number; name : string;}TypeScript의 할당 가능성 검사와 오류 메시지는 객체 타입 별칭에서의 경우와 거의 동일하다.하지만 인터페이스와 타입 별칭 사이에는 4가지 주요 차이점이 있다. ✨  4가지 차이점1️⃣ 인터페이스는 속성 증가를 위해 병합(merg..

🔍ThreeJs에서 R3F로 마이그레이션하기 [ThreeJS] ThreeJS 기본 구성 요소ThreeJS란?ThreeJS란 WebGL(Web Graphic's Library)을 쉽게 사용할 수 있도록 해주는 JS기반 라이브러리이다. Graphic들은 html canvas 위에 그려지는데 이를 개발자가 좀 더 편하게 다루기 위해서 사용된다.ThreeJSindigochi1d.tistory.com전에 포스팅했던 ThreeJS의 기본 구성요소에는 4가지가 있었다.RendererSceneCameraMesh아래에서는 기본 구성요소의 선언 : ThreeJS vs R3F 에 대해서 코드로 작성하며 설명하도록 하겠다.1️⃣RendererThreeJSconst renderer = new THREE.WebGLRendere..

4️⃣ 튜플튜플은 고정된 크기의 배열이다. 튜플 배열은 각 인덱스에 특정 타입을 가져야 하며 선언을 할때에는 요소의 타입을 적어 선언한다.let yearAndWarrior: [number, string];yearAndWarrior = [530, "Tomyris"]; /*OK*/yearAndWarrior = ["530","Tomyris"]; /*Error: Type string is not assignable to type number*/yearAndWarrior = [530];/* Error: Type [number] is not assignable to type [number, string]Source has 1 element(s) but target requires 2 */JavaScript에서 조..

🔍서론JavaScript에서의 배열JavaScript에서의 배열은 아래의 상황처럼 배열 안에 다양한 타입들을 허용한다.const array = ["1",1,null,true];array.push("hi",["hello"]);// ["1",1,null,true,"hi",["hello"]] 하지만 초기 선언 배열의 타입값들과 다른 값을 추가하게 되면 배열을 읽을 때 혼란을 줄 수 있으며 애플리케이션의 문제가 될만한 상황이 발생할 가능성이 높다. 🚫우리의 엄격한 TypeScript는 이 상황을 허용하지 않는다. const array = ["1",1,null,true];array.push("hi",["hello"]);// error : Argument of type string[]->["hello"] is ..