프론트엔드 첫걸음

1. manus.io/app 에 접속한다2. 기획서 pdf파일 올리고 분석해서 mmd파일 만들어달라구 한다.3. 4. 다이어그램 이름 설정 뒤 만들기 5. mmd 파일을 텍스트로 복사 6. + 버튼 클릭해서 메르메이드 클릭 7. 메모장에 복사했던 메르메이드 파일 텍스트를 붙여넣고 삽입 8. 이렇게 됨

프로젝트를 진행하다가 빌드 중 아래와 같은 에러를 만났습니다.Failed to compileCannot find type definition file for 'minimatch'.The file is in the program because:Entry point for implicit type library 'minimatch' TS2688같은 프로젝트를 쓰는 다른 개발자에게서는 문제가 없었기 때문에, 제 로컬 환경이나 IDE 설정 문제라는 생각이 들었습니다.원인 분석이 에러는 TypeScript가 minimatch의 타입 정의(.d.ts)를 찾지 못할 때 발생합니다.대표적인 원인은 다음과 같습니다:로컬/글로벌 TypeScript 버전 불일치IDE가 node_modules/typescript 대신 전역 ..

타입스크립트의 분배 규칙(distributive conditional types)은 조건부 타입(T extends U ? X : Y)을 정의할 때 제네릭 매개변수에 유니언 타입이 들어오면, 그 유니언 타입의 각 멤버에 대해 개별적으로 조건이 적용되는 동작을 말함. 1. 기본 개념type Example = T extends number ? 'num' : 'other';T가 제네릭이 아닌 고정된 타입이면 그대로 조건 판별:type A = Example; // 'num'type B = Example; // 'other'T가 유니언 타입이면, 각 멤버별로 조건을 적용한 후 결과를 다시 유니언으로 합침:type C = Example; // 처리 과정:// 1. number → 'num'// 2. string → ..

Partial Partial: T의 모든 속성을 옵셔널로 변경.type Partial = { [P in keyof T]?: T[P] };interface User { id: number; name: string }const u: Partial = { name: "Kim" }; // id 없어도 OK Pick Pick: T에서 K 속성만 추출.type Pick = { [P in K]: T[P] };type UserName = Pick; // { name: string } Omit, Exclude, Extract 타입 분석Omit: T에서 K 속성을 제거Exclude: T에서 U에 해당하는 타입 제거Extract: T에서 U에 해당하는 타입만 남김type UserWithoutId = Omit; // { na..

forEach, map 제네릭 분석TypeScript의 Array는 제네릭을 활용해 각 메서드의 매개변수 타입을 배열 요소 타입과 연결합니다.interface Array { forEach(callbackfn: (value: T, index: number, array: T[]) => void): void; map(callbackfn: (value: T, index: number, array: T[]) => U): U[];}T : 배열 요소 타입U : map 실행 결과 요소 타입 (콜백 반환값 타입)예시:[1, 2, 3].forEach((v) => console.log(v)); // v: numberconst lengths = ["a", "bb"].map(s => s.length); // lengths:..

1) 기본: 호출 시점에서 타입이 정해진다function first(arr: T[]): T { return arr[0];}const n = first([1, 2, 3]); // T = numberconst s = first(["a", "b"]); // T = stringconst x = first([10, 20]); // 명시적 지정 가능호출할 때 인자에 맞춰 T가 자동 추론되거나, 직접 지정할 수도 있음.2) T extends { ... } (객체 형태 제약)function getId(value: T): number { return value.id;}getId({ id: 1, name: "Kim" }); // OK// getId(123); // Error최소한 { id: number }..

1. class는 실제 JavaScript에서도 남아있음TypeScript의 class 문법은 단순히 타입 검사 전용이 아니라 실제 JavaScript 코드로 변환된 후에도 존재한다.class Person { name: string; constructor(name: string) { this.name = name; }}위 코드는 JavaScript로 컴파일되어도 여전히 class로 남는다.즉, 런타임에서도 Person은 실제 생성자 함수처럼 동작한다.반면 interface는 타입 검사 전용이므로 JS로 변환되면 사라진다. 2. 추상 클래스 (abstract class)abstract 키워드로 선언하는 클래스는 직접 인스턴스를 만들 수 없고 반드시 상속을 통해서만 사용할 수 있다.또한 추상 메서..

1. 클래스는 "값" + "타입" 두 가지 역할을 한다타입스크립트에서 class는 런타임에는 값(value)으로 존재하면서,동시에 타입 공간(type space)에서도 이름을 가진다.class A { a: string; b: number; constructor(a: string, b: number = 123) { this.a = a; this.b = b; } method() {}} 2. type AA = A여기서 A는 **클래스 A의 인스턴스 타입(instance type)**을 의미한다.type AA = A;즉, AA는 new A(...) 해서 만들어지는 객체가 어떤 모양을 가지는지 나타내는 타입이다. 3. const a: A = new A('123')여기서도 A는 인스턴스 타입이다..

1. readonlyReadonly는 타입의 모든 프로퍼티를 읽기 전용으로 만든다.즉, 값을 수정할 수 없게 한다.interface User { id: number; name: string;}const u: Readonly = { id: 1, name: "Kim"};u.id = 2; // ❌ 오류 발생 (읽기 전용)u.name = "Lee"; // ❌ 오류 발생Readonly는 타입 레벨에서만 적용된다.실제 JS 런타임에서는 값이 변하는 것을 막지 못한다. (Object.freeze 같은 것은 따로 사용해야 한다)2. 인덱스드 시그니처 (Indexed Signatures)인덱스드 시그니처는 **동적 키(key)**를 가지는 객체 타입을 정의할 때 사용한다.interface StringMap {..

이전에는 object와 Object가 혼용되어 혼란이 있었다.4.8 이후 object는 보다 좁은 타입으로, "객체만" 을 표현한다.반면 Object는 훨씬 넓은 타입으로, 원시값까지 포함하여 null과 undefined만 제외한다. TypeScript 4.8에서의 object 타입1. object 타입의 의미object 타입은 원시 타입(primitive) 을 제외한 모든 값을 의미한다.원시 타입에는 string, number, boolean, symbol, bigint, null, undefined 가 포함된다.따라서 object 타입에는 {}, 배열, 함수, new Date() 같은 값이 할당될 수 있다.let a: object;a = { x: 1 }; // 가능하다.a = [1, 2, 3]; ..