react (10) 썸네일형 리스트형 React 19 긍정 검토하기 서론 React 18을 넘어 React 19가 공식적으로 stable하게 릴리즈 된지 한달이 넘었다. React 18이 나왔을 때에는 새로나온 내용들을 바로 공부하지 않고 어느정도 시간이 지난 후에 공부하게 되었는데 갈수록 변화가 빨라지고있다는 생각에 이번에는 조금 더 빠른 시점에 새로운 버전을 공부해보기로 했고 공식문서에 있는 내용들을 살펴보며 간단하게 정리해보려 한다. 바로 시작해보겠다. Actions Stable된 릴리즈 노트의 가장 위에 나오는 내용은 바로 Action 이다. React 19에서 새롭게 추가된 여러가지 훅은 Action을 지원하기 위해 나왔는데, 노트의 순서 상 실제 Action에 대한 설명은 조금 더 아래에 나오지만 Action에 대해 먼저 알고가야 앞으로 이해하기 편하기때문.. PWA환경에서 유저 친화적으로 앱 다운로드 안내하기 서론 현업에서 파일럿프로젝트로 진행하는 프로젝트가 PWA로 되어있었는데, 이를 넘겨받아 디벨롭하는 과정에서 사용하는 유저들에게 더 좋은 경험을 제공하고자 [홈 화면에 추가] 를 통한 바로가기 앱 다운로드를 안내하는 과정을 정리하려고 한다. 본문 먼저 PWA의 앱 다운로드 방법을 설명하기에 앞서 PWA가 무엇인지 간단하게 알아보고 가자. PWA(Progressive Web Apps)는 웹 애플리케이션과 네이티브 애플리케이션의 장점을 결합한 기술입니다. PWA는 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발되며, 네이티브 애플리케이션과 같은 사용자 경험을 제공하는 것이 목표입니다. 한마디로 정리하자면 PWA는 웹으로 이루어졌지만 앱과 유사한 환경을 제공해주는 방식이다. 그렇다면.. 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)이란, 구글 검색을 통해 나오는 정의를 보면 사용자에게 보여지는 시각적 요소들을 생성하고 화면에 표시하는 과정을 의미한다. 하지만 조금 더 단순하게 본다면 컨텐츠를 픽셀로 변경하는 과정이라고 볼 수 있다. (여기서 컨텐츠는 브라우저 내에서.. 쉽고 유연하게 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되는 상황에서는 정확하.. useTouchNavigation 개발기 일단 너무 오랜만에 글을 올리게 되어 상당히 어색하지만, 계속해서 개발을 열심히 하고있고 개인적으로 노션에만 아카이빙하던 것들을 앞으로는 다시 공개적으로 아카이빙하면서 부족한점을 채워가야겠다는 스탠스로 방향을 정했습니다. (_ _) 만들게 된 계기 현재 현업에서는 속도감있는 서비스제공을 위해 메인 앱 내에서 웹뷰로 일부 피처 서비스를 제공하고있고, 이러한 웹뷰에서는 본앱과 유사한 경험을 주는 유저에게 제공하는 것이 주요한 목적 중 하나였습니다. 따라서 유저가 많은 컨텐츠를 접하고 이를 유연하게 이동하기 위해 우측 고정 네비게이션 바가 필요했고, 이러한 요구사항을 구현함에 있어서 custom hook으로 headless하게 기능을 제공할 수 있겠다는 생각에 작업하게 되었습니다. 기능적 한계 현 버전에서는 .. 이전 1 2 다음
