Front-End
-
[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..
-
[JavaScript] ReactivityFront-End/JavaScript 2024. 1. 19. 04:27
🍀 목차 글의 목적 Reactivity 사례 글의 목적 "React, Angular, Vue 같은 프론트엔드 프레임워크를 사용하려는 이유가 무엇인가?"에 대해서는 여러 이유가 나올 수 있다. 컴포넌트 기반으로 아키텍처를 구성하고 싶으므로, Vanilla JS로 개발하는 것보다 성능도 개선되어 있고 생산성도 높아지므로 등등... 이유 중 "Reactivity 때문"도 있을 수 있다. React, Vue와 같은 프론트엔드 프레임워크의 주요 이점 중 하나인 Reactivity는 무엇이고, 어떻게 적용되어 있을까? 해당 글은 추상적인 개념이었던 Reactivity를 조금이나마 이해해보기 위해 작성되었다. Reactivity Reactivity는 JavaScript 애플리케이션의 메모리에 있는 내용을 DOM에 H..
-
[WizSched] react-router-dom v6 Outlet 적용Front-End/Project 2024. 1. 11. 02:53
🍀 목차문제Outlet적용하기 문제 지금까지 프로젝트에서 Header가 고정된 레이아웃을 만들 때 app.tsx에서 Header를 선언하여 사용했었다. 이 구조를 다시 보니 라우팅을 관리하는 컨테이너와 UI 컴포넌트가 뒤섞여 있어 읽기 어렵다고 생각했다. 또한 프로젝트에 여러 API를 활용하기에 페이지마다 Header가 달라질 수 있다 판단했다. 그럴때마다 pathname을 이용해 조건문을 작성하여 렌더링 여부를 판단하기는 번거롭다고 느꼈다. 이를 어떻게 개선할 수 있을까 검색해 보다가 react-router-dom(v6)의 Outlet을 알게 되었다. Outlet Outlet은 중첩 라우트 구조에서 자식 라우트를 표시하는 데 사용된다. 부모 라우트의 특정 위치에서 자식 라우트를 렌더링 할 수..
-
[TypeScript] 타입(type)과 인터페이스(interface)의 차이점Front-End/TypeScript 2023. 12. 22. 23:45
🍀 목차 확장 새 필드 추가 사용 범위 Index Signature type으로만 선언 가능한 타입들 타입(type)과 인터페이스(interface)는 TypeScript에서 객체의 타입을 만드는 데 사용된다. type alias로는 객체 타입뿐 아니라 모든 유형의 타입을 만들 수 있는데, 이처럼 두 키워드의 특징과 차이점을 알아보자. 확장 type(교차 타입 사용) type Animal = { name: string sound: string } type BearFeature = { honey: boolean sound: string } type Bear = Animal & BearFeature; const bear:Bear = {name:"Pooh",sound:"kkao~",honey:true}; be..