Front-End
-
[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..
-
[WizSched] Google Calendar API 테스트Front-End/Project 2024. 2. 7. 11:14
🍀 목차Axios 설치설정테스트 메인 페이지의 캘린더 섹션에서는 현재 사용자의 월(月:Month) 캘린더를 보여주도록 기획했다. 이번 글에서는 Axios를 사용해서 Google Calendar API를 테스트해 보고 데이터가 성공적으로 넘어오는지 확인해 본다. Axios 설치 Google Calendar API와 통신하기 위해 HTTP 통신 라이브러리인 axios를 설치한다. Promise 기반의 HTTP 클라이언트로 다양한 브라우저(Fetch와 달리 IE도 지원)를 지원한다. axios 추가 라이브러리를 설치해야 한다. npm install axiosyarn add axios fetch(resource)fetch(resource, options)// options -> method, heade..
-
[WizSched] Supabase onAuthStateChange 활용하기Front-End/Project 2024. 2. 2. 16:22
🍀 목차문제onAuthStateChange?정리Session구현 문제 OAuth를 통해 유저로그인을 하는 코드는 아래와 같았다. const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github'}) 그런데 이 signInWithOAuth 메서드는 redirect를 유발하고, 해당 코드가 성공하는 순간 작성된 redirect URL로 이동한다. 이 사실을 알지 못하고 해당 코드 아래에 data가 있으면 유저 상태를 변경하는 로직을 작성했고, 그 유저 상태에는 NULL만 들어가게 되었다. 공식 문서를 부분적으로 읽다 보니 제대로 이해하지 못하고 작성하여 발생한 문제 같다. Supabase의 auth는 onAuthState..
-
[WizSched] Supabase와 Google OAuth를 이용한 로그인 구현Front-End/Project 2024. 1. 26. 06:14
🍀 목차Supabase 설정OAuth 기본Google Cloud Platform 설정로그인 구현 Supabase 설정 우선 supabse를 설치한다. yarn add @supabase/supabase-js 인증 시스템에는 두 부분이 있다.Authentication(인증) : 특정 사용자의 신원을 확인한다. 이 사람을 허용해야 하는가? 그렇다면, 누구인가?Authorization(인가) : 특정 사용자가 특정 자원에 접근하거나 사용할 수 있는 권한을 부여한다. 들어가면, 무엇을 할 수 있는가? 사용자의 신원을 확인하여 인증하고 로그인하면, 인가를 통해 특정 자원에 대한 권한 부여 및 관리를 하게 된다. Authentication인증 또한 여러 방법이 있다.email, phone, passwor..
