본문 바로가기

전체 글

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

티스토리툴바