국밥 개발자

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

비동기 작업을 수행하는 함수 정의하여 호출한다. 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..

Jest Test Provider 주입 하는 방법 1. render 시에 직접 주입한다. option으로 wrapper로 Provider를 주입한다. ex) gugbab.test.tsx import { render, screen } from "@testing-library/react"; ... test("gugbab1 상품 개수 증가후 가격 계산 테스트", async () => { render(, { wrapper: OrderContextProvider }); ... } 2. customRender를 사용한다. Provider를 주입 받는 util render를 만들어 해당 render를 사용 ex) render-utils import { render } from "@testing-library/reac..

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

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

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에서 오픈 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..