전체 글 (62) 썸네일형 리스트형 Vite의 manualChunks옵션에 관하여 개요 이번에 사내 프로젝트를 팀원분이 CRA에서 Vite로 개선해주시면서 함께 고민했던 내용 중 잘못 이해했던 내용에 대해 회고하려고 한다. 서론 먼저 본론을 시작하기에 앞서 React 프로젝트를 작업하면서 사용하게 되는 Chunk(청크)에 대해 생각하면 어떤 상황들이 떠오르는지 생각해보겠다. 일반적으로는 React 프로젝트에서 자주 활용하는 상황은 Page단위로 Code Splitting을 적용하여 이들을 Lazy Load 하여 초기 로딩 성능을 향상시키는 상황을 자주 볼 수 있다. 예시는 아래와 같다. import { lazy, Suspense, useEffect } from 'react' const FirstPage = lazy(() => import('@pages/FirstPage')) const.. Browser Rendering vs React Rendering - (2) 개요 이전 글에서는 Browser Rendering에 대해서 살펴보았다. 이번에는 비교하려고 했던 React Rendering을 살펴보고 둘의 차이를 명확하게 정리하면서 마무리하려고 한다. React Rendering 이는 브라우저 렌더링에서의 해석과 동일하게 Rendering의 주체가 React인 것이다. 리액트의 렌더링은 크게 보면Trigger, Render Phase와 Commit Phase으로 나누어져 있는데, 이 과정을 하나씩 살펴보자. Trigger 이름 그대로 렌더링을 촉발시키는 것이다. 리액트는 기본적으로 렌더링이 두 가지 케이스로 나뉜다. 최초 렌더링 리렌더링 첫 번째로 최초 화면 진입 시에는 당연하게 화면에 그려야 할 결과물이 필요하다. 따라서 렌더링이 일어나게 된다. 최초 렌더링 이후.. Browser Rendering vs React Rendering - (1) 개요 React로 개발을 계속하다 보면 '렌더링'이라는 단어는 당연하게도 React에서의 렌더링으로 이해하는 경우가 많은데, 실제로 이는 문맥에 따라 브라우저 렌더링을 가리킬 때도 많이 있다. 실제로 가끔 이러한 상황을 마주하면 혼동하는 경우를 자주 목격하여 이번을 계기로 정확하게 정리하고 가려고 한다. Rendering 먼저, 두가지 케이스에 공통으로 등장하는 렌더링(Rendering)이 무엇인지부터 정확하게 정리하고 가려고 한다. 기본적으로 렌더링(Rendering)이란, 구글 검색을 통해 나오는 정의를 보면 사용자에게 보여지는 시각적 요소들을 생성하고 화면에 표시하는 과정을 의미한다. 하지만 조금 더 단순하게 본다면 컨텐츠를 픽셀로 변경하는 과정이라고 볼 수 있다. (여기서 컨텐츠는 브라우저 내에서.. 실제 프로젝트에서의 활용 예시를 곁들인 Deep Link Deep Dive 글을 시작하며... 사내에서 개발하는 스니커즈, 명품 제품에 대한 모델정보를 보여주는 지면에 공유하기를 다루게 되었습니다. 앱 내 웹뷰로의 진입을 가능하게 하기 위해 일반적인 링크가 아닌 딥링크를 사용하게 되었고, 그 과정에서 일반적인 링크과 딥링크가 어떻게 다른지, 또 딥링크에는 어떤 종류가 있으며 어떠한 특징들을 가지고 있는지를 이해하고 상황에 맞는 방식을 선택하는 과정을 소개하고자 합니다. 링크 먼저 링크가 무엇인지에 대해 한번 돌아보겠습니다. 사전적 의미는 다음과 같습니다. 링크, 또는 하이퍼링크(Hyperlink)는 웹 페이지, 문서 또는 다른 리소스를 서로 연결하는 참조입니다. 사용자가 링크를 클릭하거나 탭할 때, 그들은 링크된 새로운 주소로 이동하게 됩니다. 링크는 인터넷의 기본 구성 요소 .. 쉽고 유연하게 Tooltip 컴포넌트 만들기 (floating-ui를 활용한) 개요 프로덕트를 개발하다 보면 특정 요소나 새로운 기능에 대해 UX를 해치지 않는 선에서 부연 설명이 필요한 경우가 있습니다. 이러한 경우를 위해 Tooltip이라는 UI 구성요소를 자주 사용하는데, 오늘은 이러한 Tooltip을 라이브러리를 활용하여 어떻게 빠르고 유연하게 만들 수 있는지 알아보겠습니다. 접근 먼저 직접 구현하는 것도 방법이지만 보다 잘 만들어진 라이브러리를 활용하는 것도 좋겠다는 생각을 했고 이를 활용하면서도 여러 방면으로 유연한 컴포넌트를 설계하는 것을 목표로 검색을 시작했습니다. 일단 잘 만들어진 라이브러리에서는 어떤 방식으로 만들었는지 참고해 보기로 하고 개인적으로 유연하게 잘 만든 UI 라이브러리로 생각하고 있는 Radix-ui는 어떻게 만들었는지 살펴보았습니다. 실제 Tool.. React Event Loop Deep Dive 해당 글은 이전 글의 부록으로 React 18에서 해결한 React Event Loop 가 나오기까지 어떤 고민이 있었고, 어떤 방식으로 구현이 되었는지를 코드와 함께 확인해 보겠습니다. 목차 이벤트 루프 이벤트 루프를 활용한 기본 함수 실행 React의 Scheduler Lane Model에 따른 이벤트 처리순서 정리 1. 이벤트 루프 리액트 역시 JS가 기반이기 때문에 싱글 스레드의 특성에서 벗어날 수 없습니다. 따라서 먼저 JS 환경에서 Event Loop에 대해 리마인드 해보겠습니다. 이벤트 루프란 JS의 싱글 스레드라는 한계를 극복하기 위해 오랜 시간이 걸리는 작업은 일반적으로 비동기적으로 작업을 처리함으로써 블로킹을 피하고 다양한 작업을 수행할 수 있도록 하여 JS가 여러 가지 작업을 어떻게 .. (짧) Tanstack/Query(구 React-Query)를 사용할 때 미세 팁 Tanstack/Query(구 React-Query)의 useQuery를 사용할 때, 실행에 대한 Callback을 선언하는 부분이 queryCache와 useQuery의 Callback이 있는데 이 둘을 같이 사용한다면 실행 순서는 [queryCache에 작성된 콜백] -> [사용처의 콜백함수] 가 된다. Tanstack/Query(구 React-Query)의 useMutation에는 함수실행 후 반환해주는 mutate의 onSuccess와 useMutation 선언 시에 바로 주입해줄 수 있는 onSuccess가 있다. 이 둘은 미세하게 차이가 있는데, mutate의 onSuccess는 지면에서 사용하는 onSuccess이기때문에 지면이 이동하는 등 사용처의 코드가 unmount되는 상황에서는 정확하.. React 18 - 동시성을 다루기 위한 여정 서론 이번에 회사에서 프로젝트를 진행하며 공통 컴포넌트를 개선하는 과정에서 문득 사용자 이벤트 발생과 re-render의 동작 순서를 생각하다가 명확하게 답이 나오지 않아 React의 동작을 다시한번 정리하고 가자는 생각이 들어 글을 작성하게 되었습니다. 코드는 첨부하지 않았습니다. 이미 코드도 첨부되어있고 잘 정리된 글이 너무 많습니다. 따라서 이해한 바를 토대로 서사와 설명을 작성합니다. 여러가지 좋은 글을 읽고 스스로 이해하기 위해 재구성한 글입니다. 모든 출처를 적어놓으니 혹여 문제가 된다면 수정하도록 하겠습니다. :) 개요 React 17, 18에 걸쳐 여러가지 변화가 있었는데요, 먼저 간단하게 생각해보면 기존에도 완벽했다면 크게 개선의 니즈가 없었을 것입니다. 그렇다면 어떤 것이 문제였기때문에.. 이전 1 2 3 4 ··· 8 다음
