모듈 스크립트 기능과 양이 복잡해지자 모듈단위로 분리하는 방법이 필요해짐. 그 중하나로 CommonJS가 있음. 모듈은 단지 파일 하나에 불과함. 1스크립트 === 1모듈 js에서 모듈은 표준이 없어서 AMD니 commonjs니 등등 있었는데 ESM이 표준이 되었다. commonjs (CJS) Node.js용 js코드를 패키징하는 original 방식. 모듈을 동기적으로 로드, 내보내기 위해 require, module.exports 키워드 제공 동기방식이므로 모듈이 완전로드되기 전까지 코드실행이 차단됨 초기부터 사용되었기에 esm방식대신 대부분 node기반 라이브러리는 이 방식을 사용하고 있다. (ESM의 확대로 앞으로 점차 줄어갈듯) 모듈은 module-wrapper이라는 함수로 감싸져서 실행되는데,..

브라우저에서 대용량 파일 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 두 섹션 읽어보기 테스팅 원칙 유저가 페이지랑 인터렉션하는 방식과 매우 유사하게 테스트하는 것에 중점을 둔다. 컴포넌트 렌더..

설치 npm install msw --save-dev npx msw init --save 세팅 node환경에서 테스트하거나 browser에서 하기 위해서는 다음과 같은 세팅이 필요합니다. 작성해야하는 파일은 총 4개입니다. mock 하위에 다음의 4파일을 만들어주세요. browser.ts server.ts handlers.ts worker.ts 그리고 App에서 작성한 worker를 호출해오면 세팅이 끝납니다. 1. browser.ts import { setupWorker } from "msw"; import handlers from "./handlers"; // mocking될 response를 정의해놓는 곳 ​ export const worker = setupWorker(...handlers); ​ ..

git hooks 어떠한 이벤트가 발생했을 때 자동으로 스크립트를 실행할 수 있다. 예를 들어 commit 마다 lint체크를 하고 싶을 때 pre-commit 이라는 hook을 사용해 스크립트를 작성하면 된다. 종류 Git hooks의 종류 중 제가 사용할 것은 다음 두 가지입니다. pre-commit : 커밋할 때 가장 먼저 실행 prepare-commit-msg : 커밋메시지를 생성 후, 편집기 실행 전 실행 (커밋메시지를 지정하기 이전에 실행됨) - 커밋메시지를 자동으로 수정하고 싶을 때 사용 husky git hooks는 이미 레포지토리에 존재합니다. .git/hooks 에 스크립트들이 존재하죠. 이를 수정해서 사용해도 되지만 이렇게 수정되는 파일들은 git에 관리되지 않기에 따로 관리해야하는 ..

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