김기지의 코딩노트

✏️ 투두 다이어리 📝투두와 다이어리를 함께 관리해요✨ 🔗 배포 링크 : https://project-todo-diary.web.app/ TodoDiary project-todo-diary.web.app 🔗 Github 저장소: https://github.com/kijiwon/todo_diary GitHub - kijiwon/todo_diary Contribute to kijiwon/todo_diary development by creating an account on GitHub. github.com (프로젝트를 진행하면서 새로 알게 된 부분 정리하는 글..) ✏️ Redux - Toolkit 이번 프로젝트에서 처음으로 Redux-Toolkit을 사용해 상태 관리를 진행했다! 📍 Redux-Toolki..

🐰 유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 🐰 조건부 타입 기반의 유틸리티 타입 1. Exclude exclude 제거하다, 추방하다 T에서 U를 제거하는 유틸리티 타입 type A = Exclude // 타입 A는 string| boolean에서 boolean 타입을 제거한 타입 // => string 타입 타입 A는 string | boolean 타입에서 boolean 타입을 제거한 타입을 갖는다. 따라서 타입 A는 string 타입이 된다. Exclude 직접 구현하기 // Exclude 직접 구현하기 type Exclude = T extends U? never : T; // 타입 Exclude는 타입 변수 ..

🐰 유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 🐰 맵드 타입 기반의 유틸리티 타입 1. Partial partial 부분적인, 일부분의 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환하는 타입 interface Post { title: string; tag: string[]; content: string; thumbnailURL?: string; } const draft: Partial = { title: '제목 나중에 짓자', content: '초안...', } 타입 Post는 thumbnailURL 프로퍼티를 제외한 다른 프로퍼티는 선택적 프로퍼티가 아니다. 하지만 변수 draft는 Partial 유틸리티..

목차 🐶 infer inference 추론하다 조건부 타입 내에서 특정 타입을 추론하는 문법 특정 함수 타입에서 반환값의 타입만 추출하는 특수한 조건부 타입을 만들 때 이용한다. type FuncA= () => string; type FuncB = () => number; // 조건부 타입 type ReturnType = T extends () => infer R? R : never; // infer R -> 조건식을 참으로 만드는 타입을 추론하도록 동작 // () => string 일 때 R = string // () => number 일 때 R = number type A = ReturnType; // string type B = ReturnType; // number type C = ReturnTy..

🐶 분산적인 조건부 타입 유니온 타입과 함께 사용할 때 조건부 타입이 분산적으로 동작하는 문법 type StringNumberSwitch = T extends number? string : number; let a: StringNumberSwitch; // string let b: StringNumberSwitch; // number let c: StringNumberSwitch; // string | number // T는 number 타입의 슈퍼타입이 됨 -> 거짓이 되므로 number 타입이 되어야함 // 하지만 c는 string | number 유니온 타입이 됨 a는 number 타입의 인자를 넘김 -> 조건이 참이므로 string 타입 b는 string 타입의 인자를 넘김 -> 조건이 거짓이므로..

🐶 조건부 타입 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 결정하는 문법 type A = number extends string? string : number; // numebr는 string를 확장하는 타입(서브타입)이 아님 -> number 타입으로 정의 number extends string? 조건이 참이라면 string 타입으로 설정 조건이 거짓이라면 number 타입으로 설정 number 타입은 string 타입의 서브 타입이 아니므로 타입 A는 number타입이 된다. type ObjA = { a: number; } type ObjB = { a: number; b: number; } type B = ObjB extends ObjA? number : string; // ..

🐾 타입 조작 🐾 템플릿 리터럴 타입 string literal 타입을 기반으로 특정 패턴을 갖는 문자열 타입을 만드는 기능 type Color = 'red' | 'black' | 'green'; type Animal = 'dog' | 'cat' | 'chicken'; 위 두 코드를 혼합하여 색과 동물을 만들어 내는 타입을 만든다고 가정하자. type ColoredAnimal = `red-dog` | 'red-cat' | 'red-chicken' | 'black-dog' ... ; ColoredAnimal은 Color와 Animal을 조합해 만들 수 있는 모든 가지수의 string literal 타입으로 이루어진 union 타입이다. 여기서 Color나 Animal 타입에 string literal 타입..

🐾 타입 조작 🐾 맵드 타입 기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 타입 조작 기능 interface User { id: number; name: string; age: number; } // 한 명의 유저 정보를 불러오는 기능 function fetchUser(): User{ return { id: 1, name: '기지', age: 27, } } // 한 명의 유저 정보를 수정하는 기능 function updateUser(user: User){ // 수정하는 기능 } 유저 정보를 관리하는 프로그램의 일부를 만든다고 가정하자. 유저 정보가 서버에 저장되어 있다고 가정하고, 한 명의 유저 정보를 불러오는 기능을 하는 함수를 만들었다. 또, 한 명의 유저 정보를 수정하는 기능을 만들어 준다..

🐾 타입 조작 🐾 keyof 연산자 객체 타입으로부터 프로퍼티의 모든 key들을 string literal union 타입으로 추출하는 연산자 interface Person { name: string; age: number; } function getPropertyKey(person: Person, key: 'name' | 'age'){ return person[key]; } const person: Person = { name: '기지', age: 27, }; getPropertyKey(person, 'name'); 위처럼 person의 프로퍼티를 꺼내 반환하는 함수를 만든 경우, Person 타입에 새로운 프로퍼티가 추가되거나 수정된다면 이 타입도 계속 수정을 해야한다. 하지만 keyof 연산자를 이..

🐾 타입 조작 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능 제네릭 또한 타입을 조작하는 기능에 포함이 된다. 🐾 인덱스드 엑세스 타입 인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입 1. 객체 프로퍼티의 타입 추출 interface Post { title: string; content: string; author: { id: number; name: string; age: number; }; } const post:Post = { title: '게시글 제목', content: '게시글 본문', author: { id: 1, name: '기지', age: 27, }, }; 게시글을 표현하는 객체 타입 Post를 ..