분류 전체보기 (212) 썸네일형 리스트형 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 }.. Recoil 새로고침 시 user 데이터 유지하기 로그인시 받는 유저 데이터 recoil state 는 새로고침시 날아감 새로고침시 마다 유저 정보를 API 요청 → XXXXXX recoil state 를 persist localStorage를 사용하는 방법이 있음 새로고침시 localStorage에 저장해둔 값을 state에 다시 입력 localStorageEffect.js function localStorageEffect(key) { return ({ setSelf, onSet }) => { const savedValue = localStorage.getItem(key); if (savedValue != null) { setSelf(JSON.parse(savedValue)); } else { // 로컬 스토리지에 저장된 값이 없으면 로그아웃 처리 l.. AWS amplify 로 React 배포하기 (+ blank 빈 페이지 보이는 에러 잡기) npx create-react-app create-react-app으로 설치한 리액트 앱 레포지토리는 빌드 설정을 webpack 을 따로 설정해 주지 않아도 된다. AWS amplify는 풀스택 애플리케이션 구축, 배송 및 호스팅 지원하는 솔루션이다 그동안 클라우드 컴퓨터 생성을 위해 리눅스 서버를 하나 생성하고, 서버를 관리하는 방식으로 배포를 했다면, 그냥 github page 나 vercel 등 과 같이 레포지토리만 지정하고, 빌드 스크립트만 등록하면 알아서 배포를 다해준다 작업 방식은 공식문서나 제야에 널려있으니 참고 https://aws.amazon.com/ko/amplify/ 풀 스택 개발 - 웹 및 모바일 앱 - AWS Amplify 실시간 및 오프라인 기능이 포함된 iOS, Android,.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 22 다음
