FamilyGram

jszip is not a constructor react-scripts 를 5로 업데이트하고 발생하는 문제. 사용하는 라이브러리에서 발생하는 문제인데, 원인을 파악해 보니 이렇다. tempa-xlsx의 xlsx.js ... var _fs, jszip; if(typeof JSZip !== 'undefined') jszip = JSZip; if (typeof exports !== 'undefined') { if (typeof module !== 'undefined' && module.exports) { if(has_buf && typeof jszip === 'undefined') jszip = require('js'+'zip'); if(typeof jszip === 'undefined') jszip = r..

React CSR 프로젝트를 사용한다면 CSR 프로젝트에서 react-scripts 4.x 버전에서 5.x 버전으로 마이그래이션 시 엄청난 빌드에러가 발생한다. 가장 대표적인 빌드에러가 webpack 5 관련 에러이다. 구글링해서 찾은 해결책은 다시 react-scripts 4.x 를 사용하면 된다... 라는 결과이던데 이건 내가 찾는 결과가 아니다 그럼 어떻게 해결해야 할 것인가 webpack config 설정을 변경해야하는데, 그러려면 eject 는 사용하지 않고 해결하고 싶다. 준비물은. dev dependencies 추가 crypto-browserify stream-browserify config-overrides.js 파일 추가 react-app-rewired package.json script..

SPA React 프로젝트를 build 하면 static 폴더에 chunks js, css file 이 생성된다. 매번 build 시 chunk file의 middle name으로 hash 값이 들어가는데, 해당 hash 값 때문에 SPA 프로젝트 업데이트 시 Loading chunk failed 에러가 자주 발생한다. chunk failed 는 main.js 파일이 브라우저에 캐싱되어 static 또는 dynamic 서버에 요청한 js 파일이 없어 index.html을 chunk.js를 대신 사용하여 발생하는 에러이다. 간단한 static web 프로젝트라면 chunk의 hash값을 제거하는것 만으로도 일단 에러는 피할 수 있다. 물론 hash 를 제거한다면 다른 문제가 발생할 수 있다. 해당 문제는 ..

https://family-gram.tistory.com/603 axios 를 이용한 REST API 호출 및 취소 Project 에 axios dependencies 추가 yarn add axios 사용하는 모듈에서 바로 axios 를 사용하여 호출하는 것 보다는 특정 Service 모듈을 만들어 호출하는 것이 API error, retry 처리에 용이함 import axios, {.. family-gram.tistory.com REST API 호출 및 취소이후 API retry policy 관련 기존 API 코드 import axios, { AxiosRequestConfig, CancelTokenSource } from "axios"; const defaultConfig: AxiosRequestCon..

Project 에 axios dependencies 추가 yarn add axios 사용하는 모듈에서 바로 axios 를 사용하여 호출하는 것 보다는 특정 Service 모듈을 만들어 호출하는 것이 API error, retry 처리에 용이함 import axios, { AxiosRequestConfig, CancelTokenSource } from "axios"; class Service { get(url: string, params?: { [key: string]: string | number }): Promise { return axiosApi.get(url, { params: params, cancelToken: cancelSource.token, }); } } React 생명주기 또는 sideE..

typescript 를 사용하면 dependencies 가 늘어나며 build 속도에 문제가 생겼다 그래서 모든 react packages와 관련 package를 최신 버전으로 업데이트 하여 중복되는 종속성을 제거하면서 개선 할 수 있었다.' 그런데 갑자기 IE에서 동작하지 않음 처음에는 단순히 기존에 index.js에 추가되어있는 import @babel/polyfill 이 제거되고 core-js로 통합되면서 발생한 문제인줄 알았다. import "react-app-polyfill/ie11"; import "react-app-polyfill/stable"; react-scripts에 포함되어있는 react-app-polyfill 을 추가하였는데도 마찬가지로 IE에서는 SCRIPT 에러가 발생하고 있었다..

API 에러 체크를 쉽게 하기 위해 테스트 대상인 API 리스트를 jest test 를 이용해 테스트하기로 했다. API 응답에러를 체크하기 위한 테스트이기 때문에 retry policy는 제거하고 순수 1회 요청했을 때 실패를 확인하려고 한다. API timeout error jest에서 timeout은 기본 5000ms ( 5초) 로 설정되어 있다. 간헐적으로 트래픽이 몰릴때 응답이 지연될 경우가 있는데 backend 쪽 timeout 에러가 아닌데, jest 설정의 기본 timeout 시간을 초과하여 에러가 발생한다. 이런 문제로 jest timeout 을 변경하면 되는데, 이 부분은 간단하게 변경가능하다 jest.setTimeout(10000); // in milliseconds https://j..