react typescript

React TypeScript Zustand Infinite Scroll with IntersectionObserver

💡 기존 식상한 페이지 처리를 유튜브 댓글과 비슷하게 무한 스크롤로 구현하였고 이는 오직 Zustand 와 IntersectionObserver를 사용하였습니다. Zustand Setting 댓글 리스트를 관리할 개체들과 요청에 대한 플래그들을 선언했습니다. 이미 댓글을 불러오는 중 혹은 다음에 불러올 댓글 리스트가 없다면 요청을 멈춰야 합니다. 또한 전역으로 상태를 관리하기 때문에 페이지가 옮겨졌을 때 댓글 리스트를 비워야 함으로 다음과 같은 Store가 만들어집니다. import { create } from 'zustand'; import { APICommentType, BoardCommentType } from '../type/BoardType.ts'; import { client } from '...

React Axios TypeScript with JWT Boilerplate

💡 Axios 메소드들의 타입 설정과 인스턴스 기본 설정 그리고 토큰 만료 시 재발급 로직에 대해 작성하였습니다. Axios Type Setting interface CustomInstance extends AxiosInstance { get(...params: Parameters): Promise; delete(...params: Parameters): Promise; post(...params: Parameters): Promise; put(...params: Parameters): Promise; patch(...params: Parameters): Promise; } Create Axios 새로운 Axios 인스턴스를 client 이름으로 생성하고 호출되는 URL 앞에 고정적으로 붙는 BaseUR..

React TypeSciprt - Community Project

Interface Extends 중복되는 타입이 있을 경우 사용했다. export interface GetResponse { responseMessage?: string; statusCode?: number; } export interface UserMainInfo extends GetResponse { cityName: string; findLatestBoardCommentsByUserDtos?: CommentType[]; findLatestBoardsByUserDtos?: BoardType[]; nickname: string; point: number; profileImg: string | undefined; userId: string; zoneName: string; } export interfac..