FamilyGram

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 를 제거한다면 다른 문제가 발생할 수 있다. 해당 문제는 ..

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..

React, Android Application ( 이하 App ) 개발 시 신경 써서 처리해야 하는 게 네트워크 핸들링 ( Network handling )이다. Retry policy ( 에러 발생 시 재시도 ), Local cache policy ( 앱 저장 캐시 ), 에러 발생 시 처리를 잘 신경 써야 사용자가 쾌적함을 느낄 수 있는 환경의 앱을 만들 수 있다. Retry policy 모바일 환경에서는 네트워크 핸드오버 또는 Mobile - Wifi 간의 전환 때문에 네트워크 에러가 발생하는 경우가 흔하다. 특히나 아침 출퇴근 시간 때에는 직장인들이 엘리베이터에서 앱을 사용하는 경우가 있어서, 타임아웃 에러가 많이 발생하기도 한다. 사용자가 에러가 발생했을 때 재 시도를 할 수 있는 UI, 그리고..

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..