📖 들어가며웹 애플리케이션이 커질수록 번들 크기도 함께 커지게 됩니다. 이는 초기 로딩 시간에 직접적인 영향을 미치죠.Vite에서 제공하는 Code Splitting 기능을 활용하면 이 문제를 효과적으로 해결할 수 있습니다. 해당 글에서는 manualChunks에 대해서만 다룹니다.왜 Code Splitting이 필요할까?웹 애플리케이션을 빌드하면 모든 Javascript 코드가 하나의 큰 파일로 번들링 됩니다.하지만 이 상황은 아래 문제들을 일으킬 수 있습니다.긴 초기 로딩 시간: 사용자가 첫 페이지를 보기 전에 모든 코드를 다운로드해야 합니다.불필요한 리소스 낭비: 당장 필요하지 않은 코드도 함께 불러옵니다.비효율적인 캐싱: 작은 코드 변경에도 전체 번들을 다시 다운로드해야 합니다.메모리 사용량 증..

📖  들어가며최근 회사에서 담당하는 서비스에 대해서 CRA에서 Vite로 마이그레이션을 하면서 약간의 코드 개선까지 진행을 하는 경험을 갖게 되었습니다. 프로젝트 규모가 작은 편이 아니었기 때문에 마이그레이션을 하면서 webpack에 의존하고 있는 등의 사이드이펙트가 발생하는 부분에서 제일 걱정을 많이 했는데요. 이번 글에서는 크게 왜 마이그레이션을 진행했는지, CRA와 Vite는 어떤 차이가 있는지 어떻게 진행했는지, 어떤 결과가 있었는지 기록하려 합니다.⁉️ 마이그레이션의 필요성현재 담당한 서비스는 webpack 기반의 CRA로 구성된 프로젝트였습니다. 첫 번째, 오래 걸리는 개발 서버 구동시간이었습니다.구동되는 시간까지 평균 약 20초가 소요되고 최대 약 30초까지 소요되는 상황이었습니다. 두 번..

📖 들어가며현재 React 19 버전의 업데이트에 대해서 많은 관심을 가지고 있습니다. 여러 변경사항들이 많지만 이번 포스팅에서는 핵심 내용이라고 생각하는 부분을 포스팅하려 합니다. 즉, 기존에는 필요하고 사용해야 했지만 19 버전이 도입되면서 사용하지 않아도 되는 것들과 추가로 몇 가지 새로운 기능들을 소개하려고 합니다. 현재 2024년 5월 15일 기준으로 리액트 19버전을 사용해보고 싶다면 카나리 버전을 설치하여 사용할 수 있습니다.npm i react@canary react-dom@canaryoryarn add react@canary react-dom@canaryReact Compoiler19 버전의 가장 큰 부분은 리액트 컴파일러입니다. 리액트 컴파일러는 리액트 코드를 일반 자바스크립트 코드로..

📖 들어가며 이번 포스팅에서는 React에서 사용되는 상태관리 라이브러리에 대해서 각각의 특징과 개인적인 견해가 들어가 있습니다. 현재 포스팅에서 다룰 주요 네 가지 라이브러리입니다. react-redux & redux-toolkit recoil zustand jotai React에서 상태 관리 라이브러리와 함께 개발을 하다 보면 위에서 언급한 네 가지 라이브러리 중 하나쯤은 분명 알고 계시리라 생각합니다. 위 이미지는 최근 1년간 네 가지 라이브러리의 NPM 동향입니다. 현재 추세로 봤을 때 1위: redux (react-redux & redux-tookit) 2위: zustand 3위: jotai 4위: recoil 위 순위로 보입니다. 그럼 간단한 코드 예제와 함께 특징을 알아보겠습니다. Redux..

📖 들어가며리액트가 뛰어난 성능을 보여줄 수 있는 비결 중 하나는 바로 가상 돔(Virtual DOM)입니다.이는 리액트의 핵심 개념 중 하나로 가상 돔에 대해 알아보겠습니다.DOM(Document Object Model)웹 사이트에 접속하면 보이는 각각의 요소(Element)들이 모여 하나의 문서(Document)를 구성합니다.이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 바로 DOM입니다.DOM은 요소들을 트리(Tree) 형태로 표현하며, 각 요소에 해당하는 노드(Node)가 존재합니다.개발자들은 DOM이 제공하는 API를 이용해 이러한 DOM 구조에 접근하고, 내용이나 스타일을 변경할 수 있습니다.이런 과정을 DOM 조작이라고 부릅니다. 하지만 예를 들어, 웹 페이지의 특정..

📖 들어가며 함수 컴포넌트 도입 리액트에서 함수 컴포넌트는 리액트가 처음 생겼을 때부터 있었지만, 처음에는 상태관리나 생명주기 메소드를 사용할 수 없어서 주로 단순한 표현을 위한 용도로 사용되었습니다. 하지만, 리액트 16.8 버전에서 Hooks가 도입되면서 함수 컴포넌트에서도 상태관리와 생명주기 메소드와 유사한 기능을 활용할 수 있게 되었습니다. Hooks의 도입은 함수 컴포넌트의 활용 범위를 크게 확장시키고, 현재는 함수 컴포넌트만으로도 대부분의 기능을 구현할 수 있게 되었고, 그 결과 함수 컴포넌트의 사용이 크게 늘었습니다. 실제로 리액트 공식문서에서도 클래스 컴포넌트보다 함수 컴포넌트로 작성하는 것을 권장하고 있습니다. 함수형(Functional)이 아니라 함수(Function) 컴포넌트라고 부르..

📖 들어가며 이전 글 React.memo 글에서 부모 컴포넌트에서 함수를 props로 받을 때 해결할 수 없는 문제를 해결할 수 있는 useCallback에 대해서 알아보겠습니다. useCallback이란 ❓ 먼저 React에서 useCallback은 리렌더링 사이에 함수 정의를 캐시 할 수 있게 해주는 React 훅입니다. 즉, useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 React에 함수를 캐싱하고 매 실행마다 해당 함수를 재생성되는 상황을 막을 수 있습니다. 사용 방법 캐싱하려는 함수를 useCallback으로 래핑 하기만 하면 됩니다. // Button.js const Button = ({ onClick }) => { console.log('..

📖 들어가며 React에서 성능을 최적화하기 위해 사용할 수 있는 React.memo에 대해 소개하고, 기능을 어떤 상황에서 왜 사용하고 동작원리와 사용 예시 코드도 함께 알아보겠습니다. React.memo란 ❓ memo를 사용하면 해당 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다. 즉, 메모화된 버전의 컴포넌트로 해당 컴포넌트의 props가 변경될 때만 리렌더링을 할 수 있습니다. 커다란 큐모의 컴포넌트나 복잡한 상황에서 불필요한 리렌더링을 막아 성능을 최적화할 수 있습니다. 동작 원리 💡 React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전..

📖 들어가며 React에서 화면 (DOM)를 캡처, 저장하는 기능에 대해서 알아보려 합니다. 작은 토이 프로젝트를 하면서 여러가지 문제를 맞이 했었는데, 결과적으로 성공한 방법들로 포스팅하게 됩니다. 캡쳐(스크린샷)을 도와주는 라이브러리들 대표적으로 html2canvas, dom-to-image, html-to-image 등이 있습니다. 기능을 구현하면서 html2canvas와 dom-to-image를 모두 사용해 봤습니다. 제가 사용해 본 두 가지 라이브러리에 대해서는 일반적으로 두 라이브러리 모두 영역을 정확하게 캡처하고 DOM 요소에 적용된 CSS 스타일을 캡처하는 데 큰 문제는 없었습니다. 그러나 dom-to-image가 html2canvas보다 더 빠르고 안정적이라고 하는 사용자도 있다고 합니다..