전체 글
-
[Type-challenges] 296, 298, 459, 527, 529Front-End/TypeScript 2024. 3. 30. 05:29
🍀 목차296 - Permutation298 - Length of String459 - Flatten527 - Append to object529 - Absolute 296 - Permutation// 주어진 유니언 타입을 순열 배열로 바꾸는 Permutation 타입을 구현하세요.// 예시type perm = Permutation; // ['A', 'B', 'C'] | ['A', 'C', 'B'] | ['B', 'A', 'C'] | ['B', 'C', 'A'] | ['C', 'A', 'B'] | ['C', 'B', 'A'] /* _____________ 여기에 코드 입력 _____________ */type Permutation = any/* _____________ 테스트 케이스 ________..
-
[WizSched] TanStack Query v5를 적용하여 Google CalendarList 받아오기Front-End/Project 2024. 3. 27. 11:47
🍀 목차CalendarList API왜 react-query(TanStack Query)를 적용했는가3 Core Concepts of React Query적용하기 CalendarList API 문서GET https://www.googleapis.com/calendar/v3/users/me/calendarList CalendarList API는 사용자의 캘린더 목록에 있는 캘린더를 반환한다. 기본 캘린더(Primary Calendar)는 단일 사용자 계정과 관련된 특별한 유형의 캘린더이다. 사용자 계정마다 자동으로 생성, ID는 일반적으로 사용자의 기본 이메일 주소와 일치한다. 이 기본 캘린더는 삭제하거나 사용자가 소유 해제할 수 없다. 하지만 다른 사용자와 공유할 수는 있다. 기본 캘린더 외에도 ..
-
[Type-challenges] 108, 110, 116, 119, 191Front-End/TypeScript 2024. 3. 15. 14:12
🍀 목차108 - Trim110 - Capitalize116 - Replace119 - ReplaceAll191 - Append Argument 108 - Trim// 정확한 문자열 타입이고 양쪽 끝의 공백이 제거된 새 문자열을 반환하는 Trim를 구현하십시오.// 예시type trimmed = Trim // 기대되는 결과는 'Hello World'입니다./* _____________ 여기에 코드 입력 _____________ */type Trim = any/* _____________ 테스트 케이스 _____________ */import type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect, 'str'>>, Expe..
-
[Type-challenges] 15, 16, 20, 62, 106Front-End/TypeScript 2024. 3. 8. 14:23
🍀 목차15 - Last of Array16 - Pop20 - Promise.all62 - Type Lookup106 - Trim Left 15 - Last of Array// 이 챌린지에는 TypeScript 4.0 사용이 권장됩니다.// 배열 T를 사용하고 마지막 요소를 반환하는 제네릭 Last를 구현합니다.// 예시type arr1 = ['a', 'b', 'c']type arr2 = [3, 2, 1]type tail1 = Last // expected to be 'c'type tail2 = Last // expected to be 1/* _____________ 여기에 코드 입력 _____________ */type Last = any/* _____________ 테스트 케이스 ________..
-
[Type-challenges] 3, 8, 9, 10, 12Front-End/TypeScript 2024. 3. 2. 09:51
🍀 목차3 - Omit8 - Readonly 29 - Deep Readonly10 - Tuple to Union12 - Chainable Options 3 - Omit// T에서 K 프로퍼티만 제거해 새로운 오브젝트 타입을 만드는 // 내장 제네릭 Omit를 이를 사용하지 않고 구현하세요.// 예시interface Todo { title: string description: string completed: boolean}type TodoPreview = MyOmitconst todo: TodoPreview = { completed: false,} /* _____________ 여기에 코드 입력 _____________ */type MyOmit = any/* _____________ 테스트 케..
-
[WizSched] Calendar 컴포넌트 - 날짜 이동 기능Front-End/Project 2024. 2. 28. 14:40
🍀 목차목표date-fns기능 구현디자인 구현최종 완성 GIF 목표현재 월에 대한 캘린더를 보여준다.월을 이동할 수 있다.그 외 추가 디자인(오늘임을 확인할 수 있는 color 표시, 전월과 익월 날짜 스타일링)등 date-fns 아무런 라이브러리를 사용하지 않고 구현하고 싶었지만, 목표 기간이 있기에 Date 객체를 다루며 마주칠 에러들을 모두 방지하며 완성하기엔 무리가 있어 보여 라이브러리의 도움을 받기로 했다. 그중에서도 date-fns는 필요한 기능만 가져올 수 있고, TypeScript 지원, 날짜 변경 시 불변성을 지키며 새로운 객체를 반환해 주는 점, 필요로 했던 기능이 모두 있던 점 등을 매력적으로 느껴 선택하게 되었다. // 설치yarn add date-fns 사용한 메서드들은 아..
-
[Type-challenges] 18, 43, 189, 268, 533, 898, 3057, 3060, 3312, 2Front-End/TypeScript 2024. 2. 23. 14:57
🍀 목차18 - Length of Tuple43 - Exclude189 - Awaited268 - If 533 - Concat898 - Includes3057 - Push 3060 - Unshift 3312 - Parameters2 - Get Return Type 18 - Length of Tuple// 배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요.// 예시type tesla = ['tesla', 'model 3', 'model X', 'model Y']type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT']type teslaLength = Length // expected 4ty..
-
[Type-challenges] 13, 4, 7, 11, 14Front-End/TypeScript 2024. 2. 16. 11:57
🍀 목차13 - Hello World4 - Pick7 - Readonly11 - Tuple to Object14 - First of Array 13 - Hello World// string이 되어야 합니다.type HelloWorld = any// 아래의 테스트가 통과하도록 만드세요.type test = Expect> /* _____________ 여기에 코드 입력 _____________ */type HelloWorld = any // expected to be a string/* _____________ 테스트 케이스 _____________ */import type { Equal, Expect, NotAny } from '@type-challenges/utils'type cases = [ Ex..
