React

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

Yarn 4.0 Update .yarnrc.yml npmRegistryServer 설정

💡 yarn 3.0에서 4.0 업데이트 이후 Nexus Repository or Npm Repository에서 dependency 설치하는 방법을 다루었습니다. Error Route 업데이트 이후 빌드가 되지 않는 상황 This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile 의존성 설치 중 내가 설정한 Repository가 아닌 yarnpkg 에서 찾는 상황 ➤ YN0000: · Yarn 4.0.2 ➤ YN0000: ┌ Resolution step ➤ YN0035: │ create-ui@npm:^0.1.70: Package not found ➤ YN0035: │ Response Co..

[vite] Rollup failed to resolve import react-icons

에러 상황 React 로컬에서 react-icons를 import 할 때 아래와 같이 작성해도 문제없이 사용 가능하다. 하지만 어딘가에서 Build 후 올릴 때 Rollup Build error가 나타난다. import { MdSearch } from "react-icons/all"; import { MdSearch } from "react-icons/Md"; vercel deployment react-icons build error docker build error ... [18:00:00.935] `build.rollupOptions.external`[39m [18:00:00.935] [31merror during build: [18:00:00.936] Error: [vite]: Rollup fail..

Yarn StoryBook 실행 Error #22431

에러 내용 /Projects/node_modules/wide-align/align.js:2 var stringWidth = require('string-width') ^ Error [ERR_REQUIRE_ESM]: require() of ES Module /Projects/node_modules/string-width/index.js from /Projects/node_modules/wide-align/align.js not supported. Instead change the require of index.js in /Projects/FPV/nextmission/node_modules/wide-align/align.js to a dynamic import() which is available in al..

useEffect no dependency

💡의존성 배열 전달 안할 시 모든 상황에서 실행되기에 불필요한 상황에서 실행될 가능성이 농후하므로 일반적으로 의존성 배열을 지정한다. 매개변수 / 의존성 컴포넌트가 DOM에 추가되면 실행되는 셋업 함수 컴포넌트가 DOM에 제거되면 실행되는 클린업 함수 (+의존성이 변경 되어 리렌더링 할 때) 셋업 함수 내 참조된 모든 변수와 함수로 의존성 변경시 리렌더링 과정을 거친다. useEffect(() => { //셋업 함수부 console.log('setup'); return () => { //클린업 함수부 console.log('cleanup'); } }, [의존성...]); useEffect 로직 기본 기본 컴포넌트 추가 > 셋업 함수 클린업 함수 추가 컴포넌트 추가 > 셋업 함수 > 컴포넌트 제거 > 클린..

React Javascript WebSocket - Server 포함

ws 프로토콜 기반으로 클라이언트와 서버 사이에 지속적인 양방향 연결 스트림을 만들어 주는 기술 WebSocket 연결 브라우저에서 WebSocket 제공 시간이 걸리니 useEffect 내에서 연결 WebScoket은 꼭 전역변수로 사용 const ws = useRef(null); useEffect(() => webSocketLogin(), []); const webSocketLogin = useCallback(() => { // 웹소켓 연결 ws.current = new WebSocket('ws://localhost:8080/socket/chat'); // 메세지 받으면 행동 ws.current.onmessage = message => setSocketData(JSON.parse(message.dat..