분류 전체보기 (204) 썸네일형 리스트형 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... Next font 실전의 모든것 (local font 적용(Pretendard)/ google-font 적용/ i18n 으로 global font 변경 / 특정 element 만 font 변경) About next/font를 활용한 웹폰트 성능 최적화 ▶️ next/font 의 핵심 기능 1. 폰트 로딩시간 단축 cdn 폰트 사용하는 경우(ex. Google-font) 빌드 타임에 폰트를 다운로드 브라우저단에서 폰트 cdn 으로 요청하지 않음 로컬 폰트 사용하는 경우 자동으로 self-host on Our Next.js server https://localhost:3000/_next/static/media/1asdfisdfjsdflsdji.p.woff2 2. Fallback 폰트가 layout shift 를 발생시키지 않도록 함 Layout shift 폰트 변경에 의해 레이아웃이 변경되는 경우(UX 불편) CSS size-adjust 속성을 사용하면 layout shift 없이 로드가능 adju.. axios GET array params [] 없이 날리기 (axios paramsSerializer 세팅), nullish data 인 경우 날리지 않기(null, undefined 처리) [AS-IS] GET 요청에 params로 array 를 보냈더니 이렇게 갔다 Network payload 탭 Request URL http://myapi.com/order?status[]=Confirmed&status[]=ReqShipping&status[]=Allocation&status[]=Packed [TO-BE] API 서버에서 원하는 형식은 다음과 같다 http://myapi.com/order?status=Confirmed&status=ReqShipping&status=Allocation&status=Packed [TO-DO] 1. qs 라이브러리 설치 query string 관련 형식 맞추기 편리하게 함수 제공하는 라이브러리임 https://www.npmjs.com/package/qs npm.. Debounce + MultiSelect + Async Select (react-select) // debounce export const debounce = (func, delay) => { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func(...args); }, delay); }; }; // debounce export function debounceAsync(func, wait) { let timeout; return async function (...args) { const context = this; return new Promise((resolve) => { clearTimeout(timeout); timeout = setTimeout(async () .. 무한 스크롤 구현기(React, Scrollevent, Throttle, Intersection Observer API) 목표 : React 에서 무한 스크롤 구현하기 (Infinity Scroll in React) 여정 : scroll Event Listener -> Throttle 로 최적화 -> Intersection Observer API 사용 1. 단순 구현 스크롤 이벤트를 참조하여 다음 데이터 API 호출 코드 구현 가정 fetchData() 는 API 를 요청하는 함수 예제에서는 console.log('fetch API 요청') 찍히는 걸로 API 요청을 대신함 useEffect(() => { const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement; if (window.innerHeight + scrollT.. JWT 로 로그인 인증 구현하기 로그인 JWT(accessToken, refreshToken) 플로우 websequencediagrams 스크립트 title JWT login process (evaluation-iic) frontend->backend: login (/auth/access_token) backend -> backend : 유저 확인 (access_token, refresh_token 발급) backend->frontend: login 응답 (access_token, refresh_token) frontend -> frontend : localStorage에 저장(access_token, refresh_token) frontend-> backend: 데이터 요청 (ex) GET /evaluation/group) with .. Sass 컴파일러 vscode 에서 사용하기 1. npm 설치 npm install sass -g 2. 버전 정보 확인 설치 완료 됐으면 버전확인하면서 잘 설치되었는지 확인합니다. npm show sass version 3. Vs code에서 확장 프로그램 설치 SASS 컴파일을 자동으로 해주는 플러그인 live Sass compiler - 만든 이 : Glenn Marks 4. sass complier 경로 설정 1. vscode 좌측 톱니바퀴 - 설정 클릭 2. 설정 json 파일 수정을 위해 우측 상단 설정 열기 클릭 3. 아래 구문 추가 { "liveSassCompile.settings.formats": [ // This is Default. { "format": "expanded", "extensionName": ".css", "saveP.. 개발환경에서 CORS 에러 관련 프록시 설정 프론트 : localhost:3000 띄워서 로컬에서 개발 API서버(백) : http://~.com dev서버를 올려서 해당 dev 서버에 요청 브라우저에서 보내는 요청 → CORS 발생 브라우저는 localhost:3000을 달고 있는데, 다른 주소(API서버)로 부터 온 응답값을 허용하지 않음 (동일출처가 아니기 때문) 해결책 : 브라우저에서 나가는 요청을 API 서버 주소로 둔갑시킨다 proxy 설정 http-proxy-middleware 패키지 설치 src/setupProxy.js api/ 로 시작하는 요청 url 인 경우 설정한 target 주소에서 요청하는 것으로 둔갑해줌 /api 부분은 빠져야 하므로 pathRewrite 도 시켜준다 const { createProxyMiddleware }.. 이전 1 2 3 4 5 6 7 8 ··· 21 다음
