Front-End
-
[shadcn/ui] Dialog, Alert Dialog Component 구현기Front-End/React 2024. 5. 14. 14:07
🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이..
-
[React] Avatar Component 구현기Front-End/React 2024. 5. 9. 19:52
🍀 목차 Avatar Component에는 어떤 속성이 필요할까? Interface 구현기 UI 구현기 회고 Avatar Component에는 어떤 속성이 필요할까? Avatar Component는 사용자 또는 개체를 대표하는 이미지를 표시하는 데 사용된다. 예를 들어 프로필 이미지, 쇼핑 사이트의 상점 프로필 등이 포함된다. 다른 디자인 라이브러리를 보며 컴포넌트에 어떤 속성들이 필요할지 참고해 보자. (필수) radius, size, imageUrl, altText 가장 익숙한 형태의 기본 Avatar를 구현하려면 Border Radius와 size, 그리고 img 태그의 src 속성에 전달할 image의 url과 alt 속성에 전달할 대체 텍스트인 altText가 필요할 것으로 예상할 수..
-
[2024-W16] 공부 정리Front-End/ETC 2024. 4. 18. 00:18
🍀 목차class-variance-authoritytailwind-mergestorybook용어 tailwind CSS의 단점으로 꼽히며 css-in-js의 장점으로 꼽히는 동적 스타일링 도움을 주는 것들cn, twMerge, clsx, cva class-variance-authority문서shadcn/ui 설치 시 install 되는 tailwind의 동적 스타일링에 도움을 주는 라이브러리cva는 매우 작은 라이브러리, variant를 편하게 줄 수 있다. tailwind-mergeshadcn/ui 설치 시 install 되는 tailwind class들을 merge 시킬 때 도움을 주는 라이브러리shadcn/ui에서는 cn = clsx(조건부 렌더링에 도움) + twMerge메서드를 utils로..
-
[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..
