React5 XLSX 변환하기 XLSX 적용하게 된 이유!현재 회사에 csv로 적용되어 있고, 왜 csv로 했냐고 한다면, 그때 상황이 극박했고심지어 파일의 비밀번호 설 정까지 필요했다.. 백엔드 상황은 여의치 않아서, api로 내려주면 프론트엔드에서 가공해서 내려줘야하는 상황이라,가장 빠르게 적용할 수 있는 선택이 csv를 zip으로 압축시켜 zip에다 암호화 시키는 것! xlsx 파일 암호화를 검토하기엔 시간이 너무 짧아서, 빠른 시간 내에 적용할 수 있는 방법이 이 방법이였다.XLSXCSV통합 문서의 모든 워크 시트에 대한 정보가 들어 있는 이진파일값이 쉼표(,)로 구분된 일반 텍스트 형식.xls 또는 .xlsx 파일을 읽을 수 있는 프로그램에서만 읽을 수 있음여러 텍스트 편집기에서 열 수 있음데이터 가져오는 동안 많은 메모리 .. 2024. 5. 1. Web Worker 프론트엔드에서 사용할 수 있는 비동기 동작을 찾아보다가, Web Worker를 발견했다. 싱글스레드 기반으로 작동하는 javascript는 싱글스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 그러나 API비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 이 문제를 해결하기 위해 나온 것이 바로 워커(Worker) 이다. Web Worker는 Background Thread에서 스크립트를 실행하는 방법이다. UI Thread와는 별개의 Thread를 실행시켜 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있다. – Thread란? 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다. 일반적으로 한 프로그램은 하나의 스레드를 가지.. 2024. 1. 1. Redux-saga Redux는 비동기 동작들이 제어하기 어려운데, 비동기 동작을 더 쉽게 만드는 것이 Redux Saga라고 볼 수 있다. Redux Redux에서는 acation을 발생시키면 reducer을 통해 state를 변화시켜 store를 갱신했다. Redux-saga Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어다. action이 발생하면, reducer가 액션을 처리하기 전에 다양한 작업을 할 수 있다. Redux-saga의 장점 기존 요청을 취소 처리하거나 불필요한 중복 요청을 방지할 수 있다. 비동기 작업을 처리하는데 효과적이다. 특정 액션이 발생했을 때, 다른 액션을 발생시키거나, 리덕스와 관계없는 코드 실행 시 사용한다. 즉, 간편하면서도 깊게 state의 흐름을 제.. 2024. 1. 1. Redux vs Zustand Redux와, Zustand는 React 상태관리 라이브러리로, 두가지 라이브러리 다 Flux 패턴이다. Flux 패턴이란? 단방향 데이터 흐름을 구현하기 위한 클라이언트 사이드 웹 어플리케이션 아키텍쳐 패턴 데이터를 예층 가능하게 하고, 데이터 흐름의 복잡성을 해결하는 장점이 있다. MVC 패턴과, Flux 패턴를 비교를 해보자. MVC 패턴 Flux 패턴 구조 데이터 흐름 양방향 단방향 특징 상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다. 상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다. Zustand Redux 복잡한 상태 관리가 필요 없는 작은 규모의 프로젝트에 적합한 가벼운 상태 관리 라이브러리 복잡한 상태 관리를 필.. 2023. 12. 13. 코드 스플리팅(Code Splitting) 코드 스플리팅이란? 유저가 사용하는 앱이, 전달해야하는 파일이 커지고, 유저의 브라우저가 파싱(parsing)해야하는 정보도 많아지기 때문에, 하나의 파일을 여러개로 나누고, 우선순위를 두어 순서대로 로딩하는 것입니다. webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서 입니다. Next.js 없이 React에서 코드 스플리팅 [ React.lazy ] 컴포넌트를 렌더링하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수이다. [ Suspense ] 리액트 내장 컴포넌트로 코드 스플리팅 된 컴포넌트를.. 2023. 12. 2. 이전 1 다음
