전체 글 (147) 썸네일형 리스트형 Module namespace & // models/drag-drop.ts namespace App { export interface Draggable { handleDragStart(event: DragEvent): void; handleDragEnd(event: DragEvent): void; } export interface Droppable { handleDragOver(event: DragEvent): void; handleDrop(event: DragEvent): void; handleDragLeave(event: DragEvent): void; } } // models/project.ts namespace App { export type ProjectStatus = 'active' | 'finished'.. shallow vs. deep copy const test = [{ id: 1 }, { id: 2 }, { id: 3 }]; const copiedTest = test.slice(); // shallow copy const copiedTest2 = JSON.parse(JSON.stringify(test)); // deep copy test === copiedTest // flase test === copiedTest2 // flase test[1] === copiedTest[1] // true(shallow copy) => same pointer! test[1] === copiedTest2[1] // false(deep copy) shallow copy | test.slice() test 배열의 모든 (객체) 아이템을 얕게 복사하고 그 아이템.. Decorators what is decorators? // tsconfig.json "compilerOptions": { "experimentalDecorators": true, // ... } decorator를 사용하려면, tsconfig에서 위의 옵션을 true로 설정해 주어야 한다. function Logger(target: Function) { console.log("decorator: logging..."); console.log("Logger target: ", target); } @Logger // decorator! class Person { name = "Harry"; constructor() { console.log("creating new obj by Person class...") } } const.. Generic what is generic? In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types. // 1. compile error! const names: Array = []; // Generic type 'Array' requires 1 type argu.. TanStack Query(React Query) What is react-query? | official website, react-query-tutorial repo 리액트 쿼리는 리액트 어플리케이션에서 데이터 fetching과 관련된 상태를 관리해 주는 라이브러리이다(이제는 리액트 뿐만 아니라, 다른 프레임워크에서도 사용이 가능하다). 리액트는 컴포넌트를 중심으로 ui를 렌더링하는 라이브러리이기 때문에, data fetching에 정해진 패턴이 없다. 일반적으로는 useEffect를 이용해 request를 보내고, useState를 이용해 관련된 상태(로딩중, 에러, response...)를 관리한다. 이러한 비동기/서버 관련 state는 클라이언트 측의 state(ex. theme)와는 매우 다르다. client vs. server state 클.. Advanced Types intersection types // 1. object type ErrorHandling = { success: boolean; error?: { message: string }; } interface ArtworksData { artworks: { title: string }[]; } type ArtworksResponse = ArtworksData & ErrorHandling // interface ArtworksResponse extends ArtworksData, ErrorHandling {}; const test: ArtworksResponse = { artworks: [{ title: 'test' }], success: true, } // 2. etc type Languages = 'engl.. Interface what is Interface? | vs. class, type ts에서 인터페이스란, 객체의 구조를 정의할 때 사용하는 키워드이다. 즉, 객체의 타입만을 정의하기 때문에, 같은 구조의 객체를 생성하는 클래스와는 차이가 있다. interface Person { // name: string = 'Harry'; => error! // an interface cannot have an initializer; name: string; age: number; greet(phrase: string): void; } let harry: Person = { name: 'Harry', age: 25, greet(phrase: string) { console.log(this.name + ' : ' + phrase) } .. Class Class basic concepts js에서 class는 같은 구조의 객체를 빠르게 만들 수 있도록 도와준다(a blue print of objects). ts를 이용하면, class에 타입을 더해서 사용할 수 있다. class Department { // property 타입 정의 name: string; // 새로운 객체를 생성할 때 name 매개변수에 인자를 전달할 수 있다 constructor(name: string) { this.name = name; } // methods describe() { // console.log('Department: ' + name); console.log('Department: ' + this.name); } } const hr = new Department('.. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
