전체 글 (203) 썸네일형 리스트형 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 () .. 이전 1 ··· 12 13 14 15 16 17 18 ··· 68 다음
