React/TypeScript

React Typescript Interface Tuple Generic

💡 공식 문서에서 Tuple 타입은 Interface가 아닌 Type으로 선언하여 사용을 추천하지만 Interface로 사용하는 방법에 대한 궁금점을 해소하기 위해 작성한다. * Tuple 타입은 Type으로 선언하여 사용하길 바랍니다. Tuple을 Interface가 아닌 Type으로 선언해 사용하는 이유 인터페이스(Interface)는 객체 타입을 정의 혹은 상속, 확장하여 사용할 수 있어 사용을 추천하지만 타입(Type)처럼 원시 타입 및 튜플 타입을 정의할 수 없습니다. 하지만 아래의 사용법과 같은 방법으로 사용은 할 수 있습니다. Documentation - Advanced Types Advanced concepts around types in TypeScript www.typescriptlan..

React RichTextEditor Image Upload - reactQuill

💡 RichTextEditor에서 이미지 사용 시 내부에 base64로 이미지가 올라가게 되는데 이는 너무 긴 문자열을 사용하기 때문에 이미지가 여러장 올라간다면 더 큰 문제를 야기할 것이다. 그러므로 이미지를 먼저 서버에 올리고 그 주소를 반환받아 이미지 태그로 사용하는 방식을 채택했다. react-quill The Quill rich-text editor as a React component.. Latest version: 2.0.0, last published: 2 years ago. Start using react-quill in your project by running `npm i react-quill`. There are 806 other projects in the npm registry ..

React TypeScript useInfiniteQuery Infinite Scroll

ReactQuery TanStack useInfiniteQuery fetchNextPage 다음 페이지 호출 fetchPreviousPage 이전 페이지 호출 hasNextPage 다음 페이지 존재 여부 hasPreviousPage 이전 페이지 존재 여부 isFetchingNextPage 다음 페이지 불러오는중 인지 isFetchingPreviousPage 이전 페이지 불러오는중 인지 queryKey 쿼리 고유 식별자(캐시, 상태관리) queryFn 데이터 가져오는 함수로 페이지 파라미터를 인자 받음 initialPageParam 초기 페이지 파라미터 설정 …options 추가적인 옵션 전달 getNextPageParam 다음 페이지 이동 시 페이지 파라미터를 반환 getPreviousPageParam ..

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..