프론트엔드 개발/React.js

리액트 렌더링 최적화를 위한 useDeferredValue 는 debounce 의 완전한 대체제가 아니다.

리액트 18 버전에서 추가된 기능입니다. useDeferredValue 는 말그대로 "지연된 값을 사용" 하는 훅 입니다. 이 훅에 대해서 오해가 있었는데요. 값을 지연한다고 하기에 debounce 의 대체제 라고 생각했습니다. 그래서 너무나 당연히 이렇게 쓰면 API 요청이 지연되어서 들어간다고 생각 했었으나, 실상은 그렇지 않았습니다. const [input, setInput] = useState(''); const deferredInput = useDeferredValue(input); useEffect(() => { if (deferredInput) { fetchData(deferredInput); } }, [deferredInput]); 그렇습니다... 지연된 값을 가지고 매우 무거운 렌더링 작..

리액트 컴포넌트를 pdf 파일로 저장하기 (html2canvas, jspdf)

react-pdf 라이브러리를 사용해서 전용컴포넌트로 한땀한땀 쌓아올려서 pdf 파일을 만들어도 되지만 그건 너무나 귀찮습니다. 저희는 웹페이지의 화면을 캡쳐해서 pdf 파일로 다운로드 받는 편한 방법을 사용할 것입니다. 아래의 두 패키지를 설치합니다. yarn add html2canvas jspdf html2canvas 는 리액트 컴포넌트를 이미지로 변환해주는 라이브러리고 jspdf는 그 이미지를 pdf파일로 만들어주는 라이브러리 입니다. 이슈들 그런데 사용해보면 바로 이슈가 터져 나옵니다. 이슈 해결하면서 해결된 코드도 같이 보겠습니다. 이슈1 : 페이지 높이가 너무 높아서 (내용이 너무 길어서) pdf 파일안에 다 담기지 않고 잘리는 이슈 처음에 인터넷에서 흔한 코드 긁어와서 pdf파일의 widt..

React Query 캐시 초기화 후 다시 받아오기

자주 사용될 일은 없지만, 꼭 써먹어야하는 순간이 있기 때문에 기록용으로 남기는 게시물입니다. (react query, tanstack query) 웹 사이트에 사용된 ReactQuery의 모든 API 캐시를 날려버리고 다시 받아와야 하는 경우가 있었습니다. 버튼 클릭시 A 테이블을 사용한 API 수십개를 B 테이블을 사용한 API 로 교체해야하는 그런 경우였습니다. Local Storage 를 사용하여 값이 true 면 A API, false 면 B API 를 사용하도록 제어 하였는데 문제는 React Query의 응답값 캐시였습니다. 이 캐시를 몽땅 비워주고 다시 API 호출할 수 있도록 queryClient.invalidateQueries() 함수를 사용하였고, 옵션으로 refetchInactive..

서버사이드 렌더링를 사용하더라도 결국 다운받는 HTML 파일 크기를 줄여야 사용자에게도 구글봇에게도 유리하다.

서버사이드 렌더링를 사용하더라도 결국 다운받는 HTML 파일 크기를 줄여야 사용자에게도 구글봇에게도 유리하다. GitHub - yeonjuan/dev-blog: 개발 블로그, 공부한거 정리 개발 블로그, 공부한거 정리. Contribute to yeonjuan/dev-blog development by creating an account on GitHub. github.com 사이트 접속시 리액트 자바스크립트 파일을 다운로드 받는동안 서버에서 미리 렌더링해둔 HTML 파일을 먼저 다운받아서 화면에 보여주는 서버사이드 렌더링을 사용하더라도 결국 다운로드 받는 HTML 파일의 크기를 줄이는것이 사용자에게도 구글봇에게도 유리하다는 내용입니다. 해결책은 애초에 graphql를 사용하여 DB에서 필요한 필드만 가..

Jotai 와 Zustand 는 무엇이 다른가요?

Jotai 와 Zustand 창시자 dai-shi 의 글 How is jotai different from zustand? · Issue #13 · pmndrs/jotai Name Jotai means "state" in Japanese. Zustand means "state" in German. Analogy Jotai is close to Recoil. Zustand is close to Redux. Where state resides Jotai state is within Rea... github.com 요약 Zustand는 기본적으로 단일 Store입니다. (여러 Store을 만들 수 있지만 분리되어 있습니다). Zustand는 외부 저장소이며 후크는 외부 세계를 React 세계에 연결하는 것입니..

웹 프론트엔드 유용한 링크 모음

트렌드 ONEONEONE - 데일리 개발 트렌드 codenary - 기업별 스택 (무슨 기술 사용하는지) 네이버 fe-news (구독) Korean FE article (구독) GeekNews - 여러 IT 분야 기술들 책 모던 JavaScript 튜토리얼 실용주의 프런트 엔드 개발 도구 피그마 - 디자인 협업 툴 caniuse - 브라우저 버전별 지원 가능 여부 확인 browsertack - 장치/브라우저 버전별 테스트 필수 공부 라이브러리 Typescript - JS 에 타입채크가 추가된 JS의 슈퍼셋 tailwind css - utility-first CSS framework emotion StyledComponent - CSS In JS ReactQuery - 데이터 패칭, 캐싱 Zustand J..

자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)

모듈 시스템 최초의 모듈 시스템 최초에는 script 테그로 자바스크립트 파일을 삽입하면 브라우저에서 순서대로 로드 하는 방식 이었습니다. 문제점 모듈 간 스코프 구분이 되지 않습니다. 즉, foo 에 있는 변수명과 bar에 있는 변수명이 겹치면 잘못 동작하게 됩니다. 모듈 순서를 신경쓰면서 개발해야 합니다. 해결책 자바스크립트를 모듈화 하여 서로 간섭하지 않게 만들자 이에 따라 자바스크립트를 모듈화 하기 위한 새로운 기술 등장 했습니다. CommonJS module.exports = foo; // 모듈 export const foo = require("./foo"); // 모듈 import 특징 CommonJS 는 브라우저 외에도 사용가능한 범용적인 JS Module System 입니다. 즉, 브라우저..

Vite 아직 사용하지 마세요!!!

차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev https://11001.tistory.com/211 CRA를 Vite로 마이그레이션 하기 차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 11001.tistory.com 대단한 도구라고 여기저기서 홍보하고 좋다고 띄워줘서 신나게 마이그레이션을 준비했었습니다. 그런데 실제로 사용해보니 개발 환경과 프로덕션 환경이 너무 달라서 뒷통수를 당했습니다. 😢 결론 부터..

CRA를 Vite로 마이그레이션 하기

차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 시점으로 vite 는 4 버전대 이다. CRA(Create-React-App) 대신에 왜 vite 를 써야 하는지는 아래의 테스트 결과로 대신 하겠다. 테스트 👨‍🔬 CRA vs vite 회사 내 프론트엔드 프로젝트를 로컬 환경에서 cra, vite로 각각 start, build 시도 CRA (현재) App Start Time : (대략 3.6초 ?) webpack 5.74.0 compiled successfully in 3593 m..

리액트에서 외부 링크 관리하기

리액트에서 외부 링크를 열어야 하는 경우 당연히 a 테그 만들어서 클릭했을때 열리게 하면 되는거 아니냐~ 라고 생각 하겠지만, 서비스 만들다 보면 엄청 많은 경우의 수가 발생한다. 일단 링크의 수가 수십 개가 넘어가면 관리가 안된다. 링크가 자주는 아니더라도 가끔 바뀌더라도 찾아서 변경하는게 여간 귀찮은 일이 아니다. 만약에 다른 서비스 안에 들어가는 웹뷰로 서비스를 한다면? 브라우저 창을 열 수 없다. Iframe 등을 이용해서 우리 서비스 내부에서 링크 내용을 띄워야 한다. 공개망 / 사설망 둘다 지원해야하는 서비스라면? 사설망에서는 브라우저를 열 수 없다. 미리 외부 링크의 문서 내용을 HTML 로 변환해두던가, 내부 서버를 통해 다운로드 받을 수 있게끔 해줘야 한다. 해결 방법 일단 흩어진 링크들..