react 10

[React] 'react-virtuoso' Windowing 최적화하기 (스크롤 성능개선, 뒤로가기 처리)

Windowing의 개념Windowing은 가상화 기법의 일종으로, 대량의 데이터를 렌더링 할 때 성능을 최적화하기 위해 사용되는 방법 중 하나이다.화면 전체를 한 번에 렌더링 하는 대신, 화면에 보이는 영역과 오버스캔 영역만 렌더링 한다.주로 리스트나 테이블에서 수천 개 이상의 아이템을 렌더링해야 할 때 사용되며, 화면에 보이는 항목들만 렌더링 하고 사용자가 스크롤할 때 새로운 항목을 점진적으로 렌더링 하는 방식이다. 이 과정에서 보이지 않는 항목은 메모리와 DOM에서 제외되어 성능이 최적화된다. Windowing 장점수천 개의 리스트 아이템을 한 번에 렌더링 하지 않고, 화면에 보이는 부분만 렌더링 하므로 DOM 크기가 줄어들어 렌더링 성능과 초기 로딩 속도가 크게 개선된다. Windowing 단점사..

React 2024.09.28

[Error]React - DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

React를 프로젝트를 진행하며 페이지 이동시 아래 에러 발생 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 에러 발생 소스 ex) {data &&()} 에러 발생 원인 조건부 랜더링시 react에서 ins태그를 node로 인식하지 못함 해결 방법 react에서 node로 인식 할 수 있는 태그로 감싸줌 ex) {data &&()}

Error 2024.01.18

[React] useEffect 내부에서 비동기 처리하기

비동기 작업을 수행하는 함수 정의하여 호출한다. ex1) useEffect 내부에서 비동기 처리할 함수 생성후 호출 useEffect(() => { (async () => { const checkStep = await accessStepCheck(); if (checkStep === 'NONE') { setIsStepLoading(true); return; } accessMove(checkStep); })(); }, []); ex2) useEffect에서 비동기 처리할 함수 호출 const accessCheckAndMove = async () => { const checkStep = await accessStepCheck(); if (checkStep === 'NONE') { setIsStepLoadin..

React 2023.08.13

[React] Sentry란? React+Sentry - Error Monitoring Example

https://sentry.io/welcome/ Application Performance Monitoring & Error Tracking Software Self-hosted and cloud-based application performance monitoring & error tracking that helps software teams see clearer, solve quicker, & learn continuously. sentry.io Sentry 오류 및 이슈 모니터링 및 오길 플랫폼 실시간으로 소프트웨어의 문제를 감지하고 해결할 수 있도록 도와주는 서비스 주요 기능 소프트웨어에서 발생하는 오류와 예외 사황을 모니터링하고 수집하여 실시간으로 알려준다. 사용자가 정의한 이벤트를 로깅하여 어..

FrontEnd 2023.07.30

[React] Mock Server Work Create Use Example

import "@testing-library/jest-dom"; import { server } from "./mocks/server"; // 모든 테스트 서버를 생성 beforeAll(() => server.listen()); // 테스트 이후에 핸들러 초기화 afterEach(() => server.resetHandlers()); // 테스트 이후에 서버 종료 afterAll(() => server.close()); Mock Server 실제 서버와 유사한 동작을 하는 가짜 서버이다. 서버를 향한 네트워크 요청을 가로채서 모의 응답을 내려주는 역할을 한다. Msw 설치 npm install msw api handler 생성 ex) handlers.tsx import { rest } from "msw"..

React 2023.06.02

[Jest] React -Jest Qeury getBy,queryBy,findBy Example

Jest Start https://puk0806.tistory.com/67 참고 : https://github.com/testing-library/jest-dom GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM :owl: Custom jest matchers to test the state of the DOM - GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM github.com getBy... 쿼리에 대한 일치하는 노드르 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 오류를 발생시킨다...

React 2023.05.29

[Jest] React Testing Library Jest란? Jest Start

React Testing Library React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다. Dom Testing Libarary : Dom 노드를 테스트하기 위한 매우 가벼운 솔루션 React Testing Library 설치 npm install --save-dev @testing-library/react Jest FaceBook에 의해서 만들어진 테스팅 프레임 워크 최소한의 설정으로 동작한다. Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인한다. Jest 설치 // Jest 설치 npm install jest // Jest 테스트에 유용한 Extentions설치 npm install eslint-plugin-testing-libra..

React 2023.05.28

[React] react-hock-form 란? react-hock-form+yup : validation check Example

react-hock-form React에서 form의 validation 체크를 도와주는 라이브러리 불필요한 렌더링을 줄여준다. 코드가 단순해서 생상성이 증가한다. yup react-hock-form이랑 함께 사용 가능한 validation 라이브러리 react-hock-form, yup 설치 npm install react-hook-form npm install yup react-hock-from + yup 사용 예 FormProvider로 react-hock-form을 사용할 영역을 감싸준다. yup을 통해 validation을 체크할 yupResolver 객체를 생성 useform register : react-hock-form과 연결할 때 사용한다. watch : react-hock-form의 변..

React 2023.05.26

[React] Zustand 란? 사용법 State 상태 관리

Zustand 상태 관리 라이브러리 보일러 플레이트가 거의 없다. 다른 상태 관리 라이브러리 보다 사용이 쉽다. Debugging도 용의하다. ex) Redux Devtools Zustand 설치 npm install zustand yarn install zustand Zustand 생성 - 예시 로그인 에러 정보를 담는 zustand import create from 'zustand'; export type CodeEnumsMemberType = 'ANY' | 'CORPORATION' | 'FRANCHISE' | 'NONE' | 'PERSONAL'; export type SocialLoginType = 'APPLE' | 'FACEBOOK' | 'GOOGLE' | 'KAKAO' | 'NAVER' |..

React 2023.04.18

[React] APP 오픈 API CORS에러 NAVER geocode API

React에서 오픈 API 사용시 CORS에러 이유 ex) 클라이어트에서 외부 API서버로 바로 요청을 보내서 해결 방법 client to server 찌르는게 아니라 server to server로 Middleware를 통해서 찌른다. 예시 코드 Naver API geocode 사용 Next 서버르 통해서 통신 https://api.ncloud-docs.com/docs/ai-naver-mapsgeocoding-geocode geocode api.ncloud-docs.com next로 통실한 함수 생성 import axios from 'axios'; import { NextApiRequest, NextApiResponse } from 'next'; const NEXT_PUBLIC_NAVER_MAP_API..

React 2023.04.08