평범한 개발자 행복한 가족, 패밀리그램

개발 44

jszip is not a constructor !!!

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 2023.10.27

React Scripts 4.x -> 5.x 마이그레이션

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

개발/React 2023.10.26

React Chunk hash를 제거 해보자

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

개발/React 2022.04.15

Plotly js, xAxis time series 빈 데이터 제거. aka 휴일 제거

Plotly, 많이 사용하는 차트 라이브러리. d3를 이용하여 다양한 차트와 다양한 언어를 제공한다. 문서도 잘 정리되어있다 일별 매출을 차트로 표시하고 싶은데, 주말에는 휴일이 아닌가 ? 불편. 너의 빈 공간을 격하게 채워주고 싶다 layout-xaxis-rangebreaks Layout.xaxis Figure plotly.com xaxis 속성인 rangebreaks 를 설정하면 된다 rangebreaks 속성 중 pattern 도 있긴한데, 우리나라 공휴일은 보장되지 않으니 X axis array 의 첫 번째(start) 와 마지막 (end) 까지 체크하여 y 값이 없는 경우 제외 시키기로 한다 // dates 는 x axis array const to = moment(dates[dates.leng..

개발 2022.04.12

axios + rxjs 를 이용한 API retry policy

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

개발/React 2021.09.26

axios 를 이용한 REST API 호출 및 취소

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 2021.09.26

Application 개발 시 Network handling, React, Android

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

개발 2021.09.05

Gmail 서명 등록, Style 서명 등록하기

Gmail 에 서명을 등록하려고했다. 서명을 등록하는 방법은 아래와 같다 설정 버튼 - 모든 설정 보기 - 서명 메뉴 해당 버튼을 누르면 모든 설정 보기 버튼이 보인다 설정 메뉴 진입 후 아래로 스크롤을 내리다보면 서명 이라는 항목이 보인다. 새로 만들기 를 눌러 신규 서명을 등록한다 신규로 등록한 서명에 편집메뉴를 이용하여 본인만의 서명을 만들 수 있다. HTML을 이용한 Style 복사 HTML 으로 작성된 서명을 복사해서 붙여넣는 것 또한 가능하다. 우선 서명으로 사용할 HTML 을 작성해보자, 패밀리그램 주인 각 Element tag 에 style을 직접 적용해 주어야한다. CSS 로 분리하는 경우 복사 붙여넣기에는 문제없지만, 실제 적용 시 적용되지 않을 수 있다. 를 이용해 이미지 도 등록이 ..

개발/HTML,CSS 2021.09.02

css scroll 없애기, Scroll 비노출 with SCSS

가끔 가로 스크롤 ( Horizontal scroll ) 이나 작은 메뉴바를 만들 때 scroll bar 를 없애야 하는 경우가 있다 ( scroll bar가 노출되면 UI가 망가지는 경우 ) See the Pen jOyePWq by Sam kwon (@samuberple) on CodePen. -ms-overflow-style: none; .block::-webkit-scrollbar { width: 0px; height: 0px; color: none; } 위 코드를 css 에 추가하면 스크롤이 노출되지 않게된다 See the Pen jOyePWq by Sam kwon (@samuberple) on CodePen. SCSS 를 사용하면 mixin 으로 관련 스타일을 정의하여 재활용이 가능하다 @mix..

개발/HTML,CSS 2021.04.20
반응형