Zustand에서 미들웨어의 역할Zustand에서 미들웨어(middleware)는 상태(store)를 확장하고, 상태 변경을 감지하거나 조작할 수 있도록 도와주는 기능을 한다. Redux의 미들웨어처럼 특정 로직(로깅, 비동기 처리, 상태 지속화 등)을 중앙에서 제어할 수 있다. 주요 미들웨어 기능1. logger – 상태 변경 로그 출력상태가 변경될 때마다 이전 상태와 다음 상태를 콘솔에 출력하여 디버깅에 도움을 줌.import { create } from "zustand";import { devtools, logger } from "zustand/middleware";const useStore = create( logger( (set) => ({ count: 0, increa..

3장 타입 추론-1 타입스크립트는 타입 추론을 적극적으로 수행합니다. 타입 추론은 수동으로 명시해야하는 타입 구문의 수를 엄청나게 줄여주기 때문에, 코드의 전체적인 안정성이 향상됩니다. item 19 : 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트가 타입을 추론할 수 있다면 명시적 타입 구문을 작성하지 않는 게 좋습니다. let x: number = 12; // 비생산적이며 형편없는 스타일 let x = 12; // 이렇게만 해도 충분 편집기에서 x에 마우스를 올려보면 타입이 number로 이미 추론되어 있음을 확인할 수 있습니다. 만약 타입을 확신하지 못한다면 편집기를 통해 체크하면 됩니다. 더 복잡한 객체도 가능합니다. // 거추장스러움 const person: { number: st..

제네릭 내장 제네릭 & 제네릭이란? 제네릭 타입이란 타입스크립트에 내장된 타입이며 다른 타입과 연결된다. 제네릭 타입을 사용하면 보다 나은 타입 안정성을 확보할 수 있다. const names: Array = []; //string[] names[0].split(' '); const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(10); }, 2000); }); promise.then(data => { data.split(' '); // error : Property 'split' does not exist on type 'number'. }) Generic Functions 제네릭 함수를 직접 만들어보자. 두 개의 객체를..

고급 타입 intersection Types 두 가지 타입을 교차해서 사용할 때 사용한다. type Admin = { name: string; privileges: string[]; }; type Employee { name: string; startDate: Date; } type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: 'Max', privileges: ['create-server'], startDate: new Date() } Type Guards 유니언 타입을 도와 특정 타입을 발라내는 역할을 한다. 유연성을 가지는 건 좋지만 런타임 시 정확히 어떤 타입을 얻게 될지 알아야하는 경우가 많기 때문이다. typ..

인터페이스 인터페이스 인터페이스는 객체의 구조를 정의할 수 있게 해준다. 따라서 해당 구조를 가져야하는 객체에 대한 타입을 확인하는 용으로 사용할 수 있다. interface Person { name: string; age: number; greet(pharse: string): void; } let user1: Person; user1 = { name: 'Max', age: 30, greet(pharse: string) { console.log(`${pharse} + ' ' + ${this.name}`); } }; user1.greet('Hi'); 왜 사용할까? 인터페이스와 사용자 정의 타입은 완전히 같지 않다. 인퍼테이스는 객체의 구조를 설명하기 위해서만 사용한다. 인터페이스를 자주 사용하는 이유는 ..

클래스 OOP? Work with (real-life) Entities in your code Class & Instnaces Objects : The things you work with in code (Instance of classes) Classes : blueprints for objects 객체를 정의 다수의 객체를 생성 Class 생성하기 class Department { //class field name:string; //생성자 함수 constructor(n: string) { this.name = n; } } const accounting = new Department('Accounting'); console.log(accounting); 자바스크립트로 컴파일하기 "use strict";..

TypeScript 컴파일러 wath 변경 사항이 잦을 때 watch 모드를 사용하면 변경사항이 생길 때마다 자동으로 컴파일 할 수 있다. tsc app.ts --w 전체 프로젝트 컴파일 / 다수의 파일 타입스크립트에게 프로젝트 단위로 컴파일해야한다고 알려줄 수 있다. 아래 커맨드를 통해 tsconfig 파일을 생성한다. tsc --init 한꺼번에 컴파일을 할 수 있다. tsc 특정 파일 제외시키기 tsconfig.ts 에서 exclude 설정을 통해 특정 파일을 컴파일 시 제외할 수 있다. "exclude": [ "analytics.ts", ] 아무 것도 설정하지 않으면 자동으로 node_modules이 제외된다. 패턴으로 제외시키기 "exclude": [ "*.dev.ts", //dev.ts가 포함..

Literal Type 특정한 값을 변수의 타입으로 지정하는 것을 리터럴 타입이라고 한다. const foo:string; string , number 외에 특정한 값을 타입으로 지정할 수도 있으며 union 타입과도 같이 사용할 수 있다. resultConversion: 'as-number' | 'as-text' Type alias 사용하고자 하는 타입을 별칭으로 지정하여 재사용할 수 있다. type ConversionDescriptor = 'as-number' | 'as-text'; 타입 객체를 생성하는 것도 가능하다. type User = {name: string; age: number}; function greet(user:User) { console.log(`Hi I'm ${user.name}`..