분류 전체보기
-
[Type-challenges] 531, 599, 612, 645, 949Front-End/TypeScript 2024. 4. 6. 06:20
🍀 목차531 - String to Union599 - Merge612 - KebabCase645 - Diff949 - AnyOf 531 - String to Union// 문자열 인수를 입력받는 String to Union 유형을 구현하세요. // 출력은 입력 문자열의 Union type이어야 합니다.// 예시type Test = "123"type Result = StringToUnion // expected to be "1" | "2" | "3"/* _____________ 여기에 코드 입력 _____________ */type StringToUnion = any/* _____________ 테스트 케이스 _____________ */import type { Equal, Expect } from ..
-
[WizSched] QueryErrorResetBoundary 적용, 에러 처리Front-End/Project 2024. 4. 2. 22:46
🍀 목차설계QueryErrorResetBoundary?구현 설계 개발하며 마주친 401, 403 등의 에러들을 어떻게 처리할지 고민했다. 사용자 입장에서 어떤 에러가 발생했는지 알 수 있게 최대한 상수화해 보자는 생각이 들었다. 작성은 Google Calendar 가이드 API 오류 처리 항목을 참고했다. 401, 403 에러인 경우 재로그인을 해야 하므로 redirect 변수를 true로 주었다. const ERRORS: ErrorMap = { 400: { message: '잘못된 요청입니다.💦', redirectState: { redirect: false, }, }, 401: { message: '잘못된 인증 정보입니다. 재로그인 해주세요.💦', ..
-
[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 사용한 메서드들은 아..