브라우저에서 대용량 파일 block없이 읽기 String으로 되어있는 파일을 읽기 위해서는 브라우저의 메모리에 올려야한다. 용량이 큰 파일은 전체를 올리는게 한계가 있다. 전체 파일을 한번에 읽지않고 chunk로 쪼개어 2gb가 넘는 파일을 브라우저에서 읽는 방법을 알아보자 이러한 작업이 필요했던 이유 사용자가 2gb가 넘는 소설파일을 업로드할 수 있다. 이 파일의 내용은 string으로 이루어져있고 각 챕터마다 @@@@라는 구분자가 존재한다고 해보자. 이 파일이 몇챕터로 이루어져있는지 알고싶다. 백엔드를 거쳐서 돌아오게 된다면 2gb파일을 업로드해야하므로 약 1분의 시간과 비용이 발생한다. 백엔드를 거친다해도 그 서버의 메모리를 2gb사용하는 것이므로 요청이 많아지면 서버에 부하가 올 것이다. 이를 브..

유저액션 중심의 컴포넌트 테스트를 위한 도구 testing library Jest는 테스트러너로서 테스트를 돌리고 성공, 실패를 확인하거나 테스트에 대한 함수를 제공해주는데에 반면에 Testing library는 리액트 컴포넌트를 테스트하기위한 가상 DOM을 제공해준다. 이 둘은 각각 수행하는 역할이 다르다. 시작하기전에 읽어보면 좋은 포스팅 NHN 프론트엔드 테스트 초보자를 위한 React 어플리케이션 테스트 심층가이드(1) 초보자를 위한 React 어플리케이션 테스트 심층가이드(2) Testing Library Docs introduction, Guiding Principles 두 섹션 읽어보기 테스팅 원칙 유저가 페이지랑 인터렉션하는 방식과 매우 유사하게 테스트하는 것에 중점을 둔다. 컴포넌트 렌더..

useQuery useQuery로 요청한 API가 실패했다면 2번 더 보낸다. 모두 실패시 실패했다고 처리된다. const { data, isError, error, isLoading} = useQuery("posts", fetchPost); isError, isLoading 으로 요청에 대한 상태를 알 수 있다. error은 요청에 대한 에러메시지를 나타낸다. staleTime 데이터가 만료되기 전까지의 시간, 데이터 유효기간을 stale Time이라고 한다. stale data는 만료된 데이터 React Query는 데이터 fetching을 도와주는 라이브러리이다. 다시 가져오는 refetch도 수행해주는데 트리거는 다음과 같다. 컴포넌트 리마운트 윈도우 포커싱 예를들어 어떤 게시판을 키고서 요리를 ..

React Query Fetching, caching, synchronizing and updating server state 라이브러리 React Query Star : 8.4K SWR Start : 5.6K 왜 등장했지 ? 전통적인 상태관리 라이브러리는 client 상태를 다루는데는 좋았지만 async 또는 server 상태관리에는 좋지 않았다. Server 상태는 Client와는 매우 다르기 때문이다. client에서 제어할 수 없음 비동기 요청이 필요함 나도모르게 변경될 수 있음 최신결과를 가져오지 않으면 "오래된"상태로 남아있음 이러한 특징 때문에 하나의 store에서 둘의 상태를 관리하는 것은 쉽지 않았다. 또한 아래와 같은 것들을 해결해내기위해 엄청난 리소스가 투입이 되어야했다. 캐싱 - 구..

브라우저에서 파일 다루기 목적: 2gb이상의 파일을 브라우저에서 효율적으로 다루기 위한 방법을 알아보기 해당 포스팅이 다 게재되면 할 수 있는 것 - 수십, 수백메가 또는 기가단위의 파일을 읽으며 어떤 단어가 몇번 포함되는지를 백엔드 통신없이 오로지 클라이언트에서만 수행할 수 있다. - 대용량파일을 읽는 많은 연산을 하는 동안 브라우저가 Block되지않게 해당 연산을 백그라운드에서 처리할 수 있다. 0. 들어가기 전 보면 좋을 개념들 버퍼메모리 0.1 버퍼메모리 주기억장치 주변장치 위 둘간의 사이에서 정보가 오갈 때 임시로 기억해두고 사용할 수 있는 공간 둘 간의 처리속도가 차이가 날 때 데이터 유실이 있을 수 있으므로 유실을 없애기 위해 데이터를 일시적으로 보관하는 곳 1. File File은 Blob..

이 포스팅을 통해 토큰방식이 아닌 SSH를 이용해 github를 이용해 한 컴퓨터에서 여러 git 계정을 사용할 수 있습니다 SSH Key를 생성하고 Github에 등록해줍니다. 자세한 사항은 참고링크에 자세히 기술되어있습니다. SSH키 생성, github 등록 먼저 SSH Key를 터미널에서 다음의 명령어로 작성해줍니다. 식별자는 이후 작업에 필요한 것이므로 회사면 work, 본인의 계정이면 own 등 식별할 수 있는 간단한 단어로 지정해주세요. 사용해보니까 간단한게 좋습니다. ssh-keygen -t rsa -C "사용자메일@gmail.com" -f "식별자" eg) ssh-keygen -t rsa -C "lia@gmail.com" -f "my" key생성이 완료되었다면 생성한 Key를 github에..

Lifecycle 컴포넌트가 render된 후 실행됨 useEffect와 다르게 동기적으로 실행 동기적으로 실행되기 때문에 로직이 클 경우 그만큼 화면에 보여지는 시간이 오래걸리게 되므로 간단한 로직들만 넣어서 사용한다. SSR일 때 useEffect, useLayoutEffect 둘 다 JS가 다운로드된 이후에 수행된다는 것을 명심하자 react가 warning을 주는 이유가 이 때문이다. useLayoutEffect를 사용하면 마주하는 warning ⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer’s output format. This wi..

Emscripten으로 C++코드 JS로 포팅하기(2) - EMSCRIPTEN_BINDINGS, RDKit c++로 작성된 라이브러리 코드를 emscripten을 통해 js로 사용할 수 있게 한다. rdkit이라는 C++로 작성된 라이브러리를 emscripten을 통해 js+wasm으로 포팅되어 사용하고 있으나 누락된 함수들이 있어 이를 추가해 사용해보고자 함. 사전준비 docker 이미지 생성 및 로컬 build script Code/MinimalLib/scripts/build_rdkitjs.sh 에서 빌드스크립트가 MinimalLib의 도커파일을 실행하여 둘 중 아무거나 실행해도 됨 DOCKER_BUILDKIT=1 docker build --platform linux/amd64 -o $MINIMALL..

Emscripten으로 C++코드 JS로 포팅하기(1) Emscripten은 C 또는 C++, LLVM을 사용하는 다른 언어로 작성된 프로젝트들을 브라우저, 노드 또는 WASM 런타임에서 사용할 수 있도록 하는 컴파일러다 C, C++ -> JS로 변환시키는 툴 0. LLVM ? Swift를 개발한 사람(크리스 래트너)이 시작한 프로젝트 오픈소스 컴파일러, 툴체인 C, C++ 등 언어를 중간번역해서 여러 아키텍쳐에서 수행될 수 있도록 하는 컴파일러 1. 이해하기 emscripten은 웹어셈블리를 생성할 수 있다.(이걸 하기위한 포스팅이기도함) 웹어셈블리는 3D, 게임 등 브라우저 런타임 성능으로는 무리가 있는 것들을 브라우저에 넣기 위한 기술이다. 웹 어셈블리는 3가지 방법으로 개발할 수 있는데, 그중 하..

사이즈가 수백, 수천kb에 육박하는 이미지를 보여줄 때 적절한 처리가 필요하다. 레이아웃이 그만큼 밀릴 수도 있고 n초동안 화면에 사진이 보여지지 않다가 깜빡하고 보여지는 경우는 이슈가 될 수 있다. 이를 피할 수 있는 방법 - 간단하고 짧다 좌(직접구현), 우(next 기능) - load속도엔 차이가 거의 없다. 문제 이미지가 로드되는데 한참 걸림 그동안 흰색화면이어서 있는지 없는지 모르겠음 인터넷속도가 요새 많이 빠르지만 다 빠른게 아님. 일시적으로 느릴 수 있고, 사양이 좋지 못할 경우도 영향을 받음. 이런 디테일을 고려해야함 다양한 방법으로 해결할 수 있다. 디바이스 사이즈에 맞게 이미지 조절 이미지가 뷰포트에 위치했을 때 load하도록 하기 (lazy load) 이미지 최적화(압축) progre..