programming (124) 썸네일형 리스트형 Frontend 관점 HTTP 응답 상태 코드(RESTful API) * 케이스를 마주할 때마다 업데이트 할 예정 Frontend 에서 처리하기 용이하면서도 RESTful API 관점을 잃지 않고 HTTP 응답 상태 코드를 어떻게 약속할지에 대한 생각과 의견이다. 상태 코드 Case 1. GET 조회 시 빈 데이터 - customer/order/{userId} : userId 에 해당하는 order 리스트를 조회했는데, 해당 유저의 오더 건이 없는 경우 - product?word={text} : 쿼리로 조회시 검색 결과가 없는 경우 [응답] status : 200 response : { result : true, data: [] } [추가 고려사항] - result : true / false 의 용도를 어떻게 정의해야 하는가? - 사실상 result : false 인 케이.. [immer] Array for문 돌리면서 연속적인 setState 안되는 이슈 setState 업데이트는 async 작업이다 연속적으로 빠르게 도는 경우 모든 update를 보장할 수 없다 immer 의 produce 함수 안에서 필요한 내용을 만들어서 setState 한다→ Functional update form of the state setter Bad Case // 1. MLList 필터링 & 인덱스 찾기 const targetIdxList = checkedProductId.map((item) => { return productListData[productPackageIdx].MLList.findIndex((el) => el.productId === item); }); // 2. 인덱스 맵 돌려서 값 변경 targetIdxList.forEach((itemIdx) => { i.. [React Custom Hook] 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) (useDeleteUrlParamsWhenManualRefresh) 1. 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) 로컬스토리지와 beforeunload 이벤트 사용 input 삭제할 url parms key list 참조 How to detect refresh event in browser ReactJS Window: beforeunload event React | How to detect Page Refresh (F5) useDeleteUrlParamsWhenManualRefresh.ts 코드 // input 삭제할 url parms key list import { useEffect } from "react"; import { useSearchParams } from "react-router-dom"; expor.. [React Custom Hook] Form 의 required field 확인하는 hook (useFormValidation) 1. Form 의 required field 확인하는 hook input fromRef: 타겟 Form element formDataState : 관리되는 form 데이터 state submitFlag : 제출 버튼 눌렀는지 여부 output isFormValidated : validation 통과 되었는지 boolean useFormValidation.ts 코드 import { useEffect, useState } from "react"; // input : formRef, 제출할 formData, submitFlag // output : 통과 여부 export const useFormValidation = ({ formRef, formDataState, submitFlag }) => { const .. [React Custom Hook] Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook (useResizeBreakpoints) 1. Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook input : 없음 output breakpoints : up / down 메소드를 가지고 있는 객체 useResizeBreakpoints.ts 코드 import { useState, useEffect } from "react"; interface GridBreakpoints { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; } interface Breakpoints { up: (bp: keyof GridBreakpoints) => boolean; down: (bp: keyof GridBrea.. [React Custom Hook] 타겟 element 가 viewport 안에 보이는지 판단하는 hook (useVisibilityObserver) 1. 타겟 element 가 viewport 안에 보이는지 판단하는 hook input element: 관찰하고자 하는 타겟 element React.ref rootMargin : 관찰 타겟 주위의 여백, new IntersectionObserver() 생성자에, option 으로 들어가는 값. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 기본값은 0. 타겟 주변의 여백도 포함해서, 그 여백까지 타겟으로 보고, viewport 에서 사라졌는지 판단함. IntersectionObserver.option.rootMargin 더보기 output isVisible : 해당 타겟이 현재 viewport 안에 보이는지 여부 boolean. obser.. [React Custom Hook] async 로 Mock Data 제공하는 hook (useFakeFetch) 1. async 로 Mock Data 제공하는 hook input resolvedData: 제공할 mock data waitingTime : setTimeout 기다리는 시간, 몇 초 후 리턴 output { loading, setLoading, data, setData } : 로딩, 리턴받는 데이터 state useFakeFetch.ts 코드 import { useEffect, useState } from "react"; interface FakeFetchResult { loading: boolean; setLoading: React.Dispatch; data: T[]; setData: React.Dispatch; } const useFakeFetch = (resolvedData: T[], waitin.. useQuery enable (false) 비활성화 일때 isLoading = true 인 이슈 useQuery 를 사용하면서 특정 조건에 따라서 query 를 실행/미실행 하려고 한다 const { data, error, isLoading } = useQuery( ["test", "detail", id], () => getDetail({ id }), {enabled: !!id} ) id가 있을 때만 query 요청하기 조건 기준이 되는 값은 반드시 queryKey 에 포함이 되어있어야 enabled 가 작동된다 id 가 없어서 query 요청을 안하는 경우인데도 isLoading = true 로 설정되어, 로딩 스피너가 계속 돌았다. 이에 대한 해결책은 react-query v4에서 isInitialLoading이라는 새로운 인자를 반환해준다. react-query 공식 문서에서 isInitial.. useEffect 마운트 되었을때는 실행하지 않고, dependancies 가 실제로 변경된 경우에만 실행 시키기 // 최초 마운트시 실행 되지 않고, dependencies 가 실제 변경된 경우에만 실행 const didMount = useRef(false); useEffect(() => { if (didMount.current) { setValue("connectProductId", null); } else didMount.current = true; }, [watch("countryId")]); blob/json 형태로 리턴받은 데이터를 엑셀 파일로 추출하기(Get 방식 /Post 방식) 목적 : 테이블 데이터를 엑셀로 Export 방법1) 프론트에서 처리 -> UI 상 보여지는 테이블 데이터를 그대로 엑셀 추출 방법2) 백엔드에서 처리 -> 프론트에서 가공되지 않은 원본 데이터를 추출 1. 프론트 처리 엑셀 처리를 위한 라이브러리 사용 https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4148 other projects in the npm registry using xlsx... 이전 1 2 3 4 5 6 ··· 13 다음
