개발/React (11) 썸네일형 리스트형 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 이름 그대로 렌더링을 촉발시키는 것이다. 리액트는 기본적으로 렌더링이 두 가지 케이스로 나뉜다. 최초 렌더링 리렌더링 첫 번째로 최초 화면 진입 시에는 당연하게 화면에 그려야 할 결과물이 필요하다. 따라서 렌더링이 일어나게 된다. 최초 렌더링 이후.. 쉽고 유연하게 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에 걸쳐 여러가지 변화가 있었는데요, 먼저 간단하게 생각해보면 기존에도 완벽했다면 크게 개선의 니즈가 없었을 것입니다. 그렇다면 어떤 것이 문제였기때문에.. 모바일 웹뷰환경에서 영상을 제공하는 여정 목차 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 서비스 영상 삽입 과정에서의 고민과 선택 Video 태그를 활용한 서비스 영상 삽입 및 Layout Shift 개선하기 iOS에서의 자동재생 이슈 Lottie를 활용한 영상 제공 및 Dynamic Import를 활용한 성능 최적화 운영하던 도중 발견한 추가 이슈사항 (2024.4.17 추가내용) Re-Cap 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 이전 글에서 이야기했던 바와 같이 혼자서 파편화된 정보를 계속해서 축적해 나가기보다는 보다 정제된 글로 발전시키면서 가지고 있던 기억을 더 장기화하기 위해 많이 고민해 왔고, 이를 더 잘 수행하기 위해 글또라는 커뮤니티에 속하게 되어 앞으로 5개월간은 주기적으로 글을 작성할 예정입니다 :) 글.. useTouchNavigation 개발기 일단 너무 오랜만에 글을 올리게 되어 상당히 어색하지만, 계속해서 개발을 열심히 하고있고 개인적으로 노션에만 아카이빙하던 것들을 앞으로는 다시 공개적으로 아카이빙하면서 부족한점을 채워가야겠다는 스탠스로 방향을 정했습니다. (_ _) 만들게 된 계기 현재 현업에서는 속도감있는 서비스제공을 위해 메인 앱 내에서 웹뷰로 일부 피처 서비스를 제공하고있고, 이러한 웹뷰에서는 본앱과 유사한 경험을 주는 유저에게 제공하는 것이 주요한 목적 중 하나였습니다. 따라서 유저가 많은 컨텐츠를 접하고 이를 유연하게 이동하기 위해 우측 고정 네비게이션 바가 필요했고, 이러한 요구사항을 구현함에 있어서 custom hook으로 headless하게 기능을 제공할 수 있겠다는 생각에 작업하게 되었습니다. 기능적 한계 현 버전에서는 .. 이전 1 2 다음
